SpringBoot+MyBatis和MyBatisPlus+vue+ElementUl实现批量删除

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

批量删除也就是同时删除多条数据,首先要把所需要的数据选中, 批量删除它与删除的功能是一样的,只是它们删除的条数不同而已。当然批量删除的逻辑和知识点多,会比删除复杂一点。批量删除需要一个变量来接收返回值,然后获取选中行数据,再把选中行数据中的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
  • 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、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.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.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.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.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.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、实体类

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;
}

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);
}

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接口

package com.zhang.springboot.service;

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

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,"批量删除成功");
    }
}

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();
    }

}

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>
相关文章
|
5天前
|
前端开发 安全 Java
基于springboot+vue开发的会议预约管理系统
一个完整的会议预约管理系统,包含前端用户界面、管理后台和后端API服务。 ### 后端 - **框架**: Spring Boot 2.7.18 - **数据库**: MySQL 5.6+ - **ORM**: MyBatis Plus 3.5.3.1 - **安全**: Spring Security + JWT - **Java版本**: Java 11 ### 前端 - **框架**: Vue 3.3.4 - **UI组件**: Element Plus 2.3.8 - **构建工具**: Vite 4.4.5 - **状态管理**: Pinia 2.1.6 - **HTTP客户端
58 4
基于springboot+vue开发的会议预约管理系统
|
5月前
|
前端开发 Java 关系型数据库
基于Java+Springboot+Vue开发的鲜花商城管理系统源码+运行
基于Java+Springboot+Vue开发的鲜花商城管理系统(前后端分离),这是一项为大学生课程设计作业而开发的项目。该系统旨在帮助大学生学习并掌握Java编程技能,同时锻炼他们的项目设计与开发能力。通过学习基于Java的鲜花商城管理系统项目,大学生可以在实践中学习和提升自己的能力,为以后的职业发展打下坚实基础。技术学习共同进步
414 7
|
1月前
|
前端开发 JavaScript Java
基于springboot+vue开发的校园食堂评价系统【源码+sql+可运行】【50809】
本系统基于SpringBoot与Vue3开发,实现校园食堂评价功能。前台支持用户注册登录、食堂浏览、菜品查看及评价发布;后台提供食堂、菜品与评价管理模块,支持权限控制与数据维护。技术栈涵盖SpringBoot、MyBatisPlus、Vue3、ElementUI等,适配响应式布局,提供完整源码与数据库脚本,可直接运行部署。
73 0
基于springboot+vue开发的校园食堂评价系统【源码+sql+可运行】【50809】
|
6月前
|
XML Java 数据库连接
微服务——SpringBoot使用归纳——Spring Boot集成MyBatis——基于 xml 的整合
本教程介绍了基于XML的MyBatis整合方式。首先在`application.yml`中配置XML路径,如`classpath:mapper/*.xml`,然后创建`UserMapper.xml`文件定义SQL映射,包括`resultMap`和查询语句。通过设置`namespace`关联Mapper接口,实现如`getUserByName`的方法。Controller层调用Service完成测试,访问`/getUserByName/{name}`即可返回用户信息。为简化Mapper扫描,推荐在Spring Boot启动类用`@MapperScan`注解指定包路径避免逐个添加`@Mapper`
278 0
|
3月前
|
Java 数据库连接 数据库
Spring boot 使用mybatis generator 自动生成代码插件
本文介绍了在Spring Boot项目中使用MyBatis Generator插件自动生成代码的详细步骤。首先创建一个新的Spring Boot项目,接着引入MyBatis Generator插件并配置`pom.xml`文件。然后删除默认的`application.properties`文件,创建`application.yml`进行相关配置,如设置Mapper路径和实体类包名。重点在于配置`generatorConfig.xml`文件,包括数据库驱动、连接信息、生成模型、映射文件及DAO的包名和位置。最后通过IDE配置运行插件生成代码,并在主类添加`@MapperScan`注解完成整合
563 1
Spring boot 使用mybatis generator 自动生成代码插件
|
3月前
|
Java 数据库连接 API
Java 对象模型现代化实践 基于 Spring Boot 与 MyBatis Plus 的实现方案深度解析
本文介绍了基于Spring Boot与MyBatis-Plus的Java对象模型现代化实践方案。采用Spring Boot 3.1.2作为基础框架,结合MyBatis-Plus 3.5.3.1进行数据访问层实现,使用Lombok简化PO对象,MapStruct处理对象转换。文章详细讲解了数据库设计、PO对象实现、DAO层构建、业务逻辑封装以及DTO/VO转换等核心环节,提供了一个完整的现代化Java对象模型实现案例。通过分层设计和对象转换,实现了业务逻辑与数据访问的解耦,提高了代码的可维护性和扩展性。
155 1
|
2月前
|
SQL Java 数据库连接
Spring、SpringMVC 与 MyBatis 核心知识点解析
我梳理的这些内容,涵盖了 Spring、SpringMVC 和 MyBatis 的核心知识点。 在 Spring 中,我了解到 IOC 是控制反转,把对象控制权交容器;DI 是依赖注入,有三种实现方式。Bean 有五种作用域,单例 bean 的线程安全问题及自动装配方式也清晰了。事务基于数据库和 AOP,有失效场景和七种传播行为。AOP 是面向切面编程,动态代理有 JDK 和 CGLIB 两种。 SpringMVC 的 11 步执行流程我烂熟于心,还有那些常用注解的用法。 MyBatis 里,#{} 和 ${} 的区别很关键,获取主键、处理字段与属性名不匹配的方法也掌握了。多表查询、动态
112 0
|
3月前
|
监控 数据可视化 JavaScript
springboot + vue的MES系统生产计划管理源码
MES系统(制造执行系统)的生产计划管理功能是其核心模块之一,涵盖生产计划制定与优化、调度排程、进度监控反馈、资源管理调配及可视化报告五大方面。系统基于SpringBoot + Vue-Element-Plus-Admin技术栈开发,支持多端应用(App、小程序、H5、后台)。通过实时数据采集与分析,MES助力企业优化生产流程,适用于现代化智能制造场景。
149 1
|
3月前
|
SQL Java 数据库
解决Java Spring Boot应用中MyBatis-Plus查询问题的策略。
保持技能更新是侦探的重要素质。定期回顾最佳实践和新技术。比如,定期查看MyBatis-Plus的更新和社区的最佳做法,这样才能不断提升查询效率和性能。
152 1
|
4月前
|
供应链 JavaScript BI
ERP系统源码,基于SpringBoot+Vue+ElementUI+UniAPP开发
这是一款专为小微企业打造的 SaaS ERP 管理系统,基于 SpringBoot+Vue+ElementUI+UniAPP 技术栈开发,帮助企业轻松上云。系统覆盖进销存、采购、销售、生产、财务、品质、OA 办公及 CRM 等核心功能,业务流程清晰且操作简便。支持二次开发与商用,提供自定义界面、审批流配置及灵活报表设计,助力企业高效管理与数字化转型。
434 2
ERP系统源码,基于SpringBoot+Vue+ElementUI+UniAPP开发