如何网站做百度推广,南通制作公司网站,空调网站模版,女子录视频车流中热舞图形验证码在我们的日常生活中时经常用到的#xff0c;一般用于用户的登录、注册等。 图形验证码在互联网应用中的作用是提高安全性、防止滥用和保护用户隐私。它是一种简单而有效的人机验证技术#xff0c;帮助保护系统和用户免受自动化攻击的影响。 本次我们通过spring b…图形验证码在我们的日常生活中时经常用到的一般用于用户的登录、注册等。 图形验证码在互联网应用中的作用是提高安全性、防止滥用和保护用户隐私。它是一种简单而有效的人机验证技术帮助保护系统和用户免受自动化攻击的影响。 本次我们通过spring boot后端项目生成图形验证码通过vue3前端项目来展示验证码 在vue3前端项目中新建一个Captcha.vue文件用来展示图形验证码。 新建一个spring boot后端项目并引入hutool依赖来提供图形验证码 前端 在Captcha.vue文件中用img标签来展示验证码   img :srccodeImage clickgetCode styletransform: scale(0.9);/ 可以看到在img标签中绑定了src属性为codeImage这个属性需要我们在script标签中定义并用ref框起来定义为响应式。它是用来接收后端传回的图片验证码的 定义了一个点击方法为getCode这个方法同样需要我们在script标签中定义这个方法是用来向后端发送请求来获取图形验证码的 const getCodeasync(){let {data}await axios.get(http://localhost:8888/getCaptcha)codeImage.valuedata.data} 使用onMounted生命周期函数使getCode获取验证码方法在这个组件挂载时执行这样进入这个组件之后就能直接看到这个图形验证码了 后端 新建一个spring boot项目并引入hutool的依赖   dependencygroupIdcn.hutool/groupIdartifactIdhutool-all/artifactIdversion5.8.18/version/dependency 在后端使用Cors来允许跨域请求   Component public class MyWebConfig implements WebMvcConfigurer {Overridepublic void addCorsMappings(CorsRegistry registry) {registry.addMapping(/**) //指定允许跨域请求的路径模式为/**表示所有的路径都将允许跨域访问。.allowedOrigins(*) // 允许访问资源的域名.allowedMethods(*) // 允许的HTTP方法.allowedHeaders(*) // 允许的请求头.allowCredentials(false) // 是否允许发送凭证信息.maxAge(3600); // 预检请求的有效期}} 新建一个CaptchaController类在这个类中实现验证码的生成   RestController RequestMapping(/getCaptcha) public class CaptchaController {Autowiredprivate RedisTemplateString,String redisTemplate;GetMapping public String getCaptcha(){// 150、50为图形的长、宽。 4表示生成4位验证码2表示干扰线是2位并放入redisCircleCaptcha 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 中无需担心特殊字符的处理。 显示图片时通常需要一个能够解析并渲染图片的方式。在前端开发中img 标签是用于显示图片的常见方式它的 src 属性可以接受图片的 URL。使用 Base64 编码的方式可以将图片数据直接嵌入到 src 属性中从而实现在浏览器中显示图片。 需要注意的是Base64 编码会增加数据的体积约 33% 左右因为每三个字节的二进制数据会被编码为四个字符。这会导致传输和处理的效率稍微降低。但对于较小的图片或需要嵌入在文本中的情况使用 Base64 编码是一个方便的选择。对于大型图片或需要频繁进行传输和处理的情况建议直接使用图片的 URL 进行显示。 现在我们已经完成了所有的操作。我们现在分别启动前后端的项目。 可以看到我们生成了四位数的图形验证码并且我们在onMount生命周期函数和图片的点击函数中都绑定了getCode函数所以我们不管是刷新页面或者是直接点击图片这个图形验证码都会经过刷新的。