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

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类：

java 复制代码

@RestController
@RequestMapping("/user")
public class UserInfoController {

    @Autowired
    private 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.存入session

        userInfo.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:

java 复制代码

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

图解：

2.3 Service层

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

UserInfoService类：

java 复制代码

@Service
public class UserInfoService {

    @Autowired
    private 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层是直接与数据库交互的层。

java 复制代码

@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：

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结构

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>）解析

html 复制代码

<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 框架的样式（提供预定义的按钮、表单样式）。

< script>：引入 jQuery 库（简化 JavaScript 操作）。

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

登录容器：

html 复制代码

<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：左侧图片区域，展示一张电脑图片。

登录表单：

html 复制代码

<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 交互逻辑

html 复制代码

<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 库。

发送 AJAX 请求：通过 $.ajax() 向服务器发送 POST 请求到 /user/login。

传递参数：从输入框获取用户名和密码（$("#userName").val()）。

处理响应：

如果登录成功（result 为 true），跳转到 book_list.html。

如果失败，弹出错误提示。

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

1. 约定前后端交互接口

2. 后端代码

2.1 后端代码的逻辑

2.2 Controller层

2.3 Service层

2.4 Mapper层

3.前端代码

4. 逻辑展示