【JavaEE】Cookie与Session的前后端交互-表白墙登录设计

news2024/11/25 0:52:32

【JavaEE】Cookie与Session的前后端交互-表白墙登录设计

在这里插入图片描述

文章目录

  • 【JavaEE】Cookie与Session的前后端交互-表白墙登录设计
    • 1. Cookie与Session
      • 1.1 后端doPost的实现
        • 1.1.1 隐藏的全局变量
        • 1.1.2 获取请求对应的HttpSession对象
        • 1.1.3 约定前后端交互方式
        • 1.1.4 验证用户名与密码是否正确
        • 1.1.5 没有这个用户的情况
        • 1.1.6 有这个用户的情况
      • 1.2 后端代码doGet实现
        • 1.2.1 获取请求对象的HttpSession对象
        • 1.2.2 非空校验
        • 1.2.3 用户名在session中查得到
      • 1.3 前端代码
        • 1.3.1 表白墙主页
        • 1.3.2 表白墙登录页
      • 1.4 目录结构
    • 2. 测试

【JavaEE】Cookie与Session的前后端交互-表白墙登录设计

在Cookie的第一次认识是在这一篇博客：【JavaEE】HTTP应用层协议_s:103的博客-CSDN博客

博客片段：

在这里插入图片描述

在这里插入图片描述

而现在，就是在前后端配合下，感受Cookie的存在！

1. Cookie与Session

以上的内容是浏览器存储数据的Cookie机制，而Cookie中存储用户身份标识，而身份标识代表什么，应该是存在服务器那一端的~

  • 而这就是后端的Session（会话）机制

  • 而Session一般是在内存中存储的，也就是说服务器刷新就没了

    • Session则是一个哈希表，key为sessionId（浏览器Cookie在Session记录时产生的session对象的id），value则是对应的信息（小哈希表，Cookie的键值对）！
    • 而这两个机制就是为了提高页面体验用的（暂时寄存信息）
    • 他们之间只是“朋友”而非“伴侣”
    1. 完全可以用Cookie来保存一些数据来客户端，这些数据不一定是用户身份信息，也不一定是sessionId（别名token）
    2. Session中的sessionId也不需要非得Cookie/Set-Cookie传递

    目前不讲解其他的方式

在这里插入图片描述

在本版本中，用户信息在数据库中，简简单单的存储名字和密码~

1.1 后端doPost的实现

class User{
    public String name;
    public String password;

    public User() {

    }

    public User(String name, String password) {
        this.name = name;
        this.password = password;
    }
}

@WebServlet("/login")
public class LogIn extends HttpServlet {

}

1.1.1 隐藏的全局变量

在这里插入图片描述

  • 而这个“全局变量”，就是一个哈希表

1.1.2 获取请求对应的HttpSession对象

  • 这一点，方法内部帮你识别了请求中的Cookie

而其中就有一个属性：sessionId，用这个值就可以直接在总的Session里进行“查询哈希表”操作~

HttpSession session = req.getSession(true);
resp.setContentType("text/html; charset=utf8");//设置响应的字符集

getSession方法，顾名思义，可以获取req对应的session

  1. 传入true，不存在此请求的Cookie对应的session，则建立一个，返回新建立的session对象~
    • 自然就帮我们给Cookie设置了sessionId了
  2. 传入false，不存在此请求的Cookie对应的session，返回null~

而这个session是引用，其改变殃及总的大Session！
在这里插入图片描述

1.1.3 约定前后端交互方式

  • 本文重点在于登录页面设计，所以在交互的时候，传递的信息仅仅是用户名和密码~

我用的ajax构造的json格式的字符串~

  • json前后端相关操作讲解博客：【JavaEE】简单前后端分离小项目-表白墙_s:103的博客-CSDN博客

全局性质的变量：ObjectMapper objectMapper = new ObjectMapper();

User user = objectMapper.readValue(req.getInputStream(), User.class);

1.1.4 验证用户名与密码是否正确

用这个构造出来的对象的属性，在数据库里查询验证即可

  • JDBC编程基础博客：【MySQL】Java-JDBC_s:103的博客-CSDN博客
String username = "'" + user.name + "'";//获取key对应值
String password = "'" + user.password + "'";

DataSource dataSource = new MysqlDataSource();
((MysqlDataSource)dataSource).setUrl("jdbc:mysql://127.0.0.1:3306/Loves?characterEncoding=utf8&useSSL=false");
((MysqlDataSource)dataSource).setUser("root");
((MysqlDataSource)dataSource).setPassword("mmsszsd666");//这是俺的微信号，欢迎添加，相互学习！
try {
    Connection connection = dataSource.getConnection();
    String sql = "select * from users where name = " + username + "and" + password + ";";
    PreparedStatement preparedStatement = connection.prepareStatement(sql);

    //这里的Set并不是，对象为Love的Set集合，而是一个迭代器！
    ResultSet set = preparedStatement.executeQuery();
    //迭代他（是next方法而不是hasNext）
    if(set.next()) {
        //有这个用户
    }else {
        //没有这个用户
    }
    set.close();
    preparedStatement.close();
    connection.close();
} catch (SQLException e) {
    e.printStackTrace();
}

在这里插入图片描述

1.1.5 没有这个用户的情况

resp.getWriter().write("No");
  • 直接在resp正文中写个“No”

1.1.6 有这个用户的情况

session.setAttribute("username", username);
resp.getWriter().write("欢迎" + username + "！");

  • 调用session.setAttribute方法，向session（小哈希表）中添加键值对

    • 内部则调用了setCookie这样的方法，去设置客户端的Cookie
    • 返回响应里则多了set-Cookie属性

    Attribute就是属性的意思

  • 在resp正文中写，欢迎词（是动态的，由用户名决定）

在这里插入图片描述

1.2 后端代码doGet实现

1.2.1 获取请求对象的HttpSession对象

HttpSession session = req.getSession(false);
resp.setContentType("text/html; charset=utf8");//设置响应的字符集
  • 在这里，无需进行不存在自动创建的逻辑，因为不存在就是不存在，这里又不可能填入信息~

在这里插入图片描述

1.2.2 非空校验

  • 此请求的Cookie在这里没有记录，session的值就为null

    • 响应写入“No”，结束方法（return）
      在这里插入图片描述

  • 调用session的getAttribute方法，传入key值，查找value

    • 如果这个value为null，则响应写入No，结束方法（return）
    • value为空代表session中不存在key为username的键值对，为什么呢

    在这里插入图片描述

    • 这是因为在doPost建立session的时候，是在一开始，其中是有可能没有进行添入的操作的
    • 而这样子做，是为了给这一个客户端发来的请求，“提前留位置”
if(session == null) {//不存在这条记录
    resp.getWriter().write("No");
    return;
}
String username = (String)session.getAttribute("username");
if(username == null) {
    resp.getWriter().write("No");
    return;
}

1.2.3 用户名在session中查得到

向响应中写入成功访问含义的字符串（动态） -> 报喜

resp.getWriter().write("欢迎" + username + "！");

1.3 前端代码

前端页面分为：

  1. 表白墙主页 wall.html
  2. 登录页面 login.html

其中登录页面我直接抄了之前博客系统页面的“博客登录页”：前端综合项目-个人博客网页设计_s:103的博客-CSDN博客

效果：

在这里插入图片描述

改动：（导航栏删了一些信息）

  • form表单去掉了
  • 点击submit按钮，调用js函数login()

在这里插入图片描述

1.3.1 表白墙主页

  1. 如果浏览器Cookie里的信息在服务器中有记录 --> 正常
  2. 否则 --> 登录异常（跳转到登录页面）

这也是为什么刚才我要在body里写No的原因，就是为了判断这两种情况

jQuery.ajax({
    type: "get",
    url: "login",
    success: function (body) {
        if (body == "No") {
            window.location.href = "login.html";
        }else {
            alert(body);
        }
    },
});
  • 这条语句需要在每次刷新的时候执行~

此代码发送给/login程序一个get请求，返回一个响应

  1. body为No，跳转到登录页面（login.html）
  2. 正常，弹框

在这里插入图片描述

1.3.2 表白墙登录页

  1. login函数

在此函数内要获取username和password（进行非空校验），并且构造json对象，转化为json字符串，用ajax构造请求，传给客户端

到这里，你可能意识到了，虽然get和post是没有本质区别的，但是一个服务器的不同请求，是要进行不同逻辑的，则才有了不同的请求方法来区分，后端可以以此区分，进行不同逻辑

function login() {
    var name = jQuery("#username");
    var password = jQuery("#password");
    if (name.val().trim() == "") {
        alert("请输入是谁！");
        name.focus();
        return;
    }
    if (password.val().trim() == "") {
        alert("请输入想对谁说！");
        password.focus();
        return;
    }
    var keyValue = {
        name: name.val(),
        password: password.val(),
    };

    jQuery.ajax({
        type: "post",
        url: "login",
        contentType: "application/json; charset=utf8",//设置body的格式为json
        data: JSON.stringify(keyValue),//转换json对象为json字符串
        success: function (body) {
            if (body == "No") {
                alert("用户名或者密码错误！");
            } else {
                window.location.href = "wall.html";
            }
        },
    });
}
  • 同样的，通过响应是否为No去判断
    1. No，密码输入错误，弹框
    2. 非No，跳转到表白墙主页（登录成功）

在这里插入图片描述

  1. 发送get请求

在此ajax语句中，需要向后端发送get请求，判断浏览器的Cookie的信息是否对的上（对的上则自动直接跳转到表白墙主页，不然的话，则说明登录失效）

jQuery.ajax({
    type: "get",
    url: "login",
    success: function (body) {
        if (body != "No") {
            window.location.href = "wall.html";
        } else {
            alert("登录失效");
        }
    },
});

在这里插入图片描述

1.4 目录结构

在这里插入图片描述

2. 测试

在这里插入图片描述

文章到此结束！谢谢观看
可以叫我 小马，我可能写的不好或者有错误，但是一起加油鸭🦆！

本文源码连接：showLove · 游离态/马拉圈2023年6月 - 码云 - 开源中国 (gitee.com)

表白墙还需要各种优化，敬请期待吧！

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

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

相关文章

你不知道的Bing聊天机器人：7个惊人的用途！

你不知道的Bing聊天机器人：7个惊人的用途！

导读：以下是我总结的有用的方法，可以利用AI聊天机器人让您的生活更轻松。 本文字数：1600，阅读时长大约：10分钟 生成式AI工具可以用非常多的方式使你的日常生活更轻松。 AI聊天机器人在编程、写作等方面表现出色&#…
阅读更多...
JVM入门：官网了解JVM、Java源文件运行过程、什么是类加载器、Java的类加载机制的三种方式、Tomcat的自定义类加载器

JVM入门：官网了解JVM、Java源文件运行过程、什么是类加载器、Java的类加载机制的三种方式、Tomcat的自定义类加载器

JVM入门：官网了解JVM、Java源文件运行过程、什么是类加载器、Java的类加载机制的三种方式、Tomcat的自定义类加载器 通过官网了解JVM官网jdk8结构图什么是JVM查看官网Java语言和虚拟机规范 Java源文件运行过程1.Java源文件经过Javac编译成字节码文件如何手动编译一个…
阅读更多...
Java如何实现去重？这是在炫技吗？

Java如何实现去重？这是在炫技吗？

大家好，我3y啊。由于去重逻辑重构了几次，好多股东直呼看不懂，于是我今天再安排一波对代码的解析吧。austin支持两种去重的类型：N分钟相同内容达到N次去重和一天内N次相同渠道频次去重。 Java开源项目消息推送平台🔥推送…
阅读更多...
高性能服务器为什么需要内存池？

高性能服务器为什么需要内存池？

C/C程序为什么比起其它语言开发的程序效率要高，一个很重要的原因就是可以直接操作内存，今天就来讲讲为什么需要内存池的技术。 从一个示例开始 先看下面两段代码，都是去重复的创建和删除对象0x5FFFFF次，他们的执行后的效率怎么样…
阅读更多...
DIP第7章知识点

DIP第7章知识点

文章目录 7.3 相关7.5 基图像7.6 傅里叶相关变换7.6.1 离散哈特利变换7.6.3 离散正弦变换 DIP的其他章节都好复习，唯独就这个第7章小波变换。复习起来十分头大，所以我开始写他的课后题，雾。 7.3 相关 已知两个连续函数 f ( x ) f(x) f(x) …
阅读更多...
一篇博客教会你怎么使用Docker安装Redis

一篇博客教会你怎么使用Docker安装Redis

文章目录 1、搜索镜像2、拉取镜像3、下载配置文件4、修改配置文件5、启动容器 今天我们学习使用 Docker 安装 Redis。 1、搜索镜像 docker search redis2、拉取镜像 docker pull redis3、下载配置文件 wget http://download.redis.io/redis-stable/redis.conf下载的配置文件…
阅读更多...
云原生Docker容器管理

云原生Docker容器管理

docker容器相当于一个进程，性能接近于原生，几乎没有损耗； docker容器在单台主机上支持的数量成百上千； 容器与容器之间相互隔离； 镜像是创建容器的基础，可以理解镜像为一个压缩包 docker容器的管理 容器…
阅读更多...
彩票中奖率的真相：用 JavaScript 看透彩票背后的随机算法

彩票中奖率的真相：用 JavaScript 看透彩票背后的随机算法

原本这篇文章是打算叫「假如我是彩票系统开发者」，但细想一下，如果在文章中引用太多的 JavaScript 的话，反而不是那么纯粹，毕竟也只是我的一厢情愿，彩票开发也不全如本文所讲，有所误导的话便也是得不偿失了…
阅读更多...
理解 Java 关键字 final

理解 Java 关键字 final

原文链接 理解 Java 关键字 final final可以用来干什么 final是Java中非常常见的一个关键字，可以说每天都在使用它，虽然常见，但却也不见得都那么显而易见，今天就来研究一下final，以加深对它的理解和更合理的运用。 修…
阅读更多...
gitstack使用教程

gitstack使用教程

一、下载及安装 下载地址：https://gitstack.com/download/?spma2c4e.10696291.0.0.6d4c19a40qOauc 支持操作系统列表 本文基于2.3.12版本 下载完成后安装，默认安装路径为：c:\GitStack，安装过程中，gitstack服务会启…
阅读更多...
医学图像分割 nnUNetV2 分割自定义2d数据集

医学图像分割 nnUNetV2 分割自定义2d数据集

文章目录 1 环境安装(Pytorch)1.1 安装conda1.1 安装pytorch1.3 安装nnUNet1.4 安装隐藏层（可选） 2 配置自定义数据集2.1 数据集格式2.2 创建需要目录2.3 数据格式转换2.3.1 修改路径与数据集名称2.3.2 修改训练集与测试集2.3.3 修改掩码所在的文件夹&am…
阅读更多...
python基础----05-----函数的多返回值、函数的多种参数使用形式、函数作为参数传递、lambda匿名函数

python基础----05-----函数的多返回值、函数的多种参数使用形式、函数作为参数传递、lambda匿名函数

一 函数的多返回值 if __name__ __main__:# 演示使用多个变量，接收多个返回值def test_return ():return 1,hello,Truex,y,z test_return()print(x)print(y)print(z)1helloTrue二 函数的多种参数使用形式 分为以下四种。 2.1 位置参数 位置参数调用函数时根据…
阅读更多...
卡尔曼滤波与组合导航原理（五）序贯Kalman滤波

卡尔曼滤波与组合导航原理（五）序贯Kalman滤波

量测维数很高，而且能写成很多分量，每一个分量可以看成一个小量测，可以序贯进行量测更新 优点是：计算快，数字稳定性更好，我们知道矩阵求逆是和维数的三次方成正比，分成小矩阵求逆快（都…
阅读更多...
自学大语言模型之Bert和GPT的区别

自学大语言模型之Bert和GPT的区别

Bert和GPT的区别 起源 2018 年，Google 首次推出 BERT（Bidirectional Encoder Representations from Transformers）。该模型是在大量文本语料库上结合无监督和监督学习进行训练的。 BERT 的目标是创建一种语言模型，可以理解句子中…
阅读更多...
（Day1）配置云开发提供的模板

（Day1）配置云开发提供的模板

创建云开发项目 打开微信开发者工具；点击“项目”->“新建项目”；输入项目名称和选择项目所要保存的目录；输入自己的AppID； AppID的获取，需要登陆微信公众平台，并点击“开发管理”->"开发设置…
阅读更多...
凸优化系列——凸函数

凸优化系列——凸函数

1.凸函数的定义 凸函数直观上来说，就是两点之间的函数值小于两点连线的函数值 常见凸函数 线性函数既是凸函数，也是凹函数 对于二次函数，如果Q矩阵是半正定矩阵，那么它的二阶导为Q为半正定矩阵，根据凸性判定的二阶条…
阅读更多...
SpringCloud微服务架构 --- 高级篇

SpringCloud微服务架构 --- 高级篇

一、初识Sentinel 1.1、雪崩问题及解决方案 1.1.1、雪崩问题 微服务调用链路中的某个服务故障，引起整个链路中的所有微服务都不可用，这就是雪崩。 1.1.2、解决雪崩问题的常见方式有四种 1.1.2.1、超时处理 设定超时时间，请求超过一定时间…
阅读更多...
Swagger原理

Swagger原理

最近在基于Swagger进行二次开发， 来对项目的接口进行管理，功能实现了，但是不清楚swagger的工作原理，为了后续能更好利用Swagger来管理接口，而且能借鉴Swagger的原理，将项目中其他信息可视化展示&#xff0c…
阅读更多...
什么是测试驱动开发？测试驱动开发有什么优点？

什么是测试驱动开发？测试驱动开发有什么优点？

目录 前言 什么是TDD或测试驱动开发？ 什么是软件单元测试？ 什么是TDD？ 测试驱动开发的好处 最后的想法 前言 测试是任何软件开发项目中最重要的步骤之一。如果跳过此过程，则结果可能是灾难性的-对项目和公司而言。但是什么时…
阅读更多...
K8s in Action 阅读笔记——【11】Understanding Kubernetes internals

K8s in Action 阅读笔记——【11】Understanding Kubernetes internals

K8s in Action 阅读笔记——【11】Understanding Kubernetes internals 11.1 Understanding the architecture Kubernetes集群分为两个部分： k8s控制平面工作节点 控制平面的组件 构成控制平面的组件有： etcd：etcd是一个分布式的持久化键…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023