文章目录
- 用户登录
用户登录
需求: 用户输入账号和密码,后端进行校验密码是否正确
- 如果不正确,前端进行用户告知
- 如果正确,跳转到首页.首页显示当前登录用户
- 后续再访问首页,可以获取到登录用户信息
(一) 约定前后端交互接口
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。
javascript
data: {
userName: $("#userName").val(), // 键名与后端参数名一致
password: $("#password").val()
}- 请求方式：
POST方法，适合提交敏感数据（如密码）。
(3) 后端接收请求并校验
- 参数绑定：Spring MVC 根据参数名
userName和password自动绑定到方法的参数。
java
public Boolean login(String userName, String password, HttpSession session) {
// 校验逻辑
}- 校验逻辑：
- 检查用户名和密码非空。
- 验证是否为预设值（
kunkun和ikun2.5）。 - 若校验通过，将用户名存入 Session。
(4) 后端返回响应
- 返回结果：
true（成功）或false（失败）。 - Session 存储：成功时，后端通过
session.setAttribute("userName", userName)存储登录状态。
(5) 前端处理响应
- success 回调：根据后端返回的布尔值
result执行不同逻辑：
javascript
if (result) {
// 跳转到首页
location.href = "index.html";
} else {
// 提示密码错误
alert("密码错误，请重新输入");
}(6) 跳转至首页后获取登录信息
- 首页请求：
index.html加载时，通过另一个 AJAX 请求/user/getLoginUser获取登录用户名。
javascript
$.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
java
@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
java
<!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
java
<!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>