谷粒学院61——讲师修改

1.讲师修改

实现讲师修改功能其实要做两件事：1.显示原来的用户数据 2.更新数据。下面来实现这个功能。

(1)ui实现

首先教师列表要有一个按钮来修改，就是上面那个红色的按钮，前面list.vue代码其实已经写了，这里摘录下来。

      <el-table-column label="操作" width="200" align="center">
        <template slot-scope="scope">
          <router-link :to="'/teacher/edit/' + scope.row.id">
            <el-button type="primary" si***i" icon="el-icon-edit"
              >修改</el-button>
          </router-link>
          ...
        </template>
      </el-table-column>
    </el-table>

里面有router-link表示点击修改需要路由的url。scope.row.id是获取修改行数据的id，我们将它添加到路由的地址，这样就方便我们修改获取id，根据id回写数据并且修改。

(2)添加隐藏路由

点击了修改后页面要路由到哪呢？其实就是路由到我们之前的讲师添加页面，所以讲师添加与讲师修改是共用一个页面。但是上面代码中讲师添加的url是/edu/teacher/save,讲师修改的url是/edu/teacher/edit/，两个不同的url怎么公用这一个页面呢？

答案是使用隐藏路由。在router/index.js中新增路由如下。修改路径path与添加不同，转到了同一个页面save.vue。

{
    path: 'edit/:id',
    name: '修改讲师',
    component: () => import('@/views/edu/teacher/save.vue'),
    meta: { title: '修改讲师', icon: 'tree' },
    hidden: true
 }

(3)回写数据

点击修改后的页面中应该有修改用户的数据，我们下面来实现数据的回写。先要实现接口，根据id拿到teacher。在teacher.js中开放接口如下。

 findTeacher(id) {
    return request({
      url: `/eduservice/edu-teacher/findTeacher/${id}`,
      method: 'get'
    })
  }

接下来要在用户的展示页面save.vue中调用findTeacher()方法。

 findTeacher(id) {
     teacher.findTeacher(id)
     .then((response)=>{
       console.log(response)
       this.teacher = response.data.item
       })
   }

注意这里的item与后端代码传过来的数据保持一致，如果你传的不是item就对应替换即可。

    @ApiOperation("查找教师")
    @GetMapping("/findTeacher/{id}")
    public R findTeacher(@PathVariable String id) {
        try {
            int i = 1 / 0;
        } catch (Exception e) {
            throw new GuliException(1234, "自定义异常");
        }
        EduTeacher eduTeacher = eduTeacherService.getById(id);
        return R.ok().data("item", eduTeacher);
    }

关定义方法也不能实现回写，还要在created()中在页面初始化渲染时调用方法。不过这里需要根据url是否传递了id值，来判断页面功能是修改还是添加，如果是修改就调用findTeacher()将数据进行回写。注意下面是$route而不是$router

 created() {//在页面渲染之前
    //判断路径中是否有id值
    if(this.$route.params && this.$route.params.id){
        //从路径中获取id值
        const id = this.$route.params.id
        //调用根据id查询的方法
        this.findTeacher(id)
    }

(4)修改数据

最后还需要实现修改功能。先在teacher.js中把接口写好。

 updateTeacher(teacher) {
    return request({
      url: `/eduservice/edu-teacher/updateTeacher`,
      method: 'post',
      data: teacher
    })
  }

在save.js调用下。

   updateTeacher() {
     teacher.updateTeacher(this.teacher)
     .then(
        () => {
         this.$message({
            type: 'success',
            message: '修改讲师成功!'
            }) 
         this.$router.push({ path:'/teacher/table' })
       })
     
   }

添加、修改二合一。点保存按钮时判断是添加还是修改，执行不同的行为。

saveOrUpdate() {
    //判断修改还是新增操作
    //根据teacher对象是否有id值来判断
    if (!this.teacher.id) {
        //没有id值，做【新增操作】
        this.saveBtnDisabled = true;
        this.addTeacher()
    }else{
        //有id值，做【修改操作】
        this.updateTeacher()
    }
  },

8.路由切换的问题及解决

上面代码存在一个小问题：点击修改后，数据回写到了表单中，再点击添加讲师，表单中依旧存在回写数据。如下图(添加讲师页面居然有回写数据)

是不是在添加路由时将teacher数据置空就可以解决这个问题啦？试验下。

created() {//在页面渲染之前
    //判断路径中是否有id值
    if(this.$route.params && this.$route.params.id){
        //从路径中获取id值
        const id = this.$route.params.id
        //调用根据id查询的方法
        this.findTeacher(id)
    }
    else{
      this.teacher = {}
    }
},

答案是不行，因为从讲师修改到讲师添加其实是同一个页面，created()只会执行一次。通过监听可以解决这个bug。

 created() {//在页面渲染之前
    this.init()
  },
  
  watch: {
      $route(to, from) {
      //路由变化方式，当路由发送变化，方法就执行
       console.log("watch $route");
       this.init()
   },

  methods: {
        init(){
        //判断路径中是否有id值
        if(this.$route.params && this.$route.params.id){
        //从路径中获取id值
        const id = this.$route.params.id
        //调用根据id查询的方法
        this.findTeacher(id)
   		 }
  }