SpringBoot+MyBatis和MyBatisPlus+vue+ElementUl实现批量删除 我只能说太简单了

目录

批量删除也就是同时删除多条数据,首先要把所需要的数据选中, 批量删除它与删除的功能是一样的，只是它们删除的条数不同而已。当然批量删除的逻辑和知识点多，会比删除复杂一点。批量删除需要一个变量来接收返回值，然后获取选中行数据，再把选中行数据中的id获取到并把所有获取到的id进行拼接。确定用户选中了要删除的数据。判断返回来的值的长度，长度大于0说明用户已经选中要删除的数据，否则就提醒用户选择需要删除的数据， 删除成功后刷新表格，提醒用户已删除成功！

准备工作

• MySQL数据库表

CREATETABLE `user` (
  `id` int(11)NOTNULLAUTO_INCREMENT,
  `name` varchar(30)COLLATE utf8mb4_unicode_ci DEFAULTNULL,
  `pwd` varchar(30)COLLATE utf8mb4_unicode_ci DEFAULTNULL,PRIMARYKEY(`id`))ENGINE=InnoDBAUTO_INCREMENT=14DEFAULTCHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci

• Result返回结果

packagecom.zhang.springboot.common;importlombok.AllArgsConstructor;importlombok.Data;importlombok.NoArgsConstructor;@Data@AllArgsConstructor@NoArgsConstructorpublicclassResult<T>{privateString code;privateString msg;privateT data;publicstaticResultsucceed(){returnnewResult(Constants.CODE_200,"成功",null);}publicstaticResultsucceed(Object data){returnnewResult(Constants.CODE_200,"成功",data);}publicstaticResultsucceed(String msg,Object data){returnnewResult(Constants.CODE_200,msg,data);}publicstaticResultsucceed(String code,String msg,Object data){returnnewResult(Constants.CODE_200,msg,data);}publicstaticResulterror(String code,String msg,Object data){returnnewResult(code,msg,null);}publicstaticResulterror(String code,String msg){returnnewResult(code,msg,msg);}}

1、SpringBoot+MyBatisPlus+vue+ElementUl实现批量删除

1.1、演示GIF动态图

1.2、实体类

packagecom.zhang.springboot.entity;importcom.baomidou.mybatisplus.annotation.IdType;importcom.baomidou.mybatisplus.annotation.TableId;importcom.baomidou.mybatisplus.annotation.TableName;importlombok.AllArgsConstructor;importlombok.Data;importlombok.NoArgsConstructor;@Data@NoArgsConstructor@AllArgsConstructor@TableName("user")publicclassUser{@TableId(value ="id", type =IdType.AUTO)privateInteger id;privateString name;privateString pwd;}

1.3、Dao接口

packagecom.zhang.springboot.mapper;importcom.baomidou.mybatisplus.core.mapper.BaseMapper;importcom.zhang.springboot.entity.User;importorg.apache.ibatis.annotations.Mapper;@MapperpublicinterfaceUserMapperextendsBaseMapper<User>{}

1.4、Service接口

packagecom.zhang.springboot.service;importcom.baomidou.mybatisplus.extension.service.IService;importcom.zhang.springboot.entity.User;publicinterfaceUserServiceextendsIService<User>{}

1.5、ServiceImpl接口实现层

packagecom.zhang.springboot.service.impl;importcom.baomidou.mybatisplus.extension.service.impl.ServiceImpl;importcom.zhang.springboot.entity.User;importcom.zhang.springboot.mapper.UserMapper;importcom.zhang.springboot.service.UserService;importorg.springframework.stereotype.Service;@ServicepublicclassUserServiceImplextendsServiceImpl<UserMapper,User>implementsUserService{}

1.6、Controller控制层

packagecom.zhang.springboot.controller;importcom.zhang.springboot.common.Constants;importcom.zhang.springboot.common.Result;importcom.zhang.springboot.entity.User;importcom.zhang.springboot.mapper.UserMapper;importcom.zhang.springboot.service.UserService;importorg.springframework.beans.factory.annotation.Autowired;importorg.springframework.web.bind.annotation.*;importjava.util.List;@RestController@RequestMapping("/user")publicclassUserController{@AutowiredprivateUserService userService;/**MyBatisPlus实现批量删除*/@PostMapping("/del")publicbooleandel(@RequestBodyList<String> ids){return userService.removeByIds(ids);}/**查出所有数据*/@PostMapping("/listUser")publicResultlistUser(){List<User> listAll =  userService.list();returnResult.succeed(Constants.CODE_200,"渲染成功",listAll);}}

1.7、Vue前端

<template><el-popconfirm
                  class="ml-5"
                  confirm-button-text='好的'
                  cancel-button-text='不用了'
                  icon="el-icon-info"
                  icon-color="red"
                  title="您确定删除吗？"@confirm="delBath"><el-button plain class="el-icon-circle-close" type="danger" slot="reference">批量删除</el-button></el-popconfirm><el-table :data="tableData" border header-cell-class-name="header"@selection-change="handleSelectionChange"><el-table-column type="selection" width="55"></el-table-column><el-table-column type="index" label="序号" width="140"></el-table-column><el-table-column prop="name" label="用户账号" width="140"></el-table-column><el-table-column prop="pwd" label="用户密码" width="140"></el-table-column><el-table-column label="操作"></el-table-column></el-table></template><script>
  export default{
    name:"User",data(){return{
        tableData:[],
        ids:[],}},mounted(){this.load()},
    methods:{handleSelectionChange(val){this.ids = val.map(v => v.id)this.$message.warning("选择了"+this.ids.length+"条数据");},load(){this.request.post("/user/listUser").then((res)=>{this.tableData = res.data;})},delBath(){if(!this.ids.length){this.$message.warning("请选择数据！")return}this.request.post("/user/del",this.ids).then(res =>{if(res){this.$message.success("MyBatisPlus批量删除成功！");this.load()}else{this.$message.error("删除失败！");}})},}}</script><style scoped></style>

2、SpringBoot+MyBatis+vue+ElementUl实现批量删除

2.1、演示GIF动态图

2.2、实体类

packagecom.zhang.springboot.entity;importcom.baomidou.mybatisplus.annotation.IdType;importcom.baomidou.mybatisplus.annotation.TableId;importcom.baomidou.mybatisplus.annotation.TableName;importlombok.AllArgsConstructor;importlombok.Data;importlombok.NoArgsConstructor;@Data@NoArgsConstructor@AllArgsConstructor@TableName("user")publicclassUser{//    @TableId(type = IdType.ASSIGN_UUID)@TableId(value ="id", type =IdType.AUTO)privateInteger id;privateString name;privateString pwd;}

2.3、Dao接口

packagecom.zhang.springboot.mapper;importcom.baomidou.mybatisplus.core.mapper.BaseMapper;importcom.zhang.springboot.entity.User;importorg.apache.ibatis.annotations.Mapper;importorg.apache.ibatis.annotations.Param;importjava.util.List;@MapperpublicinterfaceUserMapper{/**查询全部*/List<User>listAll();/**批量删除*/intdeleteByIds(@Param("flowIds")Integer[] flowIds);}

2.4、写SQL的xml文件

<?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.zhang.springboot.mapper.UserMapper"><!--多选删除--><delete id="deleteByIds" parameterType="Integer">
        delete from user where id in
        <foreach collection="flowIds" item="id"open="(" separator="," close=")">
            #{id}</foreach></delete><select id="listAll" resultType="com.zhang.springboot.entity.User">
        select * from user
    </select></mapper>

2.5、Service接口

packagecom.zhang.springboot.service;importcom.zhang.springboot.common.Result;publicinterfaceUserService{ResultlistAll();//查询全部ResultdeleteByIds(Integer[] flowIds);//批量删除}

2.6、ServiceImpl接口实现层

packagecom.zhang.springboot.service.impl;importcom.zhang.springboot.common.Result;importcom.zhang.springboot.entity.User;importcom.zhang.springboot.mapper.UserMapper;importcom.zhang.springboot.service.UserService;importorg.springframework.beans.factory.annotation.Autowired;importorg.springframework.stereotype.Service;@ServicepublicclassUserServiceImplimplementsUserService{@AutowiredprivateUserMapper userMapper;/***
     * 查询全部
     */@OverridepublicResultlistAll(){List<User> listAll= userMapper.listAll();returnResult.succeed(Constants.CODE_200,"查出全部成功",listAll);}/***
     * 批量删除
     */publicResultdeleteByIds(Integer[] flowIds){
        userMapper.deleteByIds(flowIds);returnResult.succeed(Constants.CODE_200,"批量删除成功");}}

2.7、Controller控制层

packagecom.zhang.springboot.controller;importcom.zhang.springboot.common.Result;importcom.zhang.springboot.service.UserService;importorg.springframework.beans.factory.annotation.Autowired;importorg.springframework.web.bind.annotation.*;@RestController@RequestMapping("/user")publicclassUserController{@AutowiredprivateUserService userService;/**批量删除*/@GetMapping("/delEmps/{ids}")publicResultdelEmp(@PathVariable("ids")Integer[] ids){return userService.deleteByIds(ids);}/**查询全部*/@PostMapping("/listUser")publicResultlistUser(){return userService.listAll();}}

2.8、Vue前端

<template><el-popconfirm
                  class="ml-5"
                  confirm-button-text='好的'
                  cancel-button-text='不用了'
                  icon="el-icon-info"
                  icon-color="red"
                  title="您确定删除吗？"@confirm="delBath"><el-button plain class="el-icon-circle-close" type="danger" slot="reference">批量删除</el-button></el-popconfirm><el-table :data="tableData" border header-cell-class-name="header"@selection-change="handleSelectionChange"><el-table-column type="selection" width="55"></el-table-column><el-table-column type="index" label="序号" width="140"></el-table-column><el-table-column prop="name" label="用户账号" width="140"></el-table-column><el-table-column prop="pwd" label="用户密码" width="140"></el-table-column><el-table-column label="操作"></el-table-column></el-table></template><script>
  export default{
    name:"User",data(){return{
        tableData:[],
        ids:[],}},mounted(){this.load()},
    methods:{handleSelectionChange(val){this.ids = val.map(v => v.id)this.$message.warning("选择了"+this.ids.length+"条数据");},load(){this.request.post("/user/listUser").then((res)=>{this.tableData = res.data;})},delBath(){if(!this.ids.length){this.$message.warning("请选择数据！")return}this.request.get("/user/delEmps/"+this.ids).then(res =>{this.$message.success("MyBatis批量删除成功！");this.load()})},</script><style scoped></style>