AI智慧社区--生成验证码

接口文档：

从接口文档中可以得知的信息：

• 代码的返回格式为json格式，可以将@Controlller换为@RestController
• 前端发起的请求为Get请求，使用注解@GetMapping
• 通过返回的数据类型，定义一个返回类型Result

package com.qcby.community.utils;

import java.util.HashMap;

public class Result extends HashMap<String,Object> {

    public static Result ok(){
        Result result = new Result();
        result.put("code", 200);
        result.put("msg", "操作成功");
        return result;
    }

    public static Result error(String msg){
        Result result = new Result();
        result.put("code", 500);
        result.put("msg", msg);
        return result;
    }

    @Override
    public Result put(String key, Object value) {
        super.put(key, value);
        return this;
    }
}

调用ok()方法,该方法初始化result对象，并且已经提供code属性和msg属性的值，因此只需要设置需要返回的data属性即可

基本的方法框架如上，接下来就可以实现生成验证码的操作了

前端的调用流程：

export function getCaptchaImg() {
  return request({
    url: '/captcha',
    method: 'get'
  })
}

getCaptchaImg 函数是一个简单的 HTTP 请求封装，用于获取验证码相关信息，其核心是调用 request 函数发送 GET 请求 

后端调用：

SpecCaptcha

使用验证码的逻辑

1 。new SpecCaptcha对象传入验证码的大小

2 。将验证码转换为base64

3。生成一个唯一的id (为了验证的时候能后对应上)

4.。将验证码id和base64的验证码图片返回给前端

5 。将验证码的值captcha.text().toLowerCase() 和id以键值对的形式存入缓存  

验证码验证

1。获取前端传入用户输入的验证码和验证码的id,

2。将验证码进行大小写转换

3。通过id去缓存获取验证码 然后和传入的验证码进行比较即可

 Controller层的方法

@GetMapping("/captcha")
    public Result getCaptcha(){
        //1.利用工具类，产生验证码图片
        SpecCaptcha specCaptcha = new SpecCaptcha(130, 48, 4);
        //获取验证码图片中的验证码
        String code = specCaptcha.text().toLowerCase();
        //生成验证码对应的唯一UUID
        String uuid = IdUtil.simpleUUID();
        //2.获取验证码的值
        //3.用redis存储验证码并设置失效时间
        //存入redis并设置过期时间为2分钟  TimeUnit.SECONDS 时间单位为秒
        this.redisTemplate.opsForValue().set(uuid, code, 120, TimeUnit.SECONDS);
        //4.将数据返回给前端
        Map<String, String> map = new HashMap<String, String>(3);
        map.put("uuid", uuid);
        map.put("code", code);
        map.put("captcha", specCaptcha.toBase64());
        return Result.ok().put("data", map);
    }

1.生成验证码的操作需要导入依赖

<dependency>
            <groupId>com.github.whvcse</groupId>
            <artifactId>easy-captcha</artifactId>
            <version>${captcha.version}</version>
        </dependency>

2.并在配置文件当中配置redis属性（因为要存储在redis中）

redis:
    port: 6379
    host: 127.0.0.1
    database: 0
    open: true

通过Debugger操作执行代码

设置断点

执行方法前，验证码无法加载 

redis数据库中没有保存数据 

通过以下代码生成验证码图片

SpecCaptcha specCaptcha = new SpecCaptcha(130, 48, 4);

获取验证码图片上的文字，将验证码的字母转小写

给验证码生成唯一的UUID

String code = specCaptcha.text().toLowerCase();
       
        String uuid = IdUtil.simpleUUID();

生成之后，根据redis的配置，将数据保存到 0号数据库中

将验证码的信息封装在data中，返回给前台，验证码成功显示

验证码生成的过程：