基于SpringBoot的用户登录

文章目录

前言
一、前端文件放置
二、约定前后端交互接口
- 1.需求分析
- 2.接口的定义
三、代码实现
四、运行结果
总结

前言

用户登录

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

1.如果不正确，前端进行用户告知

2.如果正确，跳转到首页，首页显示当前登录用户

3.后续再访问首页，可以获取到登录用户信息

一、前端文件放置

二、约定前后端交互接口

1.需求分析

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

（1）登录页面：通过账号和密码，校验输入的账号和密码是否正确，并告知前端

（2）首页：告知前端当前登录用户，如果当前已有用户登录，返回登录的账号，如果没有，返回空

2.接口的定义

（1）校验接口

c 复制代码

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

请求参数：

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

响应数据：

c 复制代码

Content-Type:text/html

响应内容：
true:账号密码验证成功
false:账号密码验证失败

查询用户接口：

c 复制代码

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

请求参数：无

响应数据：

c 复制代码

Content-Type:test/html

响应内容：用户名

三、代码实现

1.服务器端代码实现

java 复制代码

package com.example.demo;

import jakarta.servlet.http.HttpSession;
import org.springframework.util.StringUtils;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

@RequestMapping("/user")
@RestController
public class UserController {
    @RequestMapping("/login")
    public Boolean login(String userName, String password, HttpSession session) {
        if (!StringUtils.hasLength(userName) || !StringUtils.hasLength(password)) {
            return false;
        }
        if (!"admin".equals(userName) && !"admin".equals(password)) {
            return false;
        }
        session.setAttribute("userName",userName);
        return true;
    }
    @RequestMapping("/getLoginUser")
    public String getLoginUser(HttpSession session) {
        String userName = (String) session.getAttribute("userName");
        if (StringUtils.hasLength(userName)) {
            return userName;
        }
        return "";


    }
}

2.客户端代码实现

（1）index.html

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://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>

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://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>

四、运行结果

总结

前端页面设计 login.html包含用户名和密码输入框，通过Ajax发送POST请求到/user/login接口 index.html通过Ajax GET请求/user/getLoginUser获取当前登录用户信息使用jQuery简化DOM操作和Ajax请求处理

后端接口设计登录接口/user/login接收userName和password参数，校验成功后设置session 获取登录用户接口/user/getLoginUser从session中读取当前登录状态采用HttpSession实现会话跟踪，保持用户登录状态

校验逻辑实现对空输入进行验证，避免无效请求硬编码示例中账号密码均为"admin"，实际项目应连接数据库验证通过session.setAttribute()存储登录状态

前后端交互规范登录接口返回Boolean类型结果，前端根据响应跳转或提示错误获取用户接口返回字符串类型用户名，前端动态显示统一使用Content-Type:text/html简化响应处理

基于SpringBoot的用户登录

文章目录

前言

一、前端文件放置

二、约定前后端交互接口

1.需求分析

2.接口的定义

三、代码实现

1.服务器端代码实现

2.客户端代码实现

（1）index.html

（2）login.html

四、运行结果

总结