简介:前端使用vue+element,后端springboot
1、导入依赖2、前端com.github.whvcse easy-captcha1.6.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返回给前端 HashMapmap = new HashMap<>(); map.put("key", key); map.put("image", specCaptcha.tobase64()); return ResultUtils.success("返回成功", map); }
如果是做登录验证的话,就在登录验证接口里面从redis拿到key,再进行对比。
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)