WEB核心【记录网站登录人数,记录用户名案例】Cookie技术实现

news2024/11/20 1:24:05

目录

  • 💂 个人主页: 爱吃豆的土豆
  • 🤟 版权: 本文由【爱吃豆的土豆】原创、在CSDN首发、需要转载请联系博主
  • 💬 如果文章对你有帮助、欢迎关注、点赞、收藏(一键三连)和订阅专栏哦
  • 🏆人必有所执,方能有所成!

  • 🐋希望大家多多支持😘一起进步呀!

案例1:记录网站登录人数

1.1:需求&分析

1.2:代码实现

案例2:记录用户名案例【进阶】

2.1:需求&分析

2.2:代码


案例1:记录网站登录人数

1.1:需求&分析

首先分析一波:

关键点:

因为request作用域太小,不能使用request传递

因为ServletContext作用域太大,使得多个用户的访问时间会相互覆盖,导致业务混乱,也不能用。

使用cookie,因为cookie针对的是某个浏览器的会话,一个浏览器cookie保存在该浏览器上,不同用户之间不会有影响。

 流程图:(配个图详细理解一波)

 

1.2:代码实现

@WebServlet({"/d1"})
public class Demo1Servlet extends BaseServlet {
    public void visit() throws IOException {
        PrintWriter writer = getResponse().getWriter();
        //一、接收请求中的cookie,展示用户上次访问时间
        //1.1、获取浏览器发送的所有cookie
        Cookie[] arr = getRequest().getCookies();
        //1.2、查找是否存在lastVisitTime的cookie
        //1.2.1、设置一个cookie类型的开关 默认为null,不存在
        Cookie lastVisitTime = null;
        //1.2.2、只要数组arr不为null,遍历arr,查找名为lastVisitTime的cookie
        if(arr!=null){
            for (Cookie cookie : arr) {
                if(cookie.getName().equals("lastVisitTime")){
                    //1.2.3、如果找到了,把他赋值给开关
                    lastVisitTime = cookie;
                    break;
                }
            }
        }
        //1.3、如果存在该cookie,展示上次访问时间
        if(lastVisitTime!=null){
            writer.write("上次访问时间是:"+new Date(Long.parseLong(lastVisitTime.getValue())).toLocaleString());
        }else{
            //1.4、如果不存在该cookie,展示:第一次访问
            writer.write("您是第一次访问!");
        }
        //二、记录用户当前的访问时间,写出到响应头
        //2.1、获取当前时间的毫秒值
        long t = System.currentTimeMillis();
        //2.2、封装为cookie对象
        Cookie c = new Cookie("lastVisitTime", t + "");
        //2.3、设置cookie保存7天
        c.setMaxAge(60*60*24*7);
        //2.4、写出响应头
        getResponse().addCookie(c);
    }
}

小结:

request.getCookies();//如果cookie都不存在,Null

Cookie的value是字符串类型,其他类型必须先转字符串才能保存,中文进行URL编码

案例2:记录用户名案例【进阶】

效果图:记住用户名效果图

 效果图:不记住用户名效果图

 

 

2.1:需求&分析

分析:

关键点:

  1. request.getParameter("");

  2. cookie技术。

  3. URL编码

  4. 重定向: return "redirect:/userLogin.jsp";

  5. <% %>

  6. cookie   setMaxAge(0);

流程图:

 

2.2:代码

userLogin.jsp

<form method="post" action="/day11_1/hw">
    <input type="hidden" name="method" value="login"/>
    用户名:<input type="text" name="username" />
    密码:<input type="password" name="password"/>
    <input type="checkbox" name="remember" value="yes"/>记住用户名
    <input type="submit" value="登录"/>
</form>

HomeworkServlet

@WebServlet({"/hw"})
public class HomeworkServlet extends BaseServlet {
    public String login() throws UnsupportedEncodingException {
        //1、接收参数
        HttpServletRequest request = getRequest();
        String username = request.getParameter("username");
        String remember = request.getParameter("remember");
        //2、判断remember,判断是否需要记录用户名
        Cookie rememberUsername = new Cookie("rememberUsername","");
        if(remember!=null){
            //3、如果remember不为null,记录用户名
            rememberUsername.setValue(URLEncoder.encode(username,"utf-8"));
            rememberUsername.setMaxAge(60*60*24*7);
        }else{
            //4、如果remember为null,删除已记录的用户名
            rememberUsername.setMaxAge(0);
        }
        //5、将用户名cookie写出响应头
        getResponse().addCookie(rememberUsername);
        //6、重定向回userLogin.jsp
        return "redirect:/userLogin.jsp";
    }
}

userLogin.jsp

<%
    //获取cookie中保存的用户名
    //1、获取所有cookie
    Cookie[] arr = request.getCookies();
    String username = null;
    //2、寻找保存用户名的cookie
    if(arr!=null){
        for (Cookie c : arr) {
            if(c.getName().equals("rememberUsername")){
                //3、把用户名取出来
                username = c.getValue();
                break;
            }
        }
    }
    //4、对URL编码进行解码操作
    if(username!=null){
        username = URLDecoder.decode(username,"utf-8");
    }
%>

<form method="post" action="/day11_1/hw">
    <input type="hidden" name="method" value="login"/>
    用户名:<input type="text" name="username" value="<%=username==null?"":username%>"/>
    密码:<input type="password" name="password"/>
    <input type="checkbox" name="remember" value="yes"
        <%
            if(username!=null){
                //说明用户肯定勾选了记录用户名,该复选框直接回显勾选即可
                %>
                checked="checked"
                <%
            }
        %>
    />记住用户名
    <input type="submit" value="登录"/>
</form>

小结:

回显:html特性: 文本框 value

复选框/单选框  checked="checked"

文本域:内容体

选择框:selected="selected"

嵌套java脚本,进行if判断,对html特性进行回显。

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

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

相关文章

npm ERR! code ERESOLVE npm ERR! ERESOLVE unable to resolve dependency tree

当我们拿到一个前端项目的时候&#xff0c;想要把它运行起来&#xff0c;首先是要给它安装依赖&#xff0c;即cd到当前项目根目录下去执行npm install命令&#xff0c;然后有一定几率在终端你会遇到这样的报错&#xff1a; npm ERR! code ERESOLVEnpm ERR! ERESOLVE unable to…

HTML基础————table标签

1.什么是table&#xff1f; table是html中的表格&#xff0c;由tr、td、th元素组成。 tr 元素定义表格行&#xff0c;th 元素定义表头&#xff0c;td 元素定义表格单元 2.可选的属性 属性描述border定义表格的边框cellpadding单元格内内容与单元格边的间距cellspacing单元格…

Vite配置环境变量

Vite配置代码环境变量和 Vue2 的配置差不多&#xff0c;都是依靠 .env 文件夹来实现 详情可到 Vite 官网的环境配置里了解&#xff1a;环境变量和模式 {#env-variables-and-modes} | Vite中文网 一、在src同级下创建 .env.production 生产模式和 .env.development 开发模式两…

基于 vue3 element-plus 的暗黑模式

前言 element-plus2.2.0 已经开始支持暗黑模式了 通过在html标签上添加一个名为 dark 的类来启用 基于 vue3 & element-plus 的项目现在可以方便的添加暗黑模式 一、基本使用 因为是通过在html标签上添加 dark 类&#xff0c;可以自行实现切换 但为了方便切换以及进一…

WEB核心【会话技术】第十五章

目录 &#x1f482; 个人主页: 爱吃豆的土豆&#x1f91f; 版权: 本文由【爱吃豆的土豆】原创、在CSDN首发、需要转载请联系博主&#x1f4ac; 如果文章对你有帮助、欢迎关注、点赞、收藏(一键三连)和订阅专栏哦 &#x1f3c6;人必有所执&#xff0c;方能有所成&#xff01; &…

【JavaScript】VUE前端实现微信版录制音频wav格式转化成mp3格式和Base64

一、前言 前端有个需求是要实现一个像微信一样&#xff0c;按住录音&#xff0c;松开发送语音&#xff0c;期间踩了不少坑&#xff0c;特地记录一下&#xff0c;主要用到两个库 js-audio-recorder &#xff1a;负责录制音频&#xff0c;支持的格式只有wav、pcmLAMPjs &#x…

三更Blog项目总结(p1~p40)

文章目录项目创建——多模块开发功能业务逻辑总结热门文章列表分类列表分页文章查询文章详情友链查询登录功能退出登录视频地址&#xff1a;SpringBoot项目实战-前后端分离博客项目-Java项目_哔哩哔哩_bilibili 项目创建——多模块开发 整个系统分为前台模块&#xff08;blog&…

三步解决微信小程序cdn加速(资源大小超过200k)

刚开始开发小程序的时候&#xff0c;上传代码会遇到这样的问题&#xff1a;图片和音频资源大小超过 200 K 下面是官方建议 【建议】小程序代码包里可以存放一些必要的静态资源&#xff08;例如tabbar的icon等&#xff09;&#xff0c;不过静态资源体积过大也会影响小程序代码…

运行安装vue3+vite+Ts项目报错,无法加载vite.config.ts文件(failed to load config from D:\XXX\vite.config.ts)

git 上面拉别人的vue3viteTs项目&#xff0c; 安装依赖成功之后运行&#xff0c;出现报错 failed to load config from D:\XXX\vite.config.ts 百度搜索的结果是用 pnpm进行下载 然后卸载node_modules文件进行重新下载&#xff0c;这时候有出现问题 自己的node版本太低。如…

【Node.js+koa--后端管理系统】设计动态发布、修改、查询、删除接口

&#x1f373;作者&#xff1a;贤蛋大眼萌&#xff0c;一名很普通但不想普通的程序媛\color{#FF0000}{贤蛋 大眼萌 &#xff0c;一名很普通但不想普通的程序媛}贤蛋大眼萌&#xff0c;一名很普通但不想普通的程序媛&#x1f933; &#x1f64a;语录&#xff1a;多一些不为什么的…

级联选择器(el-cascader)动态加载(lazyLoad)实现省市区三级选择

开开心心工作&#xff0c;兢兢业业生活 一、实现省市区级联选择&#xff08;插件&#xff09; 1. 需求&#xff1a;实现一个省市区的级联选择器&#xff0c;点击一级&#xff0c;动态加载下一级 那好&#xff0c;我们找个轮子 2. 他山之石&#xff08;找个轮子&#xff09; E…

Eclipse配置Tomcat详细教程,其中包含如何使用eclipse+tomcat创建并运行web项目

一&#xff1a;Tomcat的下载官网:Apache Tomcat - Welcome!https://tomcat.apache.org/ 进入官网显示如图所示的界面&#xff0c;在下下载的是Tomcat9.0版本&#xff0c;你可以自己选一款。 点击然后进入下面这个界面&#xff1a; 在下电脑是64位&#xff0c;所以 在下下载的6…

【vue】仿PC端微信制作聊天框

前言 采用(vuevue-routervuexes6stylus) 来实现一个仿PC端微信的小demo&#xff0c;可以使用一个智能api&#xff0c;实现智能对话。欢迎大家对鄙人提出宝贵意见&#xff0c;相互学习讨论&#xff0c;一起进步。 demo地址 源码地址 demo做的是PC版&#xff0c;建议使用电脑预…

我的VUE 学习之路(下)

前言&#xff1a; 在经历过前面在HTML下的VUE相关基础的洗礼后&#xff0c;我们可以动手去做一些事了&#xff0c;此时发现直接通过直接VUE组件方式与之前在HTML不同&#xff0c;首先要“静一静”&#xff0c;细看之下只是对之前的很多写法做了封装。 本文旨在直接上手Vue项目下…

FormData详解

FormData 接口提供了一种表示表单数据的键值对 key/value 的构造方式&#xff0c;并且可以轻松的将数据通过XMLHttpRequest.send() 方法发送出去&#xff0c;本接口和此方法都相当简单直接。如果表单 enctype 属性设为 multipart/form-data &#xff0c;则会使用表单的 submit(…

vue项目控制台报错信息问题记录:Uncaught TypeError: Cannot read properties of null (reading ‘setAttribute‘)

在写vue项目的时候&#xff0c;控制台总是报错如下代码&#xff1a; 1、Uncaught TypeError: Cannot read properties of null (reading ‘setAttribute‘) 主要是因为某些代码书写不规范&#xff0c;导致templete解析不出来&#xff0c;从而报错 解决方案&#xff1a; 检查下…

uniapp 实现生成海报并分享给微信好友和保存到本地相册

记录uniapp 生成二维码海报并保存到本地或者分享给微信好友 – 文章目录记录uniapp 生成二维码海报并保存到本地或者分享给微信好友前言一、引入生成二维码的组件二、点击右侧的分享图标生成海报三&#xff1a;将canvas 图片转化成图片&#xff08;最关键&#xff09;四&#…

el-tree设置利用setCheckedNodes/setCheckedKeys默认勾选节点,以及通过setChecked新增勾选指定节点

实现目标&#xff1a;在生成el-tree时&#xff0c;默认勾选其中某几个选项&#xff1b;或在进行某个选项的选中时&#xff0c;同时勾选上另一个选项。 实现效果&#xff1a; 在生成树结构时&#xff0c;默认勾选其中的两个选项。 在勾选其中一个选项时&#xff0c;另一个选项…

微前端之 qiankun 入门、上手、实战(构建大型 web 应用)

目录 前言 正文 一、介绍 微前端 qiankun 二、快速上手 ​☛主应用 ① 安装 qiankun ② 在主应用中注册微应用 ​☛微应用 ① 导出相应的生命周期钩子 ② 配置微应用的打包工具 三、项目实战 ​☛主应用 ① 安装 qiankun ② 注册微应用并启动 ③ 主应用添加…

ES6--》对象扩展方法

目录 对象扩展 name 属性 属性的遍历 super关键字 Object.is() Object.assign() Object.getOwnPropertyDescriptors() Object.setPrototypeOf() Object.getPrototypeOf() Object.keys()、Object.values、Object.entries()、Object.fromEntries() Object.hasOwn() 对…