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

    目录


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

    准备工作

    • MySQL数据库表

    CREATE TABLE `user` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `name` varchar(30) COLLATE utf8mb4_unicode_ci DEFAULT NULL,
  `pwd` varchar(30) COLLATE utf8mb4_unicode_ci DEFAULT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=14 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6

    • Result返回结果

    package com.zhang.springboot.common;
import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;

@Data
@AllArgsConstructor
@NoArgsConstructor
public class Result<T> {
    private String code;
    private String msg;
    private T data;

    public static Result succeed(){
        return new Result(Constants.CODE_200,"成功",null);
    }
    public static Result succeed(Object data){
        return new Result(Constants.CODE_200,"成功",data);
    }
    public static Result succeed(String msg, Object data){
        return new Result(Constants.CODE_200,msg,data);
    }
    public static Result succeed(String code, String msg,Object data) {
        return new Result(Constants.CODE_200,msg,data);
    }

    public static Result error(String code, String msg,Object data){
        return new Result(code,msg,null);
    }


    public static Result error(String code, String msg) {
        return new Result(code,msg,msg);
    }
}


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36

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

    1.1、演示GIF动态图

    在这里插入图片描述

    1.2、实体类

    package com.zhang.springboot.entity;

import com.baomidou.mybatisplus.annotation.IdType;
import com.baomidou.mybatisplus.annotation.TableId;
import com.baomidou.mybatisplus.annotation.TableName;
import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;

@Data
@NoArgsConstructor
@AllArgsConstructor
@TableName("user")
public class User {
    @TableId(value = "id", type = IdType.AUTO)
    private Integer id;
    private String name;
    private String pwd;
}


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20

    1.3、Dao接口

    package com.zhang.springboot.mapper;
import com.baomidou.mybatisplus.core.mapper.BaseMapper;
import com.zhang.springboot.entity.User;
import org.apache.ibatis.annotations.Mapper;
@Mapper
public interface UserMapper extends BaseMapper<User> {

}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8

    1.4、Service接口

    package com.zhang.springboot.service;

import com.baomidou.mybatisplus.extension.service.IService;
import com.zhang.springboot.entity.User;
public interface UserService extends IService<User> {

}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7

    1.5、ServiceImpl接口实现层

    package com.zhang.springboot.service.impl;

import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;
import com.zhang.springboot.entity.User;
import com.zhang.springboot.mapper.UserMapper;
import com.zhang.springboot.service.UserService;
import org.springframework.stereotype.Service;

@Service
public class UserServiceImpl extends ServiceImpl<UserMapper, User> implements UserService {

}


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13

    1.6、Controller控制层

    package com.zhang.springboot.controller;

import com.zhang.springboot.common.Constants;
import com.zhang.springboot.common.Result;
import com.zhang.springboot.entity.User;
import com.zhang.springboot.mapper.UserMapper;
import com.zhang.springboot.service.UserService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;

import java.util.List;


@RestController
@RequestMapping("/user")
public class UserController {
    @Autowired
    private UserService userService;
    
	/**MyBatisPlus实现批量删除*/
    @PostMapping("/del")
    public boolean del(@RequestBody List<String> ids){
        return userService.removeByIds(ids);
    }
	/**查出所有数据*/
  	@PostMapping("/listUser")
    public Result listUser(){
       List<User> listAll =  userService.list();
       return Result.succeed(Constants.CODE_200,"渲染成功",listAll);
    }
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31

    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>


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69

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

    2.1、演示GIF动态图

    在这里插入图片描述

    2.2、实体类

    package com.zhang.springboot.entity;

import com.baomidou.mybatisplus.annotation.IdType;
import com.baomidou.mybatisplus.annotation.TableId;
import com.baomidou.mybatisplus.annotation.TableName;
import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;

@Data
@NoArgsConstructor
@AllArgsConstructor
@TableName("user")
public class User {
//    @TableId(type = IdType.ASSIGN_UUID)
    @TableId(value = "id", type = IdType.AUTO)
    private Integer id;
    private String name;
    private String pwd;
}


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21

    2.3、Dao接口

    	package com.zhang.springboot.mapper;

import com.baomidou.mybatisplus.core.mapper.BaseMapper;
import com.zhang.springboot.entity.User;
import org.apache.ibatis.annotations.Mapper;
import org.apache.ibatis.annotations.Param;

import java.util.List;

@Mapper
public interface UserMapper{
	/**查询全部*/
    List<User> listAll();
    
    /**批量删除*/
    int deleteByIds(@Param("flowIds") Integer[] flowIds);
}


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18

    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>


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20

    2.5、Service接口

    package com.zhang.springboot.service;

import com.zhang.springboot.common.Result;
public interface UserService{
	Result listAll();//查询全部
	
    Result deleteByIds(Integer[] flowIds);//批量删除
}


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9

    2.6、ServiceImpl接口实现层

    package com.zhang.springboot.service.impl;

import com.zhang.springboot.common.Result;
import com.zhang.springboot.entity.User;
import com.zhang.springboot.mapper.UserMapper;
import com.zhang.springboot.service.UserService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

@Service
public class UserServiceImpl implements UserService {

    @Autowired
    private UserMapper userMapper;
	
	/***
     * 查询全部
     */
    @Override
    public Result listAll() {
        List<User> listAll= userMapper.listAll();
        return Result.succeed(Constants.CODE_200,"查出全部成功",listAll);
    }

	/***
     * 批量删除
     */
    public Result deleteByIds(Integer[] flowIds) {
        userMapper.deleteByIds(flowIds);
        return Result.succeed(Constants.CODE_200,"批量删除成功");
    }
}


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33

    2.7、Controller控制层

    package com.zhang.springboot.controller;

import com.zhang.springboot.common.Result;
import com.zhang.springboot.service.UserService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;

@RestController
@RequestMapping("/user")
public class UserController {
    @Autowired
    private UserService userService;

    /**批量删除*/
    @GetMapping("/delEmps/{ids}")
    public Result delEmp(@PathVariable("ids") Integer[] ids){
        return userService.deleteByIds(ids);
    }

	/**查询全部*/
    @PostMapping("/listUser")
    public Result listUser(){
        return userService.listAll();
    }

}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26

    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>


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
  • 相关阅读:
    变分（Calculus of variations）的概念及运算规则（二）
    m基于3GPP-LTE通信网络的认知家庭网络Cognitive-femtocell性能matlab仿真
    记一次密码重置到后台GetShell
    LeetCode_排序_中等_912.排序数组
    nn.functional.interpolate
    Blazor VS Vue
    内存自动释放工具-Mem Reduct
    Jmeter核心使用教程
    ubuntu22.04desktop安装SSH(server)
    【设计模式】工厂模式总结
  • 原文地址：https://blog.csdn.net/m0_55400356/article/details/128122243