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

news/2024/10/19 9:32:38/

目录

  • 准备工作
    • MySQL数据库表
    • Result返回结果
  • 1、SpringBoot+MyBatisPlus+vue+ElementUl实现批量删除
    • 1.1、演示GIF动态图
    • 1.2、实体类
    • 1.3、Dao接口
    • 1.4、Service接口
    • 1.5、ServiceImpl接口实现层
    • 1.6、Controller控制层
    • 1.7、Vue前端
  • 2、SpringBoot+MyBatis+vue+ElementUl实现批量删除
    • 2.1、演示GIF动态图
    • 2.2、实体类
    • 2.3、Dao接口
    • 2.4、写SQL的xml文件
    • 2.5、Service接口
    • 2.6、ServiceImpl接口实现层
    • 2.7、Controller控制层
    • 2.8、Vue前端

批量删除也就是同时删除多条数据,首先要把所需要的数据选中, 批量删除它与删除的功能是一样的，只是它们删除的条数不同而已。当然批量删除的逻辑和知识点多，会比删除复杂一点。批量删除需要一个变量来接收返回值，然后获取选中行数据，再把选中行数据中的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 {@Autowiredprivate 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-popconfirmclass="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 {@Autowiredprivate UserMapper userMapper;/**** 查询全部*/@Overridepublic 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 {@Autowiredprivate 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-popconfirmclass="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>

http://www.ppmy.cn/news/664.html

相关文章

简单封装一个易拓展的Dialog

简单封装一个易拓展的Dialog

Dialog&#xff0c;每个项目中多多少少都会用到&#xff0c;肯定也会有自己的一套封装逻辑&#xff0c;无论如何封装&#xff0c;都是奔着简单复用的思想&#xff0c;有的是深层次的封装&#xff0c;也就是把相关的UI效果直接封装好&#xff0c;暴露可以修改的属性和方法&#…
阅读更多...
【吴恩达机器学习笔记】八、应用机器学习的建议

【吴恩达机器学习笔记】八、应用机器学习的建议

✍个人博客&#xff1a;https://blog.csdn.net/Newin2020?spm1011.2415.3001.5343 &#x1f4e3;专栏定位&#xff1a;为学习吴恩达机器学习视频的同学提供的随堂笔记。 &#x1f4da;专栏简介&#xff1a;在这个专栏&#xff0c;我将整理吴恩达机器学习视频的所有内容的笔记&…
阅读更多...
DataFrame API入门操作及代码展示

DataFrame API入门操作及代码展示

文章目录DataFrame风格编程DSL风格编程代码示例相关API相关代码示例SQL风格编程代码示例相关API相关代码Fucntions包基于SparkSQL的WordCount代码编写DataFrame风格编程 DataFrame支持两种风格进行编程 DSL风格SQL风格 DSL称之为领域特定语言&#xff0c;其实就是指DataFrame特…
阅读更多...
会员营销中，数字会员模式如何打造差异化会员服务

会员营销中，数字会员模式如何打造差异化会员服务

在现在的市场上&#xff0c;针对用户运营这个环节&#xff0c;一般企业采用最多的就是进行会员营销&#xff0c;这是为什么呢&#xff1f;这是因为对于会员&#xff0c;用户是没有过多的抵触的&#xff0c;在以往用户的惯有概念中&#xff0c;会员是普遍存在的&#xff0c;拥有…
阅读更多...
TensorFlow之文本分类算法-5

TensorFlow之文本分类算法-5

1 前言 2 收集数据 3 探索数据 4 选择模型 5 准备数据 6 模型-构建训练评估 构建输出层 构建n-gram模型 根据前面章节的描述&#xff0c;n-gram模型是独立地处理分词&#xff0c;与原文中的单词顺序不相关。简单的多层神经感知&#xff08;逻辑回归&#xff09;、梯度推…
阅读更多...
图神经网络简介

图神经网络简介

本篇文章是我在2022年阅读完distill上一篇文章"A Gentle Introduction to Graph Neural Networks"后自己的一些心得。 目录 一、不同类型的数据如何以图的形式保存 二、图结构可以处理的问题 三、图机器学习的挑战 四、图神经网络 一、不同类型的数据如何以图的…
阅读更多...
第十九章《类的加载与反射》第4节：注解

第十九章《类的加载与反射》第4节：注解

在8.10小节曾经简单的介绍过注解，但当时只是简单的介绍了3个注解的作用，本小节将详细讲解注解的相关知识。注解始于JDK1.5，在Java语言中以Annotation接口表示注解。注解其实是代码里的特殊标记，这些标记可以在编译、类加载、运行时被读取，并执行相应的处理。通过使用注解，…
阅读更多...
什么是短网址？如何调用接口生成短地址？

什么是短网址？如何调用接口生成短地址？

随着网络应用的深入和普及&#xff0c;网址资源越来越少了&#xff0c;长尾网址也派上用场了&#xff0c;只是网址太长不方便识别与记录。因此&#xff0c;就有了短网址替代长网址的技术接口。 随着SEO的重要性越来越明显&#xff0c;在推广的时候如果把网页链接缩短可以获得更…
阅读更多...
最新文章

Copyright @ 2022~2023