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

目录

前言

功能展示

功能说明

数据库表设计

依赖

配置文件

后端

Controller

Entity实体类

Mapper

Service

Impl

前端

总结与改进方向

---

前言

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

功能展示

功能说明

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

数据库表设计

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

SET NAMES utf8mb4;
SET FOREIGN_KEY_CHECKS = 0;

-- ----------------------------
-- Table structure for manager
-- ----------------------------
DROP TABLE IF EXISTS `manager`;
CREATE TABLE `manager`  (
  `manager_id` bigint(0) NOT NULL AUTO_INCREMENT COMMENT '管理员编号',
  `username` varchar(16) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NOT NULL COMMENT '用户名',
  `password` varchar(64) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NOT NULL COMMENT '密码',
  `salt` int(0) NOT NULL COMMENT '盐值',
  `create_time` datetime(0) NULL DEFAULT NULL COMMENT '创建时间',
  `nickname` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NULL DEFAULT NULL COMMENT '昵称',
  PRIMARY KEY (`manager_id`) USING BTREE
) ENGINE = InnoDB AUTO_INCREMENT = 520 CHARACTER SET = utf8mb4 COLLATE = utf8mb4_0900_ai_ci ROW_FORMAT = Dynamic;

-- ----------------------------
-- Records of manager
-- ----------------------------
INSERT INTO `manager` VALUES (1, 'MANAGER', 'ce20d2be56ca49d36ed2709e776187db', 1276, NULL, NULL);
INSERT INTO `manager` VALUES (516, 'user1', 'b8ddf129011519e083c25c6b05208da0', 1197, '2022-09-12 21:39:37', '用户1');
INSERT INTO `manager` VALUES (517, 'user2', '675f66d99f78db051bf8c73c3eff26a0', 1226, '2022-09-12 21:40:50', '拥护2');
INSERT INTO `manager` VALUES (518, 'user3', 'e8ee397e19a484c66c0edcde9c8e6c39', 1801, '2022-09-16 15:47:58', '用户三');
INSERT INTO `manager` VALUES (519, 'user4', '4dfcb81c7e01b6beaf0092ddbd8534fd', 1478, '2022-09-16 15:49:36', '用户4');

SET FOREIGN_KEY_CHECKS = 1;

依赖

 
        
            com.github.penggle
            kaptcha
            2.3.2
        

配置文件

 
    
    
        
        
            
                
                    
                    
                        
                        no
                        
                        120
                        
                        blue
                        
                        40
                        
                        4
                    
                
            

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

后端

Controller

@RestController
@RequestMapping("/api/manager")
public class ManagerController {
    @Resource
    private ManagerService managerService;
    @PostMapping("/check_login1")
    public ResponseUtils checkLogin1(String username , String password){
        ResponseUtils resp ;
            resp = new ResponseUtils();

            try {
                Manager manager = managerService.checkLogin1(username, password);
                manager.setPassword(null);
                manager.setSalt(null);
                resp = new ResponseUtils().put("manager" , manager);
            }catch (Exception e){
                e.printStackTrace();
                resp = new ResponseUtils(e.getClass().getSimpleName(), e.getMessage());
            }
        return resp;
    }
    @PostMapping("/register")
    public ResponseUtils register(String username, String password, String nickname, String vc, HttpServletRequest request) {
        String verifyCode = (String) request.getSession().getAttribute("kaptchaVerifyCode");
        ResponseUtils resp;
        if (vc == null || verifyCode == null || !vc.equalsIgnoreCase(verifyCode)) {
            resp = new ResponseUtils("VerifyCodeError", "验证码错误");
        } else {
            resp = new ResponseUtils();
            //验证码比对成功后进行用户注册
            try {
                Manager manager = managerService.createManager(username, password, nickname);
                resp = new ResponseUtils();
            } catch (Exception e) {
                e.printStackTrace();
                resp = new ResponseUtils(e.getClass().getSimpleName(), e.getMessage());
            }
        }
        return resp;
    }
}

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

Entity实体类

@TableName("manager")
public class Manager {
    @TableId(type = IdType.AUTO)
    private Long managerId;
    private String username;
    private String password;
    private Integer salt;
    private String nickname;
    private Date createTime;

    @Override
    public String toString() {
        return "Manager{" +
                "managerId=" + managerId +
                ", username='" + username + '\'' +
                ", password='" + password + '\'' +
                ", salt=" + salt +
                ", nickname='" + nickname + '\'' +
                ", createTime=" + createTime +
                '}';
    }

    public Long getManagerId() {
        return managerId;
    }

    public void setManagerId(Long managerId) {
        this.managerId = managerId;
    }

    public String getNickname() {
        return nickname;
    }

    public void setNickname(String nickname) {
        this.nickname = nickname;
    }

    public Date getCreateTime() {
        return createTime;
    }

    public void setCreateTime(Date createTime) {
        this.createTime = createTime;
    }

    public Long getUserId() {
        return managerId;
    }

    public void setUserId(Long userId) {
        this.managerId = userId;
    }

    public String getUsername() {
        return username;
    }

    public void setUsername(String username) {
        this.username = username;
    }

    public String getPassword() {
        return password;
    }

    public void setPassword(String password) {
        this.password = password;
    }

    public Integer getSalt() {
        return salt;
    }

    public void setSalt(Integer salt) {
        this.salt = salt;
    }
}

  新加创建时间和昵称

Mapper

public interface ManagerMapper extends BaseMapper {
}

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

Service

public interface ManagerService {
    public Manager checkLogin1(String username, String password);
    public Manager createManager(String username, String password, String nickname);
}

这里也就加一个新建对象

Impl

@Service
//默认方法不开启事务
@Transactional(propagation = Propagation.NOT_SUPPORTED,readOnly = true)
public class ManagerServiceImpl implements ManagerService {

    @Resource
    private ManagerMapper managerMapper;

    @Transactional(rollbackFor = Exception.class)
    @Override
    public Manager checkLogin1(String username, String password) {
        QueryWrapper wrapper = new QueryWrapper();
        wrapper.eq("username", username);
        Manager manager = managerMapper.selectOne(wrapper);
        if (manager == null) {
            throw new MemberException("用户不存在");
        }
        String md5 = MD5Utils.md5Digest(password, manager.getSalt());
        if (!md5.equals(manager.getPassword())) {
            throw new MemberException("您输入的密码有误");
        }
        return manager;
    }

    @Override
    public Manager createManager(String username, String password, String nickname) {
        QueryWrapper wrapper = new QueryWrapper<>();
        wrapper.eq("username", username);
        List managers = managerMapper.selectList(wrapper);
        if(managers.size() > 0 ){
            throw new MemberException("用户已存在");
        }
        Manager manager = new Manager();
        manager.setUsername(username);
        manager.setNickname(nickname);
        manager.setCreateTime(new Date());
        int salt = new Random().nextInt(1000) + 1000;
        manager.setSalt(salt);
        String md5 = MD5Utils.md5Digest(password, salt);
        manager.setPassword(md5);
        managerMapper.insert(manager);
        return manager;
    }
}

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

前端

    
    
    
    
    
    
    
    
    




    
        
注册
        
            
        
        
            
        
        
            
        
        
            
                
                    
                
                
                    
                
            
        
        
            注册
        
        
            退出
        
    

总结与改进方向

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