SpringBoot+Vue实现简单用户管理平台第一篇（后端接口设计）

注重版权，转载请注明原作者和原文链接
作者：Yuan-Programmer
主页：https://blog.csdn.net/weixin_47971206/article/details/121368075?spm=1001.2014.3001.5502
进来的小伙伴点点赞呀

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项目，创建好项目，点击右下角选择自动导入，没有弹出来也没关系

引入依赖

	
        org.springframework.boot
        spring-boot-starter-parent
        2.2.1.RELEASE
        
    
    
        1.8
    

    
        
        
            com.baomidou
            mybatis-plus-boot-starter
            3.5.0
        
        
        
            mysql
            mysql-connector-java
            runtime
        
        
        
            org.springframework.boot
            spring-boot-starter-web
        
        
        
            org.springframework.boot
            spring-boot-starter-test
            test
        
        
        
            org.projectlombok
            lombok
            true
        
        
        
            com.alibaba
            fastjson
            1.2.76

基本配置

创建 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
mybatis-plus:
  # mapper文件映射路径
  mapper-locations: classpath*:mapper
    @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 {
    
    
    @Override
    public void insertFill(MetaObject metaObject) {
        // 配置初始创建时间
        this.setFieldValByName("gmtCreate", new Date(), metaObject);
    }

    
    @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 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 {

    
    R insertUser(User user);

    
    R deleteUser(Integer id);

    
    R deleteUserMore(List ids);

    
    R modifyUser(User user);

    
    R findUserList(Integer index, Integer size, QueryParam queryParam);

	
    R getUserInfoById(Integer id);
}

添加用户

UserServiceImpl 实现类里实现添加用户方法，这里只做了简单的非空判断，其他参数的非法性校验可以自己额外完善

@Override
public R insertUser(User user) {
	if (user == null) return R.error().message("参数错误");

    // 用户名
	String username = user.getUsername();

	// 构建条件对象, 查询是否已经存在用户名
	QueryWrapper 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 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语句不能包含注释，所以我在图片给出了每行的注释，代码中删掉了，对应看着