SpringBoot 用户登录(一) 基础登录
在登录的基础上加上验证码验证，验证码过期时间为一分钟
在后台生成UUID和验证码返回到前台，并将UUID作为key,验证码内容作为value存入redis，设置过期时间为一分钟，每次进行登录操作首先校验redis中的UUID是否存在，不存在则返回验证码过期
在pom文件中加入hutool工具栏
<dependency>
<groupId>cn.hutool</groupId>
<artifactId>hutool-all</artifactId>
<version>5.6.1</version>
</dependency>
1.数据库设计
2.entity
/**
* @Date 2021-08-26 17:37:45
* @Created by admin
* @ClassName 用户信息实体类
*/
@Data
public class SysUser implements Serializable {
private static final long serialVersionUID = 1L;
private Integer id;
private String loginName; //登录账号
private String password; //登录密码
private String userName; //用户姓名
}
3.controller
@RestController
@RequestMapping("/sysUser")
public class SysUserController {
@Autowired
private SysUserService sysUserService;
@GetMapping("/uuid")
public Result uuid() {
return sysUserService.uuid();
}
@PostMapping("/login")
public Result login(@RequestBody Map<String, String> params) {
return sysUserService.login(params);
}
}
4.dao
@Mapper
public interface SysUserDao {
SysUser login(@Param("loginName") String loginName);
}
5.service
public interface SysUserService {
Result uuid();
Result login(Map<String, String> params);
}
@Service
public class SysUserServiceImpl implements SysUserService {
@Autowired
private SysUserDao sysUserDao;
@Autowired
private StringRedisTemplate redisTemplate;
@Override
public Result uuid() {
Map<String, Object> result = new HashMap<>();
//生成uuid
String uuid = UUID.randomUUID().toString().replaceAll("-", "");
//hutool生成验证码
CircleCaptcha captcha = CaptchaUtil.createCircleCaptcha(200, 45, 4, 10);
result.put("uuid", uuid);
//获取验证码的base64
result.put("checkImg", captcha.getImageBase64Data());
//获取验证码内容
String code = captcha.getCode();
redisTemplate.opsForValue().set(uuid, code, 60, TimeUnit.SECONDS);
return Result.success("获取成功", result);
}
@Override
public Result login(Map<String, String> params) {
//校验验证码
String uuid = params.get("uuid");
Boolean hasKey = redisTemplate.hasKey(uuid);
//判断key是否存在，不存在返回失效
if (hasKey == null || !hasKey) return Result.error("验证码失效,请刷新验证码");
//验证内容是否相同
String checkData = redisTemplate.opsForValue().get(uuid);
String checkCode = params.getOrDefault("checkCode", "");
if (!StringUtils.equals(checkData, checkCode)) return Result.error("验证码错误");
//校验用户名密码
if (!params.containsKey("loginName")) return Result.error("请输入用户名！！！");
if (!params.containsKey("password")) return Result.error("请输入密码！！！");
String loginName = params.get("loginName");
if (StringUtils.isBlank(loginName)) return Result.error("用户名为空,请输入用户名！！！");
String password = params.get("password");
if (StringUtils.isBlank(password)) return Result.error("密码为空,请输入密码！！！");
SysUser user = sysUserDao.login(loginName);
if (ObjectUtils.isEmpty(user)) return Result.error("用户不存在！！！");
// 前台传入MD5加盐过的代码在这个地方做截取操作
password = password.substring(16, 48);
if (!StringUtils.equals(password, user.getPassword())) return Result.error("密码错误！！！");
return Result.success("登录成功");
}
}
6.mappe
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd" >
<mapper namespace="com.project.base.user.dao.SysUserDao">
<select id="login" resultType="com.project.base.user.entity.SysUser">
SELECT login_name, password
FROM `sys_user`
WHERE login_name = #{loginName}
</select>
</mapper>
7.登录页面
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>用户登录</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="http://pajhome.org.uk/crypt/md5/2.2/md5-min.js"></script>
</head>
<body>
<div>
<div>
<label for="loginName">
用户名:<input id="loginName" type="text">
</label>
<label for="password">
密码:<input id="password" type="text">
</label>
</div>
<div>
<label for="checkCode">
验证码:<input id="checkCode" type="text">
</label>
<img id="checkImg" src="" alt="" style="width: 100px;height: 30px">
</div>
<button id="loginBtn">登录</button>
<div>
<span id="info"></span>
<span id="result"></span>
</div>
</div>
</body>
<script>
$(function () {
getCheck();
//验证码图片点击时间，点击重新请求
$('#checkImg').click(function () {
getCheck();
});
function getCheck() {
$.ajax({
url: '/sysUser/uuid',
type: 'GET',
async: false,
success: (res) => {
const data = res.data;
sessionStorage.setItem('uuid', data.uuid);
$('#checkImg').attr('src', data.checkImg);
}
});
}
$('#loginBtn').click(function () {
//密码在这个地方进行加盐操作
//加盐规则为用户名的MD5前16位+密码的MD5+时间戳
const password = hex_md5($('#loginName').val()).substring(0, 16) + hex_md5($('#password').val()) + new Date().getTime();
const data = {};
data.loginName = $('#loginName').val();
data.password = password;
data.checkCode = $('#checkCode').val();
data.uuid = sessionStorage.getItem('uuid');
$.ajax({
url: '/sysUser/login',
type: 'POST',
data: JSON.stringify(data),
dataType: 'JSON',
contentType: 'application/json',
async: false,
success: (res) => {
$('#info').html('<p>账号：' + $('#loginName').val() + '</p>' +
'<p>密码：' + password + '</p>');
$('#result').text(res.msg);
}
});
});
});
</script>
</html>
8.工具类
@Data
public class Result {
private Integer code;
private String msg;
private Object data;
public Result(Integer code, String msg) {
this.code = code;
this.msg = msg;
}
public Result(Integer code, String msg, Object data) {
this.code = code;
this.msg = msg;
this.data = data;
}
public static Result success() {
return new Result(200, "SUCCESS");
}
public static Result success(String msg) {
return new Result(200, msg);
}
public static Result success(String msg, Object data) {
return new Result(200, msg, data);
}
public static Result error() {
return new Result(500, "ERROR");
}
public static Result error(String msg) {
return new Result(500, msg);
}
public static Result error(String msg, Object data) {
return new Result(500, msg, data);
}
public static Result other(int code, String msg, Object data) {
return new Result(code, msg, data);
}
public static Result other(int code, String msg) {
return new Result(code, msg);
}
}
