孝感网站开发选优搏,访问自己做的网站吗,怎样做企业推广,google浏览器官方下载序
时隔三个月#xff0c;再次拿起我的键盘。
前言
ruoyi-vue是若依前后端分离版本的快速开发框架#xff0c;适合用于项目开始搭建后台管理系统。本篇文章主要介绍其验证码实现的思路。
一、实现思路简介 1、后端会生成一个表达式#xff0c;比如1 2 ? 3#xff0…序
时隔三个月再次拿起我的键盘。
前言
ruoyi-vue是若依前后端分离版本的快速开发框架适合用于项目开始搭建后台管理系统。本篇文章主要介绍其验证码实现的思路。
一、实现思路简介 1、后端会生成一个表达式比如1 2 ? 3以符号为分隔符前面是问题后面是答案。 2、将问题转换为流生成表达式图片之后把图片传到前端进行展示。 3、会生成一个uuid当成key答案当成value存进redis缓存数据库中。 4、uuid也会一起传到前端进行隐藏域input存储。 5、用户根据问题把答案填写到表单中将答案和uuid一起传回后端。 6、根据传回的uuid去redis中拿到正确答案将用户答案和正确答案进行对比若相同则验证码正确否则失败。 7、验证码正确则验证用户名和密码否则刷新验证码重新填写答案进行验证。 二、后端
2.1 接口位置
后端验证码生成接口在CaptchaController控制器中如图 代码如下
/*** 生成验证码*/GetMapping(/captchaImage)public AjaxResult getCode(HttpServletResponse response) throws IOException{AjaxResult ajax AjaxResult.success();boolean captchaEnabled configService.selectCaptchaEnabled();ajax.put(captchaEnabled, captchaEnabled);if (!captchaEnabled){return ajax;}// 保存验证码信息String uuid IdUtils.simpleUUID();String verifyKey CacheConstants.CAPTCHA_CODE_KEY uuid;String capStr null, code null;BufferedImage image null;// 生成验证码String captchaType RuoYiConfig.getCaptchaType();if (math.equals(captchaType)){String capText captchaProducerMath.createText();capStr capText.substring(0, capText.lastIndexOf());code capText.substring(capText.lastIndexOf() 1);image captchaProducerMath.createImage(capStr);}else if (char.equals(captchaType)){capStr code captchaProducer.createText();image captchaProducer.createImage(capStr);}redisCache.setCacheObject(verifyKey, code, Constants.CAPTCHA_EXPIRATION, TimeUnit.MINUTES);// 转换流信息写出FastByteArrayOutputStream os new FastByteArrayOutputStream();try{ImageIO.write(image, jpg, os);}catch (IOException e){return AjaxResult.error(e.getMessage());}ajax.put(uuid, uuid);ajax.put(img, Base64.encode(os.toByteArray()));return ajax;}三、前端
3.1 代码位置
前端代码在login.vue文件中如图 获取验证码代码如下
提交表单代码如下 总结
若依的验证码实现思路十分通俗易懂值得大家研究学习
