java后台生成验证码，前端验证登录

阳光穿透心脏的1/2处 2022-03-12 04:14 424阅读 0赞

后台生成验证码，前端验证登录

页面逻辑：

一、当登录页面加载的时候，就要把生产好的验证码图片显示在页面上。

二、点击验证码图片可以去刷新图片（页面不刷新）。

三、点击看不清，换一张也要刷新验证码图片。

四、后台生产的验证码存放在session中，前端输入验证码提交后需去验证是否与session中存放的匹配。

实现过程：

第一步，我们新建一个生成验证码工具类：

  1. package com.hw.admin.util;
  3. import javax.imageio.ImageIO;
  4. import javax.servlet.http.HttpServletRequest;
  5. import javax.servlet.http.HttpServletResponse;
  6. import javax.servlet.http.HttpSession;
  7. import java.awt.*;
  8. import java.awt.image.BufferedImage;
  9. import java.util.Random;
  11. /**
  12.  * 验证码生成类
  13.  */
  14. public class RandomValidateCode {
  15.     public static final String RANDOMCODEKEY= "RANDOMVALIDATECODEKEY";//放到session中的key
  16.     //private String randString = "0123456789";//随机产生只有数字的字符串 private String
  17.     //private String randString = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";//随机产生只有字母的字符串
  18.     private String randString = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ";//随机产生数字与字母组合的字符串
  19.     private int width = 95;// 图片宽
  20.     private int height = 25;// 图片高
  21.     private int lineSize = 40;// 干扰线数量
  22.     private int stringNum = 4;// 随机产生字符数量
  24.     private Random random = new Random();
  26.     /*
  27.      * 获得字体
  28.      */
  29.     private Font getFont() {
  30.         return new Font("Fixedsys", Font.CENTER_BASELINE, 18);
  31.     }
  33.     /*
  34.      * 获得颜色
  35.      */
  36.     private Color getRandColor(int fc, int bc) {
  37.         if (fc > 255)
  38.             fc = 255;
  39.         if (bc > 255)
  40.             bc = 255;
  41.         int r = fc + random.nextInt(bc - fc - 16);
  42.         int g = fc + random.nextInt(bc - fc - 14);
  43.         int b = fc + random.nextInt(bc - fc - 18);
  44.         return new Color(r, g, b);
  45.     }
  47.     /**
  48.      * 生成随机图片
  49.      */
  50.     public void getRandcode(HttpServletRequest request, HttpServletResponse response) {
  51.         HttpSession session = request.getSession();
  52.         // BufferedImage类是具有缓冲区的Image类,Image类是用于描述图像信息的类
  53.         BufferedImage image = new BufferedImage(width, height, BufferedImage.TYPE_INT_BGR);
  54.         Graphics g = image.getGraphics();// 产生Image对象的Graphics对象,改对象可以在图像上进行各种绘制操作
  55.         g.fillRect(0, 0, width, height);
  56.         g.setFont(new Font("Times New Roman", Font.ROMAN_BASELINE, 18));
  57.         g.setColor(getRandColor(110, 133));
  58.         // 绘制干扰线
  59.         for (int i = 0; i <= lineSize; i++) {
  60.             drowLine(g);
  61.         }
  62.         // 绘制随机字符
  63.         String randomString = "";
  64.         for (int i = 1; i <= stringNum; i++) {
  65.             randomString = drowString(g, randomString, i);
  66.         }
  67.         //将生成的随机字符串保存到session中，而jsp界面通过session.getAttribute("RANDOMCODEKEY")，
  68.         //获得生成的验证码，然后跟用户输入的进行比较
  69.         session.removeAttribute(RANDOMCODEKEY);
  70.         session.setAttribute(RANDOMCODEKEY, randomString);
  71.         g.dispose();
  72.         try {
  73.             // 将内存中的图片通过流动形式输出到客户端
  74.             ImageIO.write(image, "JPEG", response.getOutputStream());
  75.         } catch (Exception e) {
  76.             e.printStackTrace();
  77.         }
  79.     }
  81.     /*
  82.      * 绘制字符串
  83.      */
  84.     private String drowString(Graphics g, String randomString, int i) {
  85.         g.setFont(getFont());
  86.         g.setColor(new Color(random.nextInt(101), random.nextInt(111), random
  87.                 .nextInt(121)));
  88.         String rand = String.valueOf(getRandomString(random.nextInt(randString
  89.                 .length())));
  90.         randomString += rand;
  91.         g.translate(random.nextInt(3), random.nextInt(3));
  92.         g.drawString(rand, 13 * i, 16);
  93.         return randomString;
  94.     }
  96.     /*
  97.      * 绘制干扰线
  98.      */
  99.     private void drowLine(Graphics g) {
  100.         int x = random.nextInt(width);
  101.         int y = random.nextInt(height);
  102.         int xl = random.nextInt(13);
  103.         int yl = random.nextInt(15);
  104.         g.drawLine(x, y, x + xl, y + yl);
  105.     }
  107.     /*
  108.      * 获取随机的字符
  109.      */
  110.     public String getRandomString(int num) {
  111.         return String.valueOf(randString.charAt(num));
  112.     }
  113. }

第二步，前端布局与js

  1. <div class="form-group has-feedback">
  2.         <input type="text" name="verification" id="verification" class="form-control" placeholder="请输入验证码">
  3.         <img id="imgVerify" src="" onclick="getVerify();" alt="点击更换验证码"/><a href="#" onclick="getVerify();" rel="nofollow">看不清，换一张</a>
  4.         <span class="glyphicon glyphicon-ok form-control-feedback"></span>
  5. </div>
  7. $(document.body).ready(function () {
  8.         //首次获取验证码
  9.         $("#imgVerify").attr("src","/getVerify?"+Math.random());
  10.     });
  11.     //获取验证码
  12.     function getVerify(){
  13.         var src1=document.getElementById('imgVerify')
  14.         src1.src = "/getVerify?"+Math.random();
  15.     }

上面js的意思是：页面加载是就加载验证码图片，点击验证码图片和点击看不清，换一张都会去调用getVerify()函数获取新的验证码图片。

第三步，编写控制层代码，调用生成验证码工具类生成验证码图片。

  1. @RequestMapping(value = "/getVerify")
  2.     public void getVerify(HttpServletRequest request, HttpServletResponse response){
  3.         response.setContentType("image/jpeg");//设置相应类型,告诉浏览器输出的内容为图片
  4.         response.setHeader("Pragma", "No-cache");//设置响应头信息，告诉浏览器不要缓存此内容
  5.         response.setHeader("Cache-Control", "no-cache");
  6.         response.setDateHeader("Expire", 0);
  7.         RandomValidateCode randomValidateCode = new RandomValidateCode();
  8.         try {
  9.             randomValidateCode.getRandcode(request, response);//输出验证码图片方法
  10.         } catch (Exception e) {
  11.             e.printStackTrace();
  12.         }
  13.     }

到此，验证码功能也基本实现，接下来就是对输入的内容进行处理的过程，在此不再叙述。

如果想要验证码不区分大小写，只需要加上以下两句js即可。

  1. var inputStr = $("#verification").val();
  2. var verification = inputStr.toUpperCase();//将输入的字母全部转换成大写

发表评论

表情：
评论列表 （有 0 条评论，424人围观）

还没有评论，来说两句吧...

相关阅读

    相关 web登录验证码生成

    目的：实现在登录表单验证码的生成 声明：我是参考别人的例子，代码大部分也是引用的 原理：是在要显示验证码的地方用<img>，它的src指向了另一个生成验证码的jsp页面（用

    妖狐艹你老母妖狐艹你老母/ 0 赞/ 122 阅读