• [Spring实战] 整合Spring/SpringMVC/Mybatis(SSM)实现登录与注册功能（带前端）

     🍳作者：天海奈奈

    💭眼过千遍不如手锤一遍：推荐一款模拟面试，斩获大厂 o f f e r ，程序员的必备刷题平台 − − 牛客网 

    👉🏻点击开始刷题之旅

    目录

    前言

    功能展示

    功能说明

    数据库表设计

    依赖

    配置文件

    后端

    Controller

    Entity实体类

    Mapper

    Service

    Impl

    前端

    总结与改进方向

     

    前言

      不出意料，果然一个登录还是不够的 ，先说明一下，看这篇前请先去看一下上一篇这里放上上一篇的链接 [Spring实战] 整合Spring/SpringMVC/Mybatis(SSM)实现登录功能（带前端）_天海奈奈的博客-CSDN博客，对于项目的创建和依赖的配置这篇不会再讲，这篇主要在之前的基础上对数据库进行一定的修改，新写一个主页页面，实现注册功能。

    功能展示

    0b685e2c6bc34877abe518cbdb143963.gif

     

    功能说明

      之前只是在登录时验证密码时利用了MD5算法进行密码的转换与数据库中的密码去对比，注册时使用着这个工具类去将加密后的密码存到数据库中去，并在注册时检索数据库中是否已经有存在的用户名，在注册页面新加验证码功能，成功注册后自动跳转到登录页面。

    数据库表设计

    93538b1361a349008cc6ad20e690990d.png

      由于没有涉及到用户权限的功能所以没有使用到权值。这里会把sql放在这里直接复制运行就能得到这张表，但是记得去第一篇文章里面去改自己的数据库连接。

    1. SET NAMES utf8mb4;
    2. SET FOREIGN_KEY_CHECKS = 0;
    3.  
    4. -- ----------------------------
    5. -- Table structure for manager
    6. -- ----------------------------
    7. DROP TABLE IF EXISTS `manager`;
    8. CREATE TABLE `manager`  (
    9.   `manager_id` bigint(0) NOT NULL AUTO_INCREMENT COMMENT '管理员编号',
    10.   `username` varchar(16) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NOT NULL COMMENT '用户名',
    11.   `password` varchar(64) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NOT NULL COMMENT '密码',
    12.   `salt` int(0) NOT NULL COMMENT '盐值',
    13.   `create_time` datetime(0) NULL DEFAULT NULL COMMENT '创建时间',
    14.   `nickname` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NULL DEFAULT NULL COMMENT '昵称',
    15.   PRIMARY KEY (`manager_id`) USING BTREE
    16. ) ENGINE = InnoDB AUTO_INCREMENT = 520 CHARACTER SET = utf8mb4 COLLATE = utf8mb4_0900_ai_ci ROW_FORMAT = Dynamic;
    17.  
    18. -- ----------------------------
    19. -- Records of manager
    20. -- ----------------------------
    21. INSERT INTO `manager` VALUES (1, 'MANAGER', 'ce20d2be56ca49d36ed2709e776187db', 1276, NULL, NULL);
    22. INSERT INTO `manager` VALUES (516, 'user1', 'b8ddf129011519e083c25c6b05208da0', 1197, '2022-09-12 21:39:37', '用户1');
    23. INSERT INTO `manager` VALUES (517, 'user2', '675f66d99f78db051bf8c73c3eff26a0', 1226, '2022-09-12 21:40:50', '拥护2');
    24. INSERT INTO `manager` VALUES (518, 'user3', 'e8ee397e19a484c66c0edcde9c8e6c39', 1801, '2022-09-16 15:47:58', '用户三');
    25. INSERT INTO `manager` VALUES (519, 'user4', '4dfcb81c7e01b6beaf0092ddbd8534fd', 1478, '2022-09-16 15:49:36', '用户4');
    26.  
    27. SET FOREIGN_KEY_CHECKS = 1;

    依赖

    1.  
    2.         
    3.             com.github.penggle
    4.             kaptcha
    5.             2.3.2
    6.

    配置文件

    1.  
    2.     
    3.     <bean id="kaptchaProducer" class="com.google.code.kaptcha.impl.DefaultKaptcha">
    4.         
    5.         <property name="config">
    6.             <bean class="com.google.code.kaptcha.util.Config">
    7.                 <constructor-arg>
    8.                     
    9.                     <props>
    10.                         
    11.                         <prop key="kaptcha.border">noprop>
    12.                         
    13.                         <prop key="kaptcha.image.width">120prop>
    14.                         
    15.                         <prop key="kaptcha.textproducer.font.color">blueprop>
    16.                         
    17.                         <prop key="kaptcha.textproducer.font.size">40prop>
    18.                         
    19.                         <prop key="kaptcha.textproducer.char.length">4prop>
    20.                     props>
    21.                 constructor-arg>
    22.             bean>

    依赖和配置文件在原基础上加就好

    后端

    Controller

    1. @RestController
    2. @RequestMapping("/api/manager")
    3. public class ManagerController {
    4.     @Resource
    5.     private ManagerService managerService;
    6.     @PostMapping("/check_login1")
    7.     public ResponseUtils checkLogin1(String username , String password){
    8.         ResponseUtils resp ;
    9.             resp = new ResponseUtils();
    10.  
    11.             try {
    12.                 Manager manager = managerService.checkLogin1(username, password);
    13.                 manager.setPassword(null);
    14.                 manager.setSalt(null);
    15.                 resp = new ResponseUtils().put("manager" , manager);
    16.             }catch (Exception e){
    17.                 e.printStackTrace();
    18.                 resp = new ResponseUtils(e.getClass().getSimpleName(), e.getMessage());
    19.             }
    20.         return resp;
    21.     }
    22.     @PostMapping("/register")
    23.     public ResponseUtils register(String username, String password, String nickname, String vc, HttpServletRequest request) {
    24.         String verifyCode = (String) request.getSession().getAttribute("kaptchaVerifyCode");
    25.         ResponseUtils resp;
    26.         if (vc == null || verifyCode == null || !vc.equalsIgnoreCase(verifyCode)) {
    27.             resp = new ResponseUtils("VerifyCodeError", "验证码错误");
    28.         } else {
    29.             resp = new ResponseUtils();
    30.             //验证码比对成功后进行用户注册
    31.             try {
    32.                 Manager manager = managerService.createManager(username, password, nickname);
    33.                 resp = new ResponseUtils();
    34.             } catch (Exception e) {
    35.                 e.printStackTrace();
    36.                 resp = new ResponseUtils(e.getClass().getSimpleName(), e.getMessage());
    37.             }
    38.         }
    39.         return resp;
    40.     }
    41. }

     与上一篇其实差不多，只是增加了验证码校验，调用新写了一个Service来创建对象。

    Entity实体类

     

    1. @TableName("manager")
    2. public class Manager {
    3.     @TableId(type = IdType.AUTO)
    4.     private Long managerId;
    5.     private String username;
    6.     private String password;
    7.     private Integer salt;
    8.     private String nickname;
    9.     private Date createTime;
    10.  
    11.     @Override
    12.     public String toString() {
    13.         return "Manager{" +
    14.                 "managerId=" + managerId +
    15.                 ", username='" + username + '\'' +
    16.                 ", password='" + password + '\'' +
    17.                 ", salt=" + salt +
    18.                 ", nickname='" + nickname + '\'' +
    19.                 ", createTime=" + createTime +
    20.                 '}';
    21.     }
    22.  
    23.     public Long getManagerId() {
    24.         return managerId;
    25.     }
    26.  
    27.     public void setManagerId(Long managerId) {
    28.         this.managerId = managerId;
    29.     }
    30.  
    31.     public String getNickname() {
    32.         return nickname;
    33.     }
    34.  
    35.     public void setNickname(String nickname) {
    36.         this.nickname = nickname;
    37.     }
    38.  
    39.     public Date getCreateTime() {
    40.         return createTime;
    41.     }
    42.  
    43.     public void setCreateTime(Date createTime) {
    44.         this.createTime = createTime;
    45.     }
    46.  
    47.     public Long getUserId() {
    48.         return managerId;
    49.     }
    50.  
    51.     public void setUserId(Long userId) {
    52.         this.managerId = userId;
    53.     }
    54.  
    55.     public String getUsername() {
    56.         return username;
    57.     }
    58.  
    59.     public void setUsername(String username) {
    60.         this.username = username;
    61.     }
    62.  
    63.     public String getPassword() {
    64.         return password;
    65.     }
    66.  
    67.     public void setPassword(String password) {
    68.         this.password = password;
    69.     }
    70.  
    71.     public Integer getSalt() {
    72.         return salt;
    73.     }
    74.  
    75.     public void setSalt(Integer salt) {
    76.         this.salt = salt;
    77.     }
    78. }

      新加创建时间和昵称

    Mapper

    1. public interface ManagerMapper extends BaseMapper {
    2. }

    因为整合了mubatis-plus所以并不需要自己写mapper以及xml文件

    Service

    1. public interface ManagerService {
    2.     public Manager checkLogin1(String username, String password);
    3.     public Manager createManager(String username, String password, String nickname);
    4. }

    这里也就加一个新建对象


    Impl

    1. @Service
    2. //默认方法不开启事务
    3. @Transactional(propagation = Propagation.NOT_SUPPORTED,readOnly = true)
    4. public class ManagerServiceImpl implements ManagerService {
    5.  
    6.     @Resource
    7.     private ManagerMapper managerMapper;
    8.  
    9.     @Transactional(rollbackFor = Exception.class)
    10.     @Override
    11.     public Manager checkLogin1(String username, String password) {
    12.         QueryWrapper wrapper = new QueryWrapper();
    13.         wrapper.eq("username", username);
    14.         Manager manager = managerMapper.selectOne(wrapper);
    15.         if (manager == null) {
    16.             throw new MemberException("用户不存在");
    17.         }
    18.         String md5 = MD5Utils.md5Digest(password, manager.getSalt());
    19.         if (!md5.equals(manager.getPassword())) {
    20.             throw new MemberException("您输入的密码有误");
    21.         }
    22.         return manager;
    23.     }
    24.  
    25.     @Override
    26.     public Manager createManager(String username, String password, String nickname) {
    27.         QueryWrapper wrapper = new QueryWrapper<>();
    28.         wrapper.eq("username", username);
    29.         List managers = managerMapper.selectList(wrapper);
    30.         if(managers.size() > 0 ){
    31.             throw new MemberException("用户已存在");
    32.         }
    33.         Manager manager = new Manager();
    34.         manager.setUsername(username);
    35.         manager.setNickname(nickname);
    36.         manager.setCreateTime(new Date());
    37.         int salt = new Random().nextInt(1000) + 1000;
    38.         manager.setSalt(salt);
    39.         String md5 = MD5Utils.md5Digest(password, salt);
    40.         manager.setPassword(md5);
    41.         managerMapper.insert(manager);
    42.         return manager;
    43.     }
    44. }

      实现类里面也就先去搜索数据库看里面有没有已经存在的用户名，如果没有我们就创建一个新的。

    前端

    251ce21635424a79a7d80b0d12d7c244.png

     

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>注册title>
    6.     
    7.     <link rel="stylesheet" type="text/css" href="assets/element-plus/index.css">
    8.     
    9.     <script src="/assets/vue/vue.global.js">script>
    10.     <script src="/assets/element-plus/index.full.js">script>
    11.     <script src="/assets/axios/axios.js">script>
    12.     <style>
    13.         .login-box {
    14.             border: 1px solid #DCDFE6;
    15.             width: 350px;
    16.             margin: 180px auto;
    17.             padding: 35px 35px 15px 35px;
    18.             border-radius: 5px;
    19.             -webkit-border-radius: 5px;
    20.             -moz-border-radius: 5px;
    21.             box-shadow: 0 0 25px #909399;
    22.         }
    23.         .login-title{
    24.             text-align: center;
    25.             margin: 0 auto 40px auto;
    26.             color: #303133;
    27.         }
    28.     style>
    29. head>
    30. <body>
    31. <div id="app">
    32.  
    33.     <el-form ref="registerForm" label-width="80px" :rules="rules" :model="form" class="login-box">
    34.         <h2 class="login-title">注册h2>
    35.         <el-form-item label="账号" prop="username">
    36.             <el-input type="text" placeholder="请输入账号" v-model="form.username">el-input>
    37.         el-form-item>
    38.         <el-form-item label="密码" prop="password">
    39.             <el-input type="password" placeholder="请输入密码" v-model="form.password">el-input>
    40.         el-form-item>
    41.         <el-form-item label="昵称" prop="nickname">
    42.             <el-input type="text" placeholder="请输入昵称" v-model="form.nickname">el-input>
    43.         el-form-item>
    44.         <el-form-item label="验证码" prop="verifyCode">
    45.             <el-row>
    46.                 <el-col :span="16">
    47.                     <el-input type="verifyCode" placeholder="请输入验证码" v-model="form.verifyCode">el-input>
    48.                 el-col>
    49.                 <el-col :span="8">
    50.                     <img id="imgVerifyCode" src="/api/verify_code"
    51.                          style="width: 100%;height:44px;cursor: pointer" @click="reloadVerifyCode">
    52.                 el-col>
    53.             el-row>
    54.         el-form-item>
    55.         <el-form-item>
    56.             <el-button type="primary" v-on:click="onSubmit('registerForm')" style="width:200px">注册el-button>
    57.         el-form-item>
    58.         <el-form-item>
    59.             <el-button type="primary" v-on:click="returnBack" style="width:200px">退出el-button>
    60.         el-form-item>
    61.     el-form>
    62. div>
    63. <script>
    64.     const Main = {
    65.         data() {
    66.             return {
    67.                 form: {
    68.                     username: ''
    69.                     ,password: ''
    70.                     ,verifyCode:''
    71.                     ,nickname:''
    72.                 }
    73.                 ,rules:{
    74.                     username: [
    75.                         {required: true,message : '账号不能为空' , trigger:'blur'}
    76.                     ],
    77.                     password:[
    78.                         {required: true,message : '密码不能为空' , trigger:'blur'}
    79.                     ],
    80.                     verifyCode: [
    81.                         {required:true,message : '验证码不能为空' , trigger:'blur'}
    82.                     ],
    83.                     nickname:[
    84.                         {required:true,message : '昵称不能为空' , trigger:'blur'}
    85.                     ]
    86.                 }
    87.             }
    88.         }
    89.         ,methods : {
    90.             onSubmit(formName){
    91.                 const objApp = this;
    92.                 const form = this.$refs[formName];
    93.                 form.validate((valid) => {
    94.                     if(valid){
    95.                         console.info("表单校验成功,准备提交数据");
    96.                         const form = this.form;
    97.                         const $message = this.$message;
    98.                         const params = new URLSearchParams();
    99.                         params.append("username", form.username);
    100.                         params.append("password", form.password);
    101.                         params.append("nickname", form.nickname);
    102.                         params.append("vc", form.verifyCode);
    103.                         axios.post("/api/manager/register", params)
    104.                             .then(function (response) {
    105.                             console.info(response);
    106.                             const json = response.data;
    107.                             if(json.code=="0"){
    108.                                 $message.success({message:"注册成功,进入登录界面", offset: 100});
    109.                                     window.location.href = "/login.html";
    110.  
    111.  
    112.                             }else{
    113.                                 $message.error({message:json.message, offset: 100});
    114.                             }
    115.                         });
    116.                     }
    117.                 })
    118.             }
    119.             ,returnBack : function (){
    120.                 window.location.href = "/login.html";
    121.             }
    122.             , reloadVerifyCode: function () { //刷新验证码方案
    123.                 document.getElementById("imgVerifyCode").src = "/api/verify_code?ts=" + new Date().getTime();
    124.             }
    125.         }
    126.     };
    127.     //初始化Vue,绑定Main中的数据,利用ElementPlus对#app容器进行重新渲染
    128.     const app = Vue.createApp(Main);
    129.     app.use(ElementPlus);
    130.     app.mount("#app");
    131. script>
    132. body>
    133. html>

    总结与改进方向

      下次会更新验证码将网页实时生成的验证码改为邮箱验证，到此为止还是没有使用到session,如果有需求可以自己加，到这里有着基础功能的注册与登录功能的部分就实现了。这个前端登录页面也可以作为一个通用化的页面，只需要改变里面的的api接口就能做到重复使用。

     

  • 相关阅读:
    探索 PrimeVue，一个基于 Vue 的 UI 组件库
    基础矩阵和本质矩阵
    宏定义里面为什么要加括号？
    【LeetCode:2216. 美化数组的最少删除数 | 贪心】
    未来的户外LED视频墙将怎么发展
    有没有项目经理能看得懂这九张图？求挑战
    [Docker Java 服务]Docker 容器中Java服务问题排查
    开源办公OA平台教程：如何修改O2OA配置连接本地部署的OnlyOffice Docs Server服务器？
    TcpCopy 流量复制
    SpringBoot+Dubbo+Nacos 开发实战教程
  • 原文地址：https://blog.csdn.net/weixin_57169969/article/details/126891975