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

【SpringMVC】详解用户登录前后端交互流程：AJAX 异步通信与 Session 机制实战

news 2025/11/1 8:20:25

文章目录

用户登录
- (一) 约定前后端交互接口
- - 1. 需求分析
  - 2.接口定义
- (二) 服务端代码
- - 1.校验接口
  - 2.查询登录用户接口
- (三) 前端页面代码
- - 1.登录页面 login.html
  - 2.首页代码
- (四) 运行测试
- (五) 理解前后端交互流程

用户登录

需求: 用户输入账号和密码,后端进行校验密码是否正确

如果不正确,前端进行用户告知
如果正确,跳转到首页.首页显示当前登录用户
后续再访问首页,可以获取到登录用户信息

(一) 约定前后端交互接口

1. 需求分析

对于后端开发人员而言,不涉及前端页面的展示,只需要提供两个功能

1. 登录页面: 通过账号和密码,校验输入的账号密码是否正确,并告知前端
1. 首页: 告知前端当前登录用户.如果当前已有用户登录,返回登录的账号,如果没有,返回空

2.接口定义

1. 校验接口

请求路径: /user/login
请求方式: POST
接口描述: 校验账号密码是否正确

请求参数:

参数名	类型	是否必须	备注
userName	String	是	校验的账号
password	String	是	校验的密码

响应数据:

Content-Type: text/html
响应内容:
true //账号密码验证成功
false//账号密码验证失败

2. 查询登录用户接口

请求路径: /user/getLoginUser
请求方式: GET
接口描述: 查询当前登录的用户

请求参数:
无

响应数据:

Content-Type: text/html
响应内容:
zhangsan
返回当前登录的用户

(二) 服务端代码

1.校验接口

在这里插入图片描述

2.查询登录用户接口

在这里插入图片描述

(三) 前端页面代码

1.登录页面 login.html

在这里插入图片描述

2.首页代码

首页代码比较简单,只显示当前登录用户即可

当前登录用户需要从后端获取,并显示到前端

在这里插入图片描述

(四) 运行测试

在这里插入图片描述

(五) 理解前后端交互流程

以下是登录过程的完整交互步骤：

(1) 用户在前端输入信息并点击登录

前端页面：login.html 中的输入框收集用户名和密码。
触发事件：点击按钮调用 login() 函数，通过 AJAX 发送请求。

(2) 前端通过 AJAX 发送请求

AJAX 请求：前端将用户名和密码封装成键值对，发送到后端接口 /user/login。

data: {userName: $("#userName").val(), // 键名与后端参数名一致password: $("#password").val()
}

请求方式：POST 方法，适合提交敏感数据（如密码）。

(3) 后端接收请求并校验

参数绑定：Spring MVC 根据参数名 userName 和 password 自动绑定到方法的参数。

public Boolean login(String userName, String password, HttpSession session) {// 校验逻辑
}

校验逻辑：
1. 检查用户名和密码非空。
2. 验证是否为预设值（kunkun 和 ikun2.5）。
3. 若校验通过，将用户名存入 Session。

(4) 后端返回响应

返回结果：true（成功）或 false（失败）。
Session 存储：成功时，后端通过 session.setAttribute("userName", userName) 存储登录状态。

(5) 前端处理响应

success 回调：根据后端返回的布尔值 result 执行不同逻辑：

if (result) {// 跳转到首页location.href = "index.html";
} else {// 提示密码错误alert("密码错误，请重新输入");
}

(6) 跳转至首页后获取登录信息

首页请求：index.html 加载时，通过另一个 AJAX 请求 /user/getLoginUser 获取登录用户名。

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

Session 读取：后端从 Session 中取出用户名并返回，前端更新页面显示。

2. AJAX 的功能

(1) 异步通信

不刷新页面：AJAX 允许在不重新加载整个页面的情况下，与服务器交换数据并更新部分内容。
用户体验：用户停留在当前页面，仅局部内容变化（如错误提示），适合登录这种需要即时反馈的场景。

(2) 请求与响应

发送请求：通过 $.ajax() 配置请求方法（POST/GET）、URL、数据等。
处理响应：success 回调函数处理成功响应，error 处理失败（如网络错误）。

(3) 数据格式

发送数据：可以是键值对（如 userName: "kunkun"）或 JSON。
接收数据：后端返回的 true/false 会被自动解析为布尔值，也可返回 JSON 对象。

3. 关键细节补充

(1) Session 的跨页面保持

Cookie 机制：当 Session 创建时，后端会自动生成一个 JSESSIONID 并存入 Cookie，浏览器后续请求会携带此 Cookie。
身份识别：后端通过 JSESSIONID 找到对应的 Session，实现跨页面状态保持（如首页显示用户名）。

(2) 安全性注意事项

密码传输：当前代码使用明文传输密码，实际项目中应使用 HTTPS 并加密（如哈希处理）。
Session 有效期：默认 Session 在用户关闭浏览器后失效，可手动设置超时时间。

(3) 后端逻辑优化

错误提示细化：当前返回 true/false 只能提示密码错误，实际可返回 JSON 对象包含具体原因（如 {code: 400, message: "用户名不存在"}）。
参数校验增强：使用 Spring Validation 进行更专业的参数校验（如长度、格式）。

完整代码

LoginController

@RestController
@RequestMapping("/user")
public class LoginController {@RequestMapping("/login")public boolean login(String userName, String password, HttpSession session){if(!StringUtils.hasLength(userName)|| !StringUtils.hasLength(password)){return false;}if(!"chaoxin".equals(userName) ||!"12345".equals(password)){return false;}session.setAttribute("userName",userName);return true;}@RequestMapping("/getLoginUser")public String getLoginUser(HttpSession session){//从Session中获取用户登录信息String userName = (String) session.getAttribute("userName");//如果用户已经登录,则直接返回用户登录if(StringUtils.hasLength(userName)){return userName;}return "";}
}

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://ajax.aspnetcdn.com/ajax/jquery/jquery-3.5.1.min.js"></script>
<!--    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>--><script>$.ajax({type: "get",url: "/user/getLoginUser",success: function(result){$("#loginUser").text(result);}});</script>
</body></html>

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://ajax.aspnetcdn.com/ajax/jquery/jquery-3.5.1.min.js"></script>
<!--  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>--><script>function login() {$.ajax({type: "post",url: "/user/login",data: {"userName": $("#userName").val(),"password": $("#password").val()},success:function(result){if(result){location.href = "/index.html";}else{alert("账号密码有误");}}     });}</script>
</body>
</html>