沈阳网页设计招聘_大连市住建局官方网_备案查询站长工具_上海搜索引擎优化seo

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 (返回当前登录的用户)
- 空字符串（无用户登录）

3. 后端实现

package com.example.springwebdemo2;
import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpSession;
import org.springframework.util.StringUtils;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RestController;@RequestMapping("/user")
@RestController
public class UserController {@RequestMapping(value = "/login", method = RequestMethod.POST)//如果有session对象就返回,如果没有就创建一个public Boolean login(String userName, String password, HttpServletRequest request) {//尽量使用这种形式写判断空的代码
//        if(userName==null||"".equals(userName)||password==null||"".equals(password)){
//        }//但是spring提供一种StringUtils方法if(StringUtils.isEmpty(userName) || StringUtils.isEmpty(password)) {return false;}//不为空,校验账号和密码是否正确if("admin".equals(userName) && "admin".equals(password)) {//设置sessionHttpSession session=  request.getSession(true);session.setAttribute("userName",userName);return true;}return false;}@RequestMapping("/getLoginUser")public String getLoginUser(HttpSession session) {//这里想要获取用户名,就要获取session,通过上面的方法获得sessionif(session.getAttribute("userName") != null) {return (String)session.getAttribute("userName");}return "";}
}

4. 前端实现

4.1 登录页面（login.html）

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>登录页面</title>
</head>
<body><h1>用户登录</h1>用户名: <input type="text" id="userName"><br>密码: <input 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() {var userName = $("#userName").val();var password = $("#password").val();$.ajax({url: "/user/login",type: "post",data: {userName: userName,password: password},success: function (response) {if (response == true) {alert("登录成功");location.href = "index.html";} else {alert("登录失败");}}});}</script>
</body>
</html>

4.2 首页（index.html）

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>用户首页</title>
</head>
<body><h1>欢迎访问</h1><p>当前登录用户: <span id="loginUser"></span></p><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script><script>$.ajax({url: "/user/getLoginUser",type: "get",success: function (userName) {if (userName) {$("#loginUser").text(userName);} else {alert("当前没有用户登录");window.location.href = "login.html";}}});</script>
</body>
</html>

为什么使用 AJAX？

什么是 AJAX？

AJAX（Asynchronous JavaScript and XML）是一种异步技术，允许在不刷新整个页面的情况下，与服务器进行数据交换。

使用 AJAX 的好处

提高用户体验：无需刷新整个页面，减少页面跳转，提高交互性。
减少服务器负担：只传输必要的数据，降低带宽消耗。
更快的响应：无需等待整个页面重新加载，数据能即时返回。

如果不使用 AJAX，会发生什么？

每次用户点击“登录”按钮，页面都会 完全刷新，用户体验较差。
需要 通过表单提交 方式进行数据传输，整个页面会重新加载。
不能 动态更新部分页面内容，如 #loginUser 这样的区域。

5. 多种语法解析

1. Spring 提供的 StringUtils 方法

StringUtils.isEmpty(userName) || StringUtils.isEmpty(password)
避免使用 userName == null || "".equals(userName)，提升代码可读性。

2. 获取 Session 的两种方式

方式 1: 直接使用 `HttpSession` 参数

@RequestMapping("/getLoginUser")
public String getLoginUser(HttpSession session) {Object userName = session.getAttribute("userName");return userName != null ? userName.toString() : "";
}

方式 2: 通过 `HttpServletRequest` 获取

@RequestMapping("/getLoginUser")
public String getLoginUser(HttpServletRequest request) {HttpSession session = request.getSession(false);if (session != null) {Object userName = session.getAttribute("userName");return userName != null ? userName.toString() : "";}return "";
}