Spring Boot + MyBatis 实现用户登录功能详解（基础）

一、项目概述

做了几个项目发现有人问到怎么使用springboot+HTML+js+CSS开发一个项目呢所以本文将介绍如何使用Spring Boot和MyBatis实现一个完整的用户登录功能。系统包含前端登录页面、后端控制器、服务层、数据访问层以及数据库交互。

二、技术栈

Spring Boot 2.x
MyBatis 持久层框架
MySQL 数据库
jQuery 前端交互
HTML/CSS 页面展示

三、核心实现

1. 实体类设计（BookUser.java）

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）:

java 复制代码

public interface LoginUserDao {
    List<LoginUser> findAll();
    BookUser findUser(BookUser bookUser);
}

MyBatis映射文件（LoginUserMapper.xml） :（这里仅仅是做了一个动态查询，跟实际的不一样想动态查询的可以去学一下mybatis基础非常的简单）

java 复制代码

<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）:

java 复制代码

public interface LoginUserService {
    List<LoginUser> findAll();
    BookUser findUser(BookUser bookUser);
}

服务实现（LoginUserServiceImpl.java）（实现了spring 的Ioc 单例）:

java 复制代码

@Service
public class LoginUserServiceImpl implements LoginUserService {
    @Autowired
    private LoginUserDao loginUserDao;
    
    @Override
    public BookUser findUser(BookUser bookUser) {
        System.out.println("查询用户: " + bookUser);
        return loginUserDao.findUser(bookUser);
    }
}

4. 控制器层（Controller）

java 复制代码

@Controller
@Api(tags = "登录测试")
public class LoginUserController {
    @Autowired
    private LoginUserService loginUserService;
    
    @RequestMapping("/tologin")
    public String tologin() {
        return "login";
    }
    
    @RequestMapping("/login")
    @ResponseBody
    public BookUser login(BookUser user1) {
        System.out.println("登录请求参数: " + user1);
        return loginUserService.findUser(user1);
    }
}

5. 前端实现

登录页面（login.html）:

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）(这里是仅仅查询是否有这个用户，并没有其他的验证功能想要其他的验证功能自己可以做一下）

javascript 复制代码

$(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风格的接口设计