目錄

vue+springboot練手demo（一）——環(huán)境搭建
vue+springboot練手demo（二）——查詢功能的實(shí)現(xiàn)
vue+springboot練手demo（三）——?jiǎng)h除功能的實(shí)現(xiàn)
vue+springboot練手demo（四）——新增和修改功能的實(shí)現(xiàn)
vue+springboot練手demo（五）——校驗(yàn)功能
vue+springboot練手demo（六）——Swagger、Druid監(jiān)控和日志

刪除功能實(shí)現(xiàn)

職工刪除功能，功能為單個(gè)刪除和批量刪除

前端模塊開發(fā)

頁面修改

由于要做批量刪除，因此需要一個(gè)批量刪除的按鈕并且在表格數(shù)據(jù)的第一列要有一個(gè)多選框。

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

效果圖如下：

3-1 頁面改造.png

方法實(shí)現(xiàn)

刪除單條數(shù)據(jù)方法的實(shí)現(xiàn)

這個(gè)邏輯很簡單，只要獲取到這一列員工的id，將id傳給后臺，然后后臺在數(shù)據(jù)庫中刪除對應(yīng)id的員工信息即可。最后刪除成功后頁面給一個(gè)回饋的信息。

DelEmpById(id) {
  //發(fā)送刪除信息的請求
  this.$http.delete("Emps/emps/" + id).then(result => {
    //提示信息
    this.$message({
      message: '刪除成功！',
      type: 'success'
    });
    //重新加載數(shù)據(jù)
    this.findPage(this.currentpage);
  });
}

刪除多條數(shù)據(jù)方法的實(shí)現(xiàn)

首先添加實(shí)現(xiàn)全選的方法，其實(shí)是element-ui寫好的方法，拿過來直接用即可。

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

重頭戲來了，批量刪除方法的實(shí)現(xiàn)。這里我的方法可能有些復(fù)雜，我是發(fā)現(xiàn)之前的multipleSelection中會帶有每一列的信息，通過這個(gè)multipleSelection來獲取被選中的id的。
先來看看效果，當(dāng)沒有選中任何一條職工信息和選擇了一條職工信息時(shí)，點(diǎn)擊“批量刪除”按鈕，將multipleSelection打印出來會是什么效果。

3-2 id獲取(1).png

發(fā)現(xiàn)multipleSelection中會存有信息，我們選中一條員工信息，詳細(xì)的看看其中有哪些信息。

3-3 id獲取(2).png

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(","));
    //確認(rèn)刪除提示
    if (confirm("確認(rèn)刪除id為"+ids+"的員工嗎？")){
      this.DelEmpById(ids);
    }
  }
}

至此前端的部分基本就已經(jīng)完善了。

后端模塊開發(fā)

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();
}

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

測試

單個(gè)刪除

刪除姓名為“鹿素勛”的員工信息。

3-5 單個(gè)刪除測試.png

批量刪除

刪除姓名為“張勛力”和“傅嵐苑”的員工信息

3-6 批量刪除測試.png