讲述添加和修改前端实现

一、新增

1.路由显示

 {
        path: 'save',
        name: '讲师添加',
        component: () => import('@/views/edu/teacher/add'),
        meta: { title: '讲师添加', icon: 'tree' }
      }

 

2、定义api

 src/api/edu/teacher.js

addTeacher(teacher){
        return request({
            url: `/eduservice/teacher/addTeacher`,
            method: 'post',
            data:teacher
          })  
    }

3、初始化组件

src/views/edu/teacher/add.vue

<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 label="讲师头像">
   <!-- 头衔缩略图 -->
    <pan-thumb :image="teacher.avatar"/>
    <!-- 文件上传按钮 -->
    <el-button type="primary" icon="el-icon-upload" @click="imagecropperShow=true">更换头像
    </el-button>
    <!--
v-show：是否显示上传组件
:key：类似于id，如果一个页面多个图片上传控件，可以做区分
:url：后台上传的url地址
@close：关闭上传组件
@crop-upload-success：上传成功后的回调 -->
   <image-cropper
                v-show="imagecropperShow"
                :width="300"
                :height="300"
                :key="imagecropperKey"
                :url="BASE_API+'/eduoss/fileoss'"
                field="file"
                @close="close"
                @crop-upload-success="cropSuccess"/>
</el-form-item>
   <el-form-item>

        <el-button :disabled="saveBtnDisabled" type="primary" @click="saveOrUpdate">保存</el-button>
     </el-form-item>
   </el-form>
 </div>
</template>

js

<script>
import teacherApi from '@/api/edu/teacher'
import ImageCropper from '@/components/ImageCropper'
import PanThumb from '@/components/PanThumb'



export default {
  components:{ImageCropper,PanThumb},

  data() {

  return {

    teacher: {

      name: '',

      sort: 0,

      level: 1,

      career: '',

      intro: '',

        avatar: 'https://wangshenzhen.oss-cn-beijing.aliyuncs.com/2021/01/24/b73f0df8ce2e41de9f24fd2538caad2afile.png'

   },
   imagecropperShow:false,
   imagecropperKey:0,
   BASE_API:process.env.BASE_API,
   saveBtnDisabled: false // 保存按钮是否禁用,

 }

  },

  created(){
     this.init()

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

    }
    }
,
 methods: {

   close(){
     this.imagecropperShow=false
     this.imagecropperKey=this.imagecropperKey+1

   },

   cropSuccess(data){
     this.teacher.avatar=data.url,
       this.imagecropperShow = false,
       this.imagecropperKey=this.imagecropperKey+1


   },

   init(){
      if(this.$route.params&&this.$route.params.id)
      {
        const  id=this.$route.params.id
        this.getInfo(id)
      }
      else{
        this.teacher={}
      }


   },
   saveOrUpdate() {
     this.saveBtnDisabled = true

      if(!this.teacher.id)
      {
         this.saveData()
      }
      else{
        this.updateTeacherInfo(this.teacher)
      }
       


    },
   // 保存
   saveData() {
     teacherApi.addTeacher(this.teacher).
     then(response=>{
        this.$message({
            type: 'success',
            message: '添加成功!'
          })
     })
     this.$router.push({path:'/teacher/list'})

     

    }
    ,
    //查询讲师
    getInfo(id){

      teacherApi.getTeacherIfo(id)
      .then(response=>{
        this.teacher=response.data.item
      



      })

    }
    ,
    //修改讲师
    updateTeacherInfo(){
      teacherApi.updateTeacher(this.teacher)
      .then(response=>{
           this.$message({
            type: 'success',
            message: '修改成功!'
          })

          this.$router.push({path:'/teacher/list'})


      })

    }

  }

}

</script>

4、实现新增功能

引入teacher api模块

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

完善save方法

// 保存
   saveData() {
     teacherApi.addTeacher(this.teacher).
     then(response=>{
        this.$message({
            type: 'success',
            message: '添加成功!'
          })
     })
     this.$router.push({path:'/teacher/list'})//切换路由

     

    }

 

二、更新

1、定义api

 getTeacherIfo(id){
        return request({
            url: `/eduservice/teacher/${id}`,
            method: 'get'
          })  

    },
    updateTeacher(teacher){
        return request({
            url: `/eduservice/teacher/update`,
            method: 'post',
            data:teacher
          })  

    }

2.路由定义

{
        path: 'edit/:id',
        name: '讲师修改',
        component: () => import('@/views/edu/teacher/add'),
        meta: { title: '讲师修改', icon: 'tree' },
        hidden:true
      }

3.定义views页面

 

4.调用查询修改方法

//查询讲师
    getInfo(id){

      teacherApi.getTeacherIfo(id)
      .then(response=>{
        this.teacher=response.data.item
      



      })

    }
    ,
    //修改讲师
    updateTeacherInfo(){
      teacherApi.updateTeacher(this.teacher)
      .then(response=>{
           this.$message({
            type: 'success',
            message: '修改成功!'
          })

          this.$router.push({path:'/teacher/list'})


      })

    }

 

 5.判断路径是不是带参数（有参数调用回显修改）

init(){
      if(this.$route.params&&this.$route.params.id)
      {
        const  id=this.$route.params.id
        this.getInfo(id)
      }
      else{
        this.teacher={}
      }


   }

6.通过判断teacher是否有id调用不同的方法

saveOrUpdate() {
     this.saveBtnDisabled = true

      if(!this.teacher.id)
      {
         this.saveData()
      }
      else{
        this.updateTeacherInfo(this.teacher)
      }
       


    }

7.存在问题

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

组件的生命周期钩子（created）不会再被调用, 使得组件的一些数据无法根据 path的改变得到更新

因此：

1、我们可以在watch中监听路由的变化，当路由变化时，重新调用created中的内容

2、在init方法中我们判断路由的变化，如果是修改路由，则从api获取表单数据，

      如果是新增路由，则重新初始化表单数据

watch:{
    $route(to,from)
    {
 this.init()
       

    }
    }