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

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

文章目录

​​一、讲师查询功能​​

​​1、添加路由​​​​2、创建路由对应的页面​​​​3、在api文件夹中定义访问接口​​​​4、在讲师列表页面调用接口​​​​5、页面数据渲染​​​​6、分页功能​​​​7、顶部查询表单​​​​8、结果展示​​

​​二、讲师删除功能​​​​三、讲师添加功能​​​​四、讲师修改功能​​​​五、存在问题​​

一、讲师查询功能

1、添加路由

在/src/router/index.js中添加前端页面的菜单路由

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

2、创建路由对应的页面

list.vue

add.vue

3、在api文件夹中定义访问接口

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

4、在讲师列表页面调用接口

list.vue

5、页面数据渲染

在讲师列表页面 list.vue 页面

6、分页功能

在​​src/views/edu/teacher/list.vue​​中添加代码

分页方法修改，添加页码参数(因为分页时,会自动传入新的page,所以需要重新赋值)

效果:

7、顶部查询表单

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

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

查询 清空

清空表单功能:

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

8、结果展示

二、讲师删除功能

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

2、在按钮绑定事件 ​​@click="removeDataById"​​

3、在绑定事件的方法传递删除讲师的id值 ​​@click="removeDataById(scope.row.id)"​​

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

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

5、list.vue页面定义方法调用删除接口

三、讲师添加功能

1、定义api

//添加addTeacher(teacher) { return request({ url: `/eduservice/teacher/addTeacher`, method: 'post', //data表示把对象转为json进行传递到接口里面 data: teacher })},

2、初始化页面组件==> >== 添加表单

add.vue

保存

3、定义方法调用接口

四、讲师修改功能

1、添加修改按钮

修改

3、在路由index页面添加路由

{ path: 'edit/:id', //隐藏路由的写法. :id类似于sql中的占位符,用来接收参数 name: '修改讲师', component: () => import ('@/views/edu/teacher/add'), //因为修改和编辑使用同一个表单,所以使用同一个路由. meta: { title: '编辑讲师', noCache: true }, hidden: true //将该路由进行隐藏,让用户看起来如同是在当前页面进行修改.}

4、在表单页面进行数据回显

在api中定义查询接口

//通过id获取用户信息(用于修改用户信息前的数据回显操作)getById(id) { return request({ url: `/eduservice/teacher/getById/${id}`, method: 'get', })},

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

//根据讲师id查询讲师getTeacherInfo(id){ teacher.getById(id) .then(response=>{ this.teacher = response.data.teacher; })},

调用根据id查询的方法

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

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

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

5、进行讲师表单提交

在api中定义更新接口

//根据id修改讲师updateById(teacher) { return request({ url: `/eduservice/teacher/updateById`, method: 'put', data: teacher })}

在add.vue页面中调用修改Api

saveOrUpdate(){ if(!this.teacher.id){//通过判断id属性是否为空,来决定是添加还是修改 //添加 this.saveTeacher(); }else{ this.updateTeacher(); } this.saveBtnDisabled = true}, //修改讲师 updateTeacher(){ teacher.updateById(this.teacher) .then(response=>{ this.$message({ type:'success', message:'修改成功!' }); }).catch(error=>{ this.$message({ type:'error', message:'修改失败!' }); }) //回到列表页面,路由跳转 this.$router.push({path:'/teacher/list'}) }

五、存在问题

错误的解决方式：

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

created() {//判断路径有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() } }, methods: { //初始化 init(){ //判断路径中是否有id来决定是否进行回显功能 if(this.$route.params && this.$route.params.id){ //从路径中获取id值 const id = this.$route.params.id this.getTeacherInfo(id)//进行回显 }else{ this.teacher = {} } }, ... }

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。