微服务: 结合MySQL实现登录注册

简介

继 MySQL8.0.15在Win10上的折腾记和微服务: MySQL基本操作后，由于个人原因没能继续创作，从今天开始补上，继续前进💪。

本篇是微服务系列的第 N 篇，本篇结合 MySQL 和 SpringBoot 实现用户登录注册，算是一个小实战也是对之前知识点的一个小结。

在阅读本篇内容之前，需要大家做好如下几件事情：

在本机安装了 MySQL，并且可以正常使用；如果你用的是 Windows10，可以参考 MySQL8.0.15在Win10上的折腾记这篇文章；
已经搭建好了 SpringBoot 的开发环境；可以参考微服务: 想办法让项目运行起来来搭建环境；
能使用 SpringBoot 正确连接 MySQL，实现简单的增删改查（CRUD）；可以参考微服务: MySQL基本操作这篇文章；
理解跨域问题，请务必先阅读跨域和OPTIONS这对欢喜冤家；
树立信心，坚持不懈，不怕困难；

本篇文章主要内容：

网页端，提供注册、登录的入口，请求服务端提供的 API，请求采用 Ajax；
服务端，提供注册、登录的 API，处理用户注册和登录的请求，并能正确读写 MySQL 数据库；

代码全部放在 Github，有需要的朋友们可以自行获取。

登录注册流程图

本篇分享的用户注册和登录流程比较简单，看图说话。

1568529858131

前端效果

本篇中的前端页面很简单，我本人对前端的认知是个二半吊子，现学现卖，主要是配合接口做一些实例，没啥技术含量。使用前端开发，给我最大的感觉就是方便，简洁。

1、注册页面

1568529858131

注册成功会自动跳转到登录页面。

2、登录页面

1568529858131

登录失败会自动跳转到注册页面。

页面和逻辑的源代码对应分别如下

1568529858131

1 -> ms_login.html 是登录页面的 HTML 文件；

2 -> ms_signup.html 是注册页面的 HTML 文件；

3 -> ms_user.js 是 Ajax 的请求逻辑的 JavaScript 代码。

配置 MySQL 的连接

既然要使用 MySQL，首先要在工程中配置跟 MySQL 相关的连接参数。

在工程的 application.properties 文件中，配置下面参数即可。

# jdbc
spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver
# charset=utf8mb4
spring.datasource.url=jdbc:mysql://127.0.0.1:3306/mzc_user?serverTimezone=GMT%2B8&useUnicode=true&characterEncoding=utf-8
spring.datasource.username=root
# 设置为你自己 MySQL 的密码
spring.datasource.password=root

具体的这些参数含义在微服务: MySQL基本操作这篇文章中有详细的讲解。

编写 API

源文件 MSSigninController 实现了登录的 API，核心代码如下：

@RestController
@RequestMapping(value = "signup") // 注意这里不要在signup前后加"/"
public class MSSignupController {

    @Autowired
    private MSUserService userService;

    @CrossOrigin(origins = {"*"})
    @PostMapping(value = "/name")
    public MSResponse signup(@RequestParam(value = "username") String userName, @RequestParam(value = "userpwd") String userPwd) {
        MSResponse response = new MSResponse();
        MSUser user = null;
        if (null == userName || null == userPwd || userName.length() <= 0 || userPwd.length() <= 0) {
            MSResponseEnum signupError = MSResponseEnum.SignupInvalidInfo;
            response.setMsg(signupError.getMsg());
            response.setCode(signupError.getCode());
        } else {
            // 创建user表
            userService.createUserTable();
            // 检查用户数据库的‘user’表中是否有该用户？
            List<Map> query_users = userService.queryUserByUserName(userName);
            if (null == query_users || query_users.isEmpty()) {// 没有该用户的数据
                user = MSUserUtil.createUser(userName, userPwd);
                // 插入一条用户数据到数据表中
                userService.addUser(user);
                response.setCode(MSResponseEnum.SUCCESS.getCode());
                response.setMsg(MSResponseEnum.SUCCESS.getMsg());
            } else {// 用户数据库的‘user’表中有该用户信息
                // 返回错误信息：该用户已经注册过了
                MSResponseEnum signupError = MSResponseEnum.SignupHasExistUser;
                response.setMsg(signupError.getMsg());
                response.setCode(signupError.getCode());
            }
        }

        response.setResults(user);

        return response;
    }
}

源文件 MSSignupController 实现了注册的 API，核心代码如下：

@RestController
@RequestMapping(value = "signin") // 注意这里不要在signin前后加"/"
public class MSSigninController {

    @Autowired
    private MSUserService userService;

    @CrossOrigin(origins = {"*", "http://localhost:8082"})
    @RequestMapping(value = "/name", method = RequestMethod.GET)
    public MSResponse sigin(@RequestParam(value = "username") String userName, @RequestParam(value = "userpwd") String userPwd) {
        MSResponse response = new MSResponse();
        MSUser user = null;
        if (null == userName || null == userPwd || userName.length() <= 0 || userPwd.length() <= 0) {
            MSResponseEnum responseEnum = MSResponseEnum.Login4SiginInvalidInfo;
            response.setCode(responseEnum.getCode());
            response.setMsg(responseEnum.getMsg());
        } else {
            // 检查用户数据库的‘user’表中是否有该用户？
            List<Map> query_users = userService.queryUserByUserName(userName);
            if (query_users.isEmpty()) {// 没有该用户
                MSResponseEnum responseEnum = MSResponseEnum.LoginNoSuchUser;
                response.setCode(responseEnum.getCode());
                response.setMsg(responseEnum.getMsg());
            } else {// 有这个用户
                Map user_map = query_users.get(0);
                String query_user_name = (String) user_map.get("accountName");
                // 没有对应的用户名
                if (!query_user_name.equals(userName)) {
                    MSResponseEnum responseEnum = MSResponseEnum.LoginNoSuchUser;
                    response.setCode(responseEnum.getCode());
                    response.setMsg(responseEnum.getMsg());
                } else {// 查询到了该用户
                    // 将查询出来的map对象使用FastJson转换为MSUser对象
                    user = JSON.parseObject(JSON.toJSONString(user_map), MSUser.class);
                    MSResponseEnum rspEnum = MSResponseEnum.SUCCESS;
                    response.setCode(rspEnum.getCode());
                    response.setMsg(rspEnum.getMsg());
                }
            }
        }

        response.setResults(user);

        return response;
    }
}