javaweb登录功能之添加验证码

首先导入VerifyCode工具类

package cn.web.image;
import java.awt.BasicStroke;
import java.awt.Color;
import java.awt.Font;
import java.awt.Graphics2D;
import java.awt.image.BufferedImage;
import java.io.FileNotFoundException;
import java.io.IOException;
import java.io.OutputStream;
import java.util.Random;
import javax.imageio.ImageIO;

public class VerifyCode {
private int w = 70;
private int h = 35;

private Random r = new Random();
// 定义有那些字体
private String[] fontNames = { "宋体", "华文楷体", "黑体", "微软雅黑", "楷体_GB2312" };
// 定义有那些验证码的随机字符
private String codes = "23456789abcdefghjkmnopqrstuvwxyzABCDEFGHJKLMNOPQRSTUVWXYZ";
// 生成背景色
private Color bgColor = new Color(255, 255, 255);
// 用于gettext 方法 获得生成的验证码文本
private String text;

// 生成随机颜色
private Color randomColor() {
	int red = r.nextInt(150);
	int green = r.nextInt(150);
	int blue = r.nextInt(150);
	return new Color(red, green, blue);
}

// 生成随机字体
private Font randomFont() {
	int index = r.nextInt(fontNames.length);
	String fontName = fontNames[index];//生成随机字体名称
	int style = r.nextInt(4);//生成随机的样式，0（无样式）,1(粗体),2(斜体),3(粗体+斜体),4(随机)
	int size = r.nextInt(5) + 24;//生成随机号，24-28

	return new Font(fontName, style, size);
}

// 画干扰线
private void drawLine(BufferedImage image) {
	int num = 3;//一共画3条线
	Graphics2D g2 = (Graphics2D) image.getGraphics();
	for (int i = 0; i < num; i++) {//生成两个点的坐标，即4个值
		int x1 = r.nextInt(w);
		int y1 = r.nextInt(h);
		int x2 = r.nextInt(w);
		int y2 = r.nextInt(h);
		g2.setStroke(new BasicStroke(1.5F));// 不知道
		g2.setColor(Color.blue);
		g2.drawLine(x1, y1, x2, y2);
	}
}

// 得到codes的长度内的随机数 并使用charAt 取得随机数位置上的codes中的字符
private char randomChar() {
	int index = r.nextInt(codes.length());
	return codes.charAt(index);
}

// 调用这个方法得到验证码
public BufferedImage getImage() {
	BufferedImage image = new BufferedImage(w, h,
			BufferedImage.TYPE_INT_RGB);//创建图片缓冲区
	Graphics2D g2 = (Graphics2D) image.getGraphics();//得到绘制环境
	StringBuilder sb = new StringBuilder();//用来装载生成的文本
	// 向图中画四个字符
	for (int i = 0; i < 4; i++) {//循环四次，每次生成一个字符
		String s = randomChar() + "";//随机生成一个字符
		sb.append(s);//把字母添加到sb中
		float x = i * 1.0F * w / 4; //设置当前字符的x轴坐标
		g2.setFont(randomFont());//设置随机字体
		g2.setColor(randomColor());//设置随机颜色
		g2.drawString(s, x, h - 5);//画图

	}
	this.text = sb.toString();//把生成的字符串赋给了this.text
	drawLine(image);//添加干扰线

	// 返回图片
	return image;

}

// 得到验证码的文本 后面是用来和用户输入的验证码 检测用
public String getText() {
	return text;
}

// 定义输出的对象和输出的方向
public static void output(BufferedImage bi, OutputStream fos)
		throws FileNotFoundException, IOException {
	ImageIO.write(bi, "JPEG", fos);
}

}

编写测试类

[@Test](https://my.oschina.net/azibug)
public void fun2() throws FileNotFoundException, IOException{
	VerifyCode vc=new VerifyCode();//获取VerifyCode类
	BufferedImage bi=vc.getImage();从vc中获取图片
	try {
		VerifyCode.output(bi, new FileOutputStream("D:/yyy.jpg"));//输出图片到D：/yyy.jpg
	} catch (Exception e) {
		e.printStackTrace();
	}
	
	System.out.println(vc.getText());//获取图片中的文本
}

效果

接下来要将验证码放入login.jsp中

<font color="red"> <b><%=message%></b></font>
<form action="/day11/LoginServlet" method="post">
<%-- 把cookie中的用户名显示到用户名文本框中--%>
用户名：<input type="text" name="username" value="<%=uname%>"/><br/>
密    码： <input type="password" name="password"/><br/>
验证码：  <input type="text" name="verifyCode" size="3"/>
	<img id ="img"src="/day11/VerifyCodeServlet">
	<a href="javascript:_change()">换一张</a><br/>
<input type="submit" value="登陆"/>
</form>

在login.jsp页面中显示图片，需建立一个VerifyCodeServlet

public void doGet(HttpServletRequest request, HttpServletResponse response)
		throws ServletException, IOException {
		/*
		 * 1、生成图片
		 * 2、保存图片上的文本到session域中
		 * 3、把图片响应给客户端
		 * */
			VerifyCode vc=new VerifyCode();//new
			BufferedImage image=vc.getImage();//1
			request.getSession().setAttribute("session_vcode", vc.getText());//保存图片上的文本到session域
			
			VerifyCode.output(image, response.getOutputStream());//3
}

页面提交到loginServlet中，需要校验验证码 1、从session中获取正确的验证码 2、从表单中获取用户填写的验证码 3、进行比较 4、如果相同，向下运行，否则保存错误信息到request域中，转发到login.jsp

代码如下

String	sessionCode= (String)request.getSession().getAttribute("session_vcode");//1
String paramCode=request.getParameter("verifyCode");//2
	if(!paramCode.equalsIgnoreCase(sessionCode)){//3
		request.setAttribute("msg", "验证码错误");//4
		request.getRequestDispatcher("/session2/login.jsp").forward(request, response);//4
		return;//为了不往下执行，返回

效果

“换一张”实现 添加超链接

<a href="javascript:_change()">换一张</a>

编写javascript

<script type="text/javascript">

function _change(){
/*
1、得到img元素
2.修改其为/day11/VerifyCodeServlet
*/
var imgEle=document.getElementById("img");//找到img的id
imgEle.src="/day11/VerifyCodeServlet?=a"+new Date().getTime();//过一段时间刷新
}
</script>

转载于:https://my.oschina.net/u/3535428/blog/2993624