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

- 日理万妓 2021-07-24 17:36 426阅读 0赞

# 一 新增讲师 #

## 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 定义页面组件模块 ##

## 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 文件如下：

计算属性定义

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