使用easyCaptcha 实现验证码功能

使用easyCaptcha 实现验证码功能 使用easyCaptcha 实现验证码功能

简介：前端使用vue+element，后端springboot

1、导入依赖

    com.github.whvcse
    easy-captcha
    1.6.2

2、前端

前端主要代码

vue.js

    captcha(){
      getCatpcha().then((res)=> {
        if(res.code === 20000){
          this.key = res.data.key;
          console.log(res.data);
          document.getElementById("verImg").setAttribute("src",res.data.image)
        }
      })
    },

需要页面进来就请求后端的话，就需要在mounted函数里面加入上面的js

mounted(){
    this.catcha();
}

api.js

export function  getCatpcha() {
  return request({
    url:'/api/user/captcha',
    method:'get',
  })
}

前端主要代码就是以上代码。

3、后端

    
    @ResponseBody
    @RequestMapping("/user/captcha")
    public Result captcha(HttpServletRequest request, HttpServletResponse response) throws Exception {
        SpecCaptcha specCaptcha = new SpecCaptcha(130, 48, 5);
        String verCode = specCaptcha.text().toLowerCase();
        String key = UUID.randomUUID().toString();
        // 存入redis并设置过期时间为30分钟
        redisUtils.setWithTime(key, verCode, 30);
        // 将key和base64返回给前端
        HashMap map = new HashMap<>();
        map.put("key", key);
        map.put("image", specCaptcha.tobase64());
        return ResultUtils.success("返回成功", map);

    }

如果是做登录验证的话，就在登录验证接口里面从redis拿到key，再进行对比。