图形验证码的生成和验证通常由后端负责，而前端主要负责展示和用户交互。以下是具体的分工和实现逻辑：
1.后端职责
后端负责生成图形验证码的图片和对应的验证码字符串，并将其存储在缓存（如 Redis）或会话（Session）中。后端还需要提供接口供前端请求验证码图片，并在用户提交时验证输入的验证码是否正确。
示例代码展示了如何使用 Hutool 工具生成图形验证码：
@GetMapping("/getCode")
public Result<Map<String, String>> getCode() {
LineCaptcha lineCaptcha = CaptchaUtil.createLineCaptcha(200, 100);
String uuid = IdUtil.simpleUUID();
String code = lineCaptcha.getCode();
// 将验证码存储到 Redis，设置有效期为1分钟
redisTemplate.opsForValue().set(uuid, code, Duration.ofMinutes(1));
// 将验证码图片转换为 Base64 格式返回给前端
FastByteArrayOutputStream os = new FastByteArrayOutputStream();
lineCaptcha.write(os);
Map<String, String> result = new HashMap<>();
result.put("uuid", uuid);
result.put("img", Base64.encode(os.toByteArray()));
return Result.ok(result);
}2.前端职责
前端通过调用后端接口获取验证码图片，并将其展示在页面上。当用户输入验证码后，前端将用户输入的验证码和后端返回的唯一标识（如 UUID）一起提交到后端进行验证。
前端展示验证码的示例：
request.get('/getCode').then(res => {
if (res.code === 200) {
this.codeUrl = "data:image/gif;base64," + res.data.img;
this.loginForm.uuid = res.data.uuid;
}
});3.验证逻辑
用户提交登录信息时，后端会根据 UUID 从缓存中获取验证码，并与用户输入的验证码进行比对。如果验证通过，则继续处理登录逻辑；否则返回错误提示。（一般由后端来做验证，也可以由前端获取验证码进行验证）
示例验证代码：
@PostMapping("/login")
public Result<?> login(@RequestBody LoginDto loginDto) {
String uuid = loginDto.getUuid();
String code = loginDto.getCode();
// 从 Redis 中获取验证码并验证
String storedCode = redisTemplate.opsForValue().get(uuid);
if (!Objects.equals(storedCode, code)) {
return Result.fail("验证码错误，请重新验证");
}
// 验证成功后清除缓存
redisTemplate.delete(uuid);
// 继续处理登录逻辑
}4.前端生成验证码的场景
在某些情况下，图形验证码也可以由前端生成（如使用 HTML5 Canvas）或者（
Hutool工具中的captcha包中的图形验证码来实现。验证码功能位于cn.hutool.captcha包中，核心接口为ICaptcha）。这种方式适用于对安全性要求较低的场景，但由于前端生成的验证码容易被破解，通常不建议用于关键业务。
5.总结
图形验证码的生成和验证主要由后端完成，以确保安全性和数据一致性。前端负责展示验证码图片和收集用户输入。通过这种分工，可以有效防止恶意攻击和自动化脚本操作。