晋江网站建设报价可视化手机网站开发工具

一、项目概述

        做了几个项目发现有人问到怎么使用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风格的接口设计