【SpringBoot+Vue】前后端分离项目之图形验证码

在做自己的项目了解到了关于验证码的知识，但还没有去了解手机验证码的功能，这里只是浅浅的实现了关于图形验证码的样式，如下图所示。当然，点击验证码还可以做到刷新

 具体代码如下：

前端：

后端：

    cn.hutool
    hutool-captcha
    5.8.5

@RestController
@RequestMapping("/userlogin")
public class LoginController {
    //这个就是生成验证码的方法
    @RequestMapping("/getCode")
    public void getCode(HttpServletResponse response){
        //随机生成4位验证码
        RandomGenerator randomGenerator = new RandomGenerator("0123456789",4);
        //定义图片的显示大小
        lineCaptcha = CaptchaUtil.createLineCaptcha(150,30);
        response.setContentType("image/jpeg");
        response.setHeader("Pragma","No-cache");
        try{
            //调用父类的setGenerator()方法，设置验证码的类型
            lineCaptcha.setGenerator(randomGenerator);
            //输出到页面
            lineCaptcha.write(response.getOutputStream());
            //这里可以在控制台输出生成的验证码为多少
            //贴心点怕验证码自己都看不明白(不是
            System.out.println("生成的验证码为："+lineCaptcha.getCode());
        }catch (IOException e){
            e.printStackTrace();
        }finally {
            try {
                //最后进行IO流的关闭
                response.getOutputStream().close();
            } catch (IOException e) {
                e.printStackTrace();
            }
        }
    }
}