springboot-vue增删改功能实现步骤

第一步：写后端接口

 @ApiOperation(value = "讲师添加")
    @PostMapping("addteacher")
    public R addTeacher(@RequestBody EduTeacher eduTeacher){
        boolean save = eduTeacherService.save(eduTeacher);
        if(save){
            return  R.ok();
        }else{
            return R.error();
        }
    }

    @ApiOperation(value = "根据id查询讲师")
    @GetMapping("getTeacher/{id}")
    public R getTeacherById(@ApiParam(name = "id",value = "讲师id",required = true) @PathVariable String id){

        EduTeacher eduTeacher = eduTeacherService.getById(id);
         return R.ok().data("teacher",eduTeacher);
    }

    @ApiOperation(value = "修改讲师功能")
    @PostMapping("updateTeather")
    public R updateTeacher(@RequestBody EduTeacher eduTeacher){
        boolean flag = eduTeacherService.updateById(eduTeacher);
        if(flag){
            return R.ok();
        }else{
            return R.error();
        }
    }

 //采用逻辑删除
    @ApiOperation(value = "根据id删除讲师")
    @DeleteMapping("{id}")
    public R removeTeacher(@ApiParam(name = "id", value = "讲师ID", required = true) @PathVariable String id) {
        boolean flag = eduTeacherService.removeById(id);
        if (flag) {
            return R.ok();
        } else {
            R.error();
        }
        return R.ok();
    }

第二步：写前端api

/api/teacher.js

export default{
   
     //删除功能
     removeDataById(id){
        //alert(id)
        return request({
          url:`/eduservice/teacher/${id}`,
          method:'delete'
        })

      },

      //添加讲师
      addTeacher(teacher){
          return request({
              url:`/eduservice/teacher/addteacher`,
              method:'post',
              data:teacher
          })
      },

      //根据id查询讲师
      getTeacherInfo(id){
          return request({
              url:`/eduservice/teacher/getTeacher/${id}`,
              method:'get'
          })

      },

      //修改讲师
      updateTeacherInfo(teacher){
          return request({
              url:`/eduservice/teacher/updateTeather`,
              method:'post',
              data:teacher
          })
      }


}

第三步：添加路由

{
    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' }
      },
      {
        path: 'edit/:id',   
        name: 'EduTeacherEdit',
        component: () => import('@/views/edu/teacher/save'),
        meta: { title: '编辑讲师', noCache: true },
        hidden: true
      }
    ]
  },

第四步：绑定事件

删除和修改事件
都是根据id，修改或删除 scope.row.id取出id值

 <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>
          <el-button type="danger" size="mini" icon="el-icon-delete" @click="removeDataById(scope.row.id)">删除</el-button>
        </template>

路由跳转界面

 <router-link :to="'/teacher/edit/'+scope.row.id">

绑定点击事件

@click="removeDataById(scope.row.id)"

绑定添加事件

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

第五步：编写点击事件的方法

<script>
//第一步：引入调用的teacher.js文件

//引入调用teacher.js文件
import teacher from '@/api/edu/teacher'

export default {
    //写核心代码位置
    // data:{
    // },
    data() { //定义变量和初始值
        return {
          list:null,//查询之后接口返回集合
          page:1,//当前页
          limit:5,//每页记录数
          total:0,//总记录数
          teacherQuery:{} //条件封装对象
        }
    },
    created() { //页面渲染之前执行，一般调用methods定义的方法
        //调用
        this.getList() 
    },
    methods:{  //创建具体的方法，调用teacher.js定义的方法
        //讲师列表的方法
        getList(page=1) {
            this.page = page
            teacher.getTeacherListPage(this.page,this.limit,this.teacherQuery)
                .then(response =>{//请求成功
                    //response接口返回的数据
                    //console.log(response)
                    this.list = response.data.rows
                    this.total = response.data.total
                    console.log(this.list)   
                    console.log(this.total)
                }) 
        },
        resetData(){//表单清空方法
        //表单输入项数据清空
        this.teacherQuery={}
        //查询所有讲师数据
        this.getList()

        },

        //删除功能
        removeDataById(id){

          this.$confirm('此操作将永久删除讲师记录, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
           teacher.removeDataById(id)
          .then(response =>{//删除成功
          //提示信息
           this.$message({
            type: 'success',
            message: '删除成功!'
          });
          //返回列表页
          this.getList()

          })
        })       
        }
 
    }
}
</script>

vue数据双向绑定，先定义数据及属性

 data() {
    return {
      teacher:{
        name: '',
        sort: 0,
        level: 1,
        career: '',
        intro: '',
        avatar: ''
      }

删除调用定义的api方法

 teacher.removeDataById(id)

表单清空方法：

  resetData() {//清空的方法
            //表单输入项数据清空
            this.teacherQuery = {}
            //查询所有讲师数据
            this.getList()
        }

修改，添加点击事件方法：

<script>
//第一步：引入调用的teacher.js文件

//引入调用teacher.js文件
import teacherApi from '@/api/edu/teacher'
export default {
  data() {
    return {
      teacher:{
        name: '',
        sort: 0,
        level: 1,
        career: '',
        intro: '',
        avatar: ''
      },
      saveBtnDisabled:false  // 保存按钮是否禁用,
    }
  },
  created() { //页面渲染之前执行
    this.init()
  },
  watch: {  //监听
    $route(to, from) { //路由变化方式，路由发生变化，方法就会执行
      this.init()
    }
  },
  methods:{
    init() {
      //判断路径有id值,做修改
      if(this.$route.params && this.$route.params.id) {
          //从路径获取id值
          const id = this.$route.params.id
          //调用根据id查询的方法
          this.getInfo(id)
      } else { //路径没有id值，做添加
        //清空表单
        this.teacher = {}
      }
    },
    //根据讲师id查询的方法
    getInfo(id) {
      teacherApi.getTeacherInfo(id)
        .then(response => {
          this.teacher = response.data.teacher
        })
    },
    saveOrUpdate() {
      //判断修改还是添加
      //根据teacher是否有id
      if(!this.teacher.id) {
        //添加
        this.saveTeacher()
      } else {
        //修改
        this.updateTeacher()
      }
    },
    //修改讲师的方法
    updateTeacher() {
      teacherApi.updateTeacherInfo(this.teacher)
        .then(response => {
          //提示信息
          this.$message({
              type: 'success',
              message: '修改成功!'
          });
          //回到列表页面 路由跳转
          this.$router.push({path:'/teacher/table'})
        })
    },
    //添加讲师的方法
    saveTeacher() {
      teacherApi.addTeacher(this.teacher)
        .then(response => {//添加成功
          //提示信息
          this.$message({
              type: 'success',
              message: '添加成功!'
          });
          //回到列表页面 路由跳转
          this.$router.push({path:'/teacher/table'})
        })
    }

  }
}
</script>

路由界面跳转：

//回到列表页面 路由跳转
          this.$router.push({path:'/teacher/table'})

在修改之前需要进行数据提前填充到表单：

 //根据讲师id查询的方法
    getInfo(id) {
      teacherApi.getTeacherInfo(id)
        .then(response => {
          this.teacher = response.data.teacher
        })
    },

填充表单数据：

 this.teacher = response.data.teacher

根据路由中是否有id判断是执行修改还是添加方法，

 init() {
      //判断路径有id值,做修改
      if(this.$route.params && this.$route.params.id) {
          //从路径获取id值
          const id = this.$route.params.id
          //调用根据id查询的方法
          this.getInfo(id)
      } else { //路径没有id值，做添加
        //清空表单
        this.teacher = {}
      }
    }

取出路由中的参数：

this.$route.params.id

由于数据双向绑定，清空表单操作：

  this.teacher = {}

路由多次跳转同一界面初始化清空问题：
create方法在页面渲染前执行，但只执行一次

 created() { //页面渲染之前执行
    this.init()
  }

采用vue的路由监听，实现页面初始化

  watch: {  //监听
    $route(to, from) { //路由变化方式，路由发生变化，方法就会执行
      //判断路径有id值,做修改
      if(this.$route.params && this.$route.params.id) {
          //从路径获取id值
          const id = this.$route.params.id
          //调用根据id查询的方法
          this.getInfo(id)
      } else { //路径没有id值，做添加
        //清空表单
        this.teacher = {}
    }
  }