用户登录前后端开发(一个简单完整的小项目)——SpringBoot与session验证(带前后端源码)全方位全流程超详细教程

简介: 文章通过一个简单的SpringBoot项目,详细介绍了前后端如何实现用户登录功能,包括前端登录页面的创建、后端登录逻辑的处理、使用session验证用户身份以及获取已登录用户信息的方法。

首先,定义前后端交互接口

讲解:

  1. 登录接口路径可以较为随意的设定,但参数必须有账号密码,也就是username和password,后端进行校验后返回校验成功,还是校验失败,也就是true和false
  2. 获取用户的登录信息,不需要传任何参数,只需要前端发送请求后,后端将当前登录用户的名称返回即可

然后,创建一个SpringBoot项目

如何创建一个SpringBoot项目——超详细教程

编写前端页面

    在resource目录下的static目录下创建**登录和主页**的**html页面**,此处我将其分别命名为 login.html和index.html
AI 代码解读

如图红框位置:

登录(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://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script>
  function login() {
    console.log("登录");
    $.ajax({  // ajax 发送请求
      url: "/user/login",   // 请求路径
      type: "post",         // 请求类型
      data:{               // 传递的参数
        "userName": $("#userName").val(),
        "password": $("#password").val()
      },
      success:function(result){    // 如果响应成功了(有响应),则执行此回调函数  result 表示后端返回的结果
        if(result){
          location.href = "/index.html";   // 页面跳转
          // location.assign();
        }else{
          alert("密码错误");    // 弹框
        }
      }
    });
  }

</script>
</body>

</html>
AI 代码解读

代码逻辑: 从input输入框内获取username和password参数,向后端发送post请求将参数发送过去,后端进行校验,如果后端响应为true,则说明响应成功(账号密码正确),执行回调函数跳转页面到index.html (主页)

主页(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://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script>
        // 页面加载时,就去调用后端请求(立即执行)
        $.ajax({
            url: "/user/getUserInfo",
            type: "get",
            success:function (username){
                $("#loginUser").text(username);   // text 表示往该选择器放值,此处放username这个值
            }
        });
</script>
</body>

</html>
AI 代码解读

代码逻辑:来到该页面,立即向后端发送get请求,获取用户名username并展示到该页面上

编写后端代码

创建Java文件,我将其命名为userController

以下是全部代码

@RequestMapping("/user")
@RestController
public class UserController {
    @RequestMapping("/login")
    public Boolean login(String userName, String password, HttpSession session){
        // 校验参数的合法性
//        if(userName == null || userName.length()==0 || password == null || password.length() == 0){
//            return false;
//        }

        if(!StringUtils.hasLength(userName) || !StringUtils.hasLength(password)){
            return false;
        }

        // 进行用户名和密码的校验
        if("admin".equals(userName) && "admin".equals(password)){
            // 设置session
            session.setAttribute("username","admin");
            return true;
        }
        return false;
    }

    @RequestMapping("/getUserInfo")
    public String getUserInfo(HttpSession session){
        // 从Session获取登录用户
        String userName = (String) session.getAttribute("username");
        return userName;
    }
}
AI 代码解读

方法login处理逻辑:

  1. 先校验参数合法性,判断是否为空等
  2. 然后进行用户名和密码的校验,判断是否是正确的用户名和密码
  3. 如果以上校验都通过,则设置session,存放username,以便后续使用

方法getUserInfo处理逻辑:

从session中获取username并返回给前端

目录
打赏
0
2
2
0
16
分享
相关文章
最新版 | 深入剖析SpringBoot3源码——分析自动装配原理(面试常考)
自动装配是现在面试中常考的一道面试题。本文基于最新的 SpringBoot 3.3.3 版本的源码来分析自动装配的原理,并在文未说明了SpringBoot2和SpringBoot3的自动装配源码中区别,以及面试回答的拿分核心话术。
最新版 | 深入剖析SpringBoot3源码——分析自动装配原理(面试常考)
基于 SpringBoot 和 Vue 开发校园点餐订餐外卖跑腿Java源码
一个非常实用的校园外卖系统,基于 SpringBoot 和 Vue 的开发。这一系统源于黑马的外卖案例项目 经过站长的进一步改进和优化,提供了更丰富的功能和更高的可用性。 这个项目的架构设计非常有趣。虽然它采用了SpringBoot和Vue的组合,但并不是一个完全分离的项目。 前端视图通过JS的方式引入了Vue和Element UI,既能利用Vue的快速开发优势,
103 13
java版药品不良反应智能监测系统源码,采用SpringBoot、Vue、MySQL技术开发
基于B/S架构,采用Java、SpringBoot、Vue、MySQL等技术自主研发的ADR智能监测系统,适用于三甲医院,支持二次开发。该系统能自动监测全院患者药物不良反应,通过移动端和PC端实时反馈,提升用药安全。系统涵盖规则管理、监测报告、系统管理三大模块,确保精准、高效地处理ADR事件。
SpringBoot获取项目文件的绝对路径和相对路径
SpringBoot获取项目文件的绝对路径和相对路径
118 1
SpringBoot获取项目文件的绝对路径和相对路径
SpringBoot项目中mysql字段映射使用JSONObject和JSONArray类型
SpringBoot项目中mysql字段映射使用JSONObject和JSONArray类型 图像处理 光通信 分布式计算 算法语言 信息技术 计算机应用
61 8
Spring运维之boot项目多环境(yaml 多文件 proerties)及分组管理与开发控制
通过以上措施,可以保证Spring Boot项目的配置管理在专业水准上,并且易于维护和管理,符合搜索引擎收录标准。
51 2
SpringBoot项目使用AOP及自定义注解保存操作日志
SpringBoot项目使用AOP及自定义注解保存操作日志
56 1
SpringBoot项目的html页面使用axios进行get post请求
SpringBoot项目的html页面使用axios进行get post请求
43 0
|
7月前
|
springboot项目打jar包后,如何部署到服务器
springboot项目打jar包后,如何部署到服务器
455 1
AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等