若依前端验证码的实现

news/2025/11/3 20:41:08/文章来源:https://www.cnblogs.com/the-fool-l/p/19188082

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

详细视频讲解: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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/954876.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

从O(n)到O(n):Python字符串拼接的效率陷阱与最佳实践

从O(n)到O(n):Python字符串拼接的效率陷阱与最佳实践 在Python开发中,字符串拼接是最常见的操作之一。但看似简单的+号拼接,在循环场景下可能埋下严重的性能隐患。本文通过两段代码的对比,拆解字符串拼接的效率差异…

实验4:MobileNet ShuffleNet - OUC

实验4:MobileNet & ShuffleNet 姓名: 学号:姓名和学号?本实验属于哪门课程? 中国海洋大学25秋《软件工程原理与实践》实验名称? 实验4:MobileNet & ShuffleNet博客链接:学习要求CNN的基本结构:卷积、…

模拟赛 31

T1简单题,排序后直接枚举两个有画面格子之间的间隔数,即为可能节省的行数或列数,移动次数也易求。点击查看代码 #include<bits/stdc++.h> #define MAXN 500005 #define int long long const int inf=1e18; us…

CSP-S 2025 T3 小结

这个主要是写给自己看的。 就是观察到 b 性质是个扫描线。 考虑加强,会发现把 trie 树套上去就没了。 前面的思路不难想,主要是最后一步。 代码: #include<bits/stdc++.h> #include<bits/extc++.h> usi…

第三十二篇

今天是11月3号,进行期中考试了,难

2025年苏州AIGEO 优化服务商深度测评:TOP5 企业核心优势与实战案例对比

这份 GEO 优化服务商榜单与实践指南,既提供了可直接对标选择的优质服务商,也拆解了不同行业的定制化策略与落地路径。对企业而言,GEO 优化不再是单一的技术操作,而是 AI 时代品牌抢占流量入口、传递核心价值的关键…

使用 Docker Compose 轻松实现 INFINI Console 离线部署与持久化管理

本文是 INFINI Console 环境搭建系列的第四篇,专为需要在离线或内网环境中容器化部署 INFINI Console 与 Easysearch 的用户设计。系列回顾与引言 在我们的 INFINI 本地环境搭建系列博客中:第一篇《搭建持久化的 INF…

第6章 语句

6.5 if语句悬垂else (dangling-else) 问题:当一个if子句多于else子句时,对于每一个else,究竟属于哪个if。 C++中会将else匹配给最后出现的尚未匹配的if子句。

十一月杂题

十一月杂题1. CF1067D Computer Game 考虑有了一次升级机会之后一定只会对着期望收益最高的做。于是只需要决策升级之前的决策。设 \(f_t\) 为还剩 \(t\) 秒的最大收益,\(x\) 为期望收益最大的任务的期望收益,则有 \…

Modbus RTU 通信格式详解学习笔记

看似与人为善、心肠柔软之人,必然有一块坚硬如铁的心境土壤,在苦难人生中,死死支撑着那份看似愚蠢的善意1️⃣ 核心思想:Modbus RTU 报文 = 一封结构化的“电报” 想象一下,你要给朋友发一封电报:你得先告诉邮局…

Selenium3+Python3 自动化项目项目实战day1

HTML CSS JavaScript HTMl总体脉络 CSS皮肤组织 JavaScript二者神经组织 HTML 超文本标记语言 HTMl元素 HTML表单 CSS JaveScript

P1.python环境的配置和安装

P1.python环境的配置和安装1.1CUDA安装: 1.查看CUDA Version 在终端输入nvidia-smi2.下载安装配置CUDA1.2python3.8安装 C:\Users\ASUS\AppData\Local\Programs\Python\Python381.3Anaconda安装 1.软件下载安装测试一…

Python 中可变对象的“引用赋值”特性——可变对象的“引用传递”

一、踩坑代码 某程序老鸟讲了一个故事: “2019年夏天,我在做一个推荐系统的用户画像模块。当时写了这样的代码: # 当时的蠢代码,现在想起来都脸红 default_preferences = [] # 想着所有用户共享一个默认偏好 user…

CSP-S 2025 游寄喵

使用了新的文风喵……希望能缓解气氛喵……poi 酱写下这篇游记的时候大概心态很炸喵……不过还是尽量收住了我的垃圾情绪喵,如果不慎伤到您的话欢迎指出喵……poi 酱谢罪喵……(跪着) 如果您有帮到 poi 酱没有 ack …

Modbus协议分类及测试学习笔记

只是两个人相处,那么喜欢一个人,可能会觉得她所有都好,但是以后在一起了,就要学会喜欢她的不好。记住,Modbus不是一种协议,而是一套“通信规则”,它可以在不同的“交通工具”上运行 1️⃣ 核心思想:Modbus是“…

MarkDown初入

MarkDown学习 标题 几个“#”后+一个空格,就是几级标题,最多6级 文字修饰 Hello,Word! 前后+”**“是+粗 一个”*“斜体 三个就是全都要 双波浪就是划掉 Hello,Word! Hello,Word! Hello,Word! 引用学习狂神教…

英语_作文_8AU3_Curiosity

Curiosity is one of the most important qualities the human have.It let us have ability to explore the unknown. We always asked "why", even we found our question‘s answers surpringly and amaz…

习题-极大原理

习题1. 若\(a\)和\(b\)是两个实数,当\(b-a\)为正有理数时定义\(a\prec b\),证明这是\(\mathbb{R}\)上的一个严格偏序。它的极大全序子集是什么?2. (a) 设\(\prec\)是集合\(A\)中的一个严格偏序,\(A\)中的一个关系\…

极大原理

我们已经说过,由选择公理可以得到任意集合都能良序化这一深刻的定理。在数学中,选择公理还有更加重要的推论。这里所提及的“极大原理”有多种版本。在1914年至1935年间,多位数学家曾对极大原理独立地予以论述,他们…

P7. TensorBoard的使用(一)

P7. TensorBoard的使用(一)7.1SummaryWriter类使用 1.官方文档对SummaryWriter的介绍 按住Ctrl,点中SummaryWriter点击查看代码 Writes entries directly to event files in the log_dir to be consumed by TensorB…