随机验证码案例实现
随机验证码案例实现
1.需求：
实现图片上四位随机字母和数字的验证码，并且图片上有线条和点的干扰
验证码的生成应该是在服务器端生成，响应回客户端，等客户端输入完信息后提交传回到服务器端进行判断，此过程涉及请求转发，需要跨Servlet传输数据，因此验证码的数据存储需要使用到域对象，这里使用ServletContext来进行数据存储
2.java图片操作技术
awt技术
2.1绘画对象：
BufferedImage
所有 BufferedImage 对象的左上角坐标都为 (0, 0)。
构造方法：
设置宽高和图片模式（RGB）BufferedImage(int width, int height, int imageType)
默认的是背景黑色
2.2 image存储对象
ImageIO
在指定位置写入图片ImageIO.write(bufferedImage,"jpg",new FileOutputStream("D:/test.jpg"));
2.3画布绘图对象
Graphics
获得画布对象Graphics graphics = bufferedImage.getGraphics();
设置画笔颜色graphics.setColor(Color.red);还可以使用RGB来设置颜色
//绘制矩形（参数是位置，长宽）graphics.drawRect(20,20,50,40);
//绘制线条graphics.drawLine(60,40,30,50);
//绘制文字graphics.drawString("中文",40,30);
//绘制圆(本质是椭圆，参数是位置坐标，椭圆宽高)graphics.drawOval(60,50,40,40);
//填充 需要提前设置画笔颜色，然后选择填充graphics.setColor(Color.red);
填充圆graphics.fillOval(60,50,40,40);
//设置字体setFont(Font font)
3.案例实现：
目录结构：
html代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form rel="stylesheet" action="#" method="post">
用户名：<input type="text" name="username"><br>
密码：<input type="password" name="password"><br><br>
验证码：<img src="/c"><br>
<input type="submit" name="提交" value="submit">
</form>
</body>
</html>
图片src地址通过web,xml文件配置，指向>com.example.draw.CodeServlet类
web.xml代码：
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd"
version="4.0">
<servlet>
<servlet-name>COdeServlet</servlet-name>
<servlet-class>com.example.draw.CodeServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>COdeServlet</servlet-name>
<url-pattern>/c</url-pattern>
</servlet-mapping>
</web-app>
CodeServlet类代码：
public class CodeServlet extends HttpServlet {
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//设置画布大小
int width = 60;
int height = 30;
//先获取绘画对象BufferedImage
BufferedImage bufferedImage = new BufferedImage(width,height,BufferedImage.TYPE_INT_RGB);
//用BufferedImage获取Graphics对象进行绘画
Graphics graphics = bufferedImage.getGraphics();
//设置画布底色为白色
graphics.setColor(Color.white);
graphics.fillRect(1,1,width-2,height-2);
//定义字符和数字池
String RESOURCE = "ABCDEFGHGKLMNPQRSTUVWXYZabcdefghijklmnpqrstuvwxyz23456789";
//设置随机数，用下标获取池内的字符
Random random = new Random();
//循环获取字符四次
for (int i = 0; i <4 ; i++) {
int num = random.nextInt(RESOURCE.length());
//设置字体
Font font = new Font("宋体",Font.BOLD|Font.ITALIC,20);
graphics.setFont(font);
//先获取字符
String result = String.valueOf(RESOURCE.charAt(num));
//设置随机颜色写入字符
graphics.setColor(new Color(random.nextInt(255),random.nextInt(255),random.nextInt(255)));
int left = 10+i*10;
graphics.drawString(result,left,20);
}
for (int i = 0; i < 6 ; i++) {
//设置随机颜色画线条
graphics.setColor(new Color(random.nextInt(255),random.nextInt(255),random.nextInt(255)));
int x1 = random.nextInt(width-8)+2;
int x2 = random.nextInt(width-8)+2;
int y1 = random.nextInt(height-8)+2;
int y2 = random.nextInt(height-8)+2;
graphics.drawLine(x1,y1,x2,y2);
//画点
graphics.setColor(new Color(random.nextInt(255),random.nextInt(255),random.nextInt(255)));
int x = random.nextInt(width-8)+2;
int y = random.nextInt(height-8)+2;
graphics.drawOval(x,y,0,0);
}
//图片保存对象ImageIO
ImageIO.write(bufferedImage,"png",response.getOutputStream());
}
}
4.实现点击刷新
点击图片刷新验证码
通过<style>标签设置样式，显示手型
<style>
img{
cursor: pointer;
}
</style>
利用js绑定点击事件
<script>
var img = document.getElementsByTagName("img")[0];
img.onclick=function () {
img.src = "/c?p="+new Date().getTime();
}
</script>
这里img标签的src属性值除了地址之外加入了时间参数，原因是如果前后的地址没有发生变化，浏览器不会重新发送请求到服务器去获取，所以需要将地址进行动态更改，加入当前时间的毫秒数。
利用jQuery实现
$(function(){
$("#img").click(function (ev) {
$(this).attr("src","/c?p="+new Date().getTime());
});
});
5.结果：
上一篇： android 端生成随机验证码 实现
下一篇： 生成随机验证码 并且验证