WEB14_HttpServletResponse介绍

墨蓝 2022-03-15 11:38 162阅读 0赞

HttpServletResponse  
![在这里插入图片描述][20190302143203468.png]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70]

## 1．HttpServletResponse概述 ##

我们在创建Servlet时会覆盖service()方法，或doGet()/doPost(),这些方法都有两个参数，一个为代表请求的request和代表响应response。  
service方法中的response的类型是ServletResponse，而doGet/doPost方法的response的类型是HttpServletResponse，HttpServletResponse是ServletResponse的子接口，功能和方法更加强大，今天我们学习HttpServletResponse。

## 2．response的运行流程 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 1]

## 3．通过抓包工具抓取Http响应 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 2]  
因为response代表响应，所以我们可以通过该对象分别设置Http响应的响应行，响应头和响应体

## 4．通过response设置响应行 ##

设置响应行的状态码

setStatus(int sc)

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 3]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 4]

## 5．通过response设置响应头 ##

addHeader(String name, String value)  
addIntHeader(String name, int value)  
addDateHeader(String name, long date)  
setHeader(String name, String value)  
setDateHeader(String name, long date)  
setIntHeader(String name, int value)  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 5]  
其中，add表示添加，而set表示设置  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 6]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 7]

### 重定向： ###

1.状态码：302  
2.响应头：location 代表重定向的地址  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 8]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 9]  
![在这里插入图片描述][20190302154557654.png]

//封装成一个重定向方法
    		response.sendRedirect("/WEB14/servlet2");

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 10]

### 定时刷新的头 ###

//设置定时刷新的头
    		response.setHeader("refresh", "5,url=http://www.baidu.com");

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 11]  
等待5s后：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 12]

### 用JS+HTML动态显示倒计时，跳转页面 ###

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
    <script type="text/javascript">
    	window.onload = function(){
    		var time = 4;
    		//返回指定 ID 的元素
    		var secondEle = document.getElementById("second");
    		//Number jsWindow.setInterval(Function callback, Number delay)
    		//callback-回调函数 	delay-执行回调函数之间的时间间隔，单位 ms。
    		//返回一个 ID（数字），可以将这个ID传递给clearInterval()，clearTimeout() 以取消执行。
    		var timer = setInterval(function(){
    			//innerHTML跟表单里面的value属性有点类似，能够控制层的显示值
    			secondEle.innerHTML = time;
    			time--;
    			if(time == 0){
    				clearInterval(timer);
    				location.href = "http://www.baidu.com";
    			}
    		}, 1000);
    	}
    </script>
    </head>
    <body>
    	恭喜你,注册成功,<span style="color:red" id="second">5</span>秒后跳转,如不跳转点击<a href="http://www.baidu.com">这里</a>!
    </body>
    </html>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 13]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 14]

## 6．通过response设置响应体 ##

### (1)响应体设置文本 ###

PrintWriter getWriter()

获得字符流，通过字符流的write(String s)方法可以将字符串设置到response 缓冲区中，随后Tomcat会将response缓冲区中的内容组装成Http响应返回给浏览 器端。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 15]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 16]  
关于设置中文的乱码问题  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 17]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 18]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 19]  
原因：response缓冲区的默认编码是iso8859-1，此码表中没有中文，可以通过

response的setCharacterEncoding(String charset) 设置response的编码

但我们发现客户端还是不能正常显示文字  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 20]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 21]  
原因：我们将response缓冲区的编码设置成UTF-8，但浏览器的默认编码是本地系 统的编码，因为我们都是中文系统，所以客户端浏览器的默认编码是GBK，我们可以 手动修改浏览器的编码是UTF-8。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 22]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 23]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 24]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 25]  
我们还可以在代码中指定浏览器解析页面的编码方式，通过response的setContentType(String type)方法指定页面解析时的编码是UTF-8

response.setContentType("text/html;charset=UTF-8");

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 26]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 27]  
上面的代码不仅可以指定浏览器解析页面时的编码，同时也内含 setCharacterEncoding的功能，**所以在实际开发中只要编写 response.setContentType(“text/html;charset=UTF-8”);就可以解决页面输出中文乱码问题。**

### (2)响应头设置字节 ###

ServletOutputStream getOutputStream()  
获得字节流，通过该字节流的write(byte\[\] bytes)可以向response缓冲区中写入字 节，在由Tomcat服务器将字节内容组成Http响应返回给浏览器。

#### 服务器端向客户端上传一张照片： ####

//使用response获得字节输出流
    		ServletOutputStream out = response.getOutputStream();
    		
    		//获取服务器上的图片   
    		//获得ServletContext对象 相对于WebContent路径
    		String realPath = this.getServletContext().getRealPath("a.jpg");
    		//InputStream 相当于是 FileInputStream 的父类
    		InputStream in = new FileInputStream(realPath);
    		
    		int len = 0;
    		byte[] buffer = new byte[1024];
    		//read();方法会将读取到的字节存入缓存数组b
    		//并且return一个int类型的已经读取过字节的数组b的长度
    		while((len = in.read(buffer)) > 0){
    			//write(byte[] b,int off,int len)
    			//将指定 byte数组中从偏移量off开始的len个字节写入此缓冲的输出流
    			out.write(buffer, 0, len);
    		}
    		in.close();
    		out.close();

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 28]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 29]

## 7．案例一、完成文件下载 ##

1.  什么情况下会文件下载？  
    浏览器不能解析的文件就需要下载浏览器不能解析的文件就需要下载
2.  什么情况下需要在服务器端编写文件下载的代码？  
    理论上，浏览器可以解析的代码需要编写文件下载代码  
    实际开发中,只要是下载的文件都编写文件下载代码理论上，浏览器可以解析的代码需要编写文件下载代码！实际开发中,只要是下载的文件都编写文件下载代码

文件下载的实质就是文件拷贝，将文件从服务器端拷贝到浏览器端。所以文件下载需 要IO技术将服务器端的文件使用InputStream读取到，在使用 ServletOutputStream写到response缓冲区中  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 30]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 31]

//获得要下载的文件名称
    		String fileName = request.getParameter("filename");
    		
    		//要下载的这个文件类型--客户端通过文件的MIME类型去区分类型
    		//String getMimeType(String fileName)    返回指定文件名的MIME类型。
    		//典型情况是基于文件扩展名，而不是文件本身的内容（它可以不必存在）。
    		//如果MIME类型未知，可以返回null。
    		response.setContentType(this.getServletContext().getMimeType(fileName));
    		//告诉客户端该文件下不是直接解析,而是以附件形式打开(下载)
    		response.setHeader("Content-Disposition", "attachment;filename=" + fileName);
    		
    		//获取文件的绝对路径
    		//获得ServletContext对象 相对于WebContent路径
    		String realPath = this.getServletContext().getRealPath("download/" + fileName);
    		
    		//获取文件的输入流
    		InputStream in = new FileInputStream(realPath);
    		//获得输出流--通过response获得输出流 用于向客户端写内容
    		ServletOutputStream out = response.getOutputStream();
    		//文件拷贝的模板代码
    		int len = 0;
    		byte[] buffer = new byte[1024];
    		while((len = in.read(buffer)) > 0){
    			out.write(buffer, 0, len);
    		}
    		in.close();
    		//out.close();//response获得流不用手动关闭,会自动关闭

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 32]  
上述代码可以将图片从服务器端传输到浏览器，但浏览器直接解析图片显示在页面上， 而不是提供下载，**我们需要设置两个响应头，告知浏览器文件的类型和文件的打开方式。**

### 1）告知浏览器文件的类型： ###

response.setContentType(文件的MIME类型);

### 2）告示浏览器文件的打开方式是下载： ###

response.setHeader("Content-Disposition","attachment;filename=文件名称");

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 33]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 34]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 35]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 36]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 37]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 38]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 39]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 40]  
当然上述方式文件并没有破坏，修改文件名之后，文件依然是能正常使用的，但是这样手动改太麻烦：  
如果下载中文文件，页面在下载时会出现中文乱码或不能显示文件名的情况， 原因是不同的浏览器默认对下载文件的编码方式不同，ie是UTF-8编码方式，而火狐 浏览器是Base64编码方式。所里这里需要解决浏览器兼容性问题，解决浏览器兼容 性问题的首要任务是要辨别访问者是ie还是火狐（其他），通过Http请求体中的一个属性可以辨别  
![在这里插入图片描述][2019030309423332.png]  
![在这里插入图片描述][20190303094243912.png]

### 解决乱码方法如下（不要记忆–了解）： ###

//************文件名称是中文的下载************		
    		//获得要下载的文件名称
    		String fileName = request.getParameter("filename");//美女.jpg
    		
    		//解决获得中文参数的乱码---
    		fileName = new String(fileName.getBytes("ISO8859-1"),"UTF-8");//美女.jpg
    		
    		//但是，如果下载中文文件，页面在下载时会出现中文乱码或不能显示文件名的情况
    		//原因是不同的浏览器默认对下载文件的编码方式不同
    		//解决浏览器兼容性问题的首要任务是要辨别访问者是ie还是火狐（其他）
    		//通过Http请求体中的一个属性可以辨别
    		//获得请求头中的User-Agent
    		String agent = request.getHeader("User-Agent");
    		
    		//根据不同浏览器进行不同的编码
    		//其中agent就是请求头User-Agent的值
    		String fileNameEncoder = "";
    		if (agent.contains("MSIE")) {
    			// IE浏览器
    			fileNameEncoder = URLEncoder.encode(fileName, "utf-8");
    			fileNameEncoder = fileNameEncoder.replace("+", " ");
    		} else if (agent.contains("Firefox")) {
    			// 火狐浏览器
    			BASE64Encoder base64Encoder = new BASE64Encoder();
    			fileNameEncoder = "=?utf-8?B?"
    						+ base64Encoder.encode(fileName.getBytes("utf-8")) + "?=";
    		} else {
    			// 其它浏览器
    			fileNameEncoder = URLEncoder.encode(fileName, "utf-8");				
    		}
    		
    		//要下载的这个文件类型--客户端通过文件的MIME类型去区分类型
    		//String getMimeType(String fileName)    返回指定文件名的MIME类型。
    		//典型情况是基于文件扩展名，而不是文件本身的内容（它可以不必存在）。
    		//如果MIME类型未知，可以返回null。
    		response.setContentType(this.getServletContext().getMimeType(fileName));
    		//告诉客户端该文件下不是直接解析,而是以附件形式打开(下载)---
    		//filename=" + fileName 客户端默认对名字进行编码(每种浏览器（客户端）兼容性不同,也就是编码方式不同)
    		response.setHeader("Content-Disposition", "attachment;filename=" + fileNameEncoder);
    		
    		//获取文件的绝对路径
    		//获得ServletContext对象 相对于WebContent路径
    		String realPath = this.getServletContext().getRealPath("download/" + fileName);
    		
    		//获取文件的输入流
    		InputStream in = new FileInputStream(realPath);
    		//获得输出流--通过response获得输出流 用于向客户端写内容
    		ServletOutputStream out = response.getOutputStream();
    		//文件拷贝的模板代码
    		int len = 0;
    		byte[] buffer = new byte[1024];
    		while((len = in.read(buffer)) > 0){
    			out.write(buffer, 0, len);
    		}
    		in.close();
    		//out.close();//response获得流不用手动关闭,会自动关闭

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 41]

### response细节点： ###

1）response获得的流不需要手动关闭,Tomcat容器会帮助我们关闭  
2）getWriter和getOutStream不能同时调用  
3) response的response.sendRedirect(location);方法后，不需要再写代码  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 42]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 43]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 44]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 45]

## 8、案例二、生成验证码（了解—验证码的图片的生成代码-（不用写）） ##

页面加载之window.function()\{\} 和 $(function()\{\})的区别  
通用的页面加载js有四种方式：

1.window.onload = function(){}; —-js 
    2.$(window).load(function(){});——Jquery 
    3.$(document).ready(function(){});–Jquery 
    4.$(function(){});———————Jquery

其中1和2为同一种，3和4为同一种  
1、2表示：页面全部加载完成（引用文件，图片）在加载内部函数，且只能执行一个（当文件由多个onload或者load，只加载最后一个）。  
3、4在window.onload执行前执行的，在DOM加载完毕后，页面全部内容（如图片等）完全加载完毕前被执行。而window.onload会在页面资源全部加载完毕后才会执行。  
login.html：

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
    <script type="text/javascript">
    	window.onload = function(){
    		
    	}
    	function changeImg(obj){
    		//这里让点击验证码能再次访问src="/WEB14/checkImg"路径,但是要加参数,欺骗客户端不是同一个路径,这样就能更新验证码
    		obj.src="/WEB14/checkImg?time=" + new Date().getTime();
    	}
    </script>
    </head>
    <body>
    	<form action="/WEB13/login" method="post">
    		用户名：<input type="text" name="username"><br>
    		密码：<input type="password" name="password"><br>
    		验证码：<input type="text" name="username"><img onclick="changeImg(this)" src="/WEB14/checkImg"><br>
    		<input type="submit" value="登录"><br>
    	</form>
    </body>
    </html>

CheckImgServlet.java  
![在这里插入图片描述][20190303152056989.png]

package com.itheima.checking;
    
    import java.awt.Color;
    import java.awt.Font;
    import java.awt.Graphics;
    import java.awt.Graphics2D;
    import java.awt.image.BufferedImage;
    import java.io.BufferedReader;
    import java.io.FileReader;
    import java.io.IOException;
    import java.util.ArrayList;
    import java.util.List;
    import java.util.Random;
    
    import javax.imageio.ImageIO;
    import javax.servlet.ServletException;
    import javax.servlet.http.HttpServlet;
    import javax.servlet.http.HttpServletRequest;
    import javax.servlet.http.HttpServletResponse;
    
    /**
     * 验证码生成程序
     */
    public class CheckImgServlet extends HttpServlet {
    
    	// 集合中保存所有成语
    	private List<String> words = new ArrayList<String>();
    
    	@Override
    	public void init() throws ServletException {
    		// 初始化阶段，读取new_words.txt
    		// web工程中读取 文件，必须使用绝对磁盘路径
    		String path = getServletContext().getRealPath("/WEB-INF/new_words.txt");
    		try {
    			BufferedReader reader = new BufferedReader(new FileReader(path));
    			String line;
    			while ((line = reader.readLine()) != null) {
    				words.add(line);
    			}
    			reader.close();
    		} catch (IOException e) {
    			e.printStackTrace();
    		}
    	}
    
    	public void doGet(HttpServletRequest request, HttpServletResponse response)
    			throws ServletException, IOException {
    		// 禁止缓存
    		// response.setHeader("Cache-Control", "no-cache");
    		// response.setHeader("Pragma", "no-cache");
    		// response.setDateHeader("Expires", -1);
    
    		int width = 120;
    		int height = 30;
    
    		// 步骤一 绘制一张内存中图片
    		BufferedImage bufferedImage = new BufferedImage(width, height,
    				BufferedImage.TYPE_INT_RGB);
    
    		// 步骤二 图片绘制背景颜色 ---通过绘图对象
    		Graphics graphics = bufferedImage.getGraphics();// 得到画图对象 --- 画笔
    		// 绘制任何图形之前 都必须指定一个颜色
    		graphics.setColor(getRandColor(200, 250));
    		graphics.fillRect(0, 0, width, height);
    
    		// 步骤三 绘制边框
    		graphics.setColor(Color.WHITE);
    		graphics.drawRect(0, 0, width - 1, height - 1);
    
    		// 步骤四 四个随机数字
    		Graphics2D graphics2d = (Graphics2D) graphics;
    		// 设置输出字体
    		graphics2d.setFont(new Font("宋体", Font.BOLD, 18));
    
    		Random random = new Random();// 生成随机数
    		int index = random.nextInt(words.size());
    		String word = words.get(index);// 获得成语
    
    		// 定义x坐标
    		int x = 10;
    		for (int i = 0; i < word.length(); i++) {
    			// 随机颜色
    			graphics2d.setColor(new Color(20 + random.nextInt(110), 20 + random
    					.nextInt(110), 20 + random.nextInt(110)));
    			// 旋转 -30 --- 30度
    			int jiaodu = random.nextInt(60) - 30;
    			// 换算弧度
    			double theta = jiaodu * Math.PI / 180;
    
    			// 获得字母数字
    			char c = word.charAt(i);
    
    			// 将c 输出到图片
    			graphics2d.rotate(theta, x, 20);
    			graphics2d.drawString(String.valueOf(c), x, 20);
    			graphics2d.rotate(-theta, x, 20);
    			x += 30;
    		}
    
    		// 将验证码内容保存session
    		request.getSession().setAttribute("checkcode_session", word);
    
    		// 步骤五 绘制干扰线
    		graphics.setColor(getRandColor(160, 200));
    		int x1;
    		int x2;
    		int y1;
    		int y2;
    		for (int i = 0; i < 30; i++) {
    			x1 = random.nextInt(width);
    			x2 = random.nextInt(12);
    			y1 = random.nextInt(height);
    			y2 = random.nextInt(12);
    			graphics.drawLine(x1, y1, x1 + x2, x2 + y2);
    		}
    
    		// 将上面图片输出到浏览器 ImageIO
    		graphics.dispose();// 释放资源
    		
    		//将图片写到response.getOutputStream()中
    		ImageIO.write(bufferedImage, "jpg", response.getOutputStream());
    
    	}
    
    	public void doPost(HttpServletRequest request, HttpServletResponse response)
    			throws ServletException, IOException {
    		doGet(request, response);
    	}
    
    	/**
    	 * 取其某一范围的color
    	 * 
    	 * @param fc
    	 *            int 范围参数1
    	 * @param bc
    	 *            int 范围参数2
    	 * @return Color
    	 */
    	private Color getRandColor(int fc, int bc) {
    		// 取其随机颜色
    		Random random = new Random();
    		if (fc > 255) {
    			fc = 255;
    		}
    		if (bc > 255) {
    			bc = 255;
    		}
    		int r = fc + random.nextInt(bc - fc);
    		int g = fc + random.nextInt(bc - fc);
    		int b = fc + random.nextInt(bc - fc);
    		return new Color(r, g, b);
    	}
    
    }

new\_words.txt

一唱一和
    一呼百应
    一干二净
    一举两得
    一落千丈
    一模一样
    一暴十寒
    一日千里
    一五一十
    一心一意
    两面三刀
    三长两短
    三番五次
    三三两两
    三头六臂
    三心二意
    三言两语
    四分五裂
    四面八方
    四通八达
    四平八稳
    五光十色
    五湖四海
    五花八门
    五颜六色
    六神无主
    七颠八倒
    七零八落
    七拼八凑
    七上八下
    七手八脚
    七嘴八舌
    八面玲珑
    九死一生
    十全十美
    百发百中
    百孔千疮
    百战百胜
    百依百顺
    千变万化
    千差万别
    千军万马
    千山万水
    千丝万缕
    千辛万苦
    千言万语
    千真万确
    千锤百炼
    千方百计
    千奇百怪
    千姿百态
    千钧一发
    千虑一得
    千虑一失
    千篇一律
    万水千山
    万无一失
    万众一心
    万紫千红
    万死一生
    推心置腹
    肝胆相照
    情同手足
    志同道合
    风雨同舟
    荣辱与共
    同甘共苦
    关怀备注
    心心相印
    海誓山盟
    拔刀相助
    亲密无间
    万紫千红
    春暖花开
    鸟语花香
    姹紫嫣红
    花红柳绿
    百花争艳
    锦上添花
    火树银花
    昨日黄花
    春花秋月
    过时黄花
    花团锦簇
    花枝招展
    崇山峻岭
    山明水秀
    山穷水尽
    大好山河
    刀山火海
    地动山摇
    高山深涧
    悬崖峭壁
    峰峦雄伟
    漫山遍野
    江山如画
    锦绣山河
    五彩缤纷
    五颜六色
    一碧千里
    万紫千红
    花红柳绿
    翠色欲流
    姹紫嫣红
    五光十色
    青红皂白
    绿水青山
    不可多得
    凤毛麟角
    九牛一毛
    绝无仅有
    空前绝后
    寥寥无几
    寥若晨星
    宁缺毋滥
    前所未有
    屈指可数
    三三两两
    铁树开花
    微乎其微
    一麟半爪
    一丝一毫
    百里挑一
    沧海一粟
    千古绝唱
    摩肩接踵
    车水马龙
    川流不息
    纷至沓来
    花花世界
    举袖为云
    挥汗如雨
    络绎不绝
    门庭若市
    万人空巷
    水泄不通
    人声鼎沸
    人欢马叫
    人山人海
    震耳欲聋
    座无虚席
    包罗万象
    琳琅满目
    美不胜收
    目不暇接
    无奇不有
    无穷无尽
    无所不包
    五花八门
    眼花缭乱
    洋洋大观
    一应俱全
    应有尽有
    应接不暇
    比比皆是
    不可计数
    层出不穷
    绰绰有余
    多多益善
    多如牛毛
    俯拾皆市
    举不胜举
    漫山遍野
    星罗棋布
    丰富多彩
    九霄云外
    腾云驾雾
    壮志凌云
    风云变幻
    风起云涌
    行云流水
    风卷残云
    浮云蔽日
    孤云野鹤
    烘云托月
    过眼云烟
    烟消云散
    大雨倾盆
    血雨腥风
    风雨交加
    风调雨顺
    枪林弹雨
    风雨同舟
    风雨无阻
    和风细雨
    狂风暴雨
    满城风雨
    滂沱大雨
    春风化雨
    风雨飘摇
    斜风细雨
    未雨绸缪
    水流湍急
    水平如镜
    高山流水
    千山万水
    水滴石穿
    水乳交融
    滴水不漏
    杯水车薪
    洪水猛兽
    流水无情
    直言不讳
    无所顾忌
    拐弯抹角
    真心诚意
    故弄玄虚
    侃侃而谈
    滔滔不绝
    虚情假意
    推心置腹
    旁敲侧击
    喋喋不休
    慢条斯理
    含糊其词
    唠唠叨叨
    振振有辞
    肆无忌惮
    大言不惭
    娓娓动听
    绘声绘色
    对答如流
    自圆其说
    闲言碎语
    闭月羞花
    沉鱼落雁
    出水芙蓉
    明眸皓齿
    美如冠玉
    倾国倾城
    国色天香
    鹤发童颜
    眉清目秀
    和蔼可亲
    心慈面善
    张牙舞爪
    愁眉苦脸
    冰清玉洁
    雍容华贵
    文质彬彬
    威风凛凛
    老态龙钟
    虎背熊腰
    如花似玉
    容光焕发
    落落大方
    骨瘦如柴
    大腹便便
    面黄肌瘦
    其貌不扬
    蓬头垢面
    弱不禁风
    口若悬河
    对答如流
    滔滔不绝
    谈笑风生
    高谈阔论
    豪言壮语
    夸夸其谈
    花言巧语
    忐忑不安
    心惊肉跳
    心神不定
    心猿意马
    心慌意乱
    七上八下
    心急如焚
    班门弄斧
    孤芳自赏
    居功自傲
    目中无人
    妄自尊大
    忘乎所以
    惟我独尊
    自高自大
    自鸣得意
    自我陶醉
    自命不凡
    目空一切
    不骄不躁
    功成不居
    戒骄戒躁
    洗耳恭听
    虚怀若谷
    慎言谨行
    学无止境
    学而不厌
    真才实学
    学而不倦
    发奋图强
    废寝忘食
    争分夺秒
    孜孜不倦
    笨鸟先飞
    闻鸡起舞
    自强不息
    只争朝夕
    不甘示弱
    全力以赴
    力争上游
    披荆斩棘
    奋不顾身
    舍己为人
    坚强不屈
    赤胆忠心
    不屈不挠
    忠贞不渝
    誓死不二
    威武不屈
    舍死忘生
    肝胆相照
    克己奉公
    一丝不苟
    两袖清风
    见礼忘义
    永垂不朽
    顶天立地
    豁达大度
    兢兢业业
    卖国求荣
    恬不知耻
    贪生怕死
    厚颜无耻
    神采奕奕
    眉飞色舞
    昂首挺胸
    惊慌失措
    漫不经心
    垂头丧气
    没精打采
    愁眉苦脸
    大惊失色
    炯炯有神
    怒发冲冠
    一目十行
    一日千里
    一字千金
    百发百中
    一日三秋
    不毛之地
    不计其数
    胆大包天
    寸步难行
    一步登天
    千钧一发
    观者如云
    挥金如土
    铁证如山
    爱财如命
    稳如泰山
    门庭若市
    骨瘦如柴
    冷若冰霜
    如雷贯耳
    守口如瓶
    浩如烟海
    高手如林
    阳春三月
    春光明媚
    春回大地
    春暖花开
    春意盎然
    春意正浓
    风和日丽
    春花烂漫
    鸟语花香
    百鸟鸣春
    百花齐放
    莺歌燕舞
    赤日炎炎
    烈日炎炎
    骄阳似火
    挥汗如雨
    大汗淋漓
    鸟语蝉鸣
    万木葱茏
    枝繁叶茂
    莲叶满池
    秋高气爽
    天高云淡
    秋风送爽
    秋菊怒放
    秋菊傲骨
    秋色迷人
    秋色宜人
    金桂飘香
    果实累累
    北雁南飞
    满山红叶
    五谷丰登
    芦花飘扬
    天寒地冻
    北风呼啸
    滴水成冰
    寒冬腊月
    瑞雪纷飞
    冰天雪地
    冰封雪盖
    漫天飞雪
    白雪皑皑
    冰封大地
    冰天雪地
    东方欲晓
    旭日东升
    万物初醒
    空气清醒
    雄鸡报晓
    晨雾弥漫
    晨光绚丽
    烈日当头
    丽日临空
    艳阳高照
    万里无云
    碧空如洗
    日落西山
    夕阳西斜
    残阳如血
    炊烟四起
    百鸟归林
    华灯初上
    夜幕低垂
    日薄西山
    夜深人静
    月明星稀
    夜色柔美
    夜色迷人
    深更半夜
    漫漫长夜
    风光秀丽
    人山人海
    车水马龙
    宁静和谐
    草木苍翠
    竹篱瓦舍
    山幽路辟
    小桥流水
    直指青云
    古色古香
    青砖素瓦
    耸入碧云
    机器轰鸣
    铁流直泻
    热气腾腾
    钢花飞溅
    粉饰一新
    门可罗雀
    冷冷清清
    错落有致
    富丽堂皇
    设施齐全
    气势雄伟
    金碧辉煌
    风景如画
    闻名遐迩
    井然有序
    杂乱无章
    布局巧妙
    错落有致
    宽阔平坦
    崎岖不平
    拥挤不堪
    畅通无阻
    花红柳绿
    花色迷人
    花香醉人
    花枝招展
    百花齐放
    百花盛开
    百花争艳
    绚丽多彩
    五彩缤纷
    姹紫嫣红
    绿草如茵
    一碧千里
    杂草丛生
    生机勃勃
    苍翠挺拔
    郁郁葱葱
    枯木逢春
    秀丽多姿
    青翠欲滴
    林海雪原
    耸入云天
    瓜果蔬菜
    清香鲜嫩
    青翠欲滴
    果园飘香
    果实累累
    果实饱满
    鲜嫩水灵
    象征和平
    乳燕初飞
    婉转悦耳
    莺歌燕舞
    翩然归来
    枝头嬉戏
    灰不溜秋
    叽叽喳喳
    鹦鹉学舌
    婉转悦耳
    笨嘴学舌
    利嘴如铁
    钢爪如钉
    神气活现
    昂首挺胸
    肥大丰满
    自由自在
    引吭高歌
    腾空而起
    狂奔飞驰
    膘肥体壮
    昂首嘶鸣
    瘦骨嶙峋
    行动迟缓
    俯首帖耳
    膘肥体壮
    川流不息
    呼啸而过
    穿梭往来
    缓缓驶离
    一叶扁舟
    扬帆远航
    乘风破浪
    雾海夜航
    追波逐浪
    划破云层
    直冲云霄
    穿云而过
    银鹰展翅
    学习用品
    美观实用
    小巧玲珑
    造型优美
    设计独特
    栩栩如生
    活泼可爱
    惹人喜爱
    爱不释手
    雨后彩虹
    彩桥横空
    若隐若现
    光芒万丈
    大雪纷飞
    大雪封山
    鹅毛大雪
    漫天飞雪
    瑞雪纷飞
    林海雪原
    风雪交加
    雪上加霜
    寒霜袭人
    霜林尽染
    垂露欲滴
    朝露晶莹
    日出露干
    电光石火
    雷电大作
    惊天动地
    春雷滚滚
    电劈石击
    雷电交加
    阴雨连绵
    牛毛细雨
    秋雨连绵
    随风飘洒
    倾盆大雨
    狂风暴雨
    大雨滂沱
    瓢泼大雨
    大雨淋漓
    暴雨如注
    秋风送爽
    金风送爽
    北风呼啸
    微风习习
    寒风刺骨
    风和日丽
    大雾迷途
    云雾茫茫
    雾似轻纱
    风吹雾散
    云消雾散
    彩云满天
    天高云淡
    乌云翻滚
    彤云密布
    彩霞缤纷
    晚霞如火
    朝霞灿烂
    丹霞似锦
    满天星斗
    众星捧月
    群星灿烂
    万点繁星
    月出东墙
    月出东山
    玉兔东升
    月光皎洁
    月色迷人
    月牙初升
    旭日东升
    日上三竿
    一轮红日
    日高三尺
    艳阳高照
    烈日当头
    骄阳似火
    日影西斜
    苦口婆心
    口若悬河
    心平气和
    不慌不忙
    语重心长
    热情洋溢
    恭恭敬敬
    洗耳恭听
    亲密无间
    形影不离
    情同手足
    团结友爱
    朝夕相处
    人山人海
    人声喧哗
    人声嘈杂
    人如潮涌
    摩肩接踵
    倾盆大雨
    狂风暴雨
    大雨滂沱
    瓢泼大雨
    读书学习
    神情专注
    学而不厌
    学无止境
    专心致志
    日积月累
    似懂非懂
    普天同庆
    彩旗飞舞
    欢天喜地
    张灯结彩
    彻夜狂欢
    兴高采烈
    手舞足蹈
    笨手笨脚
    挤眉弄眼

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 46]

[20190302143203468.png]: /images/20220315/1a15d66decd94d16949081d34046307b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70]: /images/20220315/6d12f2aefbea446c9d784eac2941281c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 1]: /images/20220315/e69ddbec3025489498f89d02f4af334e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 2]: /images/20220315/38629a831cdd4b94a2d9e4057dbd4932.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 3]: /images/20220315/e80efa3130054bf1a308898af00d6b00.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 4]: /images/20220315/105923e88ed9452f9d6b0f7a6e0530f3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 5]: /images/20220315/e7b831a065794a9f94c38c2952f9a2c0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 6]: /images/20220315/ca09ed86ec09497eb0de3addf1768136.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 7]: /images/20220315/deb8e10219b54701ab145627ea79b55b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 8]: /images/20220315/6bc97c4a846c40528ae9edad75eab17d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 9]: /images/20220315/be82ef2e309d473094dae693f5c216a0.png
[20190302154557654.png]: /images/20220315/784679b73cf042b0b90539ce48402896.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 10]: /images/20220315/deaae07a0f7945d585e0a6ae22bce21e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 11]: /images/20220315/7c8eb9c1dd454b32bb19543dff63832e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 12]: /images/20220315/0664af9c0aaa40069bc3cbe972ea3dc1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 13]: /images/20220315/a5dd2df24c25433fb9487f1403deab97.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 14]: /images/20220315/b6acdd220eb24687b01d18fe586e5ddb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 15]: /images/20220315/2f9db78e187b4d64809e31181b34b45e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 16]: /images/20220315/16b1c8bd8f97494fa5a377331dd84439.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 17]: /images/20220315/0d5030ec6ab941d3a06ba81594cb5e8b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 18]: /images/20220315/7f206914ae4640dbba0b4d9f3e550791.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 19]: /images/20220315/3c3f3a7aa4264e0b9b269246c60c2818.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 20]: /images/20220315/4a0d3955f6714783bb88fcb74a54828f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 21]: /images/20220315/7dcc4b82e8e5470da46a8a02236bc231.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 22]: /images/20220315/6f950e2d528c41298b1ba9886f5a291d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 23]: /images/20220315/6a6fb5f3989247ceac37b069ab078202.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 24]: /images/20220315/f30071c397ac4f928dc6517722f0ceff.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 25]: /images/20220315/1f562ce1a6b04b789814fc476c91b9b1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 26]: /images/20220315/7cb51e68cd974eb3a61bd6f0c3fc6cff.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 27]: /images/20220315/78472f9c893842fea91346238c6b6019.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 28]: /images/20220315/c2dc8c92f1ca49ac849d448df89981b0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 29]: /images/20220315/e0413607e4a44b3a8214f4e1f9def1de.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 30]: /images/20220315/8f9a82e5e9844885add1f71aa5559e5d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 31]: /images/20220315/28b4f235fd394cdf98650f337f75962a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 32]: /images/20220315/03a2fda683d54e1186506f8e66f7c302.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 33]: /images/20220315/ffac8b5df8344e69b87faf59c7a3e619.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 34]: /images/20220315/e8cf890704e74691a466b46454cacd34.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 35]: /images/20220315/8d5ae450803046038d916a672a50fff7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 36]: /images/20220315/e460f0222ba34b46a7212388a9871391.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 37]: /images/20220315/d090d8f5f98e4462891a6176309da6c5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 38]: /images/20220315/ed2a448d8a034e21b9e8da447e894159.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 39]: /images/20220315/057b6182a9ea42fc993a688bfa5399d0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 40]: /images/20220315/9f3e94c322f7450b8ce1cda49fa6496f.png
[2019030309423332.png]: /images/20220315/9f2e31f4e9bb405eb041b9d03697e934.png
[20190303094243912.png]: /images/20220315/786b928d5d254ef0ba242a1d81dc23f7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 41]: /images/20220315/e9d538c98dc148e2907ebab25bd374bd.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 42]: /images/20220315/a59e52e293024276bf30b3829a0fc469.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 43]: /images/20220315/d193712666cc49479e1531f62f3c7981.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 44]: /images/20220315/aa56f73251bd46019ba70313305ba049.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 45]: /images/20220315/d504d35b821f4f06bb8ca188ff0b4441.png
[20190303152056989.png]: /images/20220315/317f99ea6b024bdf81f8fe20326e6863.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 46]: /images/20220315/ff7bb2a562974d688eb9c0245556ae21.png