二、讲师删除功能
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页面定义方法调用删除接口
//删除讲师 removeDataById(id){ this.$confirm('此操作将永久删除讲师记录,是否继续?','提示',{ confirmButtonText:'确定', cancelButtonText:'取消', type:'warning' }).then(()=>{//点击确定 teacher.removeById(id).then((response)=>{ this.$message({ type:'success', message:'删除成功!' }) //回到列表页面 this.getList() }) }).catch((response) => { // 失败 if (response === 'cancel') { this.$message({ type: 'info', message: '已取消删除!' }) } else { this.$message({ type: 'error', message: '删除失败!' }) } }) }
三、讲师添加功能
1、定义api
//添加 addTeacher(teacher) { return request({ url: `/eduservice/teacher/addTeacher`, method: 'post', //data表示把对象转为json进行传递到接口里面 data: teacher }) },
2、初始化页面组件==> >== 添加表单
add.vue
<el-form label-width="120px"> <el-form-item label="讲师名称"> <el-input v-model="teacher.name"/> </el-form-item> <el-form-item label="讲师排序"> <el-input-number v-model="teacher.sort" controls-position="right" min="0"/> </el-form-item> <el-form-item label="讲师头衔"> <el-select v-model="teacher.level" clearable placeholder="请选择"> <!-- 数据类型一定要和取出的json中的一致，否则没法回填 因此，这里value使用动态绑定的值，保证其数据类型是number --> <el-option :value="1" label="高级讲师"/> <el-option :value="2" label="首席讲师"/> </el-select> </el-form-item> <el-form-item label="讲师资历"> <el-input v-model="teacher.career"/> </el-form-item> <el-form-item label="讲师简介"> <el-input v-model="teacher.intro" :rows="10" type="textarea"/> </el-form-item> <!-- 讲师头像：TODO --> <el-form-item> <el-button :disabled="saveBtnDisabled" type="primary" @click="saveOrUpdate">保存</el-button> </el-form-item> </el-form>
3、定义方法调用接口
<script> import teacher from '@/api/edu/teacher' export default { data() { return { teacher:{//这里边写不写属性都可,因为程序会自动把页面绑定的属性添加进去 name:'', sort:0, level:1, career:'', intro:'', avatar:'' }, saveBtnDisabled: false//保存按钮是否禁用 } }, created() { }, methods:{ saveOrUpdate() { this.saveTeacher() this.saveBtnDisabled = true//禁止重复提交(可以不写,因为后续会跳转到查询页面) }, //添加讲师方法 saveTeacher(){ teacher.addTeacher(this.teacher).then(response=>{ this.$message({ type:'success', message:'添加成功!' }); }).catch(error=>{ this.$message({ type:'error', message:'添加失败!' }); }) //回到列表页面,进行路由跳转 this.$router.push({path:'/teacher/list'}) } } } </script>
四、讲师修改功能
1、添加修改按钮
<router-link :to="'/teacher/edit/'+scope.row.id"> <el-button type="primary" size="mini" icon="el-icon-edit">修改</el-button> </router-link>
2、点击修改按钮进入表单页面.先根据讲师 id 查询数据显示,之后进行表单提交,修改记录
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 = {} } }, ... }
