讲师的新增回显修改功能实现

一 新增讲师

1 定义API模块

  // 保存讲师信息
  save(teacher) {
    return request({
      url: '/admin/edu/teacher/save',
      method: 'post',
      data: teacher
    })
  },

2 定义页面组件脚本

  data() {
    return {
      // 讲师对象
      teacher: {
        sort: 0,
        level: 1
      },
      saveBtnDisabled: false // 默认按钮可用
    }
  },

3 定义页面组件模块

<template>
  <div class="app-container">
    <!-- 输入表单 -->
    <el-form label-width="120px">
      <el-form-item label="讲师名称">
        <el-input v-model="teacher.name" />
      </el-form-item>
      <el-form-item label="入驻时间">
        <el-date-picker v-model="teacher.joinDate" value-format="yyyy-MM-dd" />
      </el-form-item>
      <el-form-item label="讲师排序">
        <el-input-number v-model="teacher.sort" :min="0"/>
      </el-form-item>
      <el-form-item label="讲师头衔">
        <el-select v-model="teacher.level">
          <!--
            数据类型一定要和取出的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>
  </div>
</template>

4 实现新增功能

 

    // 新增和保存
    saveOrUpdate() {
      console.log(this.teacher)
      this.saveBtnDisabled = true
      if (!this.teacher.id) {
        this.saveData()
      } else {
        this.updateData()
      }
    },

    // 数据保存
    saveData() {
      teacherApi.save(this.teacher).then(response => {
        // 弹出成功提示
        this.$message({
          message: response.message,
          type: 'success'
        })
        this.$router.push({ path: '/teacher' })
      })
    },

二 显示讲师信息

1 定义API模块

  // 根据id查询老师信息
  getById(id) {
    return request({
      url: `/admin/edu/teacher/get/${id}`,
      method: 'get'
    })
  },

2 定义页面组件脚本

  // 页面加载时调用
  created() {
    console.log('form created被执行')


    if (this.$route.params.id) {
      this.fetchDataById(this.$route.params.id)
    }
  },
    // 根据id查询数据
    fetchDataById(id) {
      teacherApi.getById(id).then(response => {
        this.teacher = response.data.item
      })
    }

3 定义页面组件模块

          <router-link :to="'/teacher/edit/'+scope.row.id">
            <!-- 修改按钮 -->
            <el-button type="primary" size="mini" icon="el-icon-edit">修改</el-button>
          </router-link>

三 更新讲师

1 定义API模块

  // 更新讲师信息
  updateById(teacher) {
    return request({
      url: `/admin/edu/teacher/update`,
      method: 'put',
      data: teacher
    })
  }

2 定义页面组件脚本

    // 数据更新
    updateData() {
      teacherApi.updateById(this.teacher).then(response => {
        // 弹出成功提示
        this.$message({
          message: response.message,
          type: 'success'
        })
        this.$router.push({ path: '/teacher' })
      })
    },

四 组件重用问题

问题：vue-router导航切换时，如果两个路由都渲染同一个组件，组件的生命周期方法（created或者mounted）不会再被调用, 组件会被重用，显示上一个路由渲染出来的组件。

解决方案：可以简单的在 router-view上加上一个唯一的key，来保证路由切换时都会重新触发生命周期方法，确保组件被重新初始化。

修改 src/views/layout/components/AppMain.vue 文件如下：

<template>
  <section class="app-main">
    <transition name="fade-transform" mode="out-in">
      <!-- or name="fade" -->
      <!-- 如果为路由出口定义一个唯一key值，那么组件会被强制重新渲染 -->
      <router-view :key="key"/>
      <!-- 如果路由指向的页面组件是同一个，那么路由出口显示的页面组件不会重新被渲染 -->
      <!-- <router-view/> -->
    </transition>
  </section>
</template>

计算属性定义

  // 计算属性
  computed: {
    key() {
      return this.$route.name !== undefined ? this.$route.name + +new Date() : this.$route + +new Date()
    }
  }