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

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

news 来源：原创 2025/5/11 3:15:25

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. 逻辑展示

在这里插入图片描述

相关文章：

  • feign负载均衡
  • 4.系统定时器基本定时器
  • 当“信任”遇上“安全”：如何用Curtain Logtrace记录文件操作活动 守护团队与数据的双重底线？
  • 从Huggingface下载模型的方法小结
  • 如何从路由表优化的角度理解[CIDR]无类别域间路由选择技术？
  • 针对Mkdocs部署到Githubpages加速访问速度的一些心得
  • 2021年下半年试题四：论微服务架构及其应用
  • Spring AI 之 AI核心概念
  • 2025年渗透测试面试题总结-渗透岗位全职工作面试（附回答）（题目+回答）
  • SWiRL：数据合成、多步推理与工具使用
  • 前端代码规范详细配置
  • QT：qt5调用打开exe程序并获取调用按钮控件实例2025.5.7
  • 2025年高校辅导员考试高频考点有哪些？
  • qsort函数
  • Linux/AndroidOS中进程间的通信线程间的同步 - 信号量
  • 绘制拖拽html
  • 移动二维矩阵
  • 证券行业数字化转型：灵雀云架设云原生“数字高速路”
  • ZArchiver解压缩工具：高效解压，功能全面
  • FreeCAD傻瓜教程-涡轮蜗杆的快速绘制FCGear工作台的使用方法
  • 昆明一学校门外小吃摊占满人行道，城管：会在重点时段加强巡查处置
  • 上财发布“AI+课程体系”，人工智能如何赋能财经教育？
  • 教育部答澎湃：2025世界数字教育大会将发布系列重磅成果
  • 山东14家城商行中，仅剩枣庄银行年营业收入不足10亿
  • 看展览｜2025影像上海艺博会：市场与当代媒介中的摄影
  • 2025中国品牌日上海践行活动启动，将建设品牌生态交互平台