- 🚀 注重版权，转载请注明原作者和原文链接
- 🥭 作者：Yuan-Programmer
- 🍎 主页：https://blog.csdn.net/weixin_47971206/article/details/121368075?spm=1001.2014.3001.5502
- 🍉 进来的小伙伴点点赞呀
本案例第二篇教程地址：SpringBoot+Vue实现简单用户管理平台第二篇（前端设计，接口对接）
demo地址预览（域名正在审核，将就ip访问）：http://43.138.223.178/user-manager
花了几个小时做了一个SpringBoot+Vue的简单用户管理demo项目，适合新手教程，项目已在Gitee上开源，Gitee开源地址：https://gitee.com/yuandewei/Yuan-SpringBoot/tree/master
Gitee上开源的代码跟本次的案例的代码有些区别，本次案例稍微改了一点点，不过不影响Gitee上的项目运行，大致效果如下，功能可以访问demo地址测试哦
前言
开发环境
开发工具就不多介绍啦，就IDEA做后端，VSCode做前端，用其他的也都可以
技术
本次后端用到的技术呢： 主要就两个，SpringBoot + MyBatisPlus
前端的技术用到的技术： Vue，结合脚手架以及element ui框架开发前端
表设计
既然是用户管理嘛，肯定有用户表，我们先来设计表结构
这里说明一点，这次案例是新手教程，着重讲解功能的实现，所以用户信息参数方面就没有那么严格的校验，一般像号码这种字段肯定是设置为 char(11) 并且后端要校验的
创建Maven工程
创建一个空的Maven项目，大家应该都会了吧，还不会的小伙伴看之前的其他项目教程哦（我个人习惯创建maven工程，你喜欢直接创建springboot项目也可以，）
我这里创建好了一个 user-manager的maven项目，创建好项目，点击右下角选择自动导入，没有弹出来也没关系
引入依赖
<parent>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-parent</artifactId>
<version>2.2.1.RELEASE</version>
<relativePath/>
</parent>
<properties>
<java.version>1.8</java.version>
</properties>
<dependencies>
<!-- MyBatis-Plus依赖 -->
<dependency>
<groupId>com.baomidou</groupId>
<artifactId>mybatis-plus-boot-starter</artifactId>
<version>3.5.0</version>
</dependency>
<!-- 数据库驱动 -->
<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
<scope>runtime</scope>
</dependency>
<!-- Web启动依赖 -->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<!-- SpringBoot测试依赖 -->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-test</artifactId>
<scope>test</scope>
</dependency>
<!-- Lombok -->
<dependency>
<groupId>org.projectlombok</groupId>
<artifactId>lombok</artifactId>
<optional>true</optional>
</dependency>
<!-- 处理JSON的 -->
<dependency>
<groupId>com.alibaba</groupId>
<artifactId>fastjson</artifactId>
<version>1.2.76</version>
</dependency>
</dependencies>
基本配置
创建 com.xiaoyuan.usermanager 目录，新建一个启动类 UserManagerApplication
@SpringBootApplication
public class UserManagerApplication {
public static void main(String[] args) {
SpringApplication.run(UserManagerApplication.class, args);
}
}
在 resources 资源目录下新建 application.yml 配置文件
图片有误，少了时间格式转换三行代码，看下面
server:
# 端口
port: 8081
spring:
# 数据源配置
datasource:
driver-class-name: com.mysql.cj.jdbc.Driver
url: jdbc:mysql:///l_user?useUnicode=true&characterEncoding=UTF-8&serverTimezone=GMT%2B8
username: xiaoyuan
password: root
# 时间格式转换
jackson:
time-zone: GMT+8
date-format: yyyy-MM-dd HH:mm:ss
mybatis-plus:
# mapper文件映射路径
mapper-locations: classpath*:mapper/*.xml
configuration:
# 打印SQL语句
log-impl: org.apache.ibatis.logging.stdout.StdOutImpl
db层
entity实体类
新建 db 包，在 db 包下新建 entity 和 mapper 两个包，在 entity 包下新建一个 User 类
注意一下，图片里 describe 有个注解忘记加上了，以下面代码为准
@Data
public class User {
// 主键ID
@TableId(value = "id", type = IdType.AUTO)
private Integer id;
// 用户名
private String username;
// 昵称
private String nickname;
// 密码
private String password;
// 号码
private String phone;
// 性别
private Character sex;
// 描述
@TableField(value = "`describe`") // describe属于数据库关键字，加上``区分
private String describe;
// 创建时间
@TableField(fill = FieldFill.INSERT) // insert操作时自动注入时间
private Date gmtCreate;
}
mapper数据访问层
在 mapper 包下新建一个 UserMapper，继承MyBatisPlus的 BaseMapper 类，作为DAO层操作数据
MyBaitsPlus配置
这里创建的两个包都与db包同级目录
config配置类
创建一个config包，新建一个MyBatisPlusConfig 类
@Configuration
public class MyBatisPlusConfig {
/* 分页插件 */
@Bean
public MybatisPlusInterceptor mybatisPlusInterceptor() {
MybatisPlusInterceptor interceptor = new MybatisPlusInterceptor();
// 开启
interceptor.addInnerInterceptor(new PaginationInnerInterceptor());
return interceptor;
}
}
handler处理
新建一个 handler 包，包下新建一个 MyMetaObjectHandler 类，实现 MetaObjectHandler 类，改类有两个方法，一个insert…在向数据库插入数据的时候，会自动插入我们设置的值
@Component
public class MyMetaObjectHandler implements MetaObjectHandler {
/**
* 新增数据执行
*
* insert插入数据到数据库操作时执行
*/
@Override
public void insertFill(MetaObject metaObject) {
// 配置初始创建时间
this.setFieldValByName("gmtCreate", new Date(), metaObject);
}
/**
* 修改数据执行
*
* update修改数据库数据操作时执行
*/
@Override
public void updateFill(MetaObject metaObject) {
}
}
这里的 this.setFi… 第一个参数对应的是User实体类的名字，不是表中的字段名，第二个参数的默认值
Vo对象
新建一个 vo 包，用于和前端交互数据的类
统一结果返回类
vo 包下新建一个 R 类，作为我们统一返回给前端数据的类，
@Data
public class R {
private Boolean success;
private Integer code;
private String message;
private Map<String, Object> data = new HashMap<>();
// 把构造方法私有化
private R() {}
// 成功静态方法
public static R ok() {
R r = new R();
r.setSuccess(true);
r.setCode(200);
r.setMessage("成功");
return r;
}
// 失败静态方法
public static R error() {
R r = new R();
r.setSuccess(false);
r.setCode(201);
r.setMessage("失败");
return r;
}
public R success(Boolean success){
this.setSuccess(success);
return this;
}
public R message(String message){
this.setMessage(message);
return this;
}
public R code(Integer code){
this.setCode(code);
return this;
}
public R data(String key, Object value){
this.data.put(key, value);
return this;
}
}
vo 包下新建 QueryParam 类
@Data
public class QueryParam {
// 用户名
private String username;
// 昵称
private String nickname;
// 号码
private String phone;
// 性别
private String sex;
// 创建时间
private String time;
}
这里讲一下吧，这个类是用来干嘛的呢？我们在效果展示的时候，是不是在上面看到有5个筛选条件，这5个筛选条件参数刚好对应类中的5个属性，我们统一封装起来
service业务层
新建一个 service 包，包下新建一个 UserService 接口类，继承MyBatisPlus的 IService 类
service 包下新建 impl 包，新建一个 UserServiceImpl 实现类，继承MyBatisPlus的 ServiceImpl 类，实现我们自己的 UserService 类
我们先在 UserService 接口类定义五个方法，接下来我们一一实现这五个功能
public interface UserService extends IService<User> {
/**
* 添加用户
* @param user
* @return
*/
R insertUser(User user);
/**
* 删除单个用户
* @param id 用户编号
* @return
*/
R deleteUser(Integer id);
/**
* 删除多个用户
* @param ids 用户编号集合
* @return
*/
R deleteUserMore(List<Integer> ids);
/**
* 编辑用户
* @param user
* @return
*/
R modifyUser(User user);
/**
* 分页查询用户列表
* @param index 当前页
* @param size 每页显示数量
* @param queryParam 筛选条件对象
* @return
*/
R findUserList(Integer index, Integer size, QueryParam queryParam);
/**
* 查询单个用户详细信息
* @param id 用户编号
* @return
*/
R getUserInfoById(Integer id);
}
添加用户
UserServiceImpl 实现类里实现添加用户方法，这里只做了简单的非空判断，其他参数的非法性校验可以自己额外完善
@Override
public R insertUser(User user) {
if (user == null) return R.error().message("参数错误");
// 用户名
String username = user.getUsername();
// 构建条件对象, 查询是否已经存在用户名
QueryWrapper<User> wrapper = new QueryWrapper<>();
wrapper.select("id");
wrapper.eq("username", username);
wrapper.last("limit 1");
// 查询判断, 如果查询出来有数据, 则不为null
if (this.baseMapper.selectOne(wrapper) != null) R.error().message("该用户名已存在");
// 执行插入数据操作
return this.baseMapper.insert(user) == 0 ? R.error().message("添加用户失败") : R.ok();
}
删除用户
删除用户就比较简单啦，肯定有人会问，前端做了非空校验，后端怎么还要做参数校验校验呢？
其实前后端都做是最好的，有绕过前端发送请求的，就比如我们自己测试接口时用的postman, apifox，后端多做一层校验，避免直接操作数据库，我这里也是比较简单的做了校验
@Override
public R deleteUser(Integer id) {
if (id == null || id <= 0) return R.error().message("参数错误");
return this.baseMapper.deleteById(id) == 0 ? R.error().message("删除失败") : R.ok();
}
一键删除多个用户
删除多个用户也没难度，将多个用户的编号放到一个集合中，一次删除多个
@Override
public R deleteUserMore(List<Integer> ids) {
if (ids.size() == 0) return R.error().message("参数错误");
return this.baseMapper.deleteBatchIds(ids) != ids.size() ? R.error().message("删除失败") : R.ok();
}
编辑用户
这个也没什么难度，做个简单校验，然后根据ID更新用户信息（参数其他合法性校验可以自己额外做哦）
@Override
public R modifyUser(User user) {
if (user == null || user.getId() == null || user.getId() <= 0) return R.error().message("参数错误");
return this.baseMapper.updateById(user) == 0 ? R.error().message("编辑用户失败") : R.ok();
}
获取单个用户信息
先实现这个吧，这个也很简单，直接通过用户编号查询用户的信息返回即可
@Override
public R getUserInfoById(Integer id) {
if (id == null || id <= 0) return R.error().message("参数错误");
return R.ok().data("userInfo", this.baseMapper.selectById(id));
}
查询用户列表
先创建编写SQL语句的文件，在 resources 下新建 mapper 包，包下新建 UserMapper.xml 文件
代码中的SQL语句不能包含注释，所以我在图片给出了每行的注释，代码中删掉了，对应看着
<?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">
<!-- namespace路径根据自己而定 -->
<mapper namespace="com.xiaoyuan.usermanager.db.mapper.UserMapper">
<!-- 查询用户列表（带多条件） -->
<select id="findUserList" resultType="com.xiaoyuan.usermanager.db.entity.User">
select *
from user
<where>
1 = 1
<if test="queryParam != null">
<if test="queryParam.username != null and queryParam.username != ''">
and username = #{queryParam.username}
</if>
<if test="queryParam.nickname != null and queryParam.nickname != ''">
and nickname like CONCAT(#{queryParam.nickname}, '%')
</if>
<if test="queryParam.phone != null and queryParam.phone != ''">
and phone = #{queryParam.phone}
</if>
<if test="queryParam.sex != null and queryParam.sex != ''">
and sex = #{queryParam.sex}
</if>
<if test="queryParam.time != null and queryParam.time != ''">
and DATE_FORMAT(gmt_create,'%Y-%m-%d') = #{queryParam.time}
</if>
</if>
</where>
</select>
</mapper>
我们大致来分析一下上面的SQL语句，首先 select * from user这里没毛病吧，咋们是管理用户，所有信息都得要上，* 查询所有
后面 where 里有个 1 = 1 作用是恒等式，为了防止没有做筛选条件时，queryParam 条件对象为 null 导致 where 里面没东西，执行SQL语句的时候就会出现 where 后面没加东西，就会抛出异常
CONCAT 函数的作用是拼接，当然你直接用下面这样也行，推荐还是使用CONCAT，以后会遇到的，还有就是 % 只写右边就可以了，避免全表扫描，采用单模糊查询
and nickname like #{queryParam.nickname} '%'
DATE_FORMAT 函数作用是对时间进行格式化，2022-05-06 11:17:36 转换为 2022-05-06
SQL语句写好了，更新一下我们的 UserMapper 类，映射到 UserMapper.xml 文件的SQL语句，函数名就是 < select id=“xxxx”> 这里id的值
@Repository
public interface UserMapper extends BaseMapper<User> {
/**
* 查询用户列表
* @param page 分页对象
* @param queryParam 筛选条件
* @return
*/
IPage<User> findUserList(Page<User> page, QueryParam queryParam);
}
最后就是在 UserServiceImpl 实现查询用户列表的方法
@Override
public R findUserList(Integer index, Integer size, QueryParam queryParam) {
if (index == null || size == null || index <= 0 || size <= 0) {
return R.error().message("参数错误");
}else if (size > 10) {
return R.error().message("一次最多10条数据");
}
// 构建分页对象
Page<User> page = new Page<>(index, size);
// 查询
IPage<User> iPage = this.baseMapper.findUserList(page, queryParam);
// 回传两个数据, 一个 userList --> 用户数据列表, 一个 total -> 总页数
return R.ok().data("userList", iPage.getRecords()).data("total", iPage.getTotal());
}
controller控制层
这里是最后一步了，处理接口，我们采用 RESTful 的风格，相同的路径处理不用的操作
@RestController
@RequestMapping("/user")
@CrossOrigin
public class UserController {
@Autowired
private UserService userService;
// 添加用户
@PostMapping("")
public R insertUser(@RequestBody User user) {
return userService.insertUser(user);
}
// 删除单个用户
@DeleteMapping("{id}")
public R deleteUser(@PathVariable(value = "id") Integer id) {
return userService.deleteUser(id);
}
// 删除多个用户
@DeleteMapping("")
public R deleteUserMore(@RequestBody List<Integer> ids) {
return userService.deleteUserMore(ids);
}
// 编辑用户
@PutMapping("")
public R modifyUser(@RequestBody User user) {
return userService.modifyUser(user);
}
// 查询用户列表
@PostMapping("{index}/{size}")
public R findUserList(@PathVariable(value = "index") Integer index,
@PathVariable(value = "size") Integer size,
@RequestBody(required = false) QueryParam queryParam) {
return userService.findUserList(index, size, queryParam);
}
// 根据用户编号查询用户信息
@PostMapping("{id}")
public R getUserInfo(@PathVariable(value = "id") Integer id) {
return userService.getUserInfoById(id);
}
}
接口测试
最后，在启动类加上两个注解，一个 MapperScan 扫描我们的 mapper 类，一个 ComponentScan 扫描我们的组件
@SpringBootApplication
@MapperScan(basePackages = {"com.xiaoyuan.usermanager.db.mapper"})
@ComponentScan({"com.xiaoyuan"})
public class UserManagerApplication {
public static void main(String[] args) {
SpringApplication.run(UserManagerApplication.class, args);
}
}
OK，到这里功能已经全部做好了，我们测试一下接口，运行启动类，我这里只展示部分接口的测试接口，全部接口我已经测试过，都没有问题了
大家可以自己去测试每个接口，我用的时 ApiFox 工具，非常好用，还能一键导出接口文档，可以显示接口耗时，分组分项目分接口分环境，非常的方便
添加用户，成功插入数据
当然，你可以在代码里面用测试，新建一个 SpringBoot 的测试类，测试业务层也可以的，如下
其他的就不一一放出来了，大伙自己去试试吧~
扩展（拦截器，权限拦截）
像管理这种一般都会有权限的，总不可能每个人都能访问自己的接口来增删改查用户吧？如何做到不给其他人访问自己的接口，判断别人是否有权限访问呢？
下面我们简单来设计一下，理解大概过程
首先，usermanager 主目录下创建两个包，一个 interceptor 拦截器，一个 WebMVCConfig MVC的配置类
interceptor 包下新建一个 PermissionInterceptor 类，实现 HandlerInterceptor 类
拦截器有三个阶段，preHandle -> postHandle -> afterCompletion，依次按顺序执行，只有前一个return返回true，才会执行下一个阶段方法，简单介绍三个阶段
- preHandle：controller执行目标方法之前执行，一般用于权限验证等操作
- postHandle：controller执行完目标方法返回（如调用service业务层的方法），在前端数据渲染之前执行，一般用于更改视图数据
- afterCompletion：整个接口访问执行完毕，前端数据渲染完成，执行此方法，一般用于资源释放等操作
很明显，我们这个权限验证拦截就是在 preHandle 阶段去全性
这个 code 呢就是我们自己定义的权限码，我这里只是随便敲了长长的一段，反正自己知道就好，你可以做加密处理，这里我简单模拟一下
@Component
public class PermissionInterceptor implements HandlerInterceptor {
private static final String code = "dwagfhwhgiawpfwabifpjwaidjwaidwiafihwigfhwaigwhaipgwaihiwahifhwdefef";
@Override
public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {
// 放行OPTIONS请求
if (HttpMethod.OPTIONS.matches(request.getMethod())) {
return true;
}
// 获取请求头里面的 Authentication 属性值
String authentication = request.getHeader("Authentication");
// 两者相等 -> 通过放行, 两者不相等 -> 不通过不放行
if (code.equals(authentication)) {
// 放行
return true;
}else {
// 不放行, 回传没有权限
response.setContentType("text/html;charset=utf-8");
response.getWriter().println(JSON.toJSONString(R.error().message("没有操作权限")));
return false;
}
}
}
config 包下新建一个 WebMVCConfig 类，实现 WebMvcConfigurer 类，设置拦截器
@Configuration
public class WebMVCConfig implements WebMvcConfigurer {
@Override
public void addInterceptors(InterceptorRegistry registry) {
registry.addInterceptor(new PermissionInterceptor()) // 添加拦截器
.addPathPatterns("/user/**"); // 选择拦截路径，拦截/user下的所有请求
}
}
好的，我们接下来看看效果，当然，就不适合在代码用SpringBoot测试类啦，因为校验请求头
我们采用接口测试工具，老样子，我使用的是ApiFox，你可以使用postman等其他工具
首先我们继续运行一下之前写好的请求路径（没加Authentication 权限码），可以看到，我们访问的是查询用户列表接口，显示没有权限
接下来我们在 header 请求头加上我们的 Authentication 的权限码，同样的路径，测试一下
是不是就成功访问到了
我们随便改错一个字母，也成功显示没有权限，除非你的权限码被别人知道了，或者被破解了（设置的复杂一点再加密基本不可能被破），不然你的接口别人访问不了
🌹 结束语
好了，整篇的教程呢到这也就结束，整篇教程即为原创一字一字手敲，也花了心思想怎么写怎么设计才能更好的直观简洁展示给大家，让大家能看懂
最后，关于教程还有什么不懂的可以评论区留言，我一定会回复的，或者有什么更好的建议和想法也可以在评论区留言，看到好的我会一一采纳，感谢大家的支持
再一次附上Gitee开源地址：https://gitee.com/yuandewei/Yuan-SpringBoot/tree/master 不用大伙翻上去复制了
- 都看到这里啦，点点赞呀 😋
- 感谢阅读 😘