这两种方式都得把验证码存入session当中,然后提交表单时进行才能进行校验,因为都是以img src 方式生成的图片验证码,没法在前台进行验证,或许是我不会,有人想到解决办法的麻烦告我一声.
1.引入jsp方式
先创建一个jsp文件,下面这段jsp,其实就是在jsp上写java代码来画一个验证码图片,然后把生成的验证码存入session当中,然后在后台就可以通过session来获取到验证码进行验证.
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ page import="java.util.Random"%> <%@ page import="java.io.OutputStream"%> <%@ page import="java.awt.Color"%> <%@ page import="java.awt.Font"%> <%@ page import="java.awt.Graphics"%> <%@ page import="java.awt.image.BufferedImage"%> <%@ page import="javax.imageio.ImageIO"%> <% int width = 80; int height = 32; //create the image BufferedImage image = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB); Graphics g = image.getGraphics(); // set the background color g.setColor(new Color(0xDCDCDC)); g.fillRect(0, 0, width, height); // draw the border g.setColor(Color.black); g.drawRect(0, 0, width - 1, height - 1); // create a random instance to generate the codes Random rdm = new Random(); String hash1 = Integer.toHexString(rdm.nextInt()); // make some confusion for (int i = 0; i < 50; i++) { int x = rdm.nextInt(width); int y = rdm.nextInt(height); g.drawOval(x, y, 0, 0); } // generate a random code String capstr = hash1.substring(0, 4); session.setAttribute("key", capstr); //把生成的验证码存入session当中 g.setColor(new Color(0, 100, 0)); g.setFont(new Font("Candara", Font.BOLD, 24)); g.drawString(capstr, 8, 24); g.dispose(); response.setContentType("image/jpeg"); out.clear(); out = pageContext.pushBody(); OutputStream strm = response.getOutputStream(); ImageIO.write(image, "jpeg", strm); strm.close(); %>
这个就是img标签,只需要把src里面的路径改为上面jsp存放的路径就可以了,单击事件是为了每次点击图片生成新的验证码.
<img style="height: 100%;width: 100%" id="loginform:vCode" src="${pageContext.request.contextPath }/jsps/validatecode.jsp" οnclick="javascript:document.getElementById('loginform:vCode').src='${pageContext.request.contextPath }/jsps/validatecode.jsp?'+Math.random();" />
2.通过访问controller方式在后台生成图片验证码来写到前台
先写两个工具类
生成随机数的
package com.bgs.utils; public class RandomNumberUtil { public static String getRandomNumber4(){ String code = ""; for(int i=0;i<4;i++){ int random = (int)(Math.random()*10); code += String.valueOf(random); } return code; } public static String getRandomNumber6(){ String code = ""; for(int i=0;i<6;i++){ int random = (int)(Math.random()*10); code += String.valueOf(random); } return code; } }
生成图片的 这个生成图片的需要传入一个字符串进去
package com.bgs.utils; import java.awt.*; import java.awt.image.BufferedImage; import java.util.Random; public class ImageVerifyCodeUtil { public static BufferedImage getBufferedImage(String capstr){ int width = 80; int height = 32; //create the image BufferedImage image = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB); Graphics g = image.getGraphics(); // set the background color g.setColor(new Color(0xDCDCDC)); g.fillRect(0, 0, width, height); // draw the border g.setColor(Color.black); g.drawRect(0, 0, width - 1, height - 1); g.setColor(new Color(0, 100, 0)); g.setFont(new Font("Candara", Font.BOLD, 24)); g.drawString(capstr, 8, 24); g.dispose(); return image; } }
controller
//生成图片验证码的方法 @RequestMapping("/findVerifyPictureCode") public void findVerifyPictureCode(HttpSession session, HttpServletResponse response){ //告诉客户端,输出的格式 response.setContentType("image/jpeg"); String randomNumber4 = RandomNumberUtil.getRandomNumber4(); //生成随机数 BufferedImage bufferedImage = ImageVerifyCodeUtil.getBufferedImage(randomNumber4); 把随机数传入生成图片 try { ImageIO.write(bufferedImage, "JPG", response.getOutputStream()); //把图片写回到前台 session.setAttribute("randomCode",randomNumber4); //将生成的验证码存入session } catch (IOException e) { e.printStackTrace(); } }
前台代码,记得把src中的路径改为访问controller的路径
<img id="servletImg" src="${pageContext.request.contextPath}/managerUser/findVerifyPictureCode" οnclick="javascript:changImg()"/><script type="text/javascript"> function changImg(){ var img = document.getElementById("servletImg"); var d = new Date(); var time = d.getTime();//如果没有这个 //下面这一句不会起作用,因为浏览器的缓存技术,图片并不会刷新 //img.src="/myHelloWeb/servlet/ImageServlet"; img.src="${pageContext.request.contextPath}/managerUser/findVerifyPictureCode?"+time; //?号后面的东西是通过get方式传递的 } </script>