开发者学堂课程【微服务+全栈在线教育实战项目演练（SpringCloud Alibaba+SpringBoot）：讲师管理前端-讲师修改（1）】学习笔记，与课程紧密连接，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/667/detail/11341
讲师管理前端-讲师修改(1)
讲师修改功能
1.在每条记录后面添加修改按钮
2.点击修改按钮 进入表单页面中，进行数据回显。
例如点击第一条东方老师的修改，应该先进入到添加讲师表单中显示出该老师的数据
然后可以修改这些值，再进行保存，修改数据库中的内容
根据讲师id查询数据显示
在前端的列表页面中，已经加过按钮，接下来换种方式来添加
3.通过路由跳转进入数据回显页面，在路由 index 页面添加路由
什么叫路由方式：
如下图
用/teacher/table 值做变化跳转。
做法：
首先在路由 index 页面添加一个路由
这个路由不需要显示，修改讲师可以在讲师列表中实现，不需要再加上一个修改讲师。像这种加一个路由，但路由不显示，叫隐藏路由。
加的方式：
{
path:’edit/:id’,
name:’EduTeacherEdit’,
compoonent:()=>import(‘@/views/edu/teacher/from’),
meta:{title:’编辑讲师’,noCache:true},
hidden:true
}
主要看代码：
hidden:true
hidden 是隐藏，true 表示不显示
把代码加到路由当中，在index.js中找到代码讲师列表和添加讲师，在下方输入代码：
{
path:'save/:id',
name:'EduTeacherEdit',
component:()=> import('@/views/edu/teacher/save'),
meta:{title:'编辑讲师',noCache:true},
hidden:ture
}
可以看到第一行代码在 save 后加上了：id
相当于在早期写 SQl 语句时，有一个where条件：where id=？
？为占位符，里面可以传参数，而此处第一行的：id 就相当于占位符，需要传参数
如图在此处传参数，叫做 edit，然后传入讲师的 id 值102345
即 edit/102345，这就是隐藏路由写法，通过id跳转。
接着在 list.vue 中修改代码：
<router-link :to=”’/teacher/edit/’+scope.row.id”>
之后就可以通过 teacher/edit+id 跳转到页面中
以上就是路由的做法，现在先来测试一下，刷新页面后点击讲师列表，然后点击修改，进入到表单页面，可以看到网址的变化变成teacher/edit+需要换的讲师id，但是表单还没有回显。先做到目前的跳转方式是通过路由传讲师id，最终将值传入
4.在表单页面中实现数据回显
- 在 teacher.js 定义根据id查询接口
在 teacher.js 中，找到//添加讲师的模块，在下方定义一个方法：输入代码：
getTeacherInfo(id){
return request({
url:'/eduservice/teacher/getTeacher/${id}',
method:'get'
})
}
- 在页面调用接口实现数据回显
目前当我们点击修改按钮时是在列表页面中，当点击修改后就到了表单页面，现在要做数据回显，不是在列表中回显，而是在表单页面中做调用
在表单中做调用：打开save.vue，找到代码模块
methods:{
saveOrUpdate(){
//添加
this.saveTeacher()
}}
在代码 saveOrUpdate()上方输入：
//根据讲师 id 查询方法
getInfo(id){
teacher Api.getTeacherInfo(id) //调用刚才定义的teacherApi，然后引入，传进id
then(response=>{
this.teacher=response.date.teacher //通过 response 得到数据 在接口中找到名字teacher，之后赋值给对象 this.teacher
})
},
- 调用根据 id 查询的方法
到目前为止功能并没有做到，只是定义了方法，但是发现方法getInfo(id)没有地方进行调用，所以不会执行，只有执行后才会显示。所以继续写第三部分：调用根据id 查询的方法
现在修改时要到表单页面中，添加也需要到表单页面中，即两个操作都要到表单页面中，都是save页面
但是目前的操作中，添加的时候方法getInfo(id)功能模块不需要调用，因为添加的时候不需要做回显，直接有表单输入值就可以。做修改的时候才需要调用，所以要区分什么时候调用：添加的时候不需要调用，修改的时候才需要。
怎么区别添加和修改？
修改的时候路径中有id值，添加的时候没有路径值。所以做判断：路径中有讲师id值就调用回显，没有id值就不调用直接做添加，即就根据路径中有没有id值做判断就可以。
总结：
因为添加和修改使用save页面
区别添加还是修改，只有修改时候查询数据回显
判断路径里面是否有讲师id值，如果有id值修改，没有id值直接做添加。
简单对写法有个了解，下节继续讲解：
if (this.$route.params && this.$route.params.id){
const id = this.$route.params.id
this.fetchDataById(id)
}
this.$route.params 得到路由中的参数，该行代码就表示得到其中的id值
如果里面有 id 参数就调用，如果没有参数就不调用
