一、新增

1、定义api

src/api/edu/teacher.js

save(teacher) {
  return request({
      url: api_name,
      method: 'post',
      data: teacher
  })
}

2、初始化组件

src/views/edu/teacher/form.vue
html

<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-input-number v-model="teacher.sort" controls-position="right" min="0"/>
      </el-form-item>
      <el-form-item label="讲师头衔">
        <el-select v-model="teacher.level" clearable placeholder="请选择">
          <!--
            数据类型一定要和取出的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>

js

<script>
export default {
  data() {
    return {
      teacher: {
        name: '',
        sort: 0,
        level: 1,
        career: '',
        intro: '',
        avatar: ''
      },
      saveBtnDisabled: false // 保存按钮是否禁用,
    }
  },


  methods: {


    saveOrUpdate() {
      this.saveBtnDisabled = true
      this.saveData()
    },


    // 保存
    saveData() {


    }


  }

}
</script>

3、实现新增功能

引入teacher api模块

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

完善save方法

 // 保存
 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: '保存失败'
     })
   })
    }

二、回显

1、定义api

src/api/edu/teacher.js

getById(id) {
 return request({
     url: `${api_name}/${id}`,
     method: 'get'
 })
}

2、组件中调用api

methods中定义fetchDataById

// 根据id查询记录
fetchDataById(id) {
 teacher.getById(id).then(response => {
     this.teacher = response.data.item
 }).catch((response) => {
     this.$message({
         type: 'error',
         message: '获取数据失败'
     })
 })
}

3、页面渲染前调用fetchDataById

created() {
  console.log('created')
  if (this.$route.params && this.$route.params.id) {
    const id = this.$route.params.id
    this.fetchDataById(id)
  }
}

三、更新

1、定义api

updateById(teacher) {
  return request({
      url: `${api_name}/${teacher.id}`,
      method: 'put',
      data: teacher
  })
}

2、组件中调用api

methods中定义updateData

// 根据id更新记录
updateData() {
 this.saveBtnDisabled = true
 teacher.updateById(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: '保存失败'
     })
 })
}

3、完善saveOrUpdate方法

saveOrUpdate() {
  this.saveBtnDisabled = true
  if (!this.teacher.id) {
      this.saveData()
  } else {
      this.updateData()
  }
}

四、存在问题

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

组件的生命周期钩子（created）不会再被调用, 使得组件的一些数据无法根据 path的改变得到更新
因此：
1、我们可以在watch中监听路由的变化，当路由变化时，重新调用created中的内容
2、在init方法中我们判断路由的变化，如果是修改路由，则从api获取表单数据，
如果是新增路由，则重新初始化表单数据

<script>

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

  const defaultForm = {
  name: '',
  sort: 0,
  level: '',
  career: '',
  intro: '',
  avatar: ''
  }

  export default {
  data() {
    return {
      teacher: defaultForm,
      saveBtnDisabled: false // 保存按钮是否禁用,
    }
  },


  watch: {
    $route(to, from) {
      console.log('watch $route')
      this.init()
    }
  },


  created() {
    console.log('created')
    this.init()
  },


  methods: {


    init() {
      if (this.$route.params && this.$route.params.id) {
        const id = this.$route.params.id
        this.fetchDataById(id)
      } else {
        // 使用对象拓展运算符，拷贝对象，而不是引用，
        // 否则新增一条记录后，defaultForm就变成了之前新增的teacher的值
        this.teacher = { ...defaultForm }
      }
    },


  ......
   }

  }
</script>