一. 添加工具类 VerifyCode
VerifyCode.java 用于生成验证码
import java.awt.BasicStroke; import java.awt.Color; import java.awt.Font; import java.awt.Graphics2D; import java.awt.image.BufferedImage; 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(); // {"宋体", "华文楷体", "黑体", "华文新魏", "华文隶书", "微软雅黑", "楷体_GB2312"} private String[] fontNames = {"宋体", "华文楷体", "黑体", "微软雅黑", "楷体_GB2312"}; private String codes = "23456789abcdefghjkmnopqrstuvwxyzABCDEFGHJKMNPQRSTUVWXYZ"; private Color bgColor = new Color(255, 255, 255); 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); int size = r.nextInt(5) + 24; return new Font(fontName, style, size); } private void drawLine (BufferedImage image) { int num = 3; Graphics2D g2 = (Graphics2D)image.getGraphics(); for(int i = 0; i < num; i++) { 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); } } private char randomChar () { int index = r.nextInt(codes.length()); return codes.charAt(index); } private BufferedImage createImage () { BufferedImage image = new BufferedImage(w, h, BufferedImage.TYPE_INT_RGB); Graphics2D g2 = (Graphics2D)image.getGraphics(); g2.setColor(this.bgColor); g2.fillRect(0, 0, w, h); return image; } public BufferedImage getImage () { BufferedImage image = createImage(); Graphics2D g2 = (Graphics2D)image.getGraphics(); StringBuilder sb = new StringBuilder(); // 向图片中画4个字符 for(int i = 0; i < 4; i++) { String s = randomChar() + ""; sb.append(s); float x = i * 1.0F * w / 4; g2.setFont(randomFont()); g2.setColor(randomColor()); g2.drawString(s, x, h-5); } this.text = sb.toString(); drawLine(image); return image; } public String getText () { return text; } public static void output (BufferedImage image, OutputStream out) throws IOException { ImageIO.write(image, "JPEG", out); } }
二.controller层 (本项目是在SSM框架下)
@RequestMapping(value = "/VerifyCodeServlet.do", method = RequestMethod.GET) public void VerifyCodeServlet(HttpServletRequest request, HttpServletResponse response) { System.out.println("enterV"); VerifyCode vc = new VerifyCode(); BufferedImage image = vc.getImage();//获取一次性验证码图片 // 该方法必须在getImage()方法之后来调用 // System.out.println(vc.getText());//获取图片上的文本 try { VerifyCode.output(image, response.getOutputStream());//把图片写到指定流中 // 把文本保存到session中,为验证码验证做准备 request.getSession().setAttribute("vCode", vc.getText()); } catch (IOException e) { e.printStackTrace(); } }
三. 前端jsp页面
<tr>
<td class="login_info">验证码:</td>
<td class="width70"><input id="vcode" name="" type="text" class="width70"/></td>
<td><img id="verifyCode" src="<c:url value="/login/VerifyCodeServlet.do"/> "/></td>
<td><span class="required" id="vcodeError">验证码错误</span></td>
</tr>
每次进入该jsp页面 就会向后台请求获取验证码
/* * 换一张验证码 * */ $("#verifyCode").click(function () { /** * 1 获取img元素 * 2 重新设置他的src * 3 使用毫秒来添加参数 实现点击获得的验证码不同 */ $("#verifyCode").attr("src", "<%=request.getContextPath()%>/login/VerifyCodeServlet.do?a=" + new Date().getTime()); document.getElementById("verifyCode").click(); });
点击验证码图片 实现验证码看不清换一张功能
四
controller层校验验证码是否正确
String vcode = (String) request.getSession().getAttribute("vCode");//获取session中存储的生成验证码 boolean c = verifyCode.equalsIgnoreCase(vcode);//用户验证码校验