vue+springboot练手demo（一）——环境搭建
 vue+springboot练手demo（二）——查询功能的实现
 vue+springboot练手demo（三）——删除功能的实现
 vue+springboot练手demo（四）——新增和修改功能的实现
 vue+springboot练手demo（五）——校验功能
 vue+springboot练手demo（六）——Swagger、Druid监控和日志

删除功能实现

职工删除功能，功能为单个删除和批量删除

前端模块开发

页面修改

由于要做批量删除，因此需要一个批量删除的按钮并且在表格数据的第一列要有一个多选框。

//在表格的第一列加上多选框
<el-table
    ref="multipleTable"
    :data="EmpsInfo"
    tooltip-effect="dark"
    style="width: 100%"
    //这里是实现全选多选框的方法
    @selection-change="handleSelectionChange"
    border>
    <el-table-column
    type="selection"
    width="55">
</el-table-column>
//在mothod中添加handleSelectionChange的实现
handleSelectionChange(val) {
    this.multipleSelection = val;
}

效果图如下：

3-1 页面改造.png

方法实现

删除单条数据方法的实现

这个逻辑很简单，只要获取到这一列员工的id，将id传给后台，然后后台在数据库中删除对应id的员工信息即可。最后删除成功后页面给一个回馈的信息。

DelEmpById(id) {
  //发送删除信息的请求
  this.$http.delete("Emps/emps/" + id).then(result => {
    //提示信息
    this.$message({
      message: '删除成功！',
      type: 'success'
    });
    //重新加载数据
    this.findPage(this.currentpage);
  });
}

删除多条数据方法的实现

首先添加实现全选的方法，其实是element-ui写好的方法，拿过来直接用即可。

handleSelectionChange(val) {
  this.multipleSelection = val;
}

重头戏来了，批量删除方法的实现。这里我的方法可能有些复杂，我是发现之前的multipleSelection中会带有每一列的信息，通过这个multipleSelection来获取被选中的id的。
先来看看效果，当没有选中任何一条职工信息和选择了一条职工信息时，点击“批量删除”按钮，将multipleSelection打印出来会是什么效果。

3-2 id获取(1).png

发现multipleSelection中会存有信息，我们选中一条员工信息，详细的看看其中有哪些信息。

3-3 id获取(2).png

这其中就有eid属性，我们就可以通过id来删除对应的职工信息了。通过上面的测试了解到只要有职工信息被选中了，那么在multipleSelection[i].eid就能够获取到对应的职工信息。
现在就可以来编写批量删除按钮的方法实现了。

DelEmpBtn() {
  let selection = this.multipleSelection;
  let ids = '';
  //判断是否有职工信息被选中
  if (selection.length == 0) {
    this.$message.error("未选中职工！");
  } else {
    //拼接id
    for (let i = 0; i < selection.length; i++) {
      ids += selection[i].eId + ",";
    }
    ids = ids.substring(0,ids.lastIndexOf(","));
    //确认删除提示
    if (confirm("确认删除id为"+ids+"的员工吗？")){
      this.DelEmpById(ids);
    }
  }
}

至此前端的部分基本就已经完善了。

后端模块开发

dao层与sql语句的编写

dao层

void DelById(String[] ids);

sql语句编写

<delete id="DelById" parameterType="string">
  delete from emps where e_id in
  <foreach collection="array" item="id" open="(" separator="," close=")">
    #{id}
  </foreach>
</delete>

service层的代码就省略了

controller层的编写

@DeleteMapping("/Emps/{ids}")
public Msg DelById(@PathVariable("ids") String ids){
  String[] split = ids.split(",");
  empsService.DelById(split);
  return Msg.success();
}

至此后端的代码也完成了。

测试

单个删除

删除姓名为“鹿素勋”的员工信息。

3-5 单个删除测试.png

批量删除

删除姓名为“张勋力”和“傅岚苑”的员工信息

3-6 批量删除测试.png

vue+springboot练手demo（三）——删除功能的实现

目录