讲师管理表单实现

一.添加讲师功能

 

 

二.修改讲师功能

1.点击修改按钮 进入表单页面，进行数据回显

根据讲师id查询数据显示

2.通过路由跳转，进入数据回显页面，在路由index中添加路由

①添加隐藏路由

隐藏路由     路由中添加router.index.js中添加

   {
        path: 'edit/:id',   
        name: 'EduTeacherEdit',
        component: () => import('@/views/edu/teacher/save'),
        meta: { title: '编辑讲师', noCache: true },
        hidden: true
      }

edit/:id 相当于一个占位符，后面根讲师id

②路由跳转

通过id跳转

list.vue中的路径要和index.js中的地址对应，后面加一个讲师id

     
          修改
     

通过路由跳转到页面中

 

3.在表单页面实现数据回显

即点击修改的时页面有数据不是空白

①.在teacher.js定义根据id查询接口

 //根据id查询讲师
       getTeacherInfo(id){
            return request({
               url:`/eduservice/teacher/getTeacher/${id}`,
               method: 'get'
          })

       }

 

②.在页面调用接口实现数据回显

//根据讲师id查询回显数据
       getInfo(id){
         teacherApi.getTeacherInfo(id)
         .then(resp=>{
           this.teacher=resp.data.teacher
         })
       }

 

③.调用根据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)
      }
    }

 

 

4.讲师修改功能实现

①在api.teacher.js中定义修改方法的接口

     //修改讲师
       updateTeacher(teacher){
          return request({
               url:`/eduservice/teacher/updateTeacher`,
               method: 'post',
               data:teacher})
       }

 

②在save.vue中定义修改讲师的方法

 //修改讲师的方法
       updateTeacher(){
         teacherApi.updateTeacher(this.teacher)
         .then(resp=>{
               //提示信息
            this.$message({
            type: 'success',
            message: '修改成功!'
             });
             //修改完成，跳转讲师列表页面，即路由跳转
             this.$router.push({path:'/teacher/table'})
         })
       }

根据teacher是否有id判断，有id则是修改，没id则是添加，因为添加的时候id会自动生成

 saveOrUpdate(){
          //判断是修改还是添加
           //根据是否有id判断，有则是修改，没有则是添加
           if(!this.teacher.id){
              this.saveTeacher()
           }else{
             this.updateTeacher()
           }
          
        }

5.关于路由切换问题

解决方案，使用vue监听,当路由变化，此方法就会执行

   watch:{//监听
      $route(to,from){//路由变化的方式,当路由发送变化，此方法执行
       this.init()
     }
    }

save.vue

list.vue