JSP案例_简单实现验证码

柔光的暖阳◎ 2022-06-12 05:36 221阅读 0赞

**JSP案例\_简单实现验证码**

>   
>

**1.案例要求**

> **（1）在一个JSP页面实现验证码，在另一个页面调用**
> 
> **（2）验证码为4位，实现字母数字全随机，颜色随机，旋转随机**
> 
> **（3）给验证码增加4条干扰线**
> 
>   
>

**2.案例分析**

> **（1）主页面使用img标签的src属性引入验证页面的jsp文件**
> 
> **（2）主页面使用按钮的点击事件实现验证码的刷新和替换**
> 
> **（3）验证码的实现页面使用BufferedImage类的方法产生图片**
> 
> **（4）使用Graphics类的各种方法实现验证码的构成以及干扰线**
> 
> **（5）使用Graphics2D类实现旋转**

**3.代码实现**

> **index.jsp:**
> 
>     <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
>     <form>
>     	姓    名：<input type="text" name="name" /><br />
>     	密    码：<input type="text" name="password" /><br />
>     	验证码：<input type="text" ><img src="yzm.jsp" id="img"/>
>     	<button type="button" id="btn">换一张</button><br />
>     	<button type="submit">提交</button>
>     </form>
>     <script>
>     	window.onload = function(){
>     		var img = document.getElementById("img");
>     		var btn = document.getElementById("btn");
>     		btn.onclick = function(){
>     			img.src="yzm.jsp?a="+new Date().getTime();
>     		}
>     	}
>     </script>
> 
> yzm.jsp:
> 
>     <%@page import="java.awt.Graphics2D"%>
>     <%@page import="java.awt.Font"%>
>     <%@page import="java.awt.Color"%>
>     <%@page import="com.sun.image.codec.jpeg.JPEGCodec"%>
>     <%@page import="com.sun.image.codec.jpeg.JPEGImageEncoder"%>
>     <%@page import="javax.imageio.ImageIO"%>
>     <%@page import="java.io.OutputStream"%>
>     <%@page import="java.awt.Graphics"%>
>     <%@page import="java.awt.image.BufferedImage"%>
>     <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
>     <%
>     	//强制让内置对象out失效，字符流和字节流不能同时使用
>     	out.clearBuffer();
>     	out = pageContext.pushBody();
>     
>     	//构造图片
>     	BufferedImage bi = new BufferedImage(100,30,BufferedImage.TYPE_3BYTE_BGR);
>     	response.setHeader("content-type", "image/jpeg");
>     	Graphics g = bi.getGraphics();
>     	
>     	//填充背景
>     	g.setColor(new Color(15*16+2,15*16+2,15*16+2));
>     	g.fillRect(0, 0, bi.getWidth(), bi.getHeight());
>     	
>     	Graphics2D g2 = bi.createGraphics();
>     
>     	//产生干扰线
>     	for(int i=1; i<=4; i++){
>     		int x1 = (int)(Math.random()*101);
>     		int y1 = (int)(Math.random()*31);
>     		int x2 = (int)(Math.random()*101);
>     		int y2 = (int)(Math.random()*31);
>     		
>     		int[] color = new int[3];
>     		for(int j=0;j<=2;j++){
>     			int intc = (int)(Math.random()*256);
>     			color[j] = intc;
>     		}
>     		g.setColor(new Color(color[0],color[1],color[2]));
>     		g.drawLine(x1, y1, x2, y2);		
>     	}
>     	
>     	//产生验证码
>     	String code = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
>     	
>     	for(int i =1;i<=4;i++){
>     		int index = (int)(Math.random()*61);
>     		char c = code.charAt(index);
>     		int[] color = new int[3];
>     		for(int j=0;j<=2;j++){
>     			int intc = (int)(Math.random()*256);
>     			color[j] = intc;
>     		}
>     		
>     		g2.setColor(new Color(color[0],color[1],color[2]));
>     		//翻译坐标
>     		g2.translate(0,0);
>     		//产生随机角度
>     		int angle=0;
>     		angle = (int)(Math.random()*31);
>     		//旋转角度以及相对位置
>     		g2.rotate(angle*Math.PI/180,i*12, 10);
>     		g2.scale(1.2, 1.2);
>     		g2.drawString(c+"", i*10, 20);
>     		
>     		g2.rotate(-(angle*Math.PI/180),-i*6, -10);
>     	}
>     	
>     	// 把图片发送给客户端
>     	OutputStream os = response.getOutputStream();
>     	JPEGImageEncoder en =  JPEGCodec.createJPEGEncoder(os);
>     	en.encode(bi);
>     %>
> 
>   
>

**4.运行截图**

> **![Center][]**  
>

**5.问题分析**

> **（1）主页面引入验证码要用img标签，是一张图片，直接引入就是一个页面了**
> 
> **（2）按钮点击事件里不能把src属性的值写死，如果写死，浏览器一直使用缓存，验证码页面的图片就不会变，这里new了一个日期对象，不停获取当前面毫秒数，实现了验证码页面的动态刷新**
> 
> **（3）验证码页面引入IPEGCode类可能会提示找不到，因为这个类在jdk1.7以后运行环境中才有，之前的版本中没有该类，记得改变jdk版本**
> 
> **（4）注意各个随机数的范围，产生并加以使用，各种方法可以在API帮助文档搜索查看**
> 
>   
>

[Center]: /images/20220612/3ab38a1445524328917eb6af8ee34d47.png