讲师信息修改
1、每条记录后面添加修改按钮
2、点击修改按钮,进入表单页面,进行数据回显
根据讲师id查询数据显示
3、通过路由跳转进入数据回显页面
在路由index.js页面添加路由
添加路由:
代码:
{
path: 'edit/:id',
name: '编辑讲师',
component: () => import('@/views/edu/teacher/save'),
meta: { title: '编辑讲师', noCache: true },
hidden:true//隐藏路由
}
4、在前端页面list.vue的修改按钮处绑定跳转路由
5、在表单页面实现数据回显
(1)在teacher.js定义根据id查询数据的接口
//根据id查询讲师信息
getTeacherInfo(id){
return request({
url:`/eduservice/teacher/getTeacherById/${id}`,
method:'post'
})
},
(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)
}
},
6、数据回显后,修改讲师信息
(1)在api的teacher.js定义修改接口
//修改讲师信息
updateTeacherInfo(teacher){
return request({
url:`/eduservice/teacher/updateTeacher`,
method:'post',
data:teacher
})
}
(2)在页面调用修改的方法
//判断是修改还是添加的方法
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"})
})
},