Spring Boot + MyBatis 实现用户登录功能详解（基础）
一、项目概述
做了几个项目发现有人问到怎么使用springboot+HTML+js+CSS开发一个项目呢所以本文将介绍如何使用Spring Boot和MyBatis实现一个完整的用户登录功能。系统包含前端登录页面、后端控制器、服务层、数据访问层以及数据库交互。
二、技术栈
Spring Boot 2.x
MyBatis 持久层框架
MySQL 数据库
jQuery 前端交互
HTML/CSS 页面展示
三、核心实现
1. 实体类设计（BookUser.java）
public class BookUser {private Integer id;private String phone;private String name;private String password;private Integer role;private Integer money;private String address;@JsonProperty("username")private String loginName;// Getter和Setter方法// toString方法
}2. 数据访问层（DAO）
接口定义（LoginUserDao.java）:
public interface LoginUserDao {List<LoginUser> findAll();BookUser findUser(BookUser bookUser);
}MyBatis映射文件（LoginUserMapper.xml）:（这里仅仅是做了一个动态查询，跟实际的不一样 想动态查询的可以去学一下mybatis基础非常的简单）
<select id="findUser" resultType="com.qcby.springboot0712.entity.BookUser"parameterType="com.qcby.springboot0712.entity.BookUser">SELECT * FROM user<where><if test="id != null">id=#{id}</if><if test="phone != null and phone != ''">AND phone=#{phone}</if><if test="password != null and password != ''">AND password=#{password}</if><if test="loginName != null and loginName != ''">AND loginName=#{loginName}</if></where>
</select>3. 服务层（Service）
服务接口（LoginUserService.java）:
public interface LoginUserService {List<LoginUser> findAll();BookUser findUser(BookUser bookUser);
}服务实现（LoginUserServiceImpl.java）（实现了spring 的Ioc 单例 ）:
@Service
public class LoginUserServiceImpl implements LoginUserService {@Autowiredprivate LoginUserDao loginUserDao;@Overridepublic BookUser findUser(BookUser bookUser) {System.out.println("查询用户: " + bookUser);return loginUserDao.findUser(bookUser);}
}4. 控制器层（Controller）
@Controller
@Api(tags = "登录测试")
public class LoginUserController {@Autowiredprivate LoginUserService loginUserService;@RequestMapping("/tologin")public String tologin() {return "login";}@RequestMapping("/login")@ResponseBodypublic BookUser login(BookUser user1) {System.out.println("登录请求参数: " + user1);return loginUserService.findUser(user1);}
}5. 前端实现
登录页面（login.html）:
<div class="auth-container"><h2 class="text-2xl font-bold text-center mb-4">用户登录</h2><form id="loginForm"><div class="form-group"><label for="userid">ID</label><input type="text" id="userid" class="userid" required></div><div class="form-group"><label for="username">账号</label><input type="text" id="username" class="username" required></div><div class="form-group"><label for="password">密码</label><input type="password" id="password" class="password" required></div><input type="button" class="btn" value="立即登录"></form>
</div>登录交互（login.js）(这里是仅仅查询是否有这个用户，并没有其他的验证功能 想要其他的验证功能自己可以做一下）
$(document).ready(function() {$(".btn").on("click", function() {const id = $('.userid').val();const username = $('.username').val();const password = $('.password').val();$.ajax({url: "login",type: "GET",data: {id: id,loginName: username,password: password},success: function(response) {if(response && response.id) {console.log("登录成功，用户信息:", response);alert(`登录成功！欢迎 ${response.name}`);} else {alert("登录失败，用户名或密码错误");}},error: function(error) {console.log("登录失败:", error);alert("登录失败，请检查控制台");}});});
});四、关键点解析
前后端数据映射
使用
@JsonProperty("username")注解解决前后端字段名不一致问题MyBatis动态SQL处理不同查询条件组合
登录流程
前端输入 → AJAX请求 → Spring MVC控制器 → 服务层 → MyBatis查询 → 返回结果 → 前端处理
安全考虑
实际项目中应对密码进行加密存储（如BCrypt）
添加验证码防止暴力破解
使用HTTPS保护数据传输
五、总结
本文实现了一个完整的Spring Boot登录功能，涵盖了从前端页面到数据库查询的全流程。核心在于：
Spring Boot的高效开发模式
MyBatis灵活的SQL映射
前后端分离的交互方式
RESTful风格的接口设计