谷粒学院（七）讲师列表前端实现

一、讲师查询功能

1、添加路由

在/src/router/index.js中

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

2、创建路由对应的页面

list.vue

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

save.vue

<template> <div class="app-container"> 讲师添加 </div> </template>

3、在api文件夹中创建teacher.js定义访问的接口地址

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

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

<script> 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(page = 1){ this.page = page 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>

5、数据渲染

在讲师列表页面 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="'/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>

6、分页插件

在src/views/edu/teacher/list.vue

<!-- 分页 --> <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" />

分页的方法修改，添加页码参数

7、顶部查询表单

注意：element-ui的 date-picker 组件默认绑定的时间值是默认世界标准时间，和中国时间差8小时

设置 value-format=“yyyy-MM-dd HH:mm:ss” 改变绑定的值

<!--查询表单--> <el-form :inline="true" class="demo-form-inline"> <el-form-item> <el-input v-model="teacherQuery.name" placeholder="讲师名"/> </el-form-item> <el-form-item> <el-select v-model="teacherQuery.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="teacherQuery.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="teacherQuery.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>

清空数据

resetData(){//清空表单 //表单输入项数据清空 this.teacherQuery = {} //查询所有讲师数据 this.getList }

二、讲师删除功能

1、在每条记录后面添加删除按钮

2、在按钮绑定事件

@click="removeDataById"

3、在绑定事件的方法传递删除讲师的id值

@click="removeDataById(scope.row.id)"

4、在api文件夹teacher.js 定义删除接口的地址

在 src/api/edu/teacher.js

//删除讲师 deleteTeacher(id) { return request({ url: `/eduservice/teacher/${id}`, method: 'delete' }) }

5、页面调用实现删除方法

在src/views/edu/teacher/list.vue

//删除讲师方法 removeDataById(id) { this.$confirm('此操作将永久删除该讲师, 是否继续?', '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' }).then(() => {//点击确定，删除成功 //调用删除方法 teacher.deleteTeacher(id) .then(response => {//删除成功 //提示信息 this.$message({ type: 'success', message: '删除成功!' }); //回到查询列表 this.getList() }) })//点击取消，删除失败 }

6、运行项目测试

三、讲师添加功能

1、定义api

在 src/api/edu/teacher.js

//添加讲师 addTeacher(teacher) { return request({ url: `/eduservice/teacher/addTeacher`, method: 'post', data: teacher }) }

2、初始化页面组件

在src/views/edu/teacher/save.vue

<el-form label-width="120px"> <el-form-item label="讲师名称"> <el-input v-model="teacher.name"/> </el-form-item> <el-form-item label="讲师排序"> <el-input-number v-model="teacher.sort" controls-position="right" min="0"/> </el-form-item> <el-form-item label="讲师头衔"> <el-select v-model="teacher.level" clearable placeholder="请选择"> <!-- 数据类型一定要和取出的json中的一致，否则没法回填 因此，这里value使用动态绑定的值，保证其数据类型是number --> <el-option :value="1" label="高级讲师"/> <el-option :value="2" label="首席讲师"/> </el-select> </el-form-item> <el-form-item label="讲师资历"> <el-input v-model="teacher.career"/> </el-form-item> <el-form-item label="讲师简介"> <el-input v-model="teacher.intro" :rows="10" type="textarea"/> </el-form-item> <!-- 讲师头像：TODO --> <el-form-item> <el-button :disabled="saveBtnDisabled" type="primary" @click="saveOrUpdate">保存</el-button> </el-form-item> </el-form>

3、定义接口方法，并返回数据

<script> import teacherApi from '@/api/edu/teacher' export default { data() { return { teacher:{ name:'', sort:0, level:1, career:'', intro:'', avatar:'' }, saveBtnDisabled: false//保存按钮是否禁用 } }, created() { }, methods:{ saveOrUpdate() { //添加 this.saveTeacher() }, //添加讲师方法 saveTeacher() { teacherApi.addTeacher(this.teacher) .then(response => {//添加成功 //提示信息 this.$message({ type: 'success', message: '添加成功!' }); //回到列表页面 路由跳转 this.$router.push({path:'/teacher/table'}) }) .catch(error => { }) } } } </script>

四、讲师修改功能

1、每条记录后添加修改按钮

<router-link :to="'/teacher/edit/'+scope.row.id"> <el-button type="primary" size="mini" icon="el-icon-edit">修改</el-button> </router-link>

2、点击修改按钮进入表单页面，进行数据回显

根据讲师 id 查询数据显示

3、通过路由跳转进入数据回显页面，在路由index页面添加路由

{ path: 'edit/:id', name: 'EduTeacherEdit', component: () => import('@/views/edu/teacher/save'), meta: { title: '编辑讲师', noCache: true }, hidden: true }

4、在表单页面显示数据回显

（1）在teacher.js定义根据id查询接口

//根据id查询讲师，回显数据 getTeacherInfo(id) { return request({ url: `/eduservice/teacher/getTeacher/${id}`, method: 'get' }) }

（2）在页面调用接口实现数据回显

//根据讲师id查询的方法 getInfo(id) { teacherApi.getTeacherInfo(id) .then(response => { this.teacher = response.data.teacher }) },

（3）调用根据id查询的方法

因为添加和修改都使用save页面，区别添加还是修改，只有修改时候查询数据回显。

依据：判断路径里面是否有讲师id值，如果有id值修改，没有id值直接添加。

created() {//页面渲染之前执行 //判断路径是否有id值 if(this.$route.params && this.$route.params.id) { //从路径获取id值 const id = this.$route.params.id //调用根据id查询的方法 this.getInfo(id) } },

5、最终修改实现

（1）在api的teacher.js中定义修改接口

在 src/api/edu/teacher.js

//修改讲师 updateTeacherInfo(teacher) { return request({ url: `/eduservice/teacher/updateTeacher`, method: 'post', data: teacher }) }

（2）在页面中调用修改方法

在src/views/edu/teacher/save.vue

saveOrUpdate() { //判断修改还是添加 //根据teacher是否有id if(!this.teacher.id) { //添加 this.saveTeacher() } else { //修改 this.updateTeacher() } }, //修改讲师方法 updateTeacher() { teacherApi.updateTeacherInfo(this.teacher) .then(response => { //提示信息 this.$message({ type: 'success', message: '修改成功!' }); //回到列表页面 路由跳转 this.$router.push({path:'/teacher/table'}) }) },

五、存在问题

第一次点击修改进行数据回显

第二次在去点击添加讲师，进入表单页面，但是问题：表单页面还是显示修改回显数据，正确效果应该是表单数据清空。

解决方式：

在做添加讲师时候，表单数据清空就可以了。

init() { //判断路径有id值，做修改 if(this.$route.params && this.$route.params.id) { //从路径获取id值 const id = this.$route.params.id //调用根据id查询的方法 this.getInfo(id) }else {//路径没有id值，做添加 //清空表单 this.teacher = {} } },

上面代码没有解决问题，为什么？

多次路由跳转到同一个页面，在页面中created方法只会执行第一次，后面在进行跳转不会执行的。【路由切换问题】

最终解决：使用vue监听

created() {//页面渲染之前执行 this.init() }, watch: {//监听 $route(to, from) {//路由变化方式，路由发生变化，方法就会执行 this.init() } },

---

如果有收获！！！ 希望老铁们来个三连，点赞、收藏、转发。 创作不易，别忘点个赞，可以让更多的人看到这篇文章，顺便鼓励我写出更好的博客