《JavaEE进阶》----7.＜SpringMVC实践项目：【登录页面的验证】＞

这篇文章详细的讲解了一个

简单的登录网页的前端代码和后端代码的构造

使用了JavaScript中的ajax来进行前后端的交互

一、前端代码

登录页面代码

<!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() {$.ajax({type:"post",url:"/login/check",data:{userName:$("#userName").val(),password:$("#password").val()},success:function(result){if(result==true){location.href = "index.html";}else{alert("用户名和密码错误！请重写输入")}}});}</script>
</body></html>

代码解析

<body>中的文档的主体部分，包含网页的可见内容。

<input type="button" value="登录" οnclick="login()">

<input> 元素用于在网页上创建各种类型的输入控件。

type="button"

指定这是一个按钮类型，不会提交表单，而是用于触发客户端的JavaScript函数或其他操作

οnclick="login()"

表示当用户点击登录按钮时，就会执行命名为login()的JavaScript函数

下面的用<script>包起来的代码

这段代码使用 jQuery 实现了一个简单的用户登录功能。它通过 AJAX 向服务器发送用户名和密码，检查登录凭证的有效性，并根据服务器返回的结果执行相应的操作。

1.首先引入jQuery库
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
通过 CDN 引入 jQuery 3.6.4 库，以便在页面中使用 jQuery 提供的简便的 JavaScript 操作方法。

2.定义login（）函数

login（）是一个 JavaScript 函数，用于处理用户点击“登录”按钮时的操作。

3 $.ajax()方法

使用 jQuery 的 $.ajax 方法来进行 AJAX 请求，发送异步 HTTP 请求。

关键参数解释：
指定请求类型为 Post，用于向服务器提交数据（用户名和密码）。

url:"/login/check",
指定请求的 URL（服务器端的登录检查接口），即请求会发送到 /login/check。
data:发送到服务器的数据对象，包含用户输入的用户名和密码：
data: {userName: $("#userName").val(),password: $("#password").val()
}
$("#userName").val()：使用 jQuery 获取 ID 为 userName 的输入框的值（用户名）。
$("#password").val()：使用 jQuery 获取 ID 为 password 的输入框的值（密码）。
success:function(result){
}
请求成功后的回调函数，接收一个参数 result，代表服务器的返回结果。
如果 result 是 true，表示登录成功，使用 location.href = "index.html"; 重定向到主页 index.html。
如果 result 是 false，表示登录失败，弹出提示框：alert("用户名和密码错误！请重写输入");。

显示用户名页面的代码

<!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>$.ajax({type:"post",url:"/login/index",success:function(result){$("#loginUser").text(result);}});</script>
</body></html>

代码解析：
登录人: <span id="loginUser"></span>
1. <span> 标签

<span> 是一个行内元素，通常用于在网页中创建一个没有任何特定样式或格式的容器，用于文本或其他内联元素。
在这段代码中，<span> 元素用于显示登录用户的名字。

2. id="loginUser"

id 是一个 HTML 属性，表示元素的唯一标识符。在这段代码中，id="loginUser" 用于唯一标识这个 <span> 元素。
通过这个 ID，可以在 JavaScript 或 jQuery 中轻松定位和操作这个元素的内容。
        $.ajax({type:"post",url:"/login/index",success:function(result){$("#loginUser").text(result);}});
return是后端返回的结果。也就是用户名。

因此我们只需要将result的值赋值给loginUser这个参数

$("#loginUser")：使用 jQuery 选择器选择 ID 为 loginUser 的元素。
.text(result)：将 result 的内容设置为该元素的文本内容。

二、前端页面

三、后端代码

3.1 完整代码


@RestController
@RequestMapping("/login")
public class LoginController {@RequestMapping("/check")public Boolean check(String userName , String password, HttpSession session){//校验账号和密码是否为空if(!StringUtils.hasLength(userName)||!StringUtils.hasLength(password)){return false;}//检验账号和密码是否正确//本来使用数据库，如今使用数据模拟if("张三".equals(userName)&&"123456".equals(password)){session.setAttribute("userName",userName);return true;}return false;}@RequestMapping("/index")public String index(HttpSession session){String userName = (String) session.getAttribute("userName");return userName;}}

3.2 代码解析

验证用户名和密码

在判断输入字符是否为空时，我们可以用到Spring给我们提供的方法：
!StringUtils.hasLength(userName)||!StringUtils.hasLength(password)
这里验证用户名和密码的时候进行数据模拟，而非使用数据库，等后续再改进。
        if("张三".equals(userName)&&"123456".equals(password)){session.setAttribute("userName",userName);return true;}
书写标准：把常量写在前面，变量写在后面。

进行完上述的代码，我们就需要获取用户信息，怎么获取呢？这时候就需要用到Session。

从Session里拿。

设置Session （得到用户信息）

如上完整代码，是校验用户名和密码的完整代码。我们还进行了Session的设置。

我们使用HttpSession session这个对象设置Session内容为用户名。

显示用户信息

    @RequestMapping("/index")public String index(HttpSession session){String userName = (String) session.getAttribute("userName");return userName;}

我们在显示登录人页面中，使用HttpSession session这个对象获得了之前设置的

Session信息，也就是用户名。并且返回了userName。
(String) session.getAttribute("userName");
在这串代码中，如果Session为空，并不会报错。因为它自动帮我们创建了一个空的Session