微服务: 结合MySQL实现登录注册
简介
继 MySQL8.0.15在Win10上的折腾记 和 微服务: MySQL基本操作 后,由于个人原因没能继续创作,从今天开始补上,继续前进💪。
本篇是 微服务系列 的第 N 篇,本篇结合 MySQL 和 SpringBoot 实现用户登录注册,算是一个小实战也是对之前知识点的一个小结。
在阅读本篇内容之前,需要大家做好如下几件事情:
本篇文章主要内容:
- 网页端,提供注册、登录的入口,请求服务端提供的 API,请求采用 Ajax;
- 服务端,提供注册、登录的 API,处理用户注册和登录的请求,并能正确读写 MySQL 数据库;
代码全部放在 Github,有需要的朋友们可以自行获取。
登录注册流程图
本篇分享的用户注册和登录流程比较简单,看图说话。

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

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

登录失败会自动跳转到注册页面。
页面和逻辑的源代码对应分别如下

1 -> ms_login.html
是登录页面的 HTML 文件;
2 -> ms_signup.html
是注册页面的 HTML 文件;
3 -> ms_user.js
是 Ajax 的请求逻辑的 JavaScript 代码。
配置 MySQL 的连接
既然要使用 MySQL,首先要在工程中配置跟 MySQL 相关的连接参数。
在工程的 application.properties
文件中,配置下面参数即可。
1 2 3 4 5 6 7
| # 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,核心代码如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40
| @RestController @RequestMapping(value = "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 { userService.createUserTable(); 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 { MSResponseEnum signupError = MSResponseEnum.SignupHasExistUser; response.setMsg(signupError.getMsg()); response.setCode(signupError.getCode()); } }
response.setResults(user);
return response; } }
|
源文件 MSSignupController
实现了注册的 API,核心代码如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46
| @RestController @RequestMapping(value = "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 { 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 { 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; } }
|
相比于之前的代码逻辑,现在的代码无非就是加入了操作数据库的逻辑。代码比较简单,看注释就可以看明白。
操作数据库的代码,都在 MSUserServiceImpl
这个实现类中。我就不一一的粘贴代码了。有兴趣的朋友可以自行到 Github 下载。
验证
首先,启动工程,让工程在本地正常运行起来。如果你还没有搭建 SpringBoot 的开发环境,建议参考 微服务-想办法让项目运行起来 这篇文章。
然后在浏览器打开注册页面,建议使用 Chrome 浏览器操作。如下图,我使用 foobar
用户名和 foobar
密码进行注册。

点击注册按钮,成功后用终端登录 MySQL 数据库,看看是否有数据。如下图,可以看到数据库和对应的表。

可以从下图看出,数据已经成功的写入数据库中了。

最后,打开登录界面,输入用户名称和密码都是 foobar
的就可以登录成功,说明从数据库读取数据也是正常的。
今天就说这么多吧,下次再见!
从现在做起,一切都还来得及。
