文章目录
- 验证码演示代码
- 请求资源路径为什么要添加一个随机数的参数
验证码演示代码
package priv.lwx.javaex.servlet_demo.web.servlet.response;import javax.imageio.ImageIO;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.awt.*;
import java.awt.image.BufferedImage;
import java.io.IOException;
import java.util.Random;/*** 验证码示例代码** @author liaowenxiong* @date 2022/1/10 11:01*/
@WebServlet("/check_code")
public class CheckCodeServlet extends HttpServlet {@Overrideprotected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {this.doPost(req, resp);}@Overrideprotected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {int width = 100; // 表示图片的宽度，单位像素int height = 50; // 表示图片的高度，单位像素// 1.创建一个图片对象，代表内存中的验证码图片。图片对象创建好之后，就表示在内存中创建了一个图片（内存中存储的是二进制数据），图片背景色默认黑色BufferedImage image = new BufferedImage(width, height, BufferedImage.TYPE_3BYTE_BGR);// 2.美化图片// 2.1.填充背景色// 先获取画笔Graphics graphics = image.getGraphics();// 设置画笔的颜色为粉红色graphics.setColor(Color.PINK);// 填充矩形graphics.fillRect(0, 0, width, height);// 2.2.画边框// 设置画笔的颜色为蓝色graphics.setColor(Color.BLUE);// 画边框graphics.drawRect(0, 0, -1, height - 1);// 画随机字符// 随机字符的来源String str = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";// 创建随机数对象Random ran = new Random();// 2.3.画随机字符。循环四次，画4个随机的字符for (int i = 1; i <= 4; i++) {// 生成随机的字符串下标int index = ran.nextInt(str.length());// 获取随机字符char c = str.charAt(index);// 画随机字符graphics.drawString(c + "", width / 5 * i, height / 2);}// 2.4.画干扰线// 设置画笔的颜色为绿色的graphics.setColor(Color.GREEN);// 获取随机的for (int i = 0; i < 10; i++) {// 获取两个随机点的坐标值int x1 = ran.nextInt(width);int x2 = ran.nextInt(width);int y1 = ran.nextInt(height);int y2 = ran.nextInt(height);// 画线graphics.drawLine(x1, y1, x2, y2);}// 3.将图片输出到Response对象的字节流中ImageIO.write(image, "jpg", resp.getOutputStream());}
}
请求资源路径为什么要添加一个随机数的参数
由于浏览器的缓存机制，发送的请求资源路径如果与上一次相同，有的浏览器不会再向服务器发送请求。
解决方案：
采用一种“欺骗”手段向服务发送请求。就是给请求资源路径增加一个参数，参数值是一个随机数，那么就可以制造假象，使得每次发送的请求地址不同。其实服务器端的 Servlet 每次处理请求时，并没有用到该参数，只是为了给浏览器制造假象罢了。
例如：
img.src="/servlet_demo/check_code?" + Math.random();
或者
img.src = "/servlet_demo/check_code?" + date;
前端示例代码：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>注册界面</title><script>window.onload = function () {var img = document.getElementById("checkCode");var link = document.getElementById("changeCode");// 给图片元素注册点击事件监听器img.onclick = function () {var date = new Date().getTime();img.src = "/servlet_demo/check_code?" + date;}// 给超链接注册点击事件监听器link.onclick = function () {var date = new Date().getTime();img.src = "/servlet_demo/check_code?" + date;}}</script>
</head>
<body>
<form action="/servlet_demo/request-demo06" method="get"><input type="text" placeholder="请输入用户名" name="userName"/><br><input type="text" placeholder="请输入密码" name="password"/><br><input type="text" placeholder="请输入验证码" name="checkCode"/><img id="checkCode" src="/servlet_demo/check_code"/><a id="changeCode" href="javascript:void(0);">看不清楚换一张？</a><br><input type="submit" value="提交"/>
</form></body>
</html>
