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

news2024/12/26 0:10:11

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

目录

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

然后,创建一个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)){
            // 设置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;
    }
}

方法login处理逻辑:

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

方法getUserInfo处理逻辑:

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1148791.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

电子器件 电感

拿一根导线在笔上绕几圈&#xff0c;取下来就是一个空心电感&#xff0c;如果拿一个铁芯&#xff0c;在铁芯上绕相同的圈数&#xff0c;加了的铁芯的电感量是没有加铁芯的几千倍甚至上万倍&#xff0c;所以电感一般是有铁芯的。 下图是电感的模型&#xff0c;L 是理想电感&…

招生报名缴费小程序开发笔记(上)

前期调研 1.数字化趋势&#xff1a; 随着社会的数字化转型&#xff0c;越来越多的教育机构倾向于采用数字工具来简化和优化他们的招生和报名过程。招生报名缴费小程序是应对这一趋势的一种解决方案&#xff0c;可以提供高效、方便、快速的在线招生渠道。2.用户需求&#xff1a…

强化学习中值函数应用示例

一、Gridworld Gridworld是一个用于教授强化学习概念的简化的电子游戏环境。它具有一个简单的二维网格&#xff0c;智能体可以在其中执行动作并获得奖励。这个环境是有限的&#xff0c;因为它有一个明确的开始和结束状态&#xff0c;以及一组确定的动作和奖励。 在Gridworld中&…

C++二分查找算法的应用:最长递增子序列

涉及知识点 二分查找 单调映射 源码下载 点击下载源码 题目 给你一个整数数组 nums &#xff0c;找到其中最长严格递增子序列的长度。 子序列 是由数组派生而来的序列&#xff0c;删除&#xff08;或不删除&#xff09;数组中的元素而不改变其余元素的顺序。例如&#xf…

Rust 语言介绍及安装

目录 1、简介 1.1 为什么选择Rust 高性能 可靠性 生产力 1.2 用 Rust 构建应用 命令行 WebAssembly 网络 嵌入式 2、安装 Rust Windows 的 Linux 子系统&#xff08;WSL&#xff09; 检查Rust 是最新的 卸载Rust版本&#xff1a; Cargo&#xff1a;Rust 的构建工…

读图数据库实战笔记03_遍历

1. Gremlin Server只将数据存储在内存中 1.1. 如果停止Gremlin Server&#xff0c;将丢失数据库里的所有数据 2. 概念 2.1. 遍历&#xff08;动词&#xff09; 2.1.1. 当在图数据库中导航时&#xff0c;从顶点到边或从边到顶点的移动过程 2.1.2. 类似于在关系数据库中的查…

我在Vscode学OpenCV 初步接触

OpenCV是一个开源的计算机视觉库&#xff0c;可以处理图像和视频数据。它包含了超过2500个优化过的算法&#xff0c;用于对图像和视频进行处理&#xff0c;包括目标识别、面部识别、运动跟踪、立体视觉等。OpenCV支持多种编程语言&#xff0c;包括C、Python、Java等&#xff0c…

光谱图像论文浅读

文章目录 Hyperspectral Image Super-Resolution via Deep Spatiospectral Attention Convolutional Neural Networks Hyperspectral Image Super-Resolution via Deep Spatiospectral Attention Convolutional Neural Networks 通过上采样高光谱保留其光谱特征&#xff0c;采用…

在R中安装CmdStanR的步骤-R4.3.1-CmdStanR-0.6.1.900

报错未安装cmdstanr 安装包官网详细介绍&#xff1a; R Interface to CmdStan • cmdstanrhttps://mc-stan.org/cmdstanr/ 以下是在R中安装CmdStanR的步骤&#xff1a; 1. 首先&#xff0c;需要下载和安装C编译器 例如gcc。如果您已经安装了C编译器&#xff0c;则可以跳过此…

【数据结构--C语言】有序表算法及其应用

有序表是指其中的所有元素以递增或递减方式有序排列。为了简单&#xff0c;假设有序表以递增排列。 有序表的基本运算 InitLIst(&L)&#xff1a;初始化有序表LDestoryList(&L)&#xff1a;销毁有序表LListEmpty(L)&#xff1a;判断空表ListLength(L)&#xff1a;求有…

Mysql进阶-索引篇(上)

目录 索引概述 索引结构 数据结构 二叉树 红黑树 B-Tree BTree Hash 索引分类 聚集索引&二级索引 聚集索引选取规则: 具体结构 索引基础语法 SQL性能分析 SQL执行频率 慢查询日志 profile详情 explain 索引概述 介绍&#xff1a; 索引&#xff08; index &…

基于哈里斯鹰算法的无人机航迹规划-附代码

基于哈里斯鹰算法的无人机航迹规划 文章目录 基于哈里斯鹰算法的无人机航迹规划1.哈里斯鹰搜索算法2.无人机飞行环境建模3.无人机航迹规划建模4.实验结果4.1地图创建4.2 航迹规划 5.参考文献6.Matlab代码 摘要&#xff1a;本文主要介绍利用哈里斯鹰算法来优化无人机航迹规划。 …

IOC课程整理-18 Spring注解

1. Spring 注解驱动编程发展历程 2. Spring 核心注解场景分类 3. Spring 注解编程模型 https://github.com/spring-projects/spring-framework/wiki/Spring-Annotation-Programming-Model 4. Spring 元注解&#xff08;Meta-Annotations&#xff09; 元注解&#xff08;Meta-A…

PostGreSQL:JSON|JSONB数据类型

JSON JSON 指的是 JavaScript 对象表示法&#xff08;JavaScript Object Notation&#xff09;JSON 是轻量级的文本数据交换格式JSON 独立于语言&#xff1a;JSON 使用 Javascript语法来描述数据对象&#xff0c;但是 JSON 仍然独立于语言和平台。JSON 解析器和 JSON 库支持许…

什么是 CNN? 卷积神经网络? 怎么用 CNN 进行分类?(1)

先看卷积是啥&#xff0c;url: https://www.bilibili.com/video/BV1JX4y1K7Dr/?spm_id_from333.337.search-card.all.click&vd_source7a1a0bc74158c6993c7355c5490fc600 下面这个式子就是卷积 看完了&#xff0c;感觉似懂非懂 下一个参考视频&#xff1a;https://www.y…

linux PELT算法中的load计算

滑窗平均的累加计算 权重y按滑窗距离衰减&#xff0c;y^32 0.5&#xff0c;也就是经历32个周期将衰减一半的权重&#xff0c;假设本周期值是&#xff36;&#xff0c;本周期的加权累加值为&#xff36;x&#xff0c;则&#xff1a; 一个完整周期是T&#xff0c;给一个基础值1…

【技能树笔记】网络篇——练习题解析(十)

【技能树笔记】网络篇系列前九篇 【技能树笔记】网络篇——练习题解析&#xff08;一&#xff09;-CSDN博客 【技能树笔记】网络篇——练习题解析&#xff08;二&#xff09;-CSDN博客 【技能树笔记】网络篇——练习题解析&#xff08;三&#xff09;-CSDN博客 【技能树笔记】网…

大数据Flink(一百零五):SQL性能调优

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

2023 年值得关注的国外网络安全初创公司

网络安全初创公司试图解决的问题往往有点超前于主流。他们可以比大多数老牌公司更快地填补空白或新兴需求。初创公司通常可以更快地创新&#xff0c;因为它们不受安装基础的限制。 当然&#xff0c;缺点是初创公司往往缺乏资源和成熟度。公司致力于初创公司的产品或平台是有风…

JavaWeb 怎么在servlet向页面输出Html元素?

service()方法里面的方法体&#xff1a; resp.setContentType("text/html;charsetutf-8");//获得输出流PrintWriter对象PrintWriter outresp.getWriter();out.println("<html>");out.println("<head><title>a servlet</title>…