WEB核心【案例:文件下载,案例:点击切换验证码,几种获取properties资源方式】第十二章

news2025/1/16 18:45:27

目录

1.文件下载

1.1超链接下载:

1.2自定义servlet下载

1.3小结

2.点击切换验证码

2.1前置只是-验证码生成

2.2分析及代码实现

2.3需求2:点击切换验证码-绕过缓存

3.几种获取preperties资源方式


💟作者简介:大家好呀!我是爱吃豆的土豆    
📝个人主页:【爱吃豆的土豆的博客_CSDN博客-Web知识,spring框架,vue领域博主】
🏆博主信息:人必有所执,方能有所成!

🐋希望大家多多支持😘一起进步呀!
🌈若有帮助,还请【关注➕点赞➕收藏】,不行的话我再努力努力呀!💪
⚡版权声明:本文由【爱吃豆的土豆的博客】原创、在CSDN首发、需要转载请联系博主。

1.文件下载

1.1超链接下载:

 

 超链接下载方式

自定义Servlet下载

通过自定义Servlet 完善超链接下载,可以下载中文名资源 

http://localhost:8080/day08_1/download/hello.jpg

浏览器发来的所有请求,都会进行url-pattern.

完全匹配:尝试寻找servlet,路径为download/hello.jpg,寻找不到,进入下一个匹配

目录匹配:尝试寻找servlet,目录路径为/download/*,寻找不到,进入下个匹配

扩展名匹配:尝试寻找servlet,扩展名为:*.jpg,寻找不到,进入最终匹配

缺省匹配:访问DefaultServlet,把当前/download/hello.jpg,对应的资源通过IO流读取到,写出到响应体中。

 

超链接下载资源的本质:依靠DefaultServlet。

DefaultServlet遵循的码表为iso8859-1,使得utf-8编码的中文资源名,被解析为乱码,通过乱码无法定位资源的,导致资源找不到。

本质:模仿DefaultServlet,并且将资源名解决乱码

new String("乱码".getBytes("iso8859-1"),"utf-8");

 

1.2自定义servlet下载

download.html

<h1>自定义Servlet下载</h1>
<a href="/day08_1/dl?method=download&filename=hello.jpg">hello.jpg</a>
<a href="/day08_1/dl?method=download&filename=你好.rar">你好.rar</a>

 DownLoadServlet

@WebServlet({"/dl"})
public class DownLoadServlet extends BaseServlet {
    /**
     * 文件下载
     */
    public void download() throws IOException {
        //1、获取参数filename
        String filename = getRequest().getParameter("filename");
        //2、处理文件名乱码
        String resourceName = new String(filename.getBytes("iso8859-1"), "utf-8");
        //3、设置强制弹出下载窗口
        HttpServletResponse response = getResponse();
        // 传递的文件名应该是原来乱码的filename,这样下载窗口经过解码后,就会解为正常内容
        response.setHeader("Content-Disposition","attachment;filename="+filename);
        //4、读取资源文件
        //4.1、资源的绝对路径
        String filePath = getServletContext().getRealPath("/")+"/download/"+resourceName;
        //4.2、文件流读取
        FileInputStream fis = new FileInputStream(filePath);
        //5、写出响应体
        //5.1、获取响应体字节流
        ServletOutputStream out = response.getOutputStream();
        //5.2、使用工具流复制
        IOUtils.copy(fis,out);
        fis.close();
        //因为out流被tomcat控制的,所以不要手动关闭,由tomcat管理
    }
}

小结:

  1. get乱码处理:  new String("乱码".getBytes("iso8859-1"),"utf-8");
  2. 强制下载响应头,必须位于getOutputStream()之前。
  3. response.getOutputStream();由tomcat控制的,程序员不要手动关闭。

1.3小结

文件下载:服务器把数据传递给浏览器(响应体)

文件下载,默认依赖的是DefaultServlet,因为解码码表为iso8859-1,会导致中文资源名乱码,导致无法找到。

自定义Servlet下载:

强制下载的响应头:response.setHeader("Content-Disposition","attchment;filename="+下载名);

必须位于 getOutputStream()之前,否则失效。

2.点击切换验证码

2.1前置只是-验证码生成

@WebServlet({"/vc"})
public class VerfityCodeServlet extends BaseServlet {
    public void vc() throws IOException {
        //若需要看到指定图片,需要手动设置响应体(必须在响应体操作之前设置)
        getResponse().setContentType("image/jpeg;charset=utf-8");
        //向响应体写出一张图片形式的验证码
        String vc = createVerifyCodeImage();
        System.out.println(vc);
    }
}

小结:

验证码本质是一张图片,以响应体的方式传递给浏览器(文件下载)

为了让浏览器打开解析,需要在响应体操作之前,设置响应体类型:

getResponse().setContentType("image/jpeg;charset=utf-8")

2.2分析及代码实现

 

login.html

<img src="/day08_1/vc?method=vc"/>

 VerifyCodeServlet已经在前置知识完成了。

2.3需求2:点击切换验证码-绕过缓存

用户默认开启缓存,存在缓存问题:

因为每次路径都是/day08_1/vc?method=vc ,第一次访问时,该路径就在浏览器上有一张图片了。

缓存理解为一个map集合:

Key                                               value

Url路径                                         该路径的资源

/day08_1/vc?method=vc              验证码图片

下次再准备发请求时,发现该路径在浏览器有缓存,直接使用浏览器缓存,而不去请求服务器。

解决方案:

绕过缓存,只需要让缓存的地址(key)不同,参数列表,只需要让参数列表每次不同,缓存的地址不同

可以用随机数

可以用毫秒值

<script>
   //页面加载完成时,为图片绑定点击事件
   $(function () {
      $("#vcimg").click(function () {
         this.src="/day08_1/vc?method=vc&t="+new Date().getTime();
      });
   });
</script>

小结:

因为用户端访问时存在缓存问题。

为了绕过缓存,需要让每次URL访问路径不同。

让URL最后加入随机的参数列表就可以。

 

3.几种获取preperties资源方式

目标:掌握ServletContext方式获取properties资源方式

public void run1() throws IOException {
    //类加载器获取资源:SE方式(不启动服务器也能正常执行)
    InputStream is = this.getClass().getClassLoader().getResourceAsStream("com/p/d1.properties");
    Properties p1 = new Properties();
    p1.load(is);
    System.out.println(p1);
    //ServletContext获取资源:EE方式(必须先启动服务器才能正常执行)
    InputStream is2 = getServletContext().getResourceAsStream("/WEB-INF/classes/com/p/d1.properties");
    Properties p2 = new Properties();
    p2.load(is2);
    System.out.println(p2);
    //ResourceBundle获取:SE方式(不启动服务器也能正常执行)
    ResourceBundle bundle = ResourceBundle.getBundle("com.p.d1");
    System.out.println(bundle.getString("uname"));
}

 

 

小结:

建议使用的是ServletContext的getResourceAsStream,该方式的出发目录是发布目录的根目录,不仅能够获取properties,而且还能获取其他资源。

其他两种方

注意:

1、以上三种获取资源方式,获取的是 发布目录下的资源。

2、ResourceBundle相同路径文件在服务器启动期间,为了防止重复加载浪费内容,会加载一次

(重新加载,默认关闭服务器,服务器关闭时会卸载内存)

式,出发目录都是 发布目录的/classes 目录

最后:

        如果文章对您有帮助,就拿起小手赶紧给博主点赞💚评论❤️收藏💙 一下吧! 

       愿我们在未来的日子里。熠熠生辉!!!

 

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

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

相关文章

CTF中Web题目的各种基础的思路-----入门篇十分的详细

我期间也考察很多人的&#xff0c;但搞这个的确实有点少&#xff0c;希望这篇可以大家一点帮助&#xff0c;这篇文章也借鉴一些人的文章&#xff0c;还有很多东西&#xff0c;我没搞&#xff0c;确实有点麻烦&#xff0c;但以后还会不断更新的&#xff0c;希望大家在web这里少走…

Web系统常见安全漏洞介绍及解决方案-CSRF攻击

&#x1f433;博客主页&#xff1a;拒绝冗余 – 生命不息&#xff0c;折腾不止 &#x1f310;订阅专栏&#xff1a;『Web安全』 &#x1f4f0;如觉得博主文章写的不错或对你有所帮助的话&#xff0c;还望大家多多支持呀&#xff01; &#x1f449;关注✨、点赞&#x1f44d;、收…

CSS基本布局——grid布局

grid布局简介&#xff1a; Grid布局是将容器划分成“行”和“列”&#xff0c;产生单元格&#xff0c;然后指定“项目所在”的单元格&#xff0c;可以看作是二维布局。 基本概念&#xff1a; 容器&#xff08;container&#xff09;——有容器属性项目&#xff08;items&…

vite项目优化

首先在讲述vite优化之前&#xff0c;我们先来分析一下和传统的项目管理构建工具的区别&#xff0c;以webpack为例&#xff0c;它是利用plugin插件和loader加载器对项目的所有模块和依赖统一通过入口文件进行编译&#xff0c;从而变成我们html所需要的js格式渲染我们的页面。 随…

Vue项目目录结构介绍(三)

前言 本章我们会对一个 Vue 项目的目录结构进行讲解&#xff0c;解释各子目录以及文件的作用&#xff0c;前端的模块化&#xff0c;Vue 单文件组件规范等。 1、基础目录和文件介绍 在上一章&#xff0c;我们通过 vue-cli 创建了一个新的项目&#xff0c;生成的项目目录里已经包…

tauri+vite+vue3开发环境下创建、启动运行和打包发布

目录 1.创建项目 2.安装依赖 3.启动项目 4.打包生成windows安装包 5.安装打包生成的安装包 1.创建项目 运行下面命令创建一个tauri项目 pnpm create tauri-app 我创建该项目时的node版本为16.15.0 兼容性注意 Vite 需要 Node.js 版本 14.18&#xff0c;16。然而&#x…

【玩转CSS】这些高级技巧,你都会吗

&#x1f525;一个人走得远了&#xff0c;就会忘记自己为了什么而出发&#xff0c;希望你可以不忘初心&#xff0c;不要随波逐流&#xff0c;一直走下去&#x1f3b6; &#x1f98b; 欢迎关注&#x1f5b1;点赞&#x1f44d;收藏&#x1f31f;留言&#x1f43e; &#x1f984; …

js去掉两个数组相同的元素、js删除数组中某一个对象、js快速查找数组中重复项下标

一、js去掉两个数组相同的元素 注意&#xff1a;这里并非是数组去重&#xff0c;数组去重是去掉一个数组中相同的元素&#xff0c;这里是比较两个数组&#xff0c;过滤掉二者相同的&#xff0c;留下不同的。 通过 some() 在对方数组里面查找相同元素&#xff0c;再利用filter…

老老实实的程序员该如何描述自己的缺点

答辩的时候&#xff0c;晋升的时候&#xff0c;面试的时候&#xff0c;你有没有经常遇到一个问题&#xff0c;那就是你觉得自己有什么缺点吗&#xff1f; 目录 1. 每个人都有缺点 2. 这道题在考什么&#xff1f; 3. 我之前是怎么回答的 4. 你可以这样回答试一试 5. 总结 …

浅析<router-view> v-slot事例

官方关于<router-link> 的 v-slot的相关介绍: https://router.vuejs.org/zh/api/#router-view-%E7%9A%84-v-slot 并给出了一个例子&#xff1a; <router-view v-slot"{ Component, route }"><transition :name"route.meta.transition || fade&q…

selenium驱动Firefox安装和环境配置

目录 一、前言 二、版本 三、配置环境 四、在pycharm中添加selenium 五、测试代码&#xff0c;成功打开百度&#xff0c;则配置成功 一、前言 根据多篇文章总结了一下自己操作过程&#xff0c;主要是想记录一下。 二、版本 1.查看自己的Firefox的版本&#xff0c;在浏览器…

Web视频video自动播放(移动端及PC端)

做了个关于视频播放的活动&#xff0c;被各种问题折腾得精疲力竭。为了日后能够轻松点&#xff0c;特记录下出现的各种问题及解决方法。 活动要适配移动端&#xff08;IPhone、Android&#xff09;和PC端&#xff08;Chrome&#xff09; 需要解决的问题&#xff1a;移动端禁止全…

vue echarts饼图环形 (随着legend动态显示数据总数)

目录 1.安装echarts 2.引入echarts 3.创建要放入echarts实例的一个盒子 4.创建echarts实例 5.随着legend动态显示数据总数 效果视频 1.安装echarts npm install echarts --save 2.引入echarts 在 当前vue文件中引入 echarts 如下图所示&#xff1a; 3.创建要放入echa…

Vue项目实战——【基于 Vue3.x + Vant UI】实现一个多功能记账本(搭建开发环境)

基于 Vue3.x Vant UI 的多功能记账本&#xff08;二&#xff09; 文章目录基于 Vue3.x Vant UI 的多功能记账本&#xff08;二&#xff09;搭建开发环境项目演示1、创建项目2、配置路由3、添加 Vant UI 组件库4、移动端 rem 配置5、添加 iconfont 文字图标库6、二次封装 Axio…

Vue实现鼠标悬浮隐藏与显示图片效果 @mouseenter 和 @mouseleave事件

前言 前端vue 有个功能是鼠标移动到指定item上显示出来一个编辑和删除的图标 鼠标悬停在列表那么需要有悬浮显示的列表编辑和删除icon 文字不好描述&#xff0c;因为是web端录屏也比较麻烦 这里用截图说明 图片说明 功能实现 之前没做过这种效果&#xff0c;问了一下我的组长…

echarts 地图和柱状图结合(在地图上显示柱状图)

如图&#xff0c;需求要做一个在地图上显示柱状图的echarts图&#xff0c;但是百度了半天&#xff0c;发现很少有人发这种例子。这个代码也是借鉴的别人的文章&#xff0c;但需求肯定不完全一致&#xff0c;那我会根据我的需求把代码和注意事项发出来并解释。&#xff08;如果有…

ant-design-vue:基础使用

一、环境介绍 vue3tsant-design-vue 二、安装使用 2.1、安装脚手架工具 $ npm install -g vue/cli # OR $ yarn global add vue/cli 2.2、创建一个demo项目 2.2.1、创建项目 $ vue create antd-demo 2.2.2、 安装成功&#xff1a; 2.2.3、 项目目录及启动项目&#xff1a…

前端常见的几种布局方式,2分钟即可看完,全是干货。

前端常见的几种布局方式 提示&#xff1a;本篇文章不包含具体知识点&#xff0c;但是可以帮助小白了解到什么是布局 文章目录前端常见的几种布局方式前言参考文档一、前端常见的几种布局方式是什么&#xff1f;二、几大布局介绍1.浮动布局2.定位布局3.弹性布局4.栅格布局5.响应…

scss安装入门到使用高级语法

一.sass的基本概念 sass是css的"预处理器", 一门专门的css编程语言 增加了变量, 函数, 计算, 嵌套关系等用法,让css编写更简洁, 清晰. 二. scss的安装步骤 首先查询一下是否已经安装过sass, 在cmd中输入sass -v 或者 sass --version sass -vsass --version使用上…

【前端修炼之路】第一话 · 初识前端领域

写在前面 夏日炎炎&#xff0c;现在屋外的鸟儿叫的很欢&#xff0c;屋内刚刚组装完的主机风扇在轰轰作响&#xff0c;呜呜呜&#xff0c;怎么闻怎么看都不像是矿卡的显卡现在竟散发出阵阵甜味~哈哈哈哈开个玩笑&#xff0c;写个文章看个视频&#xff0c;这显卡的风扇应该都不带…