AI 助理
备案控制台
开发者社区 数据库 文章 正文

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

2023-01-12 602
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 批量删除也就是同时删除多条数据,首先要把所需要的数据选中, 批量删除它与删除的功能是一样的，只是它们删除的条数不同而已。当然批量删除的逻辑和知识点多，会比删除复杂一点。批量删除需要一个变量来接收返回值，然后获取选中行数据，再把选中行数据中的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>
文章标签：
JavaScript
前端开发
SQL
关系型数据库
MySQL
数据格式
数据库
XML
关键词：
Spring boot vue
MyBatis mybatis-plus
Spring boot mybatis
Spring Boot mybatis-plus
MyBatis springboot
SuperProgMan.SYJ
目录
相关文章
友点佳浩
|
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开发的会议预约管理系统
net936
|
5月前
|
前端开发 Java 关系型数据库
基于Java+Springboot+Vue开发的鲜花商城管理系统源码+运行
基于Java+Springboot+Vue开发的鲜花商城管理系统（前后端分离），这是一项为大学生课程设计作业而开发的项目。该系统旨在帮助大学生学习并掌握Java编程技能，同时锻炼他们的项目设计与开发能力。通过学习基于Java的鲜花商城管理系统项目，大学生可以在实践中学习和提升自己的能力，为以后的职业发展打下坚实基础。技术学习共同进步
net936
414 7
友点佳浩
|
1月前
|
前端开发 JavaScript Java
基于springboot+vue开发的校园食堂评价系统【源码+sql+可运行】【50809】
本系统基于SpringBoot与Vue3开发，实现校园食堂评价功能。前台支持用户注册登录、食堂浏览、菜品查看及评价发布；后台提供食堂、菜品与评价管理模块，支持权限控制与数据维护。技术栈涵盖SpringBoot、MyBatisPlus、Vue3、ElementUI等，适配响应式布局，提供完整源码与数据库脚本，可直接运行部署。
友点佳浩
73 0
基于springboot+vue开发的校园食堂评价系统【源码+sql+可运行】【50809】
Quan_Chen
|
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`
Quan_Chen
278 0
2G冲浪词条
|
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`注解完成整合
2G冲浪词条
563 1
Spring boot 使用mybatis generator 自动生成代码插件
啦啦啦191
|
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对象模型实现案例。通过分层设计和对象转换，实现了业务逻辑与数据访问的解耦，提高了代码的可维护性和扩展性。
啦啦啦191
155 1
Unfailed_realme
|
2月前
|
SQL Java 数据库连接
Spring、SpringMVC 与 MyBatis 核心知识点解析
我梳理的这些内容，涵盖了 Spring、SpringMVC 和 MyBatis 的核心知识点。 在 Spring 中，我了解到 IOC 是控制反转，把对象控制权交容器；DI 是依赖注入，有三种实现方式。Bean 有五种作用域，单例 bean 的线程安全问题及自动装配方式也清晰了。事务基于数据库和 AOP，有失效场景和七种传播行为。AOP 是面向切面编程，动态代理有 JDK 和 CGLIB 两种。 SpringMVC 的 11 步执行流程我烂熟于心，还有那些常用注解的用法。 MyBatis 里，#{} 和 ${} 的区别很关键，获取主键、处理字段与属性名不匹配的方法也掌握了。多表查询、动态
Unfailed_realme
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开发

热门文章

最新文章

  • 1
    Spring Cloud Gateway 全解析：路由配置、断言规则与过滤器实战指南
  • 2
    深度剖析【Spring】事务：万字详解，彻底掌握传播机制与事务原理
  • 3
    微服务配置管理：Spring Cloud Config 实践指南
  • 4
    Spring 微服务和多租户：处理多个客户端
  • 5
    【Spring】原理解析：Spring Boot 自动配置
  • 6
    Spring Cloud 常见注解解析
  • 7
    Spring Boot 技术详解与应用实践
  • 8
    Spring Cloud 微服务架构技术解析与实践指南
  • 9
    Spring Batch 批处理框架技术详解与实践指南
  • 10
    Spring中@Cacheable、@CacheEvict以及其他缓存相关注解的实用介绍
  • 1
    基于springboot的健康饮食营养管理系统
    29
  • 2
    基于springboot的摄影器材租赁回收系统
    40
  • 3
    基于springboot的4s店汽车试驾销售服务系统
    33
  • 4
    基于springboot的旅游门票预定系统
    29
  • 5
    基于springboot的大学生心理咨询管理系统
    41
  • 6
    基于springboot的半成品配菜管理系统
    22
  • 7
    基于springboot的游乐园管理系统
    46
  • 8
    基于Spring AI Alibaba + Spring Boot + Ollama搭建本地AI对话机器人API
    79
  • 9
    SpringBoot整合MQTT实战：基于EMQX实现双向设备通信
    63
  • 10
    Spring Boot四层架构深度解析
    83

    • 相关课程

    更多
  • SpringBoot快速掌握 - 核心技术
  • SpringBoot快速掌握 - 高级应用
  • Vue.js 入门与实战
  • Vue.js完全自学手册图文教程
  • Springboot项目云开发快速迁移
  • MyBatis持久层框架入门

    • 相关电子书

    更多
  • Vue.js 在前端服务化上的探索与实践
  • Java Spring Boot开发实战系列课程【第6讲】：Spring Boot 2.0实战MyBatis与优化(Java面试题)
  • Vue.js在前端服务化上的实践与探索
    • 下一篇
    2025云栖大会，阿里云百炼邀请您的参与和见证