当前位置: 首页> 新闻> 资讯 > 沈阳网页设计招聘_大连市住建局官方网_备案查询站长工具_上海搜索引擎优化seo

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

时间:2025/7/10 11:58:56来源:https://blog.csdn.net/2301_80176774/article/details/146116102 浏览次数:0次
沈阳网页设计招聘_大连市住建局官方网_备案查询站长工具_上海搜索引擎优化seo

1. 需求分析

实现一个简单的用户登录系统,满足以下需求:

  1. 用户输入账号和密码,后端校验密码是否正确。
  2. 如果不正确,前端提示用户登录失败。
  3. 如果正确,跳转到首页,并在首页显示当前登录用户。
  4. 后续访问首页时,能够获取到当前已登录用户信息。

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 "";
}

6. 测试流程(Postman)

步骤 1:测试 /user/login

  • 输入正确用户名和密码(admin/admin

  • 服务器返回 true

  • 输入错误的用户名或密码

  • 服务器返回 false

步骤 2:测试 /user/getLoginUser

  • 登录成功后,访问 /user/getLoginUser

  • 服务器返回 admin

  • 若未登录,返回 ""(空字符串)

步骤 3:测试前端交互

  • 访问 login.html,输入 admin/admin 登录。

  • 登录成功后,跳转 index.html,显示 admin

  • 关闭浏览器重新访问 index.html,仍然能够获取到 admin

  • 清除浏览器 Cookie 后,重新访问 index.html,应跳转到 login.html


7. 总结

  • 使用 Spring MVC 处理用户登录,Session 记录登录状态。
  • 使用 AJAX 实现异步数据请求,提升用户体验。
  • 提供多种方式获取 Session,增强代码灵活性。
  • 采用 StringUtils 进行字符串校验,提升代码可读性。

🎯 至此,Spring MVC 用户登录功能已实现! 🚀

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

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com

责任编辑: