当前位置：首页 > news >正文

【图书管理系统】详细讲解用户登录：后端代码实现及讲解、前端代码讲解

news 来源：原创 2025/8/17 23:01:16

1. 约定前后端交互接口

[请求]
/user/login

[参数]
userName&password

[响应]
登录成功返回–true；登录失败返回–false

2. 后端代码

2.1 后端代码的逻辑

Controller层：
（1）从请求和参数可以得出，前端通过127.0.0.1:8080/user/login+参数可以向后端发送请求，则需要在Controller层设置对应的路径
（2）校验前端传来的参数
（3）把参数传给Service层，并得到Service返回的值，根据返回值判断是否验证成功
（3）如果验证成功，把userInfo的password去除，然后把用户信息存入Session中

Service层：
（1）得到Controller传来的参数（账号，密码）
（2）从Mapper中确认账号是否存在
（3）如果账号存在则查询该账号的密码，并与controller传来的密码进行比较
（4）如果账号和密码匹配，则返回用户和密码，反之返回null

Mapper层：
（1）根据Service传来的userName向数据库进行访问，查询该用的信息
（2）返回类型为UserInfo

2.2 Controller层

UserInfoController类：

@RestController
@RequestMapping("/user")
public class UserInfoController {@Autowiredprivate UserInfoService userInfoService;@RequestMapping("/login")public boolean login(String userName, String password, HttpSession session){//校验账号密码if(!StringUtils.hasLength(userName)||!StringUtils.hasLength(password)){return false;}UserInfo userInfo = userInfoService.queryUserInfoByUserName(userName,password);if(userInfo==null){return false;}//验证成功 1.把密码去除， 2.存入sessionuserInfo.setPassword("");session.setAttribute(Constants.SESSION_USER_KEY, userInfo);return true;}
}

说明：

（1）@RestController 用于标记一个类为控制器（Controller），专门处理HTTP请求并返回数据（如JSON或XML），而非传统的视图页面。它结合了@Controller和@ResponseBody的功能，使得所有方法的返回值自动序列化为HTTP响应体内容。

（2）@RequestMapping 用于将 HTTP 请求映射到控制器（Controller）的特定处理方法上。它定义了客户端请求如何被路由到对应的 Java 方法，是构建 Web 请求处理逻辑的基础。

（3）@Autowired 用于标记需要由Spring自动注入的依赖项。Spring容器会根据类型（默认）或名称查找匹配的Bean，并将其注入到目标位置（如字段、构造器、方法等）。

（4）StringUtils.hasLength() 是 Spring Framework 提供的字符串工具方法，用于检查一个字符串是否非空且长度大于 0（即至少包含一个字符）。hasLength() 在字符串有内容时返回 true。

（5）HttpSession 是用于在服务器端跨多个HTTP请求保持用户会话状态的核心机制。它解决了HTTP协议无状态的问题，允许跟踪用户在整个网站访问期间的数据。

（6）session.setAttribute(Constants.SESSION_USER_KEY, userInfo);中的Constants.SESSION_USER_KEY是一个静态常量字符串，该字符串写在Constants类中。实现过程：
新创建一个静态常量的文件夹constant
创建类Constants:

public class Constants {public static final String SESSION_USER_KEY = "session_user_key";
}

图解：
在这里插入图片描述

2.3 Service层

Service层是进行业务逻辑的层。

UserInfoService类：

@Service
public class UserInfoService {@Autowiredprivate UserInfoMapper userInfoMapper;public UserInfo queryUserInfoByUserName(String userName, String password){//判断账号密码是否正确UserInfo userInfo = userInfoMapper.queryUserInfoByUserName(userName);if(userInfo==null){//得不到用户信息return null;}else{ //得到用户信息if(password.equals(userInfo.getPassword())){return userInfo;}else{return null;}}}
}

说明：

（1）@Service注解用于明确标记一个类属于服务层，该类通常包含业务逻辑（如数据处理、事务管理、规则校验等），是连接控制器（Controller）和数据访问层（Repository）的中间层。

注意：
在进行字符串判断时，要让已有的字符串与未知字符串进行判读，如password.equals(userInfo.getPassword())

如果写成userInfo.getPassword().equals(password)，可能会抛空指针异常。因为userInfo.getPassword()是经过Mapper查询出来的值，Mapper查询出来的值可能为null。

Service调用Mapper：
在这里插入图片描述

2.4 Mapper层

Mapper层是直接与数据库交互的层。

@Mapper
public interface UserInfoMapper {// 数据的开始  获取的条数@Select("select id,user_name,password,delete_flag,create_time "+"updata_time from user_info where user_name= #{userName}")UserInfo queryUserInfoByUserName(String userName);}

Mapper层查询出来的字段直接映射到UserInfo类的属性上，然后返回给调用该方法的变量。

说明：

（1）@Mapper 注解用于标识一个接口为 MyBatis 的映射器（Mapper），使其能够与数据库操作绑定。@Mapper 标记的接口会被 MyBatis 自动生成实现类，自动注册为 Spring Bean。

（2）@Select 用于直接在 Mapper 接口方法上定义 SQL 查询语句，替代传统的 XML 映射文件。它的核心作用是将 SQL 查询与 Java 方法绑定，简化数据库查询操作。

3.前端代码

文件login.html：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="css/bootstrap.min.css"><link rel="stylesheet" href="css/login.css"><script type="text/javascript" src="js/jquery.min.js"></script>
</head><body><div class="container-login"><div class="container-pic"><img src="pic/computer.png" width="350px"></div><div class="login-dialog"><h3>登陆</h3><div class="row"><span>用户名</span><input type="text" name="userName" id="userName" class="form-control"></div><div class="row"><span>密码</span><input type="password" name="password" id="password" class="form-control"></div><div class="row"><button type="button" class="btn btn-info btn-lg" onclick="login()">登录</button></div></div></div><script src="js/jquery.min.js"></script><script>function login() {$.ajax({url:"/user/login",type:"post",data:{"userName":$("#userName").val(),"password":$("#password").val()},success:function(result){if(result){location.href = "book_list.html";}else{alert("用户名或密码错误！");}}});}</script>
</body></html>

前端代码通过ajax向后端发送请求，后端经过业务处理后把值返回该前端。前端用result接收后端返回的值，如果result为true则跳转页面到book_list.html；如果result为false则在客户端显示用户名或密码错误！。

说明：
（1）基础HTML结构

<!DOCTYPE html>
<html lang="en">
<head><!-- 元信息与资源引入 -->
</head>
<body><!-- 页面内容 -->
</body>
</html>

<!DOCTYPE html>：声明文档类型为 HTML5。
< html lang=“en”>：根标签，lang=“en” 表示页面语言为英语。
< head>：存放页面元信息（如标题、CSS、JS 链接）。
< body>：存放用户可见的内容（如文本、图片、表单）。

（2）头部（< head>）解析

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/login.css">
<script type="text/javascript" src="js/jquery.min.js"></script>

< meta charset=“UTF-8”>：定义字符编码为 UTF-8（支持中文）。
< meta name=“viewport”>：控制页面在移动端的显示方式（自适应屏幕宽度）。
< title>：浏览器标签页显示的标题。
< link>：引入外部 CSS 文件：
bootstrap.min.css：Bootstrap 框架的样式（提供预定义的按钮、表单样式）。
login.css：自定义样式（用于调整登录页面布局）。
< script>：引入 jQuery 库（简化 JavaScript 操作）。

（3）页面主体（< body>）解析

登录容器：

<div class="container-login"><div class="container-pic"><img src="pic/computer.png" width="350px"></div><div class="login-dialog"><!-- 登录表单 --></div>
</div>

container-login：整个登录页面的外层容器（通过 CSS 控制布局）。
container-pic：左侧图片区域，展示一张电脑图片。
login-dialog：右侧登录表单区域。

登录表单：

<h3>登陆</h3>
<div class="row"><span>用户名</span><input type="text" name="userName" id="userName" class="form-control">
</div>
<div class="row"><span>密码</span><input type="password" name="password" id="password" class="form-control">
</div>
<div class="row"><button type="button" class="btn btn-info btn-lg" onclick="login()">登录</button>
</div>

< h3>：标题“登录”。
< div class=“row”>：Bootstrap 的栅格布局类。
< input>：表单输入框：
type=“text”：文本输入框（用户名）。
type=“password”：密码输入框（输入内容会隐藏为圆点）。
class=“form-control”：Bootstrap 的样式类（使输入框宽度充满容器）。
< button>：登录按钮：
class=“btn btn-info btn-lg”：Bootstrap 的按钮样式（蓝色、大号）。
οnclick=“login()”：点击按钮时触发 login() 函数。

（4）JavaScript 交互逻辑

<script src="js/jquery.min.js"></script>
<script>function login() {$.ajax({url: "/user/login",type: "post",data: {"userName": $("#userName").val(),"password": $("#password").val()},success: function(result) {if (result) {location.href = "book_list.html";} else {alert("用户名或密码错误！");}}});}
</script>

< script>：引入 jQuery 库。
login() 函数：
发送 AJAX 请求：通过 $.ajax() 向服务器发送 POST 请求到 /user/login。
传递参数：从输入框获取用户名和密码（$(“#userName”).val()）。
处理响应：
如果登录成功（result 为 true），跳转到 book_list.html。
如果失败，弹出错误提示。

4. 逻辑展示

在这里插入图片描述