谷粒学苑第二章前端框架-2.4讲师的增删改+路由跳转

一、新增

第一步：添加路由,UI定向到views/edu/teacher/save页面

{
    path: 'save',
    name: '讲师添加',
    component: () => import('@/views/edu/teacher/save'),
    meta: { title: '讲师添加', icon: 'tree' }
}

第二步：在views目录下创建文件夹edu/teacher/并创建save.vue页面。

第三步：定义api，调用后端接口。

src/api/edu/teacher.js

    addTeacher(eduTeacher){
        return request({
            url: `/eduservice/teacher/addteacher`,
            method: 'post',
            //data表示把对象转换成json进行传递到接口里面,后端使用RequestBody获取数据
            data: eduTeacher
          })
    }

引入teacher api模块

import teacher from '@/api/edu/teacher'

// 保存
saveData() {
      teacher.save(this.teacher).then(response => {
        return this.$message({
          type: 'success',
          message: '保存成功!'
        })
      }).then(resposne => {
        this.$router.push({ path: '/edu/teacher' })
      }).catch((response) => {
        // console.log(response)
        this.$message({
          type: 'error',
          message: '保存失败'
        })
      })
    }

二、路由跳转到其他页面

this.$router.push({ path: '/edu/teacher' })：跳转到/edu/teacher页面。

三、修改

3.1 每条记录后面添加"修改"按钮

表示路由跳转到指定的地址

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

{
        path: 'edit/:id',  //:id相当于占位符
        name: '讲师修改',
        component: () => import('@/views/edu/teacher/save'),
        meta: { title: '讲师修改', icon: 'tree' },
        hidden:true
      },

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

(1) teacher.js

getTeacherInfo(id){
    return request({
        url: `/eduservice/teacher/getTeacherById/${id}`,
        method: 'get',
      })
},

(2) save.vue 

getTeacherInfo(id){
    teacher.getTeacherInfo(id)
        .then(response=>{
            this.eduTeacher = response.data.teacher
    })
}

(3)调用 根据id查询方法

因为添加和修改使用save页面，添加还是修改的区别是：只有修改的时候查询数据回显。

判断路径中是否包含讲师的id值，如果有id值则是修改，没有id值则是添加。

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

四、存在的问题

vue-router导航切换 时，如果两个路由都渲染同个组件，组件会重（chong）用,

组件的生命周期钩子（created）不会再被调用, 使得组件的一些数据无法根据 path的改变得到更新

因此：

1、我们可以在watch中监听路由的变化，当路由变化时，重新调用created中的内容

2、在init方法中我们判断路由的变化，如果是修改路由，则从api获取表单数据，

      如果是新增路由，则重新初始化表单数据

在create方法后面添加监听

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

init(){
    if (this.$route.params && this.$route.params.id) {
        const id = this.$route.params.id
        this.getTeacherInfo(id) //根据id查询
    } else {//路径没有id值做添加
         this.eduTeacher = {}
    }
},