添加、编辑和删除 前后端联调

一、添加  UI引入

二、编辑 UI引入

三、submitForm方法

submitForm(){
      this.$refs.foreName.validate((valid)=>{
        if(valid){
          console.log('校验成功',this.form);
          //校验成功，提交给后端，并关闭输入表单，新增和修改都是重新用新数据去覆盖旧数据，都是post请求
          this.axios.post('http://localhost:3333/user/saveUser',this.form).then((resp)=>{
            let data = resp.data;//接受后端返回的数据 commonDto里的
            console.log(resp,'resp')
            if(data.success){
              //如果后端返回数据成功，关闭对话框，表单数据清空
              this.dialogFormVisible = false;
              this.dialogFormVisible1 = false;
              this.form = {};
              //重置表单校验状态
              this.$refs.foreName.resetFields();
              //调用初始化查询方法，因为新增或者修改了，后端会同步数据库，这时候需要重新调用getUserList方法
              //这样前端就直接显示出我们新增或者修改的用户数据了
              this.getUserList();
              //调用UI的message消息提示组件方法，提示操作成功
              this.$message({
                message: '恭喜你操作成功',
                type: 'success'
              });
            }
          })
          console.log('校验成功',this.form);
          this.dialogFormVisible = false;
        }
      })
    }

四、删除

1.后端代码

@DeleteMapping("/delete/{id}")
     public CommonDto deleteUser(@PathVariable Long id){
          CommonDto commonDto = new CommonDto<>();
          userService.removeById(id);
          commonDto.setMessage("删除成功");
          return commonDto;
     }

2.前端

    handleDelete(row) {
      console.log(row);
      let id = row.id;
      this.axios.delete('http://localhost:3333/user/delete/'+ id).then((resp)=>{
        let data = resp.data;//接受后端返回的数据 commonDto里的
        console.log(resp,'resp')
        if(data.success){
          this.getUserList();
          //调用UI的message消息提示组件方法，提示操作成功
          this.$message({
            message: data.message,
            type: 'success'
          });
        }
      })
    },