Captcha验证码使用,算术,中文,数字

最新推荐文章于 2025-10-04 11:41:39 发布

原创最新推荐文章于 2025-10-04 11:41:39 发布 · 2.8k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#java #vue.js

前端同时被 2 个专栏收录

32 篇文章

订阅专栏

java

9 篇文章

订阅专栏

该博客介绍如何在Springboot项目中结合Vue.js实现Captcha验证码功能。内容涉及pom.xml配置、Java后端代码实现以及Vue前端的转码处理和页面展示，最后展示了验证码的实现效果。

这里使用的是Springboot+vue的布置
pom.xml

<!--验证码-->
    <dependency>
      <groupId>com.github.whvcse</groupId>
      <artifactId>easy-captcha</artifactId>
      <version>1.6.2</version>
    </dependency>

Java使用代码

//Result 是自定义的提交类
 @GetMapping("/captcha")
  public Result captchak(HttpServletResponse response) throws IOException {
    ServletOutputStream outputStream = response.getOutputStream();
    //算术验证码 数字加减乘除. 建议2位运算就行:captcha.setLen(2);
    //ArithmeticCaptcha captcha = new ArithmeticCaptcha(120, 40);
    // 中文验证码
    ChineseCaptcha captcha = new ChineseCaptcha(120, 40);
    // 英文与数字验证码
    // SpecCaptcha captcha = new SpecCaptcha(120, 40);
    //英文与数字动态验证码
    //  GifCaptcha captcha = new GifCaptcha(120, 40);
    // 中文动态验证码
    //ChineseGifCaptcha captcha = new ChineseGifCaptcha(120, 40);
    // 几位数运算，默认是两位
    captcha.setLen(2);
    // 获取运算的结果
    String result = captcha.text();
    redisUtil.set("captchaImg", result, 50);//存储在redis中用来验证
    System.out.println(result);
    captcha.out(outputStream);
    return Result.succ(captcha.out(outputStream));
  }

VUE
vue使用的时侯要进行转码

export function getCaptcha() {
  return request({
    url: 'http://127.0.0.1:8088/captcha',//请求方法
    method: 'get',
    responseType: 'blob',//主要做用
  })
}

页面

//页面显示
el-image :src="captchaImg" class="captchaImg" @click="getCaptcha"></el-image>

//引用封装的方法
import {getCaptcha} from "../axios";

//调用方法进行转码
getCaptcha() {
      getCaptcha().then(res => {
        const myBlob = new window.Blob([res.data], {type: 'image/jpeg'}) //转码
        this.captchaImg = window.URL.createObjectURL(myBlob);//转成路劲链接
        this.ruleForm.captchaImg = ''
      })
    }

效果图
在这里插入图片描述