SSMP整合案例(12) 在界面中实现删除操作

news2024/12/24 20:35:56

接下来我们来说删除
首先我们要在表格上加上删除和修改两个操作按钮
在这里插入图片描述
我们先在App.vue页面部分编写参考代码如下

<el-table-column
  align="right"
  label="操作"
>
  <template slot-scope="scope">
      <el-button
        size="mini"
        type="primary"
        @click="modify(scope.row.id)"
      >修改</el-button>
      <el-button
        size="mini"
        type="danger"
        @click="Indelete(scope.row)"
      >删除</el-button>
  </template>
</el-table-column>

在这里插入图片描述
然后在methods中定义一下这两个函数免得报错

modify(id) {
  console.log(id);
},
Indelete(item) {
    console.log(item);
},

在这里插入图片描述
我们的界面效果就成了这样

其中我们删除按钮点击调用了Indelete函数传入了一个scope.row
这是Element UI将当前用户点击的数据对象传入的方式
相对应修改中的scope.row.id 就是将用户点击的那一条数据的id传入
‘
然后我们得加一个操作我们不能说用户点击删除我们直接就给人家删掉了因为可能会出现不小心点到的情况

我们在 Indelete 函数中加入如下代码

this.$confirm(`您确定要对（${item.name}）图书进行删除吗？`, '提示', {
  confirmButtonText: '确定',
  cancelButtonText: '取消',
  type: 'warning'
}).then(() => {
  
}).catch(() => {
  this.$message({
    type: 'info',
    message: '您已取消'
  });          
});

在这里插入图片描述
这样我们点击时他就会让我们确认是否删除

然后看回我们java项目

我们这个 delete 函数接收一个路径参数 id
那么我们vue项目在 src下的 api下的bookApi.js 加入一个这样的函数

export function deleteBook(id){
    return request({
        url:`/books/${id}`,
        method:'delete'
    })
}

直接将参数id并在路径上发送一个delete请求即可
在这里插入图片描述
然后我们这里引入一下deleteBook

然后在 Indelete 方法的then 下添加如下代码

deleteBook(item.id).then(res => {
  if(res.state == 200) {
    this.$message({
      message: res.message,
      type: 'success'
    });
    this.getAll();
  }else{
    this.$message.error(res.message);
  }
}).catch(() => {
    this.$message.error("系统异常");
})