先看效果：

使用Kaptcha的验证码

使用EasyCaptcha的验证码

图片验证码的作用

图片验证码经常验证如下一些场景。（1）用户登录，防止机器人登录；（2）论坛留言，防止恶意灌水；（3）短信验证码发送，防止盗刷短信。

Kaptcha简介

Kaptcha 是一个由谷歌Googel出品的可高度配置的实用验证码生成工具，是一个非常经典的图片验证码解决方案。但，这个开源的工具生成的图片比较素雅，美观度一般，且项目已经基本不维护了，从github上看，最近的一次更新是在3年前。

EasyCaptcha简介

EasyCaptcha是一个Java图形验证码库，支持gif、中文、算术等类型，可用于Java Web、JavaSE等项目。效果还是非常好看的，还有闪动效果。关键是该开源项目是国人开发，使用也超简单。

EasyCaptcha效果展示(部分验证码闪动，截图无法展示)

划重点：若依系统RuoYi-Vue中替换为EasyCaptcha

（1）在ruoyi-framework\pom.xml添加依赖：

<!-- 验证码EasyCaptcha依赖  --><dependency>				<groupId>com.github.whvcse</groupId>				<artifactId>easy-captcha</artifactId>				<version>1.6.2</version></dependency><!-- 原有的验证码kaptcha依赖不需要可以删除  -->

（2）在应用子系统中修改验证码生成的代码，比如ruoyi-admin的CaptchaController中修改getCode方法的代码：

/**     * 生成验证码     */    @GetMapping("/captchaImage")    @ApiOperation(value = "生成验证码", notes = "生成验证码")    public AjaxResult getCode(HttpServletResponse response) throws IOException    {        AjaxResult ajax = AjaxResult.success();        boolean captchaOnOff = configService.selectCaptchaOnOff();        ajax.put("captchaOnOff", captchaOnOff);        if (!captchaOnOff)        {            return ajax;        }        // 保存验证码信息        String uuid = IdUtils.simpleUUID();        String verifyKey = Constants.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;注释结束*/      //以下6行是新加的代码        Captcha captcha = new ArithmeticCaptcha(115, 42);  //创建算术验证码        String code = captcha.text(); //得到算术验证码的计算值        redisCache.setCacheObject(verifyKey, code, Constants.CAPTCHA_EXPIRATION, TimeUnit.MINUTES);//存入redis        ajax.put("uuid", uuid);        ajax.put("img", captcha.toBase64());  //获得图片的base64编码        return ajax;    }

（3）在前端项目中，RuoYi-Vue3\src\views\login.vue的getCode方法中修改如下：

function getCode() {  getCodeImg().then(res => {    captchaOnOff.value = res.captchaOnOff === undefined ? true : res.captchaOnOff;    if (captchaOnOff.value) {      codeUrl.value = res.img;  //"data:image/gif;base64," + res.img;      loginForm.value.uuid = res.uuid;    }  });}

说明：因为上一步中控制器返回的img中已经包含了"data:image/gif;base64,"这一串字符，故前端接收时就不要再加了。

（4）再分别重启前后端系统，就可以看到效果了。

【本文结束】

学习过程记录，有需要的朋友可以参考。欢迎一键三连（点赞、关注、评论）。