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

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

2023-01-12 439
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 批量删除也就是同时删除多条数据,首先要把所需要的数据选中, 批量删除它与删除的功能是一样的，只是它们删除的条数不同而已。当然批量删除的逻辑和知识点多，会比删除复杂一点。批量删除需要一个变量来接收返回值，然后获取选中行数据，再把选中行数据中的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
Spring boot mybatis
MyBatis springboot
Spring Boot mybatis-plus
MyBatis mybatis-plus
SuperProgMan.SYJ
目录
相关文章
众所周知
|
2月前
|
JavaScript 安全 Java
如何使用 Spring Boot 和 Ant Design Pro Vue 实现动态路由和菜单功能，快速搭建前后端分离的应用框架
本文介绍了如何使用 Spring Boot 和 Ant Design Pro Vue 实现动态路由和菜单功能，快速搭建前后端分离的应用框架。首先，确保开发环境已安装必要的工具，然后创建并配置 Spring Boot 项目，包括添加依赖和配置 Spring Security。接着，创建后端 API 和前端项目，配置动态路由和菜单。最后，运行项目并分享实践心得，包括版本兼容性、安全性、性能调优等方面。
众所周知
181 1
众所周知
|
1月前
|
JavaScript 安全 Java
如何使用 Spring Boot 和 Ant Design Pro Vue 构建一个具有动态路由和菜单功能的前后端分离应用。
本文介绍了如何使用 Spring Boot 和 Ant Design Pro Vue 构建一个具有动态路由和菜单功能的前后端分离应用。首先，创建并配置 Spring Boot 项目，实现后端 API；然后，使用 Ant Design Pro Vue 创建前端项目，配置动态路由和菜单。通过具体案例，展示了如何快速搭建高效、易维护的项目框架。
众所周知
117 62
疯狂的猿
|
11天前
|
存储 JavaScript 前端开发
基于 SpringBoot 和 Vue 开发校园点餐订餐外卖跑腿Java源码
一个非常实用的校园外卖系统，基于 SpringBoot 和 Vue 的开发。这一系统源于黑马的外卖案例项目 经过站长的进一步改进和优化，提供了更丰富的功能和更高的可用性。 这个项目的架构设计非常有趣。虽然它采用了SpringBoot和Vue的组合，但并不是一个完全分离的项目。 前端视图通过JS的方式引入了Vue和Element UI，既能利用Vue的快速开发优势，
疯狂的猿
67 13
高端源码库
|
19天前
|
JavaScript 安全 Java
java版药品不良反应智能监测系统源码，采用SpringBoot、Vue、MySQL技术开发
基于B/S架构，采用Java、SpringBoot、Vue、MySQL等技术自主研发的ADR智能监测系统，适用于三甲医院，支持二次开发。该系统能自动监测全院患者药物不良反应，通过移动端和PC端实时反馈，提升用药安全。系统涵盖规则管理、监测报告、系统管理三大模块，确保精准、高效地处理ADR事件。
高端源码库
33 1
蓝易云
|
24天前
|
缓存 Java 数据库连接
深入探讨：Spring与MyBatis中的连接池与缓存机制
Spring 与 MyBatis 提供了强大的连接池和缓存机制，通过合理配置和使用这些机制，可以显著提升应用的性能和可扩展性。连接池通过复用数据库连接减少了连接创建和销毁的开销，而 MyBatis 的一级缓存和二级缓存则通过缓存查询结果减少了数据库访问次数。在实际应用中，结合具体的业务需求和系统架构，优化连接池和缓存的配置，是提升系统性能的重要手段。
蓝易云
37 4
蓝易云
|
24天前
|
SQL Java 数据库连接
spring和Mybatis的各种查询
Spring 和 MyBatis 的结合使得数据访问层的开发变得更加简洁和高效。通过以上各种查询操作的详细讲解，我们可以看到 MyBatis 在处理简单查询、条件查询、分页查询、联合查询和动态 SQL 查询方面的强大功能。熟练掌握这些操作，可以极大提升开发效率和代码质量。
蓝易云
35 3
蓝易云
|
29天前
|
Java 数据库连接 数据库
spring和Mybatis的逆向工程
通过本文的介绍，我们了解了如何使用Spring和MyBatis进行逆向工程，包括环境配置、MyBatis Generator配置、Spring和MyBatis整合以及业务逻辑的编写。逆向工程极大地提高了开发效率，减少了重复劳动，保证了代码的一致性和可维护性。希望这篇文章能帮助你在项目中高效地使用Spring和MyBatis。
蓝易云
18 1
java冯坚持
|
2月前
|
Java 数据库连接 Maven
mybatis使用一：springboot整合mybatis、mybatis generator，使用逆向工程生成java代码。
这篇文章介绍了如何在Spring Boot项目中整合MyBatis和MyBatis Generator，使用逆向工程来自动生成Java代码，包括实体类、Mapper文件和Example文件，以提高开发效率。
java冯坚持
146 2
mybatis使用一：springboot整合mybatis、mybatis generator，使用逆向工程生成java代码。
java冯坚持
|
2月前
|
SQL JSON Java
mybatis使用三：springboot整合mybatis，使用PageHelper 进行分页操作，并整合swagger2。使用正规的开发模式：定义统一的数据返回格式和请求模块
这篇文章介绍了如何在Spring Boot项目中整合MyBatis和PageHelper进行分页操作，并且集成Swagger2来生成API文档，同时定义了统一的数据返回格式和请求模块。
java冯坚持
76 1
mybatis使用三：springboot整合mybatis，使用PageHelper 进行分页操作，并整合swagger2。使用正规的开发模式：定义统一的数据返回格式和请求模块
东方睿赢
|
1月前
|
JavaScript 安全 Java
如何使用 Spring Boot 和 Ant Design Pro Vue 构建一个前后端分离的应用框架，实现动态路由和菜单功能
本文介绍了如何使用 Spring Boot 和 Ant Design Pro Vue 构建一个前后端分离的应用框架，实现动态路由和菜单功能。首先，确保开发环境已安装必要的工具，然后创建并配置 Spring Boot 项目，包括添加依赖和配置 Spring Security。接着，创建后端 API 和前端项目，配置动态路由和菜单。最后，运行项目并分享实践心得，帮助开发者提高开发效率和应用的可维护性。
东方睿赢
84 2

热门文章

最新文章

  • 1
    在idea中新建完springboot项目的时候遇到问题(右键没有class选择；控制台报错：Could not transfer artifact org.apache.tomcat.embed:tomcat-embed-core:jar:9.0.60 from/to central ....)
  • 2
    【SpringBoot】基于 Maven 的 pom.xml 配置详解
  • 3
    基于SpringBoot的精品在线试题库系统(系统+数据库+文档)
  • 4
    nacos每次springboot 升级 是不是cloud 与 cloud alibaba 也得升级呢?非常不幸的是 nacos 跟不上 s-boot的关系速度,你们认为我说的对么？
  • 5
    计算机机房作业管理系统 毕业设计 JAVA+Vue+SpringBoot+MySQL
  • 6
    SpringBoot的启动过程
  • 7
    基于SpringBoot+Vue+Java 的漫画之家系统（三）
  • 8
    SpringBoot 配置文件POM-【JSB系列之000】
  • 9
    dubbo + zookeeper + spring Boot框架整合与dubbo泛型调用演示3
  • 10
    SpringBoot的yaml
  • 1
    使用Vue.js构建交互式前端的技术探索
    91
  • 2
    ruoyi-nbcio-plus基于vue3的flowable为了适配文件上传改造VForm3的代码记录
    169
  • 3
    vue2升级到vue3的一些使用注意事项记录(四）
    132
  • 4
    ruoyi-nbcio-plus基于vue3的flowable收回任务后重新进行提交表单的处理
    151
  • 5
    ruoyi-nbcio-plus基于vue3的flowable多租户机制
    190
  • 6
    ruoyi-nbcio-plus基于vue3的flowable的消息中心我的消息的升级修改
    104
  • 7
    vue3中使用动态组件
    108
  • 8
    Vue 3 中 ＜transition-group＞ 组件报错的非 props 属性传递问题
    145
  • 9
    ruoyi-nbcio-plus基于vue3的flowable的自定义业务显示历史信息组件的升级修改
    76
  • 10
    ruoyi-nbcio-plus基于vue3的flowable的支持自定义业务流程处理页面detail.vue的升级修改
    123

    • 相关课程

    更多
  • Vue.js 入门与实战
  • Java Web开发系列课程 - Spring框架入门
  • Vue.js完全自学手册图文教程
  • Spring Boot 2.5.x开发实战
  • Spring Cloud微服务架构设计与开发实战
  • MyBatis持久层框架入门

    • 相关电子书

    更多
  • 云上Docker的Spring Cloud微服务应用实践分享
  • Vue.js 在前端服务化上的探索与实践
  • Vue.js在前端服务化上的实践与探索

    • 相关实验场景

    更多
  • 从零搭建Spring Boot的Hello World
    • 下一篇
    【案例实战】SpringBoot整合阿里云文件上传OSS