开发者学堂课程【微服务+全栈在线教育实战项目演练(SpringCloud Alibaba+SpringBoot):讲师管理前端-讲师修改(2)】学习笔记,与课程紧密连接,让用户快速学习知识。
课程地址:https://developer.aliyun.com/learning/course/667/detail/11342
讲师管理前端-讲师修改(2)
强调判断路径中有没有 id 值,加 this.$route.params.id,这个写法是固定的。
最终的修改实现
1.在 api 的 teacher.js 定义修改接口
2.在页面调用修改的方法
1.在 api 的 teacher.js 定义修改接口
//修改讲师
updateTeacher(teacher) {
return request({
url:
'/eduservice/teacher/updateTeacher',
method:'post',
date:teacher
})
}
2.在页面调用修改的方法
//修改讲师的方法
updateTeacher(){
teacher API.updateTeacherInfo(this.teacher)
.then(response=> {
//提示信息
this.$message({
type:'success',
message:'修改成功!'
})
//回到列表页面 路由跳转
this.$router.push({path:'/teacher/table'})
})
},
在方法中修改成功,提示信息,另外回到列表中
添加的时候id值不需要,修改的时候需要id值。
//判断修改还是添加
//根据 teacher 是否有 id
if(!this.teacher.id) {
添加
this.saveTeacher()
} else {
//修改
this.update Teacher()
}
},
总结:
在表单页面中先判断有没有id值,如果有id值,根据id做查询,做数据回显。
这个做到,做修改,值可以修改,点保存的时候,有俩个操作添加、修改都是保存。
测试最终效果:
修改成功,里面的数据改了。
这些基本功能都做到了。
讲师列表可以做分页,可以讲师查询,还有删除功能,当点删除会弹出来框:
点确定记录可以删除掉。
这几个功能中,要特别熟练的功能的写法步骤,每一步应该做什么要特别熟练。