谷粒学苑第二章前端框架-2.3前端框架之条件查询并分页展示

冷不防 2023-10-07 23:50 27阅读 0赞

## 一、讲师管理列表展示的步骤 ##

### 第一步：添加路由,UI定向到views/edu/teacher/list页面 ###

export const constantRouterMap = [
    	//前后都省略
      {
        path: '/edu/teacher',
        component: Layout,
        redirect: '/edu/teacher/list',
        name: '讲师管理',
        meta: { title: '讲师管理', icon: 'example' },
        children: [
          {
            path: 'list',
            name: '讲师列表',
            component: () => import('@/views/edu/teacher/list'),
            meta: { title: '讲师列表', icon: 'table' }
          },
          {
            path: 'save',
            name: '讲师添加',
            component: () => import('@/views/edu/teacher/save'),
            meta: { title: '讲师添加', icon: 'tree' }
          }
        ]
      },
    
    ]

### 第二步：在views目录下创建文件夹edu/teacher/并创建list.vue页面。 ###

页面结构如下

<template>
      <div class="app-container">
        讲师列表
      </div>
    </template>
    <script>
    //引用API,teacherApi是起的别名
    import teacherApi from '@/api/edu/teacher'
    export default {
      data() {// 定义数据
          return {}
      },
      created() { // 当页面加载时获取数据
        this.fetchData()
      },
      methods: {
        fetchData() { // 调用api层获取数据库中的数据
          console.log('加载列表')
        }
      }
    }
    </script>

### 第三步：定义api，调用后端接口。 ###

创建文件src/api/edu/teacher.js

export default{
        getTeacherListPage(current,limit,teacherQuery) {
            return request({
              //`符号特殊字符，在``中可以使用${}引用变量
              url: `/eduservice/teacher/pageQuery/${current}/${limit}`,
              method: 'post',
              //data表示把对象转换成json,以json格式传递到接口中。后端使用RequestBody获取数据
              data: teacherQuery
            })
          }
    }

## 二、vue页面知识讲解 ##

### 2.1 条件查询并分页展示的页面Vue代码 ###

<template>
        <div class="app-container">
            
         <el-form :inline="true" class="demo-form-inline">
          <el-form-item>
            <el-input v-model="teacherCondition.name" placeholder="讲师名"/>
          </el-form-item>
          <el-form-item>
            <el-select v-model="teacherCondition.level" clearable placeholder="讲师头衔">
              <el-option :value="1" label="高级讲师"/>
              <el-option :value="2" label="首席讲师"/>
            </el-select>
          </el-form-item>
          <el-form-item label="添加时间">
            <el-date-picker
              v-model="teacherCondition.begin"
              type="datetime"
              placeholder="选择开始时间"
              value-format="yyyy-MM-dd HH:mm:ss"
              default-time="00:00:00"
            />
          </el-form-item>
          <el-form-item>
            <el-date-picker
              v-model="teacherCondition.end"
              type="datetime"
              placeholder="选择截止时间"
              value-format="yyyy-MM-dd HH:mm:ss"
              default-time="00:00:00"
            />
          </el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="getList()">查询</el-button>
          <el-button type="default" @click="resetData()">清空</el-button>
        </el-form>
            
        <el-table
          :data="list"
          border
          fit
          highlight-current-row>
    
          <el-table-column
            label="序号"
            width="70"
            align="center">
            <template slot-scope="scope">
              {
       { (page - 1) * limit + scope.$index + 1 }}
            </template>
          </el-table-column>
    
          <el-table-column prop="name" label="名称" width="80" />
          <el-table-column label="头衔" width="80">
            <template slot-scope="scope">
              {
       { scope.row.level===1?'高级讲师':'首席讲师' }}
            </template>
          </el-table-column>
          <el-table-column prop="intro" label="资历" />
          <el-table-column prop="gmtCreate" label="添加时间" width="160"/>
          <el-table-column prop="sort" label="排序" width="60" />
          <el-table-column label="操作" width="200" align="center">
            <template slot-scope="scope">
              <router-link :to="'/edu/teacher/edit/'+scope.row.id">
                <el-button type="primary" size="mini" icon="el-icon-edit">修改</el-button>
              </router-link>
              
              <el-button type="danger" size="mini" icon="el-icon-delete" @click="removeDataById(scope.row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
    
        
        <el-pagination
          :current-page="page"
          :page-size="limit"
          :total="total"
          style="padding: 30px 0; text-align: center;"
          layout="total, prev, pager, next, jumper"
          @current-change="getList"
        />
        </div>
      </template>
      
      <script>
      //引用js中的方法，调用后端接口。teacherApi是给teacher.js起的别名
      import teacherApi from '@/api/edu/teacher'
      
      export default {
        
        data() {
          return {
            page:1,  //页码
            limit:10, //每页记录数
            teacherCondition:{}, //查询条件
            list:[],//接收后端返回的数据列表
            total:0//总记录数
          }
        },
        created() {
          this.getList()
        },
        methods: {
          getList(page = 1){
            this.page = page
            //调用api层获取数据库中数据
            teacherApi.getTeacherListPage(this.page,this.limit,this.teacherCondition)
                .then(response=>{
                    this.list = response.data.items;
                    this.total = response.data.total
                    console.log(this.list)
                })
            },
            //删除：一般先调用this.$confirm弹框确认，确认后再调用删除，
            //最后还需要调用列表展示函数，展示最新数据
            removeDataById(id){
                this.$confirm('此操作将永久删除该记录，是否继续?','提示',{
                    confirmButtonText:'确定',
                    cancelButtonText:'取消',
                    type:'warning'
                }).then(()=>{
                     teacherApi.removeById(id)
                     .then(response=>{
                        //提示信息
                        this.$message({
                            type:'success',
                            message:'删除成功!'
                        });
                        this.getList()
                     })
                })
            },
            resetData(){
                this.teacherCondition = {}
                this.getList()
            }     
          }
      }
    
      </script>

### 2.2 el-form 表单 ###

表单中封装了查询条件，用于传给后台接口。teacherCondition是在data中定义的对象，而name，level都是和后台接口接收类对应的属性名，两者要保持相同。

*  <el-form></el-form>表单:把所有的查询条件放在一个表单中，inline属性表示所有表单项在同一行中展示。
 *  <el-form-item></el-form-item>表单项。
 *  <el-input>输入框
 *  <el-select>选择框，:value代表传给后台的主键，label表示展示的值。
 *  <el-date-picker>:时间选择框

### 2.3 el-table表格用来渲染数据 ###

*  <el-table :data="list"> list表示存储的从后台接收到的用来展示的数据。
 *  当`el-table`元素中注入`data`对象数组后，在`el-table-column`中用`prop`属性来对应对象中的键名即可填入数据，用`label`属性来定义表格的列名。可以使用`width`属性来定义列宽。
 *  `<el-table-column>中的`<template>表示锁定这一列，可以操作这一列的数据。scope.row.属性名 表示获取此属性的值。
 *  <router-link>表示超链接

### 2.4 el-pagination 分页组件 ###

固定格式

### 2.5 引用js文件中的方法 ###

### 2.6 定义data：data主要用来初始化变量 ###

变量可以被<div>标签使用，也可以被<script>使用，注意在js中引用时需要使用this.变量，才是使用data中的变量。

### 2.7 定义methods：调用api层获取数据库中数据 ###

调用api层的格式为

teacherApi.getTeacherListPage(参数列表)
         .then(response=>{})

*  then代表调用成功，response表示调用成功后，接收的返回值

### 2.8 删除 ###

删除：一般先调用this.$confirm弹框确认，确认后再调用删除，最后还需要调用列表展示函数，展示最新数据。需要入参id。通过scope.row.id获取

删除的标准格式：

<el-table-column label="操作" width="200" align="center">
        <template slot-scope="scope">
        
        <el-button type="danger" size="mini" icon="el-icon-delete" @click="removeDataById(scope.row.id)">删除</el-button>
        </template>
    </el-table-column>
    
    removeDataById(id){
        this.$confirm('此操作将永久删除该记录，是否继续?','提示',{
            confirmButtonText:'确定',
            cancelButtonText:'取消',
            type:'warning'
        }).then(()=>{
            //删除函数
            teacherApi.removeById(id)
            .then(response=>{
            //提示信息
            this.$message({
                type:'success',
                message:'删除成功!'
                });
                //最新数据展示
                this.getList()
             })
        })
    },