SpringBoot+Vue实现批量删除

解决思路

实现批量删除的办法其实有很多，我这里是把批量传入的id放进数组里，然后后端用foreach标签循环遍历删除。

前端

前端获取参数id，根据官方提供的方法，首先在data里定义一个空数组，我这里叫multipleSelection[ ]，

然后官方又提供了一个事件叫@selection-change，根据官网说明： 当选择项发生变化时会触发该事件 ，所以通过调用这个方法来判断你选择了哪些。

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

然后id获取到了开始想着怎么把这些数据当初参数传进请求里；

先遍历multipleSelection获取里面的id，然后把它拼接成 ?ids=xxx?ids=xxx?ids=…，怎么实现呢？

let ids = '?';
 this.multipleSelection.forEach(item => {
    
    
        ids += 'ids=' + item.id + '&';
 })

后端

控制层代码

    @DeleteMapping("/")
    public RespBean deletePositionsByIds(Integer[] ids)
    {
    
    
        if (positionService.deletePositionsByIds(ids) == ids.length)
        {
    
    
            return RespBean.ok("删除成功！");
        }
        return RespBean.error("删除失败！");
    }

持久层
服务层和Mapper的接口不必多说，主要是动态SQL的写法，我觉得很值得我去学习

 <delete id="deletePositionByAll">
    delete from position where id in
    <foreach collection="ids" item="id" open="(" close=")" separator=",">
      #{id}
    </foreach>
  </delete>

他拼接出来的效果应该是 delete from position where id in (1,2,3…)这样的

参数说明：

1. foreach循环标签
2. collection集合对象，也就是数组参数
3. item 迭代集合时，元素的别名
4. open：包裹被迭代集合元素的开始符号，一般为"("
5. close：包裹被迭代集合元素的结束符号，一般为")"
6. separator：被迭代元素之间的分隔符，一般为","

后续

这次二刷微人事，主要目的在于记录springboot和vue对接时出现的一些问题，和常用的技术点，我认为这很有用。另外每天的代码我都会提交到码云上https://gitee.com/thirtyleo/dashboard/projects
而且每天的技术点我都会用Typora记录总结下来，而且会推到gitee里，方便各位老铁查看。
这里再次安利一个软件Typora，一款十分好用的Markdown编辑器，本人用着十分顺手，如果有喜欢做代码笔记的朋友可以下载使用，电脑管家里面就可以下。