前后端分离的图形验证码的生成与处理（前后端代码都有） |
您所在的位置：网站首页 › 图片验证码是什么 › 前后端分离的图形验证码的生成与处理（前后端代码都有） |
前后端分离的图形验证码的生成与处理（前后端代码都有）
|
我以前做图形验证码的时候都是通过src：路径直接引用，但是在前后端分离的情况下不再适合使用了， 百度找的文章要不只有前端代码，要不只有后端代码，不能连贯的比较，所以写了一篇比较完整的 为什么src加路径不适用了呢，因为需要同时传递一个uuid，所以需要使用ajax，我先说一下流程：首先是应该请求后台，后台在返回图片的同时返回一个uuid，在用户验证图形码的时候，也就是在提交的时候需要把这个uuid带过来，我们才知道是和哪一个验证码比对，之前我使用的方式或多或少有些问题存在，现在是在后台生成map，将图片与uuid一起放到map里返回给前端，注意，这里的图片需要经过Base64转码（别问为什么，因为我刚从坑里爬出来），代码如下：
z这是画图的utils的代码： package com.per.mybootall.utils; import org.apache.commons.codec.binary.Base64; import org.slf4j.Logger; import org.slf4j.LoggerFactory; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.data.redis.core.RedisTemplate; import org.springframework.data.redis.serializer.RedisSerializer; import org.springframework.data.redis.serializer.StringRedisSerializer; import org.springframework.stereotype.Component; import org.thymeleaf.util.Validate; import sun.misc.BASE64Encoder; 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.io.ByteArrayOutputStream; import java.io.IOException; import java.util.HashMap; import java.util.Map; import java.util.Random; import java.util.UUID; @Component public class RandomValidateCodeUtil { @Autowired private RedisTemplate redisTemplate; 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 static final Logger logger = LoggerFactory.getLogger(RandomValidateCodeUtil.class); 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 Map getRandcode() { //字符串的序列化器 RedisSerializer redisSerializer=new StringRedisSerializer(); redisTemplate.setKeySerializer(redisSerializer); Map map=new HashMap(); // 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 > 16)); //无透明处理 rgb = r + (g |
后台代码如下：
我这里是把验证码存到redis里面的：
效果如下：
【本文地址】