vue+springboot+mybatis-plus改装

2024-04-22 15:36
文章标签 java javascript springboot vue spring frontend mybatis plus 改装

本文主要是介绍vue+springboot+mybatis-plus改装，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

①添加依赖

<!-- mybatis-plus -->
<dependency><groupId>com.baomidou</groupId><artifactId>mybatis-plus-boot-starter</artifactId><version>3.5.3.2</version>
</dependency>

pom.xml:

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd"><modelVersion>4.0.0</modelVersion><groupId>com.example</groupId><artifactId>springboot</artifactId><version>0.0.1-SNAPSHOT</version><name>springboot</name><description>springboot</description><properties><java.version>1.8</java.version><project.build.sourceEncoding>UTF-8</project.build.sourceEncoding><project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding><spring-boot.version>2.7.6</spring-boot.version></properties><dependencies><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-web</artifactId></dependency><dependency><groupId>org.mybatis.spring.boot</groupId><artifactId>mybatis-spring-boot-starter</artifactId><version>2.3.0</version></dependency><!-- mybatis-plus --><dependency><groupId>com.baomidou</groupId><artifactId>mybatis-plus-boot-starter</artifactId><version>3.5.3.2</version></dependency><dependency><groupId>com.mysql</groupId><artifactId>mysql-connector-j</artifactId><scope>runtime</scope></dependency><dependency><groupId>cn.hutool</groupId><artifactId>hutool-all</artifactId><version>5.8.18</version></dependency><!-- JWT --><dependency><groupId>com.auth0</groupId><artifactId>java-jwt</artifactId><version>4.3.0</version></dependency><dependency><groupId>org.projectlombok</groupId><artifactId>lombok</artifactId><optional>true</optional></dependency><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-test</artifactId><scope>test</scope></dependency></dependencies><dependencyManagement><dependencies><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-dependencies</artifactId><version>${spring-boot.version}</version><type>pom</type><scope>import</scope></dependency></dependencies></dependencyManagement><build><plugins><plugin><groupId>org.apache.maven.plugins</groupId><artifactId>maven-compiler-plugin</artifactId><version>3.8.1</version><configuration><source>1.8</source><target>1.8</target><encoding>UTF-8</encoding></configuration></plugin><plugin><groupId>org.springframework.boot</groupId><artifactId>spring-boot-maven-plugin</artifactId><version>${spring-boot.version}</version><configuration><mainClass>com.example.springboot.SpringbootApplication</mainClass><skip>true</skip></configuration><executions><execution><id>repackage</id><goals><goal>repackage</goal></goals></execution></executions></plugin></plugins></build></project>

②新建MybatisPlusConfig配置页

MybatisPlusConfig:分页插件

package com.example.springboot.common;import com.baomidou.mybatisplus.annotation.DbType;
import com.baomidou.mybatisplus.extension.plugins.MybatisPlusInterceptor;
import com.baomidou.mybatisplus.extension.plugins.inner.PaginationInnerInterceptor;
import org.mybatis.spring.annotation.MapperScan;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;@Configuration
@MapperScan("com.example.springboot.mapper")
public class MybatisPlusConfig {/*** 添加分页插件*/@Beanpublic MybatisPlusInterceptor mybatisPlusInterceptor() {MybatisPlusInterceptor interceptor = new MybatisPlusInterceptor();interceptor.addInnerInterceptor(new PaginationInnerInterceptor(DbType.MYSQL));//如果配置多个插件,切记分页最后添加return interceptor;}
}

 ③修改实体类User

User：

package com.example.springboot.entity;import com.baomidou.mybatisplus.annotation.IdType;
import com.baomidou.mybatisplus.annotation.TableField;
import com.baomidou.mybatisplus.annotation.TableId;
import com.baomidou.mybatisplus.annotation.TableName;
import lombok.AllArgsConstructor;
import lombok.Data;@Data
@TableName("user")
public class User {@TableId(type= IdType.AUTO)private Integer id;private String username;private String password;private String name;private String phone;private String email;private String address;private String avatar;private String role;@TableField(exist = false)private String token;
}

 ④修改UserMapper

UserMapper：

package com.example.springboot.mapper;import com.baomidou.mybatisplus.core.mapper.BaseMapper;
import com.example.springboot.entity.User;
import org.apache.ibatis.annotations.*;import java.util.List;public interface UserMapper extends BaseMapper<User> {@Select("select * from user where id=#{id}")User selectbyid(Integer id);
}

 ⑤修改UserService

UserService：

package com.example.springboot.service;import cn.hutool.core.util.StrUtil;
import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;
import com.example.springboot.entity.User;
import com.example.springboot.exception.ServiceException;
import com.example.springboot.mapper.UserMapper;
import com.example.springboot.utils.TokenUtils;
import jdk.nashorn.internal.parser.Token;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import org.springframework.web.bind.annotation.RequestBody;import javax.annotation.Resource;
import java.util.Collection;
import java.util.List;@Service
public class UserService extends ServiceImpl<UserMapper,User> {@ResourceUserMapper userMapper;@Overridepublic boolean save(User entity){if(StrUtil.isBlank(entity.getName())){entity.setName(entity.getUsername());}if(StrUtil.isBlank(entity.getPassword())){entity.setPassword("123");}if(StrUtil.isBlank(entity.getRole())){entity.setRole("用户");}return super.save(entity);}public User selectbyUsername(String username){QueryWrapper<User> queryWrapper=new QueryWrapper<>();queryWrapper.eq("username",username);return getOne(queryWrapper);}public User login(User user) {User dbuser=selectbyUsername(user.getUsername());if(dbuser == null){throw new ServiceException("账号不存在");}if(!user.getPassword().equals(dbuser.getPassword())){throw new ServiceException("账号或者密码错误");}String token=TokenUtils.createToken(dbuser.getId().toString(),dbuser.getPassword());dbuser.setToken(token);return dbuser;}public User register(User user) {User dbuser=selectbyUsername(user.getUsername());if(dbuser != null){throw new ServiceException("用户名已存在");}userMapper.insert(user);return user;}public void resetPassword(User user) {User dbuser=selectbyUsername(user.getUsername());if(dbuser==null){throw new ServiceException("用户不存在");}if(!user.getPhone().equals(dbuser.getPhone())){throw new ServiceException("验证错误");}dbuser.setPassword("123");updateById(dbuser);}
}

⑥修改UserController：

UserConrtoller：

package com.example.springboot.controller;import cn.hutool.core.util.StrUtil;
import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
import com.baomidou.mybatisplus.core.metadata.IPage;
import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
import com.example.springboot.common.Result;
import com.example.springboot.entity.User;
import com.example.springboot.exception.ServiceException;
import com.example.springboot.service.UserService;
import com.example.springboot.utils.TokenUtils;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.dao.DuplicateKeyException;
import org.springframework.web.bind.annotation.*;import java.util.List;@CrossOrigin
@RestController
@RequestMapping("/user")
public class UserController {@AutowiredUserService userservice;@PostMapping("/add")public Result add(@RequestBody User user){try{userservice.save(user);}catch(Exception e){if(e instanceof DuplicateKeyException){return Result.error("插入数据错误");}else{return Result.error("系统错误");}}return Result.success();}@PutMapping("/update")public Result update(@RequestBody User user){userservice.updateById(user);return Result.success();}@DeleteMapping("/delete/{id}")public Result delete(@PathVariable Integer id){User currentUser= TokenUtils.getCurrentUser();if(id.equals(currentUser.getId())){throw new ServiceException("不能删除当前用户");}userservice.removeById(id);return Result.success();}@DeleteMapping("/delete/batch")public Result batchDelete(@RequestBody List<Integer> ids){User currentUser=TokenUtils.getCurrentUser();if(currentUser != null&&currentUser.getId()!=null &&ids.contains(currentUser.getId())){throw new ServiceException("不能删除当前用户");}userservice.removeBatchByIds(ids);return Result.success();}@GetMapping("/selectall")public Result selectall(){List<User>userlist=userservice.list(new QueryWrapper<User>().orderByDesc("id"));return Result.success(userlist);}@GetMapping("/selectbyid/{id}")public Result selectbyid(@PathVariable Integer id){User user=userservice.getById(id);return Result.success(user);}@GetMapping("/selectByPage")public Result selectByPage(@RequestParam Integer pageNum,@RequestParam Integer pageSize,@RequestParam String username,@RequestParam String name){QueryWrapper<User>queryWrapper=new QueryWrapper<User>().orderByDesc("id");queryWrapper.like(StrUtil.isNotBlank(username),"username",username);queryWrapper.like(StrUtil.isNotBlank(name),"name",name);Page<User>page=userservice.page(new Page<>(pageNum,pageSize),queryWrapper);return Result.success(page);}
}

⑦修改前端User页

 User：

<template><div><div><el-input style="width: 200px" placeholder="查询用户名" v-model="username"></el-input><el-input style="width: 200px;margin: 0 10px" placeholder="查询姓名" v-model="name"></el-input><el-button type="primary" @click="load(1)">查询</el-button><el-button type="info" @click="reset">重置</el-button></div><div style="margin: 10px 0"><el-button type="primary" @click="handleAdd">新增</el-button><el-button type="danger" @click="delbatch">批量删除</el-button></div><el-table  @selection-change="handleSelectionChange" :data="tableData" stripe :header-cell-style="{backgroundColor:'aliceblue',color:'#666'} "><el-table-column type="selection" width="55" align="center"></el-table-column><el-table-column prop="id" label="ID" width="70"></el-table-column><el-table-column prop="username" label="用户名"></el-table-column><el-table-column prop="name" label="姓名"></el-table-column><el-table-column prop="phone" label="手机号"></el-table-column><el-table-column prop="email" label="邮箱"></el-table-column><el-table-column prop="address" label="地址"></el-table-column><el-table-column label="头像"><template v-slot="scope"><div style="display: flex;align-items: center"><el-image style="width: 50px;height: 50px;border-radius: 50%" v-if="scope.row.avatar" :src="scope.row.avatar" :preview-src-list="[scope.row.avatar]"></el-image></div></template></el-table-column><el-table-column prop="role" label="角色"></el-table-column><el-table-column label="操作" align="center" width="180"><template v-slot="scope"><div style="display: flex"><el-button type="primary" plain size="mini" @click="handleEdit(scope.row)">编辑</el-button><el-button type="danger" plain size="mini" @click="del(scope.row.id)">删除</el-button></div></template></el-table-column></el-table><div class="block" style="margin: 10px 0"><span class="demonstration">完整功能</span><el-pagination@current-change="handleCurrentChange":current-page="pageNum":page-sizes="[100, 200, 300, 400]":page-size="pageSize"layout="total, prev, pager, next":total="total"></el-pagination></div><el-dialog title="收货地址" :visible.sync="formVisible" width="30%"><el-form :model="form" label-width="80px" style="padding-right: 20px" :rules="rules" ref="formRef"><el-form-item label="用户名" prop="username"><el-input v-model="form.username" ></el-input></el-form-item><el-form-item label="姓名" prop="name"><el-input v-model="form.name"></el-input></el-form-item><el-form-item label="电话" prop="phone"><el-input v-model="form.phone"></el-input></el-form-item><el-form-item label="邮箱" prop="email"><el-input v-model="form.email"></el-input></el-form-item><el-form-item label="地址" prop="address"><el-input type="textarea" v-model="form.address"></el-input></el-form-item><el-form-item label="角色" prop="role"><el-radio-group v-model="form.role"><el-radio label="管理员"></el-radio><el-radio label="用户"></el-radio></el-radio-group></el-form-item><el-form-item label="头像"><el-uploadclass="avatar-uploader"action="http://localhost:9090/file/upload":headers="{ token: user.token }":file-list="form.avatar?[form.avatar]:[]"list-type="picture":on-success="handleAvatarSuccess"><el-button type="primary">上传头像</el-button></el-upload></el-form-item></el-form><div slot="footer" class="dialog-footer"><el-button @click="dialogFormVisible = false">取 消</el-button><el-button type="primary" @click="save">确 定</el-button></div></el-dialog></div>
</template><script>
export default {name:'User',data(){return{tableData:[],pageNum:1,pageSize:5,username:'',name:'',total:0,formVisible:false,form:{},user:JSON.parse(localStorage.getItem('honey-user'||'{}')),rules:{username:[{required:true,message:'请输入用户名',trigger:'blur'}]},ids:[]}},created() {this.load()},methods:{delbatch(){if(!this.ids.length){this.$message.warning("请选择数据")return}this.$confirm('您确认删除吗','确认删除',{type:'warning'}).then(response=>{this.$request.delete('/user/delete/batch',{data:this.ids}).then(res=>{if(res.code === '200'){this.$message.success('操作成功')this.load(1)}else{this.$message.error(res.msg)}})}).catch(()=>{})},handleSelectionChange(rows){this.ids=rows.map(v=>v.id)},del(id){this.$confirm('您确认删除吗','确认删除',{type:'warning'}).then(response=>{this.$request.delete('/user/delete/'+id).then(res=>{if(res.code === '200'){this.$message.success('操作成功')this.load(1)}else{this.$message.error(res.msg)}})}).catch(()=>{})},handleEdit(row){this.form=JSON.parse(JSON.stringify(row))this.formVisible=true},handleAdd(){this.form={role:'用户'}this.formVisible=true},save(){this.$refs.formRef.validate((valid)=>{if(valid){this.$request({url:this.form.id? '/user/update' : '/user/add',method:this.form.id? 'PUT' : 'POST',data:this.form}).then(res=>{if(res.code === '200'){this.$message.success('保存成功')this.load(1)this.formVisible=false}else{this.$message.error(res.msg)}})}})},handleAvatarSuccess(response,file,fileList){console.log(response)this.form.avatar=response.data},reset(){this.name=''this.username=''this.load()},load(pageNum){if(pageNum){this.pageNum=pageNum}this.$request.get('/user/selectByPage',{params:{pageNum:this.pageNum,pageSize:this.pageSize,username:this.username,name:this.name}}).then(res=>{this.tableData=res.data.recordsthis.total=res.data.total})},handleCurrentChange(pageNum){this.load(pageNum)},}
}
</script><style scoped></style>

这篇关于vue+springboot+mybatis-plus改装的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/926164。

相关文章

Java实战之利用POI生成Excel图表

Java实战之利用POI生成Excel图表

《Java实战之利用POI生成Excel图表》ApachePOI是Java生态中处理Office文档的核心工具,这篇文章主要为大家详细介绍了如何在Excel中创建折线图,柱状图,饼图等常见图表,需要的... 目录一、环境配置与依赖管理二、数据源准备与工作表构建三、图表生成核心步骤1. 折线图（Line Ch
阅读更多...
如何使用CSS3实现波浪式图片墙

如何使用CSS3实现波浪式图片墙

《如何使用CSS3实现波浪式图片墙》：本文主要介绍了如何使用CSS3的transform属性和动画技巧实现波浪式图片墙，通过设置图片的垂直偏移量，并使用动画使其周期性地改变位置，可以创建出动态且具有波浪效果的图片墙，同时，还强调了响应式设计的重要性，以确保图片墙在不同设备上都能良好显示，详细内容请阅读本文，希望能对你有所帮助...
阅读更多...
CSS3 最强二维布局系统之Grid 网格布局

CSS3 最强二维布局系统之Grid 网格布局

《CSS3最强二维布局系统之Grid网格布局》CS3的Grid网格布局是目前最强的二维布局系统,可以同时对列和行进行处理,将网页划分成一个个网格,可以任意组合不同的网格,做出各种各样的布局，本文介... 深入学习 css3 目前最强大的布局系统 Grid 网格布局Grid 网格布局的基本认识Grid 网
阅读更多...
HTML5中下拉框＜select＞标签的属性和样式详解

HTML5中下拉框＜select＞标签的属性和样式详解

《HTML5中下拉框＜select＞标签的属性和样式详解》在HTML5中，下拉框（select标签）作为表单的重要组成部分，为用户提供了一个从预定义选项中选择值的方式,本文将深入探讨select标签的... 在html5中，下拉框（<select>标签）作为表单的重要组成部分，为用户提供了一个从预定义选项中
阅读更多...
Spring Boot 3 整合 Spring Cloud Gateway实践过程

Spring Boot 3 整合 Spring Cloud Gateway实践过程

《SpringBoot3整合SpringCloudGateway实践过程》本文介绍了如何使用SpringCloudAlibaba2023.0.0.0版本构建一个微服务网关,包括统一路由、限... 目录引子为什么需要微服务网关实践1.统一路由2.限流防刷3.登录鉴权小结引子当前微服务架构已成为中大型系统的标
阅读更多...
Java集合中的List超详细讲解

Java集合中的List超详细讲解

《Java集合中的List超详细讲解》本文详细介绍了Java集合框架中的List接口,包括其在集合中的位置、继承体系、常用操作和代码示例,以及不同实现类（如ArrayList、LinkedList和V... 目录一，List的继承体系二，List的常用操作及代码示例1，创建List实例2，增加元素3，访问元
阅读更多...
前端 CSS 动态设置样式：:class、:style 等技巧(推荐)

前端 CSS 动态设置样式：:class、:style 等技巧(推荐)

《前端CSS动态设置样式：:class、:style等技巧(推荐)》：本文主要介绍了Vue.js中动态绑定类名和内联样式的两种方法：对象语法和数组语法，通过对象语法，可以根据条件动态切换类名或样式；通过数组语法，可以同时绑定多个类名或样式，此外，还可以结合计算属性来生成复杂的类名或样式对象，详细内容请阅读本文，希望能对你有所帮助...
阅读更多...
Java中将异步调用转为同步的五种实现方法

Java中将异步调用转为同步的五种实现方法

《Java中将异步调用转为同步的五种实现方法》本文介绍了将异步调用转为同步阻塞模式的五种方法：wait/notify、ReentrantLock+Condition、Future、CountDownL... 目录异步与同步的核心区别方法一：使用wait/notify + synchronized代码示例关键
阅读更多...
Java 8 Stream filter流式过滤器详解

Java 8 Stream filter流式过滤器详解

《Java8Streamfilter流式过滤器详解》本文介绍了Java8的StreamAPI中的filter方法,展示了如何使用lambda表达式根据条件过滤流式数据,通过实际代码示例,展示了f... 目录引言 一.Java 8 Stream 的过滤器（filter）二.Java 8 的 filter、fi
阅读更多...
Java中实现订单超时自动取消功能(最新推荐)

Java中实现订单超时自动取消功能(最新推荐)

《Java中实现订单超时自动取消功能(最新推荐)》本文介绍了Java中实现订单超时自动取消功能的几种方法,包括定时任务、JDK延迟队列、Redis过期监听、Redisson分布式延迟队列、Rocket... 目录1、定时任务2、JDK延迟队列 DelayQueue（1）定义实现Delayed接口的实体类 （
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2