记录一下前后端分离开发时数据的批量删除功能，以供参考

后端

实体类

实体类自己定义一个就行啦，有id字段和基本信息即可
我这里用的是House，后面方法中的House实体类和字段名记得换成自己的

数据层

Dao层定义delete接口,这里参数用Long[]或者Integer[]都行

	/**
     * 批量删除
     *
     * @param houseIds 需要删除的ID
     * @return 结果
     */
    public int deleteByIds(Long[] houseIds);

XML划重点,这是批量的关键,使用foreach语句遍历id数组

	<delete id="deleteByIds" parameterType="Long">
        delete from house where id in
        <foreach collection="array" item="houseId" open="(" separator="," close=")">
            #{houseId}
        </foreach>
    </delete>

业务层

定义批量删除的业务接口

	/**
     * 批量删除房源
     * @param houseIds 需要删除的房源ID
     * @return 结果
     */
    public int deleteByIds(Long[] houseIds);

业务处理,里面的for语句是为了判断,可以删掉,加上@Transactional是为了提供事务回滚

	/**
     * 批量删除房源
     * @param houseIds 需要删除的房源ID
     * @return 结果
     */
    @Override
    @Transactional
    public int deleteByIds(Long[] houseIds) {

        for (Long houseId : houseIds){
            if (StringUtils.isNotEmpty(houseId.toString())){

                throw new CustomException("id存在空值!");
            }
        }
        return houseDao.deleteByIds(houseIds);
    }

控制层

Controller传入参数,返回结果

	/**
     * 批量删除
     * @param houseIds 房源id数组
     * @return rows > 0 ? AjaxResult.success() : AjaxResult.error();
     */
    @DeleteMapping("/batchDelete/{houseIds}")
    public AjaxResult batchDelete(@PathVariable Long[] houseIds) {
        return toAjax(houseService.deleteByIds(houseIds));
    }

后端接口如上,有错误可以评论指教一下

前端

数据区

data添加一个ids[],用于存储选择到的id

ids: [],//批量删除id

HTML

页面添加一个批量删除按钮,点击事件为batchDelete(ids)

      <el-button
          type="danger"
          plain
          icon="el-icon-delete"
          size="mini"
          @click="batchDelete(ids)"
      >批量删除
      </el-button>

在table上添加选择事件handleSelectionChange,并添加一列选择框

<el-table :data="houseList" border 
              style="width: 95%;margin-top: 10px" height="500px"
              @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="50" align="center"/>

方法区

定义两个方法获取选中的数据和删除
其中的return batchDelete(rows)为api调用,需要定义相应api并导入

	/** 多选框选中数据 */
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
    },

    /** 批量删除房源 */
    batchDelete(rows) {
      if (rows.length !== 0) {
        this.$confirm('是否确认删除这' + rows.length + '条数据?', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(function () {
          return batchDelete(rows)
        }).then(() => {
          this.created()
          this.msgSuccess('删除成功')
        })
      } else {
        this.msgWarning('未选择数据！')
      }
    },

api.js相关代码,已设置地址重写则直接写url后半部分,没设置的话则直接把请求地址补充完整即可
重写地址可以参考前后端分离开发之Vue跨域

import axios from 'axios'

// 删除需求
export function batchDelete(ids) {
    return axios({
        url: '/house/batchDelete/' + ids,
        method: 'delete'
    })
}

效果图

记录到此结束，希望这篇文章对兄弟姐妹们有作用！