接口文档：

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

• 代码的返回格式为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;}@Overridepublic 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();//生成验证码对应的唯一UUIDString 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: 6379host: 127.0.0.1database: 0open: true

通过Debugger操作执行代码

设置断点

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

redis数据库中没有保存数据 

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

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

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

给验证码生成唯一的UUID

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

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

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

验证码生成的过程：