Springboot+Vue快速实现批量删除功能

图书类别信息的增删改查

图书类别表type

CREATE TABLE `type` (
    `id` int(10) NOT NULL AUTO_INCREMENT COMMENT '主键ID',
`name` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT '分类名称',
`description` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT '分类介绍',
PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=8 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci COMMENT='图书分类表';

实体类Type.java

import javax.persistence.*;

@Table(name = "type")
public class Type {

    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private Integer id;

    @Column(name = "name")
    private String name;
    @Column(name = "description")
    private String description;

}

Type.dao和TypeMapper.xml

import com.example.entity.Params;
import com.example.entity.Type;
import org.apache.ibatis.annotations.Param;
import org.springframework.stereotype.Repository;
import tk.mybatis.mapper.common.Mapper;

import java.util.List;


@Repository
public interface TypeDao extends Mapper<Type> {

    List<Type> findBySearch(@Param("params") Params params);
}

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.example.dao.TypeDao">

<select id="findBySearch" resultType="com.example.entity.Type">
select * from type
<where>
<if test="params != null and params.name != null and params.name != ''">
and name like concat('%', #{ params.name }, '%')
</if>
</where>
</select>

</mapper>

TypeService.java

import com.example.dao.TypeDao;
import com.example.entity.Params;
import com.example.entity.Type;
import com.github.pagehelper.PageHelper;
import com.github.pagehelper.PageInfo;
import org.springframework.stereotype.Service;

import javax.annotation.Resource;
import java.util.List;


@Service
public class TypeService {

    @Resource
    private TypeDao typeDao;


    public void add(Type type) {
        typeDao.insertSelective(type);
    }

    public void update(Type type) {
        typeDao.updateByPrimaryKeySelective(type);
    }

    public PageInfo<Type> findBySearch(Params params) {
        // 开启分页查询
        PageHelper.startPage(params.getPageNum(), params.getPageSize());
        // 接下来的查询会自动按照当前开启的分页设置来查询
        List<Type> list = typeDao.findBySearch(params);
        return PageInfo.of(list);
    }

    public void delete(Integer id) {
        typeDao.deleteByPrimaryKey(id);
    }
}

TypeController.java

import com.example.common.Result;
import com.example.entity.Params;
import com.example.entity.Type;
import com.example.service.TypeService;
import com.github.pagehelper.PageInfo;
import org.springframework.web.bind.annotation.*;

import javax.annotation.Resource;
import java.util.List;

@CrossOrigin
@RestController
@RequestMapping("/type")
public class TypeController {

    @Resource
    private TypeService typeService;

    @PostMapping
    public Result save(@RequestBody Type type) {
        if (type.getId() == null) {
            typeService.add(type);
        } else {
            typeService.update(type);
        }
        return Result.success();
    }

    @GetMapping("/search")
    public Result findBySearch(Params params) {
        PageInfo<Type> info = typeService.findBySearch(params);
        return Result.success(info);
    }

    @DeleteMapping("/{id}")
    public Result delete(@PathVariable Integer id) {
        typeService.delete(id);
        return Result.success();
    }

    @PutMapping("/delBatch")
    public Result delBatch(@RequestBody List<Type> list) {
        for (Type type : list) {
            typeService.delete(type.getId());
        }
        return Result.success();
    }

}

Vue页面的批量删除控件

对应勾选控件和批量删除按钮

<el-popconfirm title="确定删除这些数据吗？" @confirm="delBatch()">
<el-button slot="reference" type="danger" style="margin-left: 5px">批量删除</el-button>
</el-popconfirm>

<el-table :data="tableData" style="width: 100%" ref="table" @selection-change="handleSelectionChange" :row-key="getRowKeys">
<el-table-column ref="table" type="selection" width="55" align="center" :reserve-selection="true"></el-table-column>
</el-table>

多选事件以及批量删除事件

multipleSelection: []

delBatch() {
    if (this.multipleSelection.length === 0) {
        this.$message.warning("请勾选您要删除的项")
        return
    }
    request.put("/type/delBatch", this.multipleSelection).then(res => {
        if (res.code === '0') {
            this.$message.success("批量删除成功")
            this.findBySearch()
        } else {
            this.$message.error(res.msg)
        }
    })
},
handleSelectionChange(val) {
    this.multipleSelection = val;
},
getRowKeys(row) {
    return row.id;
}

后台批量删除接口

@PutMapping("/delBatch")
public Result delBatch(@RequestBody List<Type> list) {
    for (Type type : list) {
        typeService.delete(type.getId());
    }
    return Result.success();
}