SpringBoot SpringBoot 基础篇 4 基于 SpringBoot 的SSMP 整合案例 4.15 删除功能

SpringBoot

【黑马程序员SpringBoot2全套视频教程，springboot零基础到项目实战（spring boot2完整版）】

SpringBoot 基础篇

4 基于 SpringBoot 的SSMP 整合案例

4.15 删除功能

4.15.1 删除实现

先找到引起删除操作的按钮

删除
1

就是这个按钮了

可以看到这个方法传了一个参数

是什么呢？其实就是对应行的数据，

验证一下

// 删除
handleDelete(row) {
    console.log(row);
},
1
2
3
4

重启服务器，测试点击删除按钮

可以看到数据都在了，那就直接用

发起删除请求

            // 删除
            handleDelete(row) {
                console.log(row);
                axios.delete('/books/' + row.id).then((res) => {
                    if (res.data.flag) {
                        //1. 关闭弹层
                        this.$message.success("删除成功");
                    } else {
                        this.$message.error("删除失败");
                    }
                }).finally(()=>{
                    this.getAll();
                });
            },
1
2
3
4
5
6
7
8
9
10
11
12
13
14

重启服务器测试一下

OK，功能算是完成了，但是稍微有点问题，点按钮说删就删了，反悔的机会都没有

4.15.2 是否确认删除提醒

// 删除
handleDelete(row) {
    console.log(row);
    this.$confirm("此操作永久删除当前信息，是否继续？", "提示", {type: "info"}).then(() => {
        axios.delete('/books/' + row.id).then((res) => {
            if (res.data.flag) {
                //1. 关闭弹层
                this.$message.success("删除成功");
            } else {
                this.$message.error("删除失败");
            }
        }).finally(() => {
            this.getAll();
        });
    }).catch(() => {
        this.$message.info("取消操作");
    })
},
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

重启服务器，查看效果

取消删除

确认删除

OK

快速回顾

• 删除

  handleDelete(row) {
  axios.delete("/books/"+row.id).then((res)=>{
  if(res.data.flag){
  this.$message.success("删除成功");
  }else{
  this.$message.error("删除失败");
  }
  }).finally(()=>{
  this.getAll();
  });
  }
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11

• 加个友好的提示

  handleDelete(row) {
  //1.弹出提示框
  this.$confirm("此操作永久删除当前数据，是否继续？","提示",{
  type:'info'
  }).then(()=>{
  //2.做删除业务
  axios.delete("/books/"+row.id).then((res)=>{
  ……
  }).finally(()=>{
  this.getAll();
  });
  }).catch(()=>{
  //3.取消删除
  this.$message.info("取消删除操作");
  });
  }
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15
  16

4.15.3 小结

1. 请求方式使用Delete调用后台对应操作
2. 删除操作需要传递当前行数据对应的id值到后台
3. 删除操作结束后动态刷新页面加载数据
4. 根据操作结果不同，显示对应的提示信息
5. 删除操作前弹出提示框避免误操作