React + Spring Boot 生成验证码

在网上找了好久,一直没有找到关于React方面动态加载验证码的,经过自己一通操作,终于成功了,但由于整个业务逻辑简单,只适合于小项目.

后端

先看一眼后端代码(后端返回的直接是一个.png类型的图片.),整体分为两部分,一个负责接口并画图,一个负责生成验证码(当然了,画图和验证码可在同一个方法里实现,这个看个人).不多说,直接上代码

生成验证码

public class VerifyCode {

    public static  String drawRandomText(int width, int height, BufferedImage verifyImg) {
        Graphics2D graphics = (Graphics2D)verifyImg.getGraphics();
        graphics.setColor(Color.WHITE);//设置画笔颜色-验证码背景色
        graphics.fillRect(0, 0, width, height);//填充背景
        graphics.setFont(new Font("微软雅黑", Font.BOLD, 40));
        //数字和字母的组合
        String baseNumLetter = "123456789abcdefghijklmnopqrstuvwxyzABCDEFGHJKLMNPQRSTUVWXYZ";
        StringBuffer sBuffer = new StringBuffer();
        int x = 10;  //旋转原点的 x 坐标
        String ch = "";
        Random random = new Random();
        for(int i = 0;i < 4;i++){
            graphics.setColor(getRandomColor());
            //设置字体旋转角度
            int degree = random.nextInt() % 30;  //角度小于30度
            int dot = random.nextInt(baseNumLetter.length());
            ch = baseNumLetter.charAt(dot) + "";
            sBuffer.append(ch);
            //正向旋转
            graphics.rotate(degree * Math.PI / 180, x, 45);
            graphics.drawString(ch, x, 45);
            //反向旋转
            graphics.rotate(-degree * Math.PI / 180, x, 45);
            x += 48;
        }
        //画干扰线
        for (int i = 0; i <6; i++) {
            // 设置随机颜色
            graphics.setColor(getRandomColor());
            // 随机画线
            graphics.drawLine(random.nextInt(width), random.nextInt(height),
                    random.nextInt(width), random.nextInt(height));
        }
        //添加噪点
        for(int i=0;i<30;i++){
            int x1 = random.nextInt(width);
            int y1 = random.nextInt(height);
            graphics.setColor(getRandomColor());
            graphics.fillRect(x1, y1, 2,2);
        }
        return sBuffer.toString();
    }

    /**
     * 随机取色
     */
    private static Color getRandomColor() {
        Random ran = new Random();
        Color color = new Color(ran.nextInt(256),
                ran.nextInt(256), ran.nextInt(256));
        return color;
    }
}

controller层接口
其中我的路径为/{params}是有原因的,请看官往下接着看

@RestController
@RequestMapping("/img")
public class CheckCodeServlet {

    @RequestMapping("/{params}")
    public void getVerificationCode(HttpServletResponse response, HttpServletRequest request) {
        try {
            int width=200;
            int height=69;
            BufferedImage verifyImg=new BufferedImage(width,height,BufferedImage.TYPE_INT_RGB);
            //生成对应宽高的初始图片
            String randomText = VerifyCode.drawRandomText(width,height,verifyImg);
            //单独的一个类方法，出于代码复用考虑，进行了封装。
            //功能是生成验证码字符并加上噪点，干扰线，返回值为验证码字符
            request.getSession().setAttribute("verifyCode", randomText);
            response.setContentType("image/png");//必须设置响应内容类型为图片，否则前台不识别
            OutputStream os = response.getOutputStream(); //获取文件输出流
            ImageIO.write(verifyImg,"png",os);//输出图片流
            os.flush();
            os.close();//关闭流
        } catch (IOException e) {
            e.printStackTrace();
        }
    }
}

前端

这个前端真的让我搞了一天,后端再不济,去网上还有得搜,这个React在网上的资源真的少…上代码

1 js方法
获取图片的方法,其中/img/getVerifyCode是你后端接口路径.后面跟Math.random()是为了防止图片缓存.这也就是为什么controller层的path为{params},动态的接收请求.
1
2
3
getCode () {
document.getElementById("img").src='/img/getVerifyCode'+Math.random()
}
2 image标签
这里的img的src为直接拼接路径的方式
1
<img id="img" style={{height:50,width:100}} src='/img/getVerifyCode' onClick={this.getCode} alt="验证码" />
总结
以上便是我这两天对前后端分离项目做验证码的总结,如果还有其他问题,可加QQ再详聊,当然了我也是个React小白,只是最近做自己的小项目碰到了这个麻烦,想做个记录,(我是个Java程序员😏),欢迎提出任何意见!

React + Spring Boot 生成验证码

后端

前端

总结

谢谢观看