SpringBoot生成验证码，返回画布给前端

最新推荐文章于 2024-08-02 13:35:44 发布

五颜六色的屁

最新推荐文章于 2024-08-02 13:35:44 发布

阅读量922

点赞数

分类专栏： java 文章标签：前端 spring boot java

本文链接：https://blog.csdn.net/BaiShanlxl/article/details/127061368

版权

java 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

使用hutool-captcha，后端生成验证码，然后用画布画成图片，前端用img标签，src指向这个接口，即可以图片的方式显示后端生成的验证码。
后端将验证码存入redis，随机数为key。当我们提交表单后，将用户输入的验证码和随机数作为参数传入后台，这时将这两个数和redis的值做对比即可，如果相同，则验证码输入正确
1.引入依赖

<!-- hutool-captcha验证码验证生成包-->
<dependency>
    <groupId>cn.hutool</groupId>
    <artifactId>hutool-all</artifactId>
    <version>5.8.1</version>
</dependency>

2.编写controller接口

@RequestMapping("verify")
@ResponseBody
@CrossOrigin
public void Verify(HttpServletRequest request, HttpServletResponse response,String random) throws IOException {
    logger.info("ImgCode Verify param:"+random);
    //定义图形验证码的长、宽、验证码字符数、干扰线宽度
    ShearCaptcha captcha = CaptchaUtil.createShearCaptcha(150, 40, 5, 4);
    //图形验证码写出，可以写出到文件，也可以写出到流
    captcha.write(response.getOutputStream());
    //获取验证码中的文字内容
    String verifyCode = captcha.getCode();
    //验证码作为key存入redis，作为唯一键，确保每次的验证码都是正确的，两分钟超时，然后删除
    redisTemplate.opsForValue().set(random,verifyCode,2, TimeUnit.MINUTES);
    logger.debug("存入的值:"+redisTemplate.opsForValue().get(random));
    logger.debug("verifyCode:"+verifyCode);
    request.getSession().setAttribute("verifyCode",verifyCode);
}

3.前端实现

//标签
 <img v-if="isShowPic" :src="verifySrc" alt="" style="position: absolute;right: 0;top: 5px;width: 130px;">
 //获取src路径
 //获得图片验证码
getCode() {
this.isShowPic = true;
let i = Math.random() * (999999 - 100000) + 100000;
let randomNum = parseInt(i, 10);
this.random = randomNum;
this.verifySrc = "http://localhost:8080/verify?random=" + randomNum + "";
},

希望对大家有帮助