尧图网站建设 尧图网络
  • 首页
  • 关于我们
  • 服务项目
  • 案例展示
  • 建站流程
  • 资讯中心
  • 联系我们
首页/资讯中心/详情

若依前端验证码的实现

若依前端验证码的实现
📅 发布时间:2026/6/19 19:57:30

由于之前没时间,现在重新写一份
好吵啊,游戏人的吼叫声,嗓门太大了
有钱了买个好的耳机

详细视频讲解:https://www.bilibili.com/video/BV1HT4y1d7oA?spm_id_from=333.788.player.switch&vd_source=886219f6fb49f459fbfc8b80a8b39f3f&p=2

登录

基本思路
后端生成表达式 1+1=2
1+1=?@2
1+1=?转成图片,传到前端进行展示
2存入Redis

image

image

image
输入 4 传到后台与Redis存入的数据进行对比,如果对比结果相同则验证码通过

业务流程

找到登录界面
image

初始化的时候获取验证码
image

找到位置,ctrl+左键点击找到方法
image

生成图片传到前端
image

生成uuid传到前端,前端发送请求,通过uuid在Redis中找到验证码的正确值
image

获取验证码的方法
image

通过f12打开的开发者者工具可以发现,前端发送了请求获取了图片的地址和uuid
image

进入Request方法内部,java或者vue内并没有封装好的Request方法,通常使用ajax或者axios进行请求发送
image

内部的Request方法执行了axios进行请求发送
image

url公共请求部分位置
image

验证码请求的url组合
image

http://localhost/dev-api/captchaImage 这是请求前端的
后端链接的链接为
image

Vue获取图片,理论上应该请求后端去获取,但现在请求前端却获取了后端的图片,这里做了反向代理
反向代理:url请求前端,进行代理,映射到后端
原因:为了解决跨域问题,前端是80端口,后端是8080端口

代理
image

前端请求 http://localhost/dev-api/captchaImage
将/dev-api替换为空,再映射到 http://localhost:8080
实际后端请求为http://localhost:8080/captchaImage

相关新闻

  • 从O(n)到O(n):Python字符串拼接的效率陷阱与最佳实践
  • CSP-S 2025 T3 小结
  • 第三十二篇

最新新闻

  • 面试被问“你的缺点是什么”,90%的应届生都答错了!(附满分话术)
  • Spring Cloud Alibaba 最佳实践:基于 Spring Boot 4.0 的完整微服务示例项目
  • 三步掌握AI斗地主:如何用DouZero智能助手提升你的游戏胜率
  • 2026山东大学项目实训个人博客(六)
  • DC/DC电源设计实战:从MIC261201选型到PCB布局与热管理全解析
  • 2026济南婚纱摄影选型全指南:行业标准、品牌梯队与合规避坑全解析 - 速递信息

日新闻

  • 5分钟掌握Python进化算法:Geatpy高性能优化工具完全指南
  • Microchip 24AA044 EEPROM选型与应用全指南:从参数解析到实战编程
  • 华为的鸿蒙到底有多牛?为什么称作遥遥领先?

周新闻

  • 3步解锁iOS设备:applera1n激活锁绕过完全指南
  • 39 2026 人工智能证书终极盘点,普通人选 AI 证书可以从这些方向入手
  • Redis 暴露公网有多危险?从端口检查到补救步骤

月新闻

  • 【总结】入门篇:50句话让你记住架构核心概念
  • WeChatMsg技术方案解析:实现Mac微信数据自主管理的完整解决方案
  • WeChatMsg:革新性微信数据备份方案,打造你的专属数字记忆库

关于尧图

  • 公司简介
  • 团队介绍
  • 企业文化
  • 荣誉资质

服务项目

  • 定制开发
  • 电商建站
  • UI 设计
  • 运维服务

快速链接

  • 案例展示
  • 建站流程
  • 常见问题
  • 资讯中心

联系方式

  • 📍北京市朝阳区互联网产业园 A 座 10 层
  • 📞400-888-8888
  • ✉️contact@rkmt.cn
  • 🕐周一至周日 9:00-21:00

© 2024 北京尧图网络科技有限公司 版权所有 | 京 ICP 备 XXXXXXXX 号