涛涛的若依学习笔记——验证码的一整套引入——上（验证码获取）

已于 2022-01-22 19:41:50 修改
阅读量2.7k 收藏 27
点赞数 11
分类专栏： 若依 文章标签： 若依框架 验证码
于 2022-01-13 23:57:49 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/niTaoTaoa/article/details/122463708
版权

文章目录

前言

上一章我们把项目运行起来了，首先进入的就是登录页面，来，就先看看这个验证码是怎么实现的。
在这里插入图片描述

点击验证码，网络请求会有两个请求

code请求
在这里插入图片描述
在这里插入图片描述

data:image/gif
在这里插入图片描述
在这里插入图片描述

显然，第一个请求是向后端发送一个验证码获取的请求；
第二个请求传来的是一个gif。
此处科普一下

  • GIF的全称是Graphics Interchange Format，可译为图形交换格式，用于以超文本标志语言（Hypertext Markup Language）方式显示索引彩色图像，在因特网和其他在线服务系统上得到广泛应用。GIF是一种公用的图像文件格式标准，版权归Compu Serve公司所有*

看一下人家怎么写的按钮

 <el-form-item prop="code" v-if="captchaOnOff">
        <el-input
          v-model="loginForm.code"
          auto-complete="off"
          placeholder="验证码"
          style="width: 63%"
          @keyup.enter.native="handleLogin"
        >
          <svg-icon slot="prefix" icon-class="validCode" class="el-input__icon input-icon" />
        </el-input>
        <div class="login-code">
          <img :src="codeUrl" @click="getCode" class="login-code-img"/>
        </div>
</el-form-item>

我怎么就写不出来呢？？？

代码解读一下

      <el-form-item prop="code" v-if="captchaOnOff">
        <!-- el开头，是element UI   官网： https://element.eleme.cn/#/zh-CN/component/installation -->
        <!-- code 是自己输入的验证码，此处先讲获取验证码
        在 Vue 中，父子组件的关系可以总结为 props down, events up。父组件通过 props 向下传递数据给子组件，子组件通过 events 给父组件发送消息。
        显然这个code是父组件通过prop传递数据给子组件的
         -->
        <!-- captchaOnOff 初始值为true,是验证码开关 -->
        <el-input
          v-model="loginForm.code"
          auto-complete="off"
          placeholder="验证码"
          style="width: 63%"
          @keyup.enter.native="handleLogin"
        >
        <!-- 此处绑定了loginForm.code，这个code是表单对象里的code，不是上文说的code

        auto-complete="off"   关闭代码自动补全，什么意思呢，把鼠标光标放到输入框，不会自动出现下拉框，如果改为on,则会出现近期输入的数据。
        autocomplete 属性规定输入字段是否应该启用自动完成功能。默认情况下是启动的，也就是当你点击了input
        获取焦点之后浏览器会自动将以前的输入记录作为填入选项显示出来。这个是HTML5中的新属性，在不支持HTML5的浏览器下是没有用的。
        注释：autocomplete 属性适用于 <form>，以及下面的 <input> 类型：text, search, url, telephone, email, password, datepickers, range 以及 color。
        在一部分浏览器中，autocomplete 属性是默认关闭的，如果需要打开就打开 一下。因为这是input自带的数学，会在自己的div上加了一层div的ul列表。

        placeholder 属性提供可描述输入字段预期值的提示信息（hint）。
        该提示会在输入字段为空时显示，并会在字段获得焦点时消失。
        @keyup.enter  是  vue 监听键盘回车事件
        如果是封装了组件，要用
        @keyup.enter.native

        最后就是，按下回车键，调用handleLogin方法
         -->
          <svg-icon slot="prefix" icon-class="validCode" class="el-input__icon input-icon" />
          <!-- Vue中slot的使用   https://www.cnblogs.com/qq735675958/p/8377761.html
           是对组件的扩展，通过slot插槽向组件内部指定位置传递内容，通过slot可以父子传参
           即 slot的出现是为了父组件可以堂而皇之地在子组件中加入内容。
<span slot=”header”>hello world</span>
<slot  name=”header”>这是拥有命名的slot的默认内容</slot>
      显然这个叫 prefix 的slot 就是上文提到过的gif
           -->
        </el-input>
        <div class="login-code">
          <img :src="codeUrl" @click="getCode" class="login-code-img"/>
          <!-- 根据codeUrl显示验证码图片，点击这个img会调用 getCode方法 -->
        </div>
      </el-form-item>

一. 看一下前端逻辑

1. 登录页被创建时，会调用getCode()方法

在这里插入图片描述

2.看一下 getCode()

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

解读

    getCode() {
      getCodeImg().then(res => {
        // 会调用 getCodeImg()接口，把返回的res进行处理
        this.captchaOnOff = res.captchaOnOff === undefined ? true : res.captchaOnOff;
        //如果返回的captchaOnOff是undefined，估计是没访问出来啥东西，就返回true，否则返回false
        // 什么鬼？仔细看看data里的captchaOnOff,嗷嗷，是验证码开关，初始值为true，所以这行的代码就是能不能继续 请求验证码 呗
        //如果是true，说明没返回出来东西，肯定就能继续请求，如果是false，那就不能继续请求验证码
        //再看一下这个在哪用captchaOnOff，哦，原来是   <el-form-item prop="code" v-if="captchaOnOff">
        //显然，如果captchaOnOff为false就不会显示这个组件了
        if (this.captchaOnOff) {  //如果有验证码
          this.codeUrl = "data:image/gif;base64," + res.img; //codeUrl的值即改为 data:image/gif;base64,res.img
          //如果你不懂 base64   看看这个 https://blog.csdn.net/weixin_38465623/article/details/80199999
          //当然，也可以看我总结的
          /**
           * base64             data:image/gif;base64," + res.img
           * data表示取得数据的协定名称，image/gif 是数据类型名称，base64 是数据的编码方法，逗号后面就是这个image/gif文件base64编码后的数据。
           * 目前，Data URI scheme支持的类型有：
              data:,文本数据
              data:text/plain,文本数据
              data:text/html,HTML代码
              data:text/html;base64,base64编码的HTML代码
              data:text/css,CSS代码
              data:text/css;base64,base64编码的CSS代码
              data:text/javascript,Javascript代码
              data:text/javascript;base64,base64编码的Javascript代码
              data:image/gif;base64,base64编码的gif图片数据
              data:image/png;base64,base64编码的png图片数据
              data:image/jpeg;base64,base64编码的jpeg图片数据
            base64简单地说，它把一些 8-bit 数据翻译成标准 ASCII 字符，网上有很多免费的base64 编码和解码的工具，在PHP中可以用函数base64_encode() 进行编码
举个图片的例子：
网页中一张图片可以这样显示：
            <img src=“http://www.aimks.com/images/wg.png”/>
也可以这样显示
            <img src=“data:image/png;base64,iVBORw0KGgoAAAANSUhEU
            gAAAAEAAAAkCAYAAABIdFAMAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZS
            BJbWFnZVJlYWR5ccllPAAAAHhJREFUeNo8zjsOxCAMBFB/KEAUFFR
            0Cbng3nQPw68ArZdAlOZppPFIBhH5EAB8b+Tlt9MYQ6i1BuqFaq1C
            KSVcxZ2Acs6406KUgpt5/LCKuVgz5BDCSb13ZO99ZOdcZGvt4mJjz
            MVKqcha68iIePB86GAiOv8CDADlIUQBs7MD3wAAAABJRU5ErkJggg%3D%3D”/>
           */
          //显然 res.img就是传来的图片，在后端生成图片，base64图片转成字符 传输回前端，再在前端  字符转成图片  显示给用户   妙啊秒啊
          this.loginForm.uuid = res.uuid;
          //并且表单的uuid设置为res.uuid
        }
      });
    }

getCode()方法第一行就调用了另一个方法getCodeImg()
来看看这又是何方神圣

3.看一下 getCodeImg()

好家伙，让我好找，这个方法不在methods里
在这里
在这里插入图片描述
还好我聪明，ctrl点 方法名 直接找到

// 获取验证码
export function getCodeImg() {
  return request({
    url: '/code',
    headers: {
      isToken: false
    },
    method: 'get',
    timeout: 20000
  })
}

没啥好解读的，导出一个方法 getCodeImg()，
这个方法调用了一个get请求 /code，请求头isToken值为false，不需要token，tineout为20000,这个参数怎么用后面再看。

二. 看一下后端逻辑

现在开始看后端了
上文前端发出了一个 /code的请求，我们在代码里和网络请求里都看到了，再看一下这个网络请求
在这里插入图片描述
后端如何接收这个 /code请求？

1.先进入RouterFunctionConfiguration类

前端所有的接口要访问后端，首先要走的就是网关
这里这个请求被 config 包下的 RouterFunctionConfiguration接收
在这里插入图片描述
解读一下

package com.ruoyi.gateway.config;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.http.MediaType;
import org.springframework.web.reactive.function.server.RequestPredicates;
import org.springframework.web.reactive.function.server.RouterFunction;
import org.springframework.web.reactive.function.server.RouterFunctions;
import com.ruoyi.gateway.handler.ValidateCodeHandler;

/**
 * 路由配置信息
 *
 * @author ruoyi
 */
@Configuration
public class RouterFunctionConfiguration {
    @Autowired  // 注入一个 ValidateCodeHandler的对象，相当于Collectors中注入的service，是用来封装逻辑的
    private ValidateCodeHandler validateCodeHandler;

    @SuppressWarnings("rawtypes")
    @Bean
    public RouterFunction routerFunction() {
        /**  参考 https://www.cnblogs.com/somefuture/p/15433565.html
         * Spring框架给我们提供了两种http端点暴露方式来隐藏servlet原理:
         *  一种是基于注解的形式@Controller或@RestController以及其他的注解如@RequestMapping、@GetMapping等等。
         *  另外一种是基于路由配置RouterFunction和HandlerFunction的，称为“函数式WEB”。
         */
        return RouterFunctions.route(
                // 接收 /code 请求
                /**  Spring WebFlux 是一个异步非阻塞式的 Web 框架，它能够充分利用多核 CPU 的硬件资源去处理大量的并发请求。
                 * 　　Spring Cloud Gateway将路由作为Spring WebFlux HandlerMapping基础架构的一部分进行匹配。
                 *    Spring Cloud Gateway包括许多内置的路由断言工厂。所有这些断言都与HTTP请求的不同属性匹配。可以将多个路由断言工厂与逻辑and语句结合使用。
                 *    参考 https://www.cnblogs.com/h--d/p/12741901.html
                 */
                RequestPredicates.GET("/code").and(RequestPredicates.accept(MediaType.TEXT_PLAIN)), //TEXT_PLAIN = new MediaType("text", "plain");
                // 显然这行代码 会把code转发到 validateCodeHandler 中 去处理
                // text/html的意思是将文件的content-type设置为text/html的形式，浏览器在获取到这种文件时会自动调用html的解析器对文件进行相应的处理。
                //text/plain的意思是将文件设置为纯文本的形式，浏览器在获取到这种文件时并不会对其进行处理。
                validateCodeHandler);
    }
}

2.再跳到ValidateCodeFilter

显然，这是一个验证码过滤器，这里
非登录/注册请求或验证码关闭，不处理
因为是第一次请求验证码，
所以放行

3.再跳到ValidateCodeHandler

直接上解读

package com.ruoyi.gateway.handler;

import java.io.IOException;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.http.HttpStatus;
import org.springframework.stereotype.Component;
import org.springframework.web.reactive.function.BodyInserters;
import org.springframework.web.reactive.function.server.HandlerFunction;
import org.springframework.web.reactive.function.server.ServerRequest;
import org.springframework.web.reactive.function.server.ServerResponse;
import com.ruoyi.common.core.exception.CaptchaException;
import com.ruoyi.common.core.web.domain.AjaxResult;
import com.ruoyi.gateway.service.ValidateCodeService;
import reactor.core.publisher.Mono;

/**
 * 验证码获取
 *
 * @author ruoyi
 */
@Component
public class ValidateCodeHandler implements HandlerFunction<ServerResponse> {
    @Autowired
    private ValidateCodeService validateCodeService;  //验证码服务对象

    @Override
    public Mono<ServerResponse> handle(ServerRequest serverRequest) {
        //  响应式编程之Reactor的关于Flux和Mono概念
        /**
         * Flux类似RxJava的Observable，它可以触发零到多个事件，并根据实际情况结束处理或触发错误。
         * Mono最多只触发一个事件
         */
        AjaxResult ajax;  //操作消息提醒，就是一个 统一标准响应体
        try {
            ajax = validateCodeService.createCapcha(); //创建一个验证码
        } catch (CaptchaException | IOException e) {
            return Mono.error(e);
        }
        //
        return ServerResponse.status(HttpStatus.OK).body(BodyInserters.fromValue(ajax));
    }
}

最后生成的验证码，一块组成响应体传到前端了。

4.看一下ValidateCodeService.createCapcha()干的好事

原来是生成一个验证码，直接解读了

  /**
     * 生成验证码
     */
    @Override
    public AjaxResult createCapcha() throws IOException, CaptchaException {
        AjaxResult ajax = AjaxResult.success();  //统一响应体
        System.out.println("captchaProperties初始值----" + "captchaProperties.getType()---" + captchaProperties.getType() + "---captchaProperties.getEnabled()---" + captchaProperties.getEnabled());
        //打印结果：captchaProperties初始值----captchaProperties.getType()---math---captchaProperties.getEnabled()---true
        boolean captchaOnOff = captchaProperties.getEnabled();  //boolean的默认值为false
        ajax.put("captchaOnOff", captchaOnOff); //这就是前端需要的验证码开关，返回默认值 false,那么前端就关闭验证码请求
        if (!captchaOnOff) {   //我至今不知道这段代码什么意思，我读的是  永远执行 ，因为没初始化，默认值为false
            return ajax;  //如果有童鞋找到了，请评论区指点迷津
        }

        // 保存验证码信息
        String uuid = IdUtils.simpleUUID(); //生成唯一UUID
        String verifyKey = Constants.CAPTCHA_CODE_KEY + uuid; //作为redis存储的键

        String capStr = null, code = null;  //验证码字符串，验证码
        BufferedImage image = null;

        String captchaType = captchaProperties.getType();  //验证码类型（math 数组计算 char 字符）一样，没找到在哪赋值的
        // 生成验证码
        if ("math".equals(captchaType)) {  //math类型
            String capText = captchaProducerMath.createText();
            System.out.println("captchaProducerMath.createText()初始值---"+capText);
            //打印结果：captchaProducerMath.createText()初始值---8-5=?@3
            capStr = capText.substring(0, capText.lastIndexOf("@")); //  lastIndexOf  返回指定字符在此字符串中最后一次出现处的索引
            // captchaProducerMath.createText()是创建一个数学字符串  比如 8-5=?@3
            // 字符串根据 @ 进行分割
            //  要显示的图片为 @ 前面的字符串生成的图片
            //  验证码应该为 @ 后面的字符串生成的字符
            //  妙啊秒啊
            code = capText.substring(capText.lastIndexOf("@") + 1);
            image = captchaProducerMath.createImage(capStr);
            //通过这个 数学验证码生产者 ，根据 capStr ，就是 8-5=?  给BufferedImage对象赋值
        } else if ("char".equals(captchaType)) {  //char类型
            capStr = code = captchaProducer.createText();
            /**
             *captchaProducer.createImage(capStr)
             * 生成图像，图像的样子是 capStr 的内容
             * 是字符 转 图像
             */
            image = captchaProducer.createImage(capStr);
        }
/**
 * 最终capStr就是根据验证码生成的编码
 */
            redisService.setCacheObject(verifyKey, code, Constants.CAPTCHA_EXPIRATION, TimeUnit.MINUTES);  //redis存储验证码，键为  captcha_codes+UUID 值为 验证码的值 ，Constants.CAPTCHA_EXPIRATION 是验证码存储的世时间，单位是分钟

        // 转换流信息写出
        /**
         * 字节数组输出流 在内存中创建一个字节数组缓冲区，所有发送到输出流的数据保存在该字节数组缓冲区中。
         * FastByteArrayOutputStream内部实现由一个LinkedList<byte[]>组成，每一次扩容中分配一个数组的空间，
         * 并当该数据放入到List中。需要分配的数组长度为调用FastByteArrayOutputStream的write方法决定。
         * 而ByteArrayOutputStream内部实现为一个数组每一次扩容需要重新分配空间并将数据复制到新数组中，
         * 这就是FastByteArrayOutputStream比ByteArrayOutputStream主要区别。
         */
        // 快速字节数组输出流
        FastByteArrayOutputStream os = new FastByteArrayOutputStream();
        try {
            //
            /**
             * 使用支持给定格式的任意 ImageWriter 将一个图像写入 File。如果已经有一个 File 存在，则丢弃其内容。
             * im - 要写入的 RenderedImage。
             * formatName - 包含格式非正式名称的 String。
             * output - 将在其中写入数据的 File。
             * 如果没有找到合适的 writer，则返回 false。
             */
            //显然是把captchaProducerMath创建的图像image 以jpg格式 写入 输出流
            //这样做的目的是 为了接下来把图像转成字符
            //是 图像 转 图像字符传
            ImageIO.write(image, "jpg", os);
        } catch (IOException e) {
            return AjaxResult.error(e.getMessage());
        }

        ajax.put("uuid", uuid);
           // 图像字符串 通过Base64编码传输
           // Base64编码是从二进制到字符的过程，可用于在HTTP环境下传递较长的标识信息。采用Base64编码具有不可读性，需要解码后才能阅读。
           // 为了加密
        ajax.put("img", Base64.encode(os.toByteArray()));
        return ajax;
    }

请求验证码大概就是这个流程

5.看看其他相关类

CaptchaConfig类
package com.ruoyi.gateway.config;

import java.util.Properties;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import com.google.code.kaptcha.impl.DefaultKaptcha;
import com.google.code.kaptcha.util.Config;
import static com.google.code.kaptcha.Constants.*;

/**
 * 验证码配置
 * 
 * @author ruoyi
 */
@Configuration
public class CaptchaConfig
{
    @Bean(name = "captchaProducer")
    public DefaultKaptcha getKaptchaBean()
    {
        DefaultKaptcha defaultKaptcha = new DefaultKaptcha();
        Properties properties = new Properties();
        // 是否有边框 默认为true 我们可以自己设置yes，no
        properties.setProperty(KAPTCHA_BORDER, "yes");
        // 验证码文本字符颜色 默认为Color.BLACK
        properties.setProperty(KAPTCHA_TEXTPRODUCER_FONT_COLOR, "black");
        // 验证码图片宽度 默认为200
        properties.setProperty(KAPTCHA_IMAGE_WIDTH, "160");
        // 验证码图片高度 默认为50
        properties.setProperty(KAPTCHA_IMAGE_HEIGHT, "60");
        // 验证码文本字符大小 默认为40
        properties.setProperty(KAPTCHA_TEXTPRODUCER_FONT_SIZE, "38");
        // KAPTCHA_SESSION_KEY
        properties.setProperty(KAPTCHA_SESSION_CONFIG_KEY, "kaptchaCode");
        // 验证码文本字符长度 默认为5
        properties.setProperty(KAPTCHA_TEXTPRODUCER_CHAR_LENGTH, "4");
        // 验证码文本字体样式 默认为new Font("Arial", 1, fontSize), new Font("Courier", 1, fontSize)
        properties.setProperty(KAPTCHA_TEXTPRODUCER_FONT_NAMES, "Arial,Courier");
        // 图片样式 水纹com.google.code.kaptcha.impl.WaterRipple 鱼眼com.google.code.kaptcha.impl.FishEyeGimpy 阴影com.google.code.kaptcha.impl.ShadowGimpy
        properties.setProperty(KAPTCHA_OBSCURIFICATOR_IMPL, "com.google.code.kaptcha.impl.ShadowGimpy");
        Config config = new Config(properties);
        defaultKaptcha.setConfig(config);
        return defaultKaptcha;
    }
    
    @Bean(name = "captchaProducerMath")
    public DefaultKaptcha getKaptchaBeanMath()
    {
        DefaultKaptcha defaultKaptcha = new DefaultKaptcha();
        Properties properties = new Properties();
        // 是否有边框 默认为true 我们可以自己设置yes，no
        properties.setProperty(KAPTCHA_BORDER, "yes");
        // 边框颜色 默认为Color.BLACK
        properties.setProperty(KAPTCHA_BORDER_COLOR, "105,179,90");
        // 验证码文本字符颜色 默认为Color.BLACK
        properties.setProperty(KAPTCHA_TEXTPRODUCER_FONT_COLOR, "blue");
        // 验证码图片宽度 默认为200
        properties.setProperty(KAPTCHA_IMAGE_WIDTH, "160");
        // 验证码图片高度 默认为50
        properties.setProperty(KAPTCHA_IMAGE_HEIGHT, "60");
        // 验证码文本字符大小 默认为40
        properties.setProperty(KAPTCHA_TEXTPRODUCER_FONT_SIZE, "35");
        // KAPTCHA_SESSION_KEY
        properties.setProperty(KAPTCHA_SESSION_CONFIG_KEY, "kaptchaCodeMath");
        // 验证码文本生成器
        properties.setProperty(KAPTCHA_TEXTPRODUCER_IMPL, "com.ruoyi.gateway.config.KaptchaTextCreator");
        // 验证码文本字符间距 默认为2
        properties.setProperty(KAPTCHA_TEXTPRODUCER_CHAR_SPACE, "3");
        // 验证码文本字符长度 默认为5
        properties.setProperty(KAPTCHA_TEXTPRODUCER_CHAR_LENGTH, "6");
        // 验证码文本字体样式 默认为new Font("Arial", 1, fontSize), new Font("Courier", 1, fontSize)
        properties.setProperty(KAPTCHA_TEXTPRODUCER_FONT_NAMES, "Arial,Courier");
        // 验证码噪点颜色 默认为Color.BLACK
        properties.setProperty(KAPTCHA_NOISE_COLOR, "white");
        // 干扰实现类
        properties.setProperty(KAPTCHA_NOISE_IMPL, "com.google.code.kaptcha.impl.NoNoise");
        // 图片样式 水纹com.google.code.kaptcha.impl.WaterRipple 鱼眼com.google.code.kaptcha.impl.FishEyeGimpy 阴影com.google.code.kaptcha.impl.ShadowGimpy
        properties.setProperty(KAPTCHA_OBSCURIFICATOR_IMPL, "com.google.code.kaptcha.impl.ShadowGimpy");
        Config config = new Config(properties);
        defaultKaptcha.setConfig(config);
        return defaultKaptcha;
    }
}
KaptchaTextCreator类
package com.ruoyi.gateway.config;

import java.util.Random;
import com.google.code.kaptcha.text.impl.DefaultTextCreator;

/**
 * 验证码文本生成器
 * 
 * @author ruoyi
 */
public class KaptchaTextCreator extends DefaultTextCreator
{
    private static final String[] CNUMBERS = "0,1,2,3,4,5,6,7,8,9,10".split(",");

    @Override
    public String getText()
    {
        Integer result = 0;
        Random random = new Random();
        int x = random.nextInt(10);
        int y = random.nextInt(10);
        StringBuilder suChinese = new StringBuilder();
        int randomoperands = (int) Math.round(Math.random() * 2);
        if (randomoperands == 0)
        {
            result = x * y;
            suChinese.append(CNUMBERS[x]);
            suChinese.append("*");
            suChinese.append(CNUMBERS[y]);
        }
        else if (randomoperands == 1)
        {
            if (!(x == 0) && y % x == 0)
            {
                result = y / x;
                suChinese.append(CNUMBERS[y]);
                suChinese.append("/");
                suChinese.append(CNUMBERS[x]);
            }
            else
            {
                result = x + y;
                suChinese.append(CNUMBERS[x]);
                suChinese.append("+");
                suChinese.append(CNUMBERS[y]);
            }
        }
        else if (randomoperands == 2)
        {
            if (x >= y)
            {
                result = x - y;
                suChinese.append(CNUMBERS[x]);
                suChinese.append("-");
                suChinese.append(CNUMBERS[y]);
            }
            else
            {
                result = y - x;
                suChinese.append(CNUMBERS[y]);
                suChinese.append("-");
                suChinese.append(CNUMBERS[x]);
            }
        }
        else
        {
            result = x + y;
            suChinese.append(CNUMBERS[x]);
            suChinese.append("+");
            suChinese.append(CNUMBERS[y]);
        }
        suChinese.append("=?@" + result);
        return suChinese.toString();
    }
}
CaptchaProperties类
package com.ruoyi.gateway.config.properties;

import org.springframework.boot.context.properties.ConfigurationProperties;
import org.springframework.cloud.context.config.annotation.RefreshScope;
import org.springframework.context.annotation.Configuration;

/**
 * 验证码配置
 *
 * @author ruoyi
 */
@Configuration
@RefreshScope
@ConfigurationProperties(prefix = "security.captcha")
public class CaptchaProperties {
    /**
     * 验证码开关
     */
    private Boolean enabled;

    /**
     * 验证码类型（math 数组计算 char 字符）
     */
    private String type;

    public Boolean getEnabled() {
        return enabled;
    }

    public void setEnabled(Boolean enabled) {
        this.enabled = enabled;
    }

    public String getType() {
        return type;
    }

    public void setType(String type) {
        this.type = type;
    }
}
涛涛英语学不进去
关注
  • 11
    点赞
  • 踩
  • 27
    收藏
    觉得还不错? 一键收藏
  • 6
    评论
专栏目录
大数据系统学习笔记-0002 - Hadoop集群搭建 - 资源包
06-26
大数据系统学习笔记-0002 - Hadoop集群搭建 - 资源包 资源列表： hadoop-2.7.4.tar.gz jdk-8u301-linux-x64.tar.gz zookeeper-3.4.10.tar.gz
【若依vue框架学习】1.获取验证码/登录提交loginFrom获得认证token
bijingrui的博客
06-24 1743
【若依vue框架学习】1.登录的逻辑
若依验证码的实现
qq_48268296的博客
07-28 255
对于前后端分离的项目，首先要分析前端需要传递的参数是什么以及类型，根据前端传递的参数类型来编写后端的代码。
一、若依管理系统----验证码、登录流程
最新发布
qq_56435346的博客
06-07 491
学习若依的一些记录
一、若依框架login.vue代码解读（前端获取验证码流程）
qq_45647792的博客
06-05 1890
功能：向前端返回一个图片及一个uuid注：这里的uuid就是根据key值找Redis中缓存的答案。
若依知识点分享（登录验证码）
weixin_68580848的博客
04-26 1719
本次对于若依验证码功能的分享到这里就结束了，如果还没有下载若依但是对若依有兴趣的小伙伴可以参考若依（ruoyi）框架初识进行学习。希望本次分享对小伙伴们有所帮助，如有不足之处还请各位多多指点，不吝赐教。感激不尽，感激不尽。。。最后祝各位小伙伴多财多亿。
若依 验证码
wlf_csdn的博客
10-17 336
若依验证码流程学习
人教一年级数学上下前后PPT学习教案.pptx
10-04
这份“人教一年级数学上下前后PPT学习教案”是一份专为小学一年级学生设计的教学材料，旨在帮助孩子们理解和掌握空间方位概念，特别是“上下”的相对位置关系。教学内容包括通过实例、互动游戏以及问题解答来逐步...
人教一年级数学下册上下PPT学习教案.pptx
10-04
这份“人教一年级数学下册上下PPT学习教案.pptx”是针对小学一年级学生设计的教学材料，旨在帮助孩子们理解并掌握基本的上下位置关系这一数学概念。此教案结合生动的场景和实例，逐步引导孩子们建立空间位置的概念。...
皇帝的新装胡涛涛PPT学习教案.pptx
10-10
【皇帝的新装】这篇PPT学习教案主要围绕童话这一文学体裁展开，旨在教授学生理解和欣赏童话中的艺术手法。童话是专门为儿童创作的一种文学形式，它通过丰富的想象、夸张和拟人化的手法来构建故事，以此对儿童进行...
基于Javascript的涛涛帮忙医院测评设计源码
06-01
本源码是基于Javascript开发的涛涛帮忙医院测评设计，包含42个文件，其中包括21个.js文件，9个.vue文件，以及4个.png文件。此外，还包括2个.json文件，1个.babelrc文件，1个....该项目是一个涛涛帮忙医院测评的设计。
ASP.NET使用HttpHandler对象实现验证码（完整版）
Little Monkey的博客
04-30 432
ASP.NET使用HttpHandler对象实现验证码（完整版）登录页面的验证码如何实现？ 登录页面的验证码如何实现？ 添加一般处理程序VerificationCode，并实现接口IHttpHandler，并继承IRequiresSessionState接口。 实现代码 using System; using System.Collections.Generic; using Sys...
实现验证码控件代码验证控件，方便使用验证码(修改)
weixin_34166472的博客
03-26 108
　　网站在进行重要操作步骤时，为了防止攻击，一般都采用生成验证码的方法。为了使用方便，我自己写了一个从BaseValidator实现的验证控件，负责给指定的Image控制设置ImageSrc并在验证失败时，清空TextBox控制的值。从BaseValidator继承，是因为服务端只需调用  if(Page.IsValid){}  就可以了。下面主要代码公布如下，希望大家拍砖。使用代码示例： ...
若依框架解读（微服务版）—— 3.验证码与登录
hwp_ing的博客
11-21 2868
网关相关知识：Gateway基于的WebFlux框架，与我们平时用的WebMVC是不太一样的。网关由Route（路由）、Predicate（断言）、Filter（过滤器）组成。uuid也作为redis中key的一部分，后面用户登录的时候需要传回然后去对比redis当中的答案（保证每个请求都有一个自己独立的答案）返回的数据由uuid+图片。
若依源码分析（一） - 验证码流程源码解析
流离岁月的博客
12-27 953
本章节主要分析若依源码验证码流程，一步一步走断点查看验证码全流程信息。
data:image/gif;base64 用法
热门推荐
JackieLiuLixi的专栏
07-02 1万+
Data URI scheme。 Data URI scheme是在RFC2397中定义的，目的是将一些小的数据，直接嵌入到网页中，从而不用再从外部文件载入。比如上面那串字符，其实是一张小图片，将这些字符复制黏贴到火狐的地址栏中并转到，就能看到它了，一张2*2的白色gif图片。 在上面的Data URI中，data表示取得数据的协定名称，image/gif是数据类型名称，base64 是数据的
若依微服务版登录流程源码分析1
qq_41683000的博客
12-09 1740
若依微服务版登录流程源码分析1
【网关原理】若依开源管理系统
会者定离，一期一祈
01-10 921
若依权限认证的配置文件比较简单。 权限认证：ruoyi-auth-pro.yml spring: redis: host: localhost port: 6379 password: 只配置了一个redis。 其实它的权限认证，大多是在网关部分配置，由各种fileter来完成各种拦截操作。 网关：ruoyi-gateway-pro.yml spring: redis: host: localhost port: 6379 password:
springBoot 2.0开发实例-构建多模块应用及项目打包（IDEA工具）
这世上所有的久处不厌，都是因为用心
03-26 528
大纲 1. springBoot 2.0简介 2. 开发环境简介及部分重要配置 3. 实现功能大纲 4. 构建单模块项目 5. 重构多模块项目 5.1 创建model, persistence, web三个子模块工程对应module 5.2 添加依赖关系 5.3 编写代码：User实体类，UserRepository数据操作类，UserController类（Web MV...
如何用python帮助涛涛爬取他喜欢的爱情片
05-25
首先，需要安装Python爬虫库，比如requests和beautifulsoup4。然后，可以使用requests库发送HTTP请求，获取目标网站的HTML源代码。接着，可以使用beautifulsoup4库解析HTML源代码，提取出需要的电影信息，比如电影名称、导演、演员、评分等。最后，可以将这些信息保存到本地文件或者数据库中。 以下是一个简单的Python爬虫示例代码，可以帮助涛涛爬取豆瓣电影中的爱情片： ```python import requests from bs4 import BeautifulSoup # 目标网站的URL url = 'https://movie.douban.com/tag/爱情' # 发送HTTP请求，获取HTML源代码 response = requests.get(url) html = response.text # 使用beautifulsoup4库解析HTML源代码，提取电影信息 soup = BeautifulSoup(html, 'html.parser') movies = soup.find_all('div', class_='pl2') for movie in movies: name = movie.a.text.strip() rating = movie.select('.rating_nums')[0].text.strip() director = movie.select('.pl')[0].text.strip().split('/')[0] actors = movie.select('.pl')[0].text.strip().split('/')[1:] print('电影名称：', name) print('评分：', rating) print('导演：', director) print('演员：', actors) print('------------------') ``` 注意：该示例代码仅供学习参考，请勿用于非法用途。同时，爬虫行为可能会影响网站的正常运行，请合理使用。
评论 6
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值