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

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

2023-01-12 474
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 批量删除也就是同时删除多条数据,首先要把所需要的数据选中, 批量删除它与删除的功能是一样的，只是它们删除的条数不同而已。当然批量删除的逻辑和知识点多，会比删除复杂一点。批量删除需要一个变量来接收返回值，然后获取选中行数据，再把选中行数据中的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
Spring Boot mybatis-plus
MyBatis springboot
MyBatis mybatis-plus
SuperProgMan.SYJ
目录
相关文章
蓝易云
|
2月前
|
SQL Java 数据库连接
对Spring、SpringMVC、MyBatis框架的介绍与解释
Spring 框架提供了全面的基础设施支持，Spring MVC 专注于 Web 层的开发，而 MyBatis 则是一个高效的持久层框架。这三个框架结合使用，可以显著提升 Java 企业级应用的开发效率和质量。通过理解它们的核心特性和使用方法，开发者可以更好地构建和维护复杂的应用程序。
蓝易云
139 29
可可dream乐乐-45653
|
2月前
|
JavaScript Java 测试技术
基于SpringBoot+Vue实现的留守儿童爱心网站设计与实现（计算机毕设项目实战+源码+文档）
博主是一位全网粉丝超过100万的CSDN特邀作者、博客专家，专注于Java、Python、PHP等技术领域。提供SpringBoot、Vue、HTML、Uniapp、PHP、Python、NodeJS、爬虫、数据可视化等技术服务，涵盖免费选题、功能设计、开题报告、论文辅导、答辩PPT等。系统采用SpringBoot后端框架和Vue前端框架，确保高效开发与良好用户体验。所有代码由博主亲自开发，并提供全程录音录屏讲解服务，保障学习效果。欢迎点赞、收藏、关注、评论，获取更多精品案例源码。
可可dream乐乐-45653
96 10
可可dream乐乐-45653
|
2月前
|
JavaScript Java 测试技术
基于SpringBoot+Vue实现的家政服务管理平台设计与实现（计算机毕设项目实战+源码+文档）
面向大学生毕业选题、开题、任务书、程序设计开发、论文辅导提供一站式服务。主要服务：程序设计开发、代码修改、成品部署、支持定制、论文辅导，助力毕设！
可可dream乐乐-45653
77 8
可可dream乐乐-45653
|
2月前
|
JavaScript 搜索推荐 Java
基于SpringBoot+Vue实现的家乡特色推荐系统设计与实现（源码+文档+部署）
面向大学生毕业选题、开题、任务书、程序设计开发、论文辅导提供一站式服务。主要服务：程序设计开发、代码修改、成品部署、支持定制、论文辅导，助力毕设！
可可dream乐乐-45653
92 8
可可dream乐乐-45653
|
2月前
|
JavaScript NoSQL Java
基于SpringBoot+Vue实现的大学生就业服务平台设计与实现（系统源码+文档+数据库+部署等）
面向大学生毕业选题、开题、任务书、程序设计开发、论文辅导提供一站式服务。主要服务：程序设计开发、代码修改、成品部署、支持定制、论文辅导，助力毕设！
可可dream乐乐-45653
107 6
可可dream乐乐-45653
|
2月前
|
JavaScript Java 测试技术
基于SpringBoot+Vue实现的高校食堂移动预约点餐系统设计与实现（源码+文档+部署）
面向大学生毕业选题、开题、任务书、程序设计开发、论文辅导提供一站式服务。主要服务：程序设计开发、代码修改、成品部署、支持定制、论文辅导，助力毕设！
可可dream乐乐-45653
82 3
可可dream乐乐-45653
|
2月前
|
JavaScript NoSQL Java
基于SpringBoot+Vue实现的大学生体质测试管理系统设计与实现（系统源码+文档+数据库+部署）
面向大学生毕业选题、开题、任务书、程序设计开发、论文辅导提供一站式服务。主要服务：程序设计开发、代码修改、成品部署、支持定制、论文辅导，助力毕设！
可可dream乐乐-45653
59 2
可可dream乐乐-45653
|
2月前
|
JavaScript NoSQL Java
基于SpringBoot+Vue实现的冬奥会科普平台设计与实现（系统源码+文档+数据库+部署）
面向大学生毕业选题、开题、任务书、程序设计开发、论文辅导提供一站式服务。主要服务：程序设计开发、代码修改、成品部署、支持定制、论文辅导，助力毕设！
可可dream乐乐-45653
65 0
众所周知
|
5月前
|
JavaScript 安全 Java
如何使用 Spring Boot 和 Ant Design Pro Vue 实现动态路由和菜单功能，快速搭建前后端分离的应用框架
本文介绍了如何使用 Spring Boot 和 Ant Design Pro Vue 实现动态路由和菜单功能，快速搭建前后端分离的应用框架。首先，确保开发环境已安装必要的工具，然后创建并配置 Spring Boot 项目，包括添加依赖和配置 Spring Security。接着，创建后端 API 和前端项目，配置动态路由和菜单。最后，运行项目并分享实践心得，包括版本兼容性、安全性、性能调优等方面。
众所周知
303 1
可可dream乐乐-45653
|
2月前
|
JavaScript Java 测试技术
基于Java+SpringBoot+Vue实现的车辆充电桩系统设计与实现（系统源码+文档+部署讲解等）
面向大学生毕业选题、开题、任务书、程序设计开发、论文辅导提供一站式服务。主要服务：程序设计开发、代码修改、成品部署、支持定制、论文辅导，助力毕设！
可可dream乐乐-45653
76 6

热门文章

最新文章

  • 1
    Springboot使用Redis实现分布式锁
  • 2
    基于SpringBoot的智慧停车场微信小程序源码分享
  • 3
    springBoot集成websocket实时消息推送
  • 4
    springboot-多环境配置文件
  • 5
    SpringBoot 实战 不同参数调用不同实现
  • 6
    【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗？-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
  • 7
    Pinia 如何在 Vue 3 项目中进行安装和配置？
  • 8
    vue渲染页面的原理
  • 9
    一、MyBatis简介：MyBatis历史、MyBatis特性、和其它持久化层技术对比、Mybatis下载依赖包流程
  • 10
    十一、MyBatis的逆向工程
  • 1
    Spring MVC 扩展和SSM框架整合
    16
  • 2
    如何在Spring Boot中实现数据加密
    27
  • 3
    Spring AI与DeepSeek实战二：打造企业级智能体
    76
  • 4
    SaaS云计算技术的智慧工地源码，基于Java+Spring Cloud框架开发
    18
  • 5
    🗄️Spring Boot 3 整合 MinIO 实现分布式文件存储
    97
  • 6
    Spring AI与DeepSeek实战一：快速打造智能对话应用
    278
  • 7
    Java 也能快速搭建 AI 应用？一文带你玩转 Spring AI 可观测性
    61
  • 8
    Spring Boot 实现通用 Auth 认证的 4 种方式
    38
  • 9
    Java 也能快速搭建 AI 应用？一文带你玩转 Spring AI 可观测性
    25
  • 10
    Spring AI Alibaba 应用框架挑战赛圆满落幕，恭喜获奖选手
    64

    • 相关课程

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

    • 相关电子书

    更多
  • Vue.js 在前端服务化上的探索与实践
  • Vue.js在前端服务化上的实践与探索
  • Java Spring Boot开发实战系列课程【第6讲】：Spring Boot 2.0实战MyBatis与优化(Java面试题)

    • 相关实验场景

    更多
  • 从零搭建Spring Boot的Hello World
    • 下一篇
    获取百炼API-KEY