講師的新增回顯修改功能實現

一 新增講師

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()
    }
  }