Day05-讲师列表前端-讲师信息修改(2)

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.KaTeX parse error: Expected 'EOF', got '&' at position 14: route.params &̲& this.route.params.id){

//从路径获取id值

const id = this.$route.params.id

//调用根据id查询的方法

this.getInfo(id)

}

},

6、数据回显后，修改讲师信息

总结一下

面试前要精心做好准备，简历上写的知识点和原理都需要准备好，项目上多想想难点和亮点，这是面试时能和别人不一样的地方。

还有就是表现出自己的谦虚好学，以及对于未来持续进阶的规划，企业招人更偏爱稳定的人。

万事开头难，但是程序员这一条路坚持几年后发展空间还是非常大的，一切重在坚持。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

为了帮助大家更好更高效的准备面试，特别整理了《前端工程师面试手册》电子稿文件。

前端面试题汇总