《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
验证结果
当输入用户名和密码错误时
当输入用户名和密码正确时
登录成功