RuoYi若依系统的验证码如何替换为更美观的EasyCapt

　　先看效果：
　　使用Kaptcha的验证码
　　使用EasyCaptcha的验证码图片验证码的作用
　　图片验证码经常验证如下一些场景。（1）用户登录，防止机器人登录；（2）论坛留言，防止恶意灌水；（3）短信验证码发送，防止盗刷短信。Kaptcha简介
　　Kaptcha是一个由谷歌Googel出品的可高度配置的实用验证码生成工具，是一个非常经典的图片验证码解决方案。但，这个开源的工具生成的图片比较素雅，美观度一般，且项目已经基本不维护了，从github上看，最近的一次更新是在3年前。
　　EasyCaptcha简介
　　EasyCaptcha是一个Java图形验证码库，支持gif、中文、算术等类型，可用于JavaWeb、JavaSE等项目。效果还是非常好看的，还有闪动效果。关键是该开源项目是国人开发，使用也超简单。
　　EasyCaptcha效果展示（部分验证码闪动，截图无法展示）划重点：若依系统RuoYiVue中替换为EasyCaptcha
　　（1）在ruoyiframeworkpom。xml添加依赖：！验证码EasyCaptcha依赖dependencygroupIdcom。github。whvcsegroupIdeasycaptchaartifactIdversion1。6。2versiondependency！原有的验证码kaptcha依赖不需要可以删除
　　（2）在应用子系统中修改验证码生成的代码，比如ruoyiadmin的CaptchaController中修改getCode方法的代码：生成验证码GetMapping（captchaImage）ApiOperation（value生成验证码，notes生成验证码）publicAjaxResultgetCode（HttpServletResponseresponse）throwsIOException｛AjaxResultajaxAjaxResult。success（）；booleancaptchaOnOffconfigService。selectCaptchaOnOff（）；ajax。put（captchaOnOff，captchaOnOff）；if（！captchaOnOff）｛｝保存验证码信息StringuuidIdUtils。simpleUUID（）；StringverifyKeyConstants。CAPTCHACODEKEY以下注释的部分是原代码注释开始StringcapStrnull，BufferedI生成验证码StringcaptchaTypeRuoYiConfig。getCaptchaType（）；if（math。equals（captchaType））｛StringcapTextcaptchaProducerMath。createText（）；capStrcapText。substring（0，capText。lastIndexOf（））；codecapText。substring（capText。lastIndexOf（）1）；imagecaptchaProducerMath。createImage（capStr）；｝elseif（char。equals（captchaType））｛capStrcodecaptchaProducer。createText（）；imagecaptchaProducer。createImage（capStr）；｝redisCache。setCacheObject（verifyKey，code，Constants。CAPTCHAEXPIRATION，TimeUnit。MINUTES）；转换流信息写出FastByteArrayOutputStreamosnewFastByteArrayOutputStream（）；try｛ImageIO。write（image，jpg，os）；｝catch（IOExceptione）｛returnAjaxResult。error（e。getMessage（））；｝ajax。put（uuid，uuid）；ajax。put（img，Base64。encode（os。toByteArray（）））；注释结束以下6行是新加的代码CaptchacaptchanewArithmeticCaptcha（115，42）；创建算术验证码Stringcodecaptcha。text（）；得到算术验证码的计算值redisCache。setCacheObject（verifyKey，code，Constants。CAPTCHAEXPIRATION，TimeUnit。MINUTES）；存入redisajax。put（uuid，uuid）；ajax。put（img，captcha。toBase64（））；获得图片的base64编码｝
　　（3）在前端项目中，RuoYiVue3srcviewslogin。vue的getCode方法中修改如下：functiongetCode（）｛getCodeImg（）。then（res｛captchaOnOff。valueres。captchaOnOffundefined？true：res。captchaOnOif（captchaOnOff。value）｛codeUrl。valueres。data：base64，res。loginForm。value。uuidres。｝｝）；｝
　　说明：因为上一步中控制器返回的img中已经包含了data：base64，这一串字符，故前端接收时就不要再加了。
　　（4）再分别重启前后端系统，就可以看到效果了。
　　【本文结束】
　　学习过程记录，有需要的朋友可以参考。欢迎一键三连（点赞、关注、评论）。