当前位置： 首页 > news >正文

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

news 2025/11/5 22:38:18

🧸注：不要看我的文件多，那是我的其他项目，这个项目所用的文件我会全部用红框框起来，没框的部分不用管，前端两个文件，后端一个文件 📜

目录

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

然后，创建一个SpringBoot项目

编写前端页面

登录(login.html)： 

主页(index.html)

编写后端代码

方法login处理逻辑：

方法getUserInfo处理逻辑：

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

讲解：

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

然后，创建一个SpringBoot项目

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

编写前端页面

        在resource目录下的static目录下创建登录和主页的html页面，此处我将其分别命名为 login.html和index.html

如图红框位置：

登录(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>

代码逻辑： 从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>

代码逻辑：来到该页面，立即向后端发送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)){// 设置sessionsession.setAttribute("username","admin");return true;}return false;}@RequestMapping("/getUserInfo")public String getUserInfo(HttpSession session){// 从Session获取登录用户String userName = (String) session.getAttribute("username");return userName;}
}

方法login处理逻辑：

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

方法getUserInfo处理逻辑：

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

相关文章：

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

&#x1f9f8;注&#xff1a;不要看我的文件多&#xff0c;那是我的其他项目&#xff0c;这个项目所用的文件我会全部用红框框起来&#xff0c;没框的部分不用管&#xff0c;前端两个文件&#xff0c;后端一个文件 &#x1f4dc; 目录 首先&#xff0c;定义前后端交互接口 然…...

编程日记 2023/10/30 7:45:54

FFmpeg5.1.3编译动态库踩坑之旅(基于Linux虚拟机)

准备工作 环境准备 1.Windows安装Oracle VM VirtualBox 7.0.10&#xff0c;安装ubuntu-22.04.3。 坑一&#xff1a;无法往虚拟机里拖放复制文件&#xff0c;解决办法&#xff1a;登录Ubuntu虚拟机时切换到xorg方式登录&#xff0c;参考地址&#xff1a;Ubuntu Desktop 22.04…...

编程日记 2023/10/30 7:44:53

【语义分割】语义分割概念及算法介绍

文章目录 一、基本概念二、研究现状2.1 传统算法2.2 深度学习方法 三、数据集及评价指标3.1 常用数据集3.2 常用指标 四、经典模型参考资料 一、基本概念 语义分割是计算机视觉中很重要的一个方向。不同于目标检测和识别&#xff0c;语义分割实现了图像像素级的分类。它能够将…...

编程日记 2023/10/30 7:43:52

基于RK3568高性价比全国产EMS储能解决方案（一）概述

储能产业链框架 储能产业链可分为上游“原材料及生产设备”、中游“储能系统”、下游“储能场景应用及后市场服务”。 图1 储能产业链框架图 产业链中游的“储能电池系统”主要包括“能量管理系统(EMS)”、“电池管理系统(BMS)”、“储能逆变器(PCS)”、“电池组”四个部分。…...

编程日记 2023/10/30 7:42:51

3 Go的基础语法

概述 在上一节的内容中&#xff0c;我们介绍了第一个Go程序&#xff0c;包括&#xff1a;安装Go环境、编写第一个Go程序、编译并运行程序等。在本节中&#xff0c;我们将介绍Go的基础语法。Go是一门简洁和优雅的语言&#xff0c;有自己特殊的一些语法规则。因此&#xff0c;在介…...

编程日记 2023/10/30 7:40:48

Redis之Lua脚本讲解

这里写自定义目录标题 1 Lua1.1 简介1.1.1 注释1.1.2 变量1.1.3 数据类型1.1.4 控制结构1.1.5 函数1.1.6 模块1.1.7 字符串操作1.1.8 错误处理1.1.9 标准库 1.2 Redis和Lua脚本结合优点1.3 Lua脚本应用和调试1.3.1 缓存更新1.3.2 原子操作1.3.3 数据处理1.3.4 分布式锁1.3.5 Re…...

编程日记 2023/10/30 7:38:46

redis archive github

https://github.com/redis/redis/releases/tag/7.2.2https://github.com/redis/redis/releases/tag/7.2.2...

编程日记 2023/10/30 7:35:39

3台Centos7快速部署Kafka集群

首先&#xff0c;我要说&#xff0c;Kafka 是强依赖于 ZooKeeper 的&#xff0c;所以在设置 Kafka 集群之前&#xff0c;我们首先需要设置一个 ZooKeeper 集群。 部署ZooKeeper需要安装jdk yum install java-1.8.0-openjdk 安装完以后 下面是详细的步骤&#xff1a; 1. 安装和…...

编程日记 2023/10/30 7:34:37

最小栈（C++解法）

题目 设计一个支持 push &#xff0c;pop &#xff0c;top 操作&#xff0c;并能在常数时间内检索到最小元素的栈。 实现 MinStack 类: MinStack() 初始化堆栈对象。void push(int val) 将元素val推入堆栈。void pop() 删除堆栈顶部的元素。int top() 获取堆栈顶部的元素。i…...

编程日记 2023/10/30 7:33:37

Python 算法高级篇：堆排序的优化与应用

Python 算法高级篇&#xff1a;堆排序的优化与应用 引言 1. 什么是堆&#xff1f;2. 堆的性质3. 堆排序的基本原理4. 堆排序的 Python 实现5. 堆排序的性能和优化6. 堆排序的实际应用7. 总结 引言 堆排序是一种高效的排序算法&#xff0c;它基于数据结构中的堆这一概念。堆排序…...

编程日记 2023/10/30 7:32:35

视频下载软件 Downie4 mac中文介绍

Downie mac是一款Mac平台上非常实用的视频下载工具。它支持下载各种视频网站上的视频&#xff0c;并且具有快速、稳定、易于使用的特点。 Downie支持下载各种视频网站上的视频&#xff0c;包括YouTube、Vimeo、Netflix、Hulu、Amazon等等。它具有快速、稳定的下载速度&#xff…...

编程日记 2023/10/30 7:30:33

计算机操作系统重点概念整理-第一章 计算机系统概述【期末复习|考研复习】

第一章 计算机系统概述 【期末复习|考研复习】 计算机操作系统系列文章传送门&#xff1a; 第一章 计算机系统概述 第二章 进程管理 第三章 进程同步 第四章 内存管理 第五章 文件管理 第六章 输出输出I/O管理 文章目录 第一章 计算机系统概述 【期末复习|考研复习】前言一、计…...

编程日记 2023/10/30 7:28:31

树莓派基金会近日发布了新版基于 Debian 的树莓派操作系统

树莓派基金会&#xff08;Raspberry Pi Foundation&#xff09;近日发布了新版基于 Debian 的树莓派操作系统&#xff08;Raspberry Pi OS&#xff09;&#xff0c;为树莓派单板电脑带来了新的书虫基础和一些重大变化。 新版 Raspberry Pi OS 的最大变化是它现在基于最新的 Deb…...

编程日记 2023/10/30 7:27:28

Web项目如何做单元测试

你可能会用单元测试框架&#xff0c;python的unittest、pytest&#xff0c;Java的Junit、testNG等。 那么你会做单元测试么&#xff01;当然了&#xff0c;这有什么难的&#xff1f; test_demo.py def inc(x):return x 1def test_answer():assert inc(3) 4 inc() 是定义的…...

编程日记 2023/10/30 7:26:27

MySQL主从复制（基于GTID--事务ID方式）

目录 一、GTID相关概念1.GTID 是什么&#xff1f;2.GTID主从复制方式概念3.GTID的优缺点 二、GTID工作原理三、部署主从复制四、测试同步1.主库上新建数据库2.从库上查看是否同步成功 五、重设从库六、常见故障七、故障切换八、GTID的一些疑问1.为什么基于GTID的同步也要打开bi…...

编程日记 2023/10/30 7:25:25

3.72 Command Buffer及URP概述

一、Command Buffer 1.概念 CommandBuffer携带一系列的渲染命令&#xff0c;依赖相机&#xff0c;用来拓展渲染管线的渲染效果。而且可以指定在相机渲染的某个点执行本身的拓展渲染。Command buffers也可以结合屏幕后期效果使用。 简单来说就是可以在渲染流程中插入一些自定…...

编程日记 2023/10/30 7:24:24

分布式理论和分布式锁知识点总结

文章目录 (一) 分布式理论算法和协议1&#xff09;CAP理论总结 2&#xff09;BASE理论BASE 理论的核心思想基本可用软状态最终一致性 3&#xff09;Paxos算法Basic Paxos 算法4&#xff09; Raft算法1 拜占庭将军 5&#xff09;Gossip协议 (二) 分布式锁分布式锁应该具备哪些条…...

编程日记 2023/10/30 7:23:23

IOC课程整理-17 Spring事件

1. Java 事件/监听器编程模型 2. 面向接口的事件/监听器设计模式 3. 面向注解的事件/监听器设计模式 4. Spring 标准事件-ApplicationEvent 5. 基于接口的 Spring 事件监听器 6. 基于注解的 Spring 事件监听器 7. 注册 Spring ApplicationListener 8. Spring 事件发布器 9. Spr…...

编程日记 2023/10/30 7:22:22

大数据Flink（一百零五）：SQL性能调优

文章目录 SQL性能调优 一、 ​​​​​​​MiniBatch 聚合...

编程日记 2023/10/30 7:21:22

ESP8266,手机与电脑之间的TCP通讯

电脑端运行通讯猫调试助手,作为服务端: 电脑端 电脑的IP地址是: 192.168.2.232 手机与电脑之间的TCP通讯 手机端运行网络调试精灵,作为客户端: 手机端 如果从手机端点击"发送"按钮,则也会将"ghhh东方红广场"几个字发送到电脑上(服务端). ESP8266作为客户…...

编程日记 2023/10/30 7:20:21

Golang 面试经典题：map 的 key 可以是什么类型？哪些不可以？

Golang 面试经典题&#xff1a;map 的 key 可以是什么类型&#xff1f;哪些不可以&#xff1f; 在 Golang 的面试中&#xff0c;map 类型的使用是一个常见的考点&#xff0c;其中对 key 类型的合法性 是一道常被提及的基础却很容易被忽视的问题。本文将带你深入理解 Golang 中…...

编程新知 2025/9/23 20:53:38

MySQL 隔离级别：脏读、幻读及不可重复读的原理与示例

一、MySQL 隔离级别 MySQL 提供了四种隔离级别，用于控制事务之间的并发访问以及数据的可见性，不同隔离级别对脏读、幻读、不可重复读这几种并发数据问题有着不同的处理方式，具体如下： 隔离级别脏读不可重复读幻读性能特点及锁机制读未提交（READ UNCOMMITTED）允许出现允许…...

编程新知 2025/9/16 21:01:58

系统设计 --- MongoDB亿级数据查询优化策略

系统设计 --- MongoDB亿级数据查询分表策略 背景Solution --- 分表 背景 使用audit log实现Audi Trail功能 Audit Trail范围: 六个月数据量: 每秒5-7条audi log&#xff0c;共计7千万 – 1亿条数据需要实现全文检索按照时间倒序因为license问题&#xff0c;不能使用ELK只能使用…...

编程新知 2025/10/23 7:43:35

【HTML-16】深入理解HTML中的块元素与行内元素

HTML元素根据其显示特性可以分为两大类&#xff1a;块元素(Block-level Elements)和行内元素(Inline Elements)。理解这两者的区别对于构建良好的网页布局至关重要。本文将全面解析这两种元素的特性、区别以及实际应用场景。 1. 块元素(Block-level Elements) 1.1 基本特性 …...

编程新知 2025/10/2 6:08:50

基于matlab策略迭代和值迭代法的动态规划

经典的基于策略迭代和值迭代法的动态规划matlab代码&#xff0c;实现机器人的最优运输 Dynamic-Programming-master/Environment.pdf , 104724 Dynamic-Programming-master/README.md , 506 Dynamic-Programming-master/generalizedPolicyIteration.m , 1970 Dynamic-Programm…...

编程新知 2025/8/3 2:20:04

使用 SymPy 进行向量和矩阵的高级操作

在科学计算和工程领域&#xff0c;向量和矩阵操作是解决问题的核心技能之一。Python 的 SymPy 库提供了强大的符号计算功能&#xff0c;能够高效地处理向量和矩阵的各种操作。本文将深入探讨如何使用 SymPy 进行向量和矩阵的创建、合并以及维度拓展等操作&#xff0c;并通过具体…...

编程新知 2025/11/3 2:07:14

10-Oracle 23 ai Vector Search 概述和参数

一、Oracle AI Vector Search 概述 企业和个人都在尝试各种AI&#xff0c;使用客户端或是内部自己搭建集成大模型的终端&#xff0c;加速与大型语言模型&#xff08;LLM&#xff09;的结合&#xff0c;同时使用检索增强生成&#xff08;Retrieval Augmented Generation &#…...

编程新知 2025/10/23 21:21:11

基于Java Swing的电子通讯录设计与实现：附系统托盘功能代码详解

JAVASQL电子通讯录带系统托盘 一、系统概述 本电子通讯录系统采用Java Swing开发桌面应用&#xff0c;结合SQLite数据库实现联系人管理功能&#xff0c;并集成系统托盘功能提升用户体验。系统支持联系人的增删改查、分组管理、搜索过滤等功能&#xff0c;同时可以最小化到系统…...

编程新知 2025/10/4 20:58:43

【JVM面试篇】高频八股汇总——类加载和类加载器

目录 1. 讲一下类加载过程&#xff1f; 2. Java创建对象的过程&#xff1f; 3. 对象的生命周期&#xff1f; 4. 类加载器有哪些&#xff1f; 5. 双亲委派模型的作用&#xff08;好处&#xff09;&#xff1f; 6. 讲一下类的加载和双亲委派原则&#xff1f; 7. 双亲委派模…...

编程新知 2025/10/29 0:22:26

消防一体化安全管控平台：构建消防“一张图”和APP统一管理

在城市的某个角落&#xff0c;一场突如其来的火灾打破了平静。熊熊烈火迅速蔓延&#xff0c;滚滚浓烟弥漫开来&#xff0c;周围群众的生命财产安全受到严重威胁。就在这千钧一发之际&#xff0c;消防救援队伍迅速行动&#xff0c;而豪越科技消防一体化安全管控平台构建的消防“…...

编程新知 2025/10/31 6:20:20