JavaEE：Spring Web简单小项目实践二（用户登录实现）

news2024/9/22 21:32:00

学习目的：

1、理解前后端交互过程

2、学习接口传参，数据返回以及页面展示

1、准备工作

创建SpringBoot项目，引入Spring Web依赖，添加前端页面到项目中。

前端代码：

login.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>登录页面</title>
</head>

<body>
<h1>用户登录</h1>
用户名：<input name="userName" type="text" id="userName"><br>
密码：<input name="password" type="password" id="password"><br>
<input type="button" value="登录" onclick="login()">

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script>
    function login() {

    }

</script>
</body>

</html>

index.html

<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>用户登录首页</title>
</head>

<body>
登录人: <span id="loginUser"></span>

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script>

</script>
</body>

</html>

2、约定前后端交互接口

需求分析：

对于后端来说，不涉及前端页面展示的设计，只需要实现两个功能：

登录页面：通过获取账号和密码，校验输入的账号密码是否正确，并反馈给前端

首页：告知前端当前登录用户。如果当前已有用户登录，则返回登录的账号，没有则返回空

1、校验接口

接口定义：

请求路径：/user/login

接口描述：校验账号密码是否正确

请求参数：

响应数据：

Content-Type：text/html

响应内容：true 账号密码验证成功 / false 账号密码验证失败

2、查询用户登录接口

接口定义：

请求路径：/user/getLoginUser

接口描述：查询当前登录的用户

请求参数：

无

响应数据：

Content-Type：text/html

响应内容：zhangsan

（返回当前登录的用户）

3、实现服务端代码

1、校验接口

写法一：

import jakarta.servlet.http.HttpSession;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

@RestController()
@RequestMapping("/user")
public class LoginController {
    @RequestMapping(value = "/login")
    public Boolean login(String userName, String password, HttpSession session) {
        //账号或密码为空
        if(userName == null || password == null) {
            return false;
        }
        //校验账号密码是否正确
        //因为没有引进数据库，所以这边先采用硬编码把它写死
        if("zhangsan".equals(userName) && "123456".equals(password)) {
            //账号密码校验成功，存储到session中
            session.setAttribute("username", userName);
            return true;
        }
        return false;
    }
}

写法二：

import jakarta.servlet.http.HttpSession;
import org.springframework.util.StringUtils;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

@RestController()
@RequestMapping("/user")
public class LoginController {
    @RequestMapping(value = "/login")
    public Boolean login(String userName, String password, HttpSession session) {
        //写法二：
        //校验账号密码是否为空
        if (!StringUtils.hasLength(userName) || !StringUtils.hasLength(password)) {
            return false;
        }
        
        //校验账户密码是否正确
        if (!"zhangsan".equals(userName) || !"123456".equals(password)) {
            return false;
        }
        session.setAttribute("userName", userName);
        return true;
    }
}

StringUtils.hasLength() 是Spring提供的一个工具方法，判断字符串是否有值

字符串为 null 或 "" 时，返回 false，其他情况返回 true

2、查询用户登录接口

import jakarta.servlet.http.HttpSession;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

@RestController()
@RequestMapping("/user")
public class LoginController {
       @RequestMapping("/getLoginUser")
        public String getLoginUser(HttpSession session) {
        //从session中获取用户登录信息
        String userName = (String) session.getAttribute("username");
        //如果用户已经登录，session不为空，则直接返回用户信息
        if (userName != null) {
            return userName;
        }
        return "";
    }
}

4、调整前端页面代码

1、调整登录页面login.html

对于前端而言，当点击登录按钮时，需要把用户登录的信息传递到后端进行校验，后端校验成功，则跳转到首页 index.html；后端校验失败，则弹出警告

    <script>
        function login() {
            $.ajax({
                url: "/user/login",
                data: {
                    "userName": $("#userName").val(),
                    "password": $("password").val()
                },
                success: function (result) {
                    if (result) {
                        //返回结果为true 页面跳转
                        location.href = "index.html";
                    } else {
                        //返回结果为false 报警告
                        alert("账号或密码错误");
                    }
                }
            });
        }

    </script>

2、调整首页代码

调整首行代码只需显示当前登录用户即可，当前登录用户需要从后端获取，并显示到前端

    <script>
        $.ajax({
            type: "get",
            url: "/user/getLoginUser",
            success: function (result) {
                $("#loginUser").text(result);
            }
        });
    </script>