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

曾经终败给现在 2023-10-12 11:24 32阅读 0赞

## 一、新增 ##

### 第一步：添加路由,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 每条记录后面添加"修改"按钮 ###

<el-table-column label="操作" width="200" align="center">
            <template slot-scope="scope">
              <router-link :to="'/edu/teacher/edit/'+scope.row.id">
                <el-button type="primary" size="mini" icon="el-icon-edit">修改</el-button>
              </router-link>
              <el-button type="danger" size="mini" icon="el-icon-delete" @click="removeDataById(scope.row.id)">删除</el-button>
            </template>
          </el-table-column>

<router-link :to="'/edu/teacher/edit/'+scope.row.id">表示路由跳转到指定的地址

### 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 = {}
        }
    },