前后端分离项目中实现图形验证码
图形验证码在我们的日常生活中时经常用到的，一般用于用户的登录、注册等。
图形验证码在互联网应用中的作用是提高安全性、防止滥用和保护用户隐私。它是一种简单而有效的人机验证技术，帮助保护系统和用户免受自动化攻击的影响。
本次我们通过spring boot后端项目生成图形验证码，通过vue3前端项目来展示验证码；
在vue3前端项目中新建一个Captcha.vue文件，用来展示图形验证码。
新建一个spring boot后端项目，并引入hutool依赖，来提供图形验证码
前端：
在Captcha.vue文件中用img标签来展示验证码：
![]()
可以看到，在img标签中绑定了src属性为codeImage，这个属性需要我们在script标签中定义，并用ref框起来，定义为响应式。它是用来接收后端传回的图片验证码的
定义了一个点击方法为getCode，这个方法同样需要我们在script标签中定义，这个方法是用来向后端发送请求，来获取图形验证码的；
const getCode=async()=>{
let {data}=await axios.get('http://localhost:8888/getCaptcha')
codeImage.value=data.data
}使用onMounted生命周期函数使getCode获取验证码方法在这个组件挂载时执行，这样进入这个组件之后就能直接看到这个图形验证码了；
后端：
新建一个spring boot项目，并引入hutool的依赖：
cn.hutool
hutool-all
5.8.18
在后端使用Cors来允许跨域请求：
@Component
public class MyWebConfig implements WebMvcConfigurer {
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**") //指定允许跨域请求的路径模式为"/**"，表示所有的路径都将允许跨域访问。
.allowedOrigins("*") // 允许访问资源的域名
.allowedMethods("*") // 允许的HTTP方法
.allowedHeaders("*") // 允许的请求头
.allowCredentials(false) // 是否允许发送凭证信息
.maxAge(3600); // 预检请求的有效期
}
}新建一个CaptchaController类，在这个类中实现验证码的生成：
@RestController
@RequestMapping("/getCaptcha")
public class CaptchaController {
@Autowired
private RedisTemplate redisTemplate;
@GetMapping
public String getCaptcha(){
// 150、50为图形的长、宽。 4表示生成4位验证码，2表示干扰线是2位，并放入redis
CircleCaptcha circleCaptcha = CaptchaUtil.createCircleCaptcha(150, 50, 4, 2);
String codeValue = circleCaptcha.getCode();
String imageBase64 = circleCaptcha.getImageBase64();
redisTemplate.opsForValue().set(codeValue,codeValue,5, TimeUnit.MINUTES);
// "data:images/png;base64,"+imageBase64 直接显示
return "data:images/png;base64,"+imageBase64;
} 由于验证码不是什么太重要的东西，所以我直接使用base64编码的方式来传递了，由于我们生成的是图形验证码，所以需要在生成的base64编码前拼上"data:images/png;base64,"。在这里，我将生成的验证码存入了redis中，并设置5分钟过期。将来验证时，直接从redis中取数据验证即可；
这样才能使前端直接显示出图形验证码；
在这里解释一个base64编码：
Base64 编码是一种将二进制数据转换为文本字符串的方法。将图片数据进行 Base64 编码的主要目的是方便在文本格式下传输和处理图片数据，而不需要使用二进制格式。Base64 编码后的数据可以直接嵌入到文本中，比如在 HTML、CSS 或 JSON 中，无需担心特殊字符的处理。
显示图片时，通常需要一个能够解析并渲染图片的方式。在前端开发中，src 属性可以接受图片的 URL。使用 Base64 编码的方式，可以将图片数据直接嵌入到 src 属性中，从而实现在浏览器中显示图片。
需要注意的是，Base64 编码会增加数据的体积约 33% 左右，因为每三个字节的二进制数据会被编码为四个字符。这会导致传输和处理的效率稍微降低。但对于较小的图片或需要嵌入在文本中的情况，使用 Base64 编码是一个方便的选择。对于大型图片或需要频繁进行传输和处理的情况，建议直接使用图片的 URL 进行显示。
现在，我们已经完成了所有的操作。我们现在分别启动前后端的项目。
可以看到，我们生成了四位数的图形验证码，并且，我们在onMount生命周期函数和图片的点击函数中都绑定了getCode函数，所以我们不管是刷新页面或者是直接点击图片，这个图形验证码都会经过刷新的。
