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

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

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

### 页面逻辑： ###

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

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

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

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

### 实现过程： ###

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

package com.hw.admin.util;
    
    import javax.imageio.ImageIO;
    import javax.servlet.http.HttpServletRequest;
    import javax.servlet.http.HttpServletResponse;
    import javax.servlet.http.HttpSession;
    import java.awt.*;
    import java.awt.image.BufferedImage;
    import java.util.Random;
    
    /**
     * 验证码生成类
     */
    public class RandomValidateCode {
        public static final String RANDOMCODEKEY= "RANDOMVALIDATECODEKEY";//放到session中的key
        //private String randString = "0123456789";//随机产生只有数字的字符串 private String
        //private String randString = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";//随机产生只有字母的字符串
        private String randString = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ";//随机产生数字与字母组合的字符串
        private int width = 95;// 图片宽
        private int height = 25;// 图片高
        private int lineSize = 40;// 干扰线数量
        private int stringNum = 4;// 随机产生字符数量
    
        private Random random = new Random();
    
        /*
         * 获得字体
         */
        private Font getFont() {
            return new Font("Fixedsys", Font.CENTER_BASELINE, 18);
        }
    
        /*
         * 获得颜色
         */
        private Color getRandColor(int fc, int bc) {
            if (fc > 255)
                fc = 255;
            if (bc > 255)
                bc = 255;
            int r = fc + random.nextInt(bc - fc - 16);
            int g = fc + random.nextInt(bc - fc - 14);
            int b = fc + random.nextInt(bc - fc - 18);
            return new Color(r, g, b);
        }
    
        /**
         * 生成随机图片
         */
        public void getRandcode(HttpServletRequest request, HttpServletResponse response) {
            HttpSession session = request.getSession();
            // BufferedImage类是具有缓冲区的Image类,Image类是用于描述图像信息的类
            BufferedImage image = new BufferedImage(width, height, BufferedImage.TYPE_INT_BGR);
            Graphics g = image.getGraphics();// 产生Image对象的Graphics对象,改对象可以在图像上进行各种绘制操作
            g.fillRect(0, 0, width, height);
            g.setFont(new Font("Times New Roman", Font.ROMAN_BASELINE, 18));
            g.setColor(getRandColor(110, 133));
            // 绘制干扰线
            for (int i = 0; i <= lineSize; i++) {
                drowLine(g);
            }
            // 绘制随机字符
            String randomString = "";
            for (int i = 1; i <= stringNum; i++) {
                randomString = drowString(g, randomString, i);
            }
            //将生成的随机字符串保存到session中，而jsp界面通过session.getAttribute("RANDOMCODEKEY")，
            //获得生成的验证码，然后跟用户输入的进行比较
            session.removeAttribute(RANDOMCODEKEY);
            session.setAttribute(RANDOMCODEKEY, randomString);
            g.dispose();
            try {
                // 将内存中的图片通过流动形式输出到客户端
                ImageIO.write(image, "JPEG", response.getOutputStream());
            } catch (Exception e) {
                e.printStackTrace();
            }
    
        }
    
        /*
         * 绘制字符串
         */
        private String drowString(Graphics g, String randomString, int i) {
            g.setFont(getFont());
            g.setColor(new Color(random.nextInt(101), random.nextInt(111), random
                    .nextInt(121)));
            String rand = String.valueOf(getRandomString(random.nextInt(randString
                    .length())));
            randomString += rand;
            g.translate(random.nextInt(3), random.nextInt(3));
            g.drawString(rand, 13 * i, 16);
            return randomString;
        }
    
        /*
         * 绘制干扰线
         */
        private void drowLine(Graphics g) {
            int x = random.nextInt(width);
            int y = random.nextInt(height);
            int xl = random.nextInt(13);
            int yl = random.nextInt(15);
            g.drawLine(x, y, x + xl, y + yl);
        }
    
        /*
         * 获取随机的字符
         */
        public String getRandomString(int num) {
            return String.valueOf(randString.charAt(num));
        }
    }

第二步，前端布局与js

$(document.body).ready(function () {
            //首次获取验证码
            $("#imgVerify").attr("src","/getVerify?"+Math.random());
        });
        //获取验证码
        function getVerify(){
            var src1=document.getElementById('imgVerify')
            src1.src = "/getVerify?"+Math.random();
        }

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

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

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

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

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

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