一、需求分析
简单的用户登录,密码使用MD5加密
二、相关技术
springboot、mybatis-plus、sa-token、redis
三、包结构
四、代码块
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;
@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 login(Map<String, String> params);
}
@Service
public class SysUserServiceImpl implements SysUserService {
@Autowired
private SysUserDao sysUserDao;
@Override
public Result login(Map<String, String> params) {
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.mapper
<?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>
<button id="loginBtn">登录</button>
<div>
<span id="info"></span>
<span id="result"></span>
</div>
</div>
</body>
<script>
$(function () {
$('#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;
$.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);
}
}
五、测试结果
链接:https://pan.baidu.com/s/1JYggBb5WleECsjla8yLzUg
提取码:zuo5