前端+后端：验证码实现

• /**
   * 验证码实现，将验证码保存在session中
   * @author hustma
   *
   */
  @Controller
  @RequestMapping()
  public class CodeRandomController {
      private int width = 114;// 定义图片的width
      private int height = 46;// 定义图片的height
      private int codeCount = 4;// 定义图片上显示验证码的个数
      private int xx = 15;
      private int fontHeight = 25;
      private int codeY = 32;
      char[] codeSequence = { 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J',
              'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W',
              'X', 'Y', 'Z', '0', '1', '2', '3', '4', '5', '6', '7', '8', '9' };
  
      @RequestMapping("/code")
      public void getCode(HttpServletRequest req, HttpServletResponse resp)
              throws IOException {
  
          // 定义图像buffer
          BufferedImage buffImg = new BufferedImage(width, height,
                  BufferedImage.TYPE_INT_RGB);
          // Graphics2D gd = buffImg.createGraphics();
          // Graphics2D gd = (Graphics2D) buffImg.getGraphics();
          Graphics gd = buffImg.getGraphics();
          // 创建一个随机数生成器类
          Random random = new Random();
          // 将图像填充为白色
          gd.setColor(Color.WHITE);
          gd.fillRect(0, 0, width, height);
  
          // 创建字体，字体的大小应该根据图片的高度来定。
          Font font = new Font("Fixedsys", Font.BOLD, fontHeight);
          // 设置字体。
          gd.setFont(font);
  
          // 画边框。
          gd.setColor(Color.BLACK);
          gd.drawRect(0, 0, width - 1, height - 1);
  
          // 随机产生40条干扰线，使图象中的认证码不易被其它程序探测到。
          gd.setColor(Color.BLACK);
          for (int i = 0; i < 40; i++) {
              int x = random.nextInt(width);
              int y = random.nextInt(height);
              int xl = random.nextInt(12);
              int yl = random.nextInt(12);
              gd.drawLine(x, y, x + xl, y + yl);
          }
  
          // randomCode用于保存随机产生的验证码，以便用户登录后进行验证。
          StringBuffer randomCode = new StringBuffer();
          int red = 0, green = 0, blue = 0;
  
          // 随机产生codeCount数字的验证码。
          for (int i = 0; i < codeCount; i++) {
              // 得到随机产生的验证码数字。
              String code = String.valueOf(codeSequence[random.nextInt(36)]);
              // 产生随机的颜色分量来构造颜色值，这样输出的每位数字的颜色值都将不同。
              red = random.nextInt(255);
              green = random.nextInt(255);
              blue = random.nextInt(255);
  
              // 用随机产生的颜色将验证码绘制到图像中。
              gd.setColor(new Color(red, green, blue));
              gd.drawString(code, (i + 1) * xx, codeY);
  
              // 将产生的四个随机数组合在一起。
              randomCode.append(code);
          }
          // 将四位数字的验证码保存到Session中。
          HttpSession session = req.getSession();
          System.out.print(randomCode);
          session.setAttribute("code", randomCode.toString());
  
          // 禁止图像缓存。
          resp.setHeader("Pragma", "no-cache");
          resp.setHeader("Cache-Control", "no-cache");
          resp.setDateHeader("Expires", 0);
  
          resp.setContentType("image/jpeg");
  
          // 将图像输出到Servlet输出流中。
          ServletOutputStream sos = resp.getOutputStream();
          ImageIO.write(buffImg, "jpeg", sos);
          sos.close();
      }
  
  }

• <img id="imgObj"  style="width:80%;height:60%" alt="验证码" src="${ctx}/code" onclick="changeImg()"/>

  <script type="text/javascript">  
          function changeImg() {  
              var imgSrc = $("#imgObj");  
              var src = imgSrc.attr("src");  
              imgSrc.attr("src", chgUrl(src));  
          }  
          
          function changeImgimgObj_reg() {  
              var imgSrc = $("#imgObj_reg");  
              var src = imgSrc.attr("src");  
              imgSrc.attr("src", chgUrl(src));  
          } 
          
          //时间戳     
          //为了使每次生成图片不一致，即不让浏览器读缓存，所以需要加上时间戳     
          function chgUrl(url) {  
              var timestamp = (new Date()).valueOf();  
              url = url.substring(0, 17);  
              if ((url.indexOf("&") >= 0)) {  
                  url = url + "×tamp=" + timestamp;  
              } else {  
                  url = url + "?timestamp=" + timestamp;  
              }  
              return url;  
          }  
  </script>