一、項目概述

? ? ? ? 做了幾個項目發現有人問到怎么使用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("登錄失敗，請檢查控制臺");}});});
});

四、關鍵點解析

1. 前后端數據映射

   • 使用@JsonProperty("username")注解解決前后端字段名不一致問題

   • MyBatis動態SQL處理不同查詢條件組合

2. 登錄流程

   前端輸入 → AJAX請求 → Spring MVC控制器 → 服務層 → MyBatis查詢 → 返回結果 → 前端處理

3. 安全考慮

   • 實際項目中應對密碼進行加密存儲（如BCrypt）

   • 添加驗證碼防止暴力破解

   • 使用HTTPS保護數據傳輸

五、總結

本文實現了一個完整的Spring Boot登錄功能，涵蓋了從前端頁面到數據庫查詢的全流程。核心在于：

• Spring Boot的高效開發模式

• MyBatis靈活的SQL映射

• 前后端分離的交互方式

• RESTful風格的接口設計