Day05-讲师列表前端-讲师列表显示

1、讲师列表前端实现

第一步：添加路由

打开index.js文件

修改以下name、title信息：

代码如下：

  {
    path: '/teacher',
    component: Layout,
    redirect: '/teacher/table',
    name: '讲师管理',
    meta: { title: '讲师管理', icon: 'example' },
    children: [
      {
        path: 'table',
        name: '讲师列表',
        component: () => import('@/views/table/index'),
        meta: { title: '讲师列表', icon: 'table' }
      },
      {
        path: 'save',
        name: '讲师添加',
        component: () => import('@/views/tree/index'),
        meta: { title: '讲师添加', icon: 'tree' }
      }
    ]
  },

修改后的前端页面：

原来的前端页面：

第二步：创建路由对应的页面讲师列表页面：list.vue

讲师添加页面：save.vue
修改对应路由的地址

第三步：在api文件夹创建teacher.js定义访问的接口地址

import request from '@/utils/request'

export default {
  //1 讲师列表（条件查询分页）
  //current当前页 limit每页记录条数 teacherQuery条件对象
  getTeacherListPage(current,limit,teacherQuery){
      return request({
          //url:'eduservice/teacher/pageTeacherCondition/'+current+"/"+limit,
          url:`eduservice/teacher/pageTeacherCondition/${current}/${limit}`,
          method:'post',
          //teacgerQuery条件对象，后端使用RequestBody获取数据
          //data表示把对象抓换成json进行传递到接口里面
          data:teacherQuery
        })
  }
}

第四步、在讲师列表页面list.vue页面调用定义的接口方法，得到接口返回数据

<template>
  <div class="app-container">
      讲师列表
  </div>
</template>

<script>
//引入调用teacher.js文件
import teacher from '@/api/edu/teacher'

export default{
    //写核心代码位置
    //data:{
    //},
    data(){//定义变量和初始值
        return {
          list:null,//查询之后接口返回的集合
          page:1,//当前页
          limit:10,//每页记录数
          total:0,//总记录数
          teacherQuery:{}//条件封装对象
        }
    },
    created(){//页面渲染之前执行，一把调用methods定义的方法
      //调用
      this.getList()
    },
    methods:{//创建具体的方法，调用teacher.js定义的方法
        getList(){
            teacher.getTeacherListPage(this.page,this.limit,this.teacherQuery)
              .then(response=>{//请求成功
                //response接口返回的数据
                //console.log(response)
                this.list = response.data.rows
                this.total = response.data.total
                console.log(this.list)
                console.log(this.total)
              })
              .catch(error=>{
                console.log(error)
              })//请求失败
        }
    }
}
</script>

第五步 把请求接口获取的数据在页面进行显示。使用组件element-ui实现

在list.vue插入代码

<template>
  <div class="app-container">
      
 <!-- 表格 -->
    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="数据加载中"
      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>


  </div>
</template>

<script>
//引入调用teacher.js文件
import teacher from '@/api/edu/teacher'

export default{
    //写核心代码位置
    //data:{
    //},
    data(){//定义变量和初始值
        return {
          list:null,//查询之后接口返回的集合
          page:1,//当前页
          limit:10,//每页记录数
          total:0,//总记录数
          teacherQuery:{}//条件封装对象
        }
    },
    created(){//页面渲染之前执行，一把调用methods定义的方法
      //调用
      this.getList()
    },
    methods:{//创建具体的方法，调用teacher.js定义的方法
        getList(){
            teacher.getTeacherListPage(this.page,this.limit,this.teacherQuery)
              .then(response=>{//请求成功
                //response接口返回的数据
                //console.log(response)
                this.list = response.data.rows
                this.total = response.data.total
                console.log(this.list)
                console.log(this.total)
              })
              .catch(error=>{
                console.log(error)
              })//请求失败
        }
    }
}
</script>