谷粒 | 09 | 前端增删改查

前端增删改查，只记录部分关键步骤

1、配置页面路由

 {
    path: '/teacher',
    component: Layout,
    redirect: '/teacher/table',
    name: '讲师管理',
    meta: { title: '讲师管理', icon: 'example' },
    children: [
      {
        path: 'table',
        name: '讲师列表',
        component: () => import('@/views/edu/teacher/list'),
        meta: { title: '讲师列表', icon: 'table' }
      },
      {
        path: 'save',
        name: '添加讲师',
        component: () => import('@/views/edu/teacher/save'),  //懒加载
        meta: { title: '添加讲师', icon: 'tree' }
      },
    ]
  },

2、配置接口地址

import request from '@/utils/request'
//es6默认导出
export default {
    //分页查询讲师列表
    getTeacherListPage(current,size,teacherQuery){
        //以下固定写法
        return request({
            //如果需要在路径上拼接参数，需要用`(键盘1左边)和${}
            url: `/eduservice/teacher/PageTeacherCondition/${current}/${size}`,
            method: 'post',
            data: teacherQuery
          })
    },
    deleteTeacherById(id){
        return request({
            url: `/eduservice/teacher/delete/${id}`,
            method: 'delete',
        })
    },
    addTeacher(teacher){
        return request({
            url: '/eduservice/teacher/insertTeacher',
            method: 'post',
            data: teacher
        })
    }
}

3、调用

增加讲师

		saveTeacher(){
            teacherApi.addTeacher(this.teacher)
              .then(res => {
                //提示信息
                  this.$message({
                     type: 'success',
                     message: '添加成功!'
                  });
                //路由跳转，回到列表页面,经常使用
                  this.$router.push({path:'/teacher/table'})
              })
        }

删除讲师

//根据id删除讲师信息
    removeDataById(id){
       this.$confirm('此操作将永久删除讲师信息, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {    //点击确定后再执行删除操作
              teacher.deleteTeacherById(id)
              .then((res) => {
                //重新查询刷新列表
                  this.getTeacherList();
              })
              this.$message({
                type: 'success',
                message: '删除成功!'
              });
        })
     
    }

查询讲师

 //分页查询
    getTeacherList(page = 1) {
      //设置page默认值为1
      this.page = page; //若page有值则覆盖默认值
      teacher.getTeacherListPage(this.page, this.size, this.teacherQuery)
        .then((res) => {
          this.list = res.data.list;
          this.total = res.data.total;
          console.log(this.list);
          console.log(this.total);
        })
        .catch();
    },
  

修改

1、配置路由

  {
        path: 'edit/:id',
        name: '修改讲师',
        component: () => import('@/views/edu/teacher/save'),  //懒加载
        meta: { title: '修改讲师', noCache: true },
        hidden:true
  }

新增和修改共用页面，修改路由携带参数

传送门：路由传参

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

2、数据回显

(1) 定义回显查询数据的接口

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

(2) 调用方法

  getTeacherInfo(id){
          teacherApi.getTeacherById(id)
            .then(res => {
              this.teacher = res.data.teacher
            })
   },

问题：

1、修改和添加使用的是同一页面，但只有修改时需要回显数据，所以要判断是修改还是添加

解决方案：判断路径后是否有id值，有id是修改，没有id即为添加

 created(){
     //页面渲染之前执行，判断是新增还是修改
      //根据id判断是新增还是修改
          //有id值为修改
          if(this.$route.params && this.$route.params.id){
            //获取路径后的id
            const id = this.$route.params.id
            this.getTeacherInfo(id)
          }
  },

2、vue-router导航切换时，如果两个路由都渲染同个组件，created中的方法只会调用一次，组件会重（chong）用，使得组件的一些数据无法根据 path的改变得到更新。例如先执行修改会有数据回显，再次点击新增，应该是没有回显数据，但回显数据仍然存在

解决方案：

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

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

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

   watch:{
        //监听路由，当路由发生变化时调用
        $route(to,from){
          this.init();
        }
      },
    created(){
     //页面渲染之前执行，判断是新增还是修改
      this.init()
    },
   
    methods:{
      //根据id判断是新增还是修改
        init(){
          //有id值为修改
          if(this.$route.params && this.$route.params.id){
            //获取路径后的id
            const id = this.$route.params.id
            this.getTeacherInfo(id)
          } else{      
            //无id为新增，此时需要清空数据回显
            this.teacher = {}
          }
      	}
    }