VUE前端实现天爱滑块验证码--详细教程
第一步:
Git地址:tianai-captcha-demo: 滑块验证码demo
找到目录 src/main/resources/static
,拷贝 static 并改名为 tac 即可。
第二步:
将改为 tac 的文件,放进项目根目录中,如下图:
第三步:
点击链接:https://minio.tianai.cloud/public/static/captcha/js/load.min.js
将里面的内容拷贝下来,创建 load.min.js 文件 在 tac/js/load.min.js。
第四步:
会报初始化的错误:初始化tac失败 referenceerror: tac is not defined
解决方法:
1、下载 rollup-plugin-copy 依赖:yarn add rollup-plugin-copy --save-dev
我这边用的是yarn,npm的话是:npm install rollup-plugin-copy --save-dev
成功如下图:
2、在 vite.config.ts 文件中,在build中加入以下配置:
import copyPlugin from 'rollup-plugin-copy';
export default defineConfig(({ mode }) =>{return {build: {rollupOptions: {plugins: [copyPlugin({targets: [{ src: 'tac/*', dest: 'dist/tac' }],hook: 'writeBundle' //防止打包后,tac文件丢失}),],},// outDir: 'dist',// assetsDir: 'assets',},}
})
第五步:
在使用到验证码的 vue 文件中,后端需要给俩个接口:生成验证码接口 和 校验验证码接口
const checkVerificationCode = () => {const apiBaseUrl = import.meta.env.VITE_API_BASE_URL;const baseUrl = `${apiBaseUrl}`;// config 对象为TAC验证码的一些配置和验证的回调const config = {//生成接口requestCaptchaDataUrl: `${baseUrl}/getReCaptchaImageV2.json`,// 验证接口validCaptchaUrl: `${baseUrl}/getReCaptchaImageV3.json`,bindEl: '#captcha-box',// 验证成功回调函数(必选项,必须配置)validSuccess: (res, c, tac) => {// 销毁验证码服务tac.destroyWindow();// console.log("验证成功,后端返回的数据为", res);},// 验证失败的回调函数(可忽略,如果不自定义 validFail 方法时,会使用默认的)validFail: (res, c, tac) => {console.log('验证码验证失败回调...', res, c, tac);// 验证失败后重新拉取验证码tac.reloadCaptcha();},// 刷新按钮回调事件btnRefreshFun: (el, tac) => {console.log('刷新按钮触发事件...');tac.reloadCaptcha();},// 关闭按钮回调事件btnCloseFun: (el, tac) => {console.log('关闭按钮触发事件...');tac.destroyWindow();}};// 一些样式配置, 可不传const style = {// 按钮样式btnUrl: "https://minio.tianai.cloud/public/captcha-btn/btn3.png",// 背景样式bgUrl: "https://minio.tianai.cloud/public/captcha-btn/btn3-bg.jpg",// logo地址logoUrl: "@/assets/logo.png",// 滑动边框样式moveTrackMaskBgColor: "#f7b645",moveTrackMaskBorderColor: "#ef9c0d"}// 参数1 为 tac文件是目录地址, 目录里包含 tac的js和css等文件// 参数2 为 tac验证码相关配置// 参数3 为 tac窗口一些样式配置window.initTAC('./tac', config, style).then((tac) => {tac.init(); // 调用init则显示验证码}).catch((e) => {console.log('初始化tac失败', e);});
};
注意点:
接口是拼接本地配置好的后端地址
到这里基本上就实现了滑块验证功能,然后在各个回调中做处理。
后端生成接口返回的数据及格式
重点:
在 tac.min.js 源码文件 中 requestCaptchaData 这个方法是调用后端生成验证码的接口
参数要自己更改下,如下:
相关文章:

VUE前端实现天爱滑块验证码--详细教程
第一步: Git地址:tianai-captcha-demo: 滑块验证码demo 找到目录 src/main/resources/static,拷贝 static 并改名为 tac 即可。 第二步: 将改为 tac 的文件,放进项目根目录中,如下图: 第三步࿱…...
【链表】【删除节点】【刷题笔记】【灵神题单】
237.删除链表的节点 链表删除节点的本质是不用删除,只需要操作指针,跳过需要删除的节点,指向下下一个节点即可! 删除某个节点,但是不知道这个节点的前一个节点,也不知道头节点!摘自力扣评论区…...

springboot339javaweb的新能源充电系统pf(论文+源码)_kaic
毕 业 设 计(论 文) 题目:新能源充电系统的设计与实现 摘 要 如今社会上各行各业,都喜欢用自己行业的专属软件工作,互联网发展到这个时候,人们已经发现离不开了互联网。新技术的产生,往往能解…...

【嵌入式——QT】QT制作安装包
第一步 QT程序写好之后,编译release版本 第二步 拿到release生成的.exe文件 第三步 新建文件夹deploy 第四步 将.exe文件复制到deploy目录下 第五步 在该目录下输入cmd指令,回车 第六步 在打开的命令窗口下输入 windeployqt TegNetCom_1.0.…...
python的文件操作练习
文件操作:成绩统计 有一个文件grades.txt,文件内容是每行一个学生的成绩(格式:姓名,成绩)。要求: 读取文件内容,统计所有学生的平均成绩; 将不及格(<60分)…...

jQuery九宫格抽奖,php处理抽奖信息
功能介绍 jQuery九宫格抽奖是一种基于jQuery库的前端抽奖效果。通过九宫格的形式展示抽奖项,用户点击抽奖按钮后,九宫格开始旋转,最终停在一个随机位置上,此位置对应的抽奖项为用户的中奖结果。 本文实现九宫格的步骤为…...

2024年一级建造师考试成绩,即将公布!
一级建造师考试成绩一般在考试结束后3个月左右的时间公布! 根据官方通知,重庆、江苏、青海、江西、云南、湖南、福建、北京、山西、黑龙江等地在今年一建报名通知里提到:2024年一级建造师考试成绩预计于2024年12月上旬公布。考生可在这个时间…...

M4V 视频是一种什么格式?如何把 M4V 转为 MP4 格式?
M4V 是一种视频文件格式,主要由苹果公司用于其产品和服务中,如 iTunes Store 上的电影和电视节目。这种格式可以包含受版权保护的内容,并且通常与苹果的 DRM(数字版权管理)技术结合使用,以限制内容的复制和…...

Leetcode 每日一题 104.二叉树的最大深度
目录 问题描述 示例 示例 1: 示例 2: 约束条件 题解 方法一:广度优先搜索(BFS) 步骤 代码实现 方法二:递归 步骤 代码实现 结论 问题描述 给定一个二叉树 root,我们需要返回其最大…...

文件上传漏洞:你的网站安全吗?
文章目录 文件上传漏洞攻击方式:0x01绕过前端限制0x02黑名单绕过1.特殊解析后缀绕过2..htaccess解析绕过3.大小写绕过4.点绕过5.空格绕过6.::$DATA绕过7.配合中间件解析漏洞8.双后缀名绕过9.短标签绕过 0x03白名单绕过1.MIME绕过(Content-Type绕过)2.%00截断3.0x00截…...

AWS账号提额
Lightsail提额 控制台右上角,用户名点开,选择Service Quotas 在导航栏中AWS服务中找到lightsail点进去 在搜索框搜索instance找到相应的实例类型申请配额 4.根据自己的需求选择要提额的地区 5.根据需求来提升配额数量,提升小额配额等大约1小时生效 Ligh…...

电子应用设计方案-29:智能云炒菜系统方案设计
智能云炒菜系统方案设计 一、系统概述 本智能云炒菜系统旨在为用户提供便捷、高效、个性化的烹饪体验,结合云技术实现远程控制、食谱分享、智能烹饪流程优化等功能。 二、系统组成 1. 炒菜锅主体 - 高品质不粘锅内胆,易于清洁和维护。 - 加热装置&#x…...
腾讯rapidJson使用例子
只需要把库的头文件拿下来加入项目中使用就行,我是以二进制文件存储内容并解析: #include <iostream> #include <fstream> #include <string> #include "rapidjson/document.h" #include "rapidjson/error/en.h"…...
UE5_CommonUI简单使用(2)
上篇我是简单写了一下CommonUI使用的初始设置以及Common Activatable Widget和Common Activatable Widget Stack以及Common 控件Style以及鼠标控制的一些内容,这些对于了解UMG的朋友来说没什么难度,唯一需要注意的就是Common Activatable Widget Stack堆栈管理只能是用来管理…...

探讨播客的生态系统
最近对播客发生了兴趣,从而引起了对播客背后的技术,生态的关注。本文谈谈播客背后的技术生态系统。 播客很简单 播客(podcast)本质上就是以语音的方式发布信息。它和博客非常类似。如果将CSDN 网站上的文字加一个语音播报。CSDN …...

淘宝架构演化
基本功能 LAMP(LinuxApacheMySQLPHP)标准架构,初期采用拿来主义,只具备基本功能。 数据库:读写分离,MyISAM存储引擎 2003年5月—2004年1月 存储瓶颈 mysql达到访问瓶颈,升级成oracle&#x…...

软通动力携子公司鸿湖万联、软通教育助阵首届鸿蒙生态大会成功举办
11月23日中国深圳,首届鸿蒙生态大会上,软通动力及软通动力子公司鸿湖万联作为全球智慧物联网联盟(GIIC)理事单位、鸿蒙生态服务(深圳)有限公司战略合作伙伴,联合软通教育深度参与了大会多项重磅…...

【AI绘画】DALL·E 3 绘图功能与 DALL·E API 探索
博客主页: [小ᶻ☡꙳ᵃⁱᵍᶜ꙳] 本文专栏: AI绘画 文章目录 💯前言💯DALLE 3 图像生成介绍(Introduction to DALLE 3 Image Generation)图像质量与分辨率图像生成机制的解析多图生成功能 💯使用 DALLE…...

【数据事务】.NET开源 ORM 框架 SqlSugar 系列
.NET开源 ORM 框架 SqlSugar 系列 【开篇】.NET开源 ORM 框架 SqlSugar 系列【入门必看】.NET开源 ORM 框架 SqlSugar 系列【实体配置】.NET开源 ORM 框架 SqlSugar 系列【Db First】.NET开源 ORM 框架 SqlSugar 系列【Code First】.NET开源 ORM 框架 SqlSugar 系列【数据事务…...

深入解析下oracle char和varchar2底层存储方式
oracle数据库中,char和varchar2数据类型用来存储字符数据。char类型一旦定义多大,那么它就分配多少字节空间;varchar2类型定义多大,代表它可以扩展的最大大小为多大,一开始空间根据使用来决定。字符数据存储在oracle表…...

【Redis技术进阶之路】「原理分析系列开篇」分析客户端和服务端网络诵信交互实现(服务端执行命令请求的过程 - 初始化服务器)
服务端执行命令请求的过程 【专栏简介】【技术大纲】【专栏目标】【目标人群】1. Redis爱好者与社区成员2. 后端开发和系统架构师3. 计算机专业的本科生及研究生 初始化服务器1. 初始化服务器状态结构初始化RedisServer变量 2. 加载相关系统配置和用户配置参数定制化配置参数案…...

STM32F4基本定时器使用和原理详解
STM32F4基本定时器使用和原理详解 前言如何确定定时器挂载在哪条时钟线上配置及使用方法参数配置PrescalerCounter ModeCounter Periodauto-reload preloadTrigger Event Selection 中断配置生成的代码及使用方法初始化代码基本定时器触发DCA或者ADC的代码讲解中断代码定时启动…...

剑指offer20_链表中环的入口节点
链表中环的入口节点 给定一个链表,若其中包含环,则输出环的入口节点。 若其中不包含环,则输出null。 数据范围 节点 val 值取值范围 [ 1 , 1000 ] [1,1000] [1,1000]。 节点 val 值各不相同。 链表长度 [ 0 , 500 ] [0,500] [0,500]。 …...
第25节 Node.js 断言测试
Node.js的assert模块主要用于编写程序的单元测试时使用,通过断言可以提早发现和排查出错误。 稳定性: 5 - 锁定 这个模块可用于应用的单元测试,通过 require(assert) 可以使用这个模块。 assert.fail(actual, expected, message, operator) 使用参数…...
docker 部署发现spring.profiles.active 问题
报错: org.springframework.boot.context.config.InvalidConfigDataPropertyException: Property spring.profiles.active imported from location class path resource [application-test.yml] is invalid in a profile specific resource [origin: class path re…...

零知开源——STM32F103RBT6驱动 ICM20948 九轴传感器及 vofa + 上位机可视化教程
STM32F1 本教程使用零知标准板(STM32F103RBT6)通过I2C驱动ICM20948九轴传感器,实现姿态解算,并通过串口将数据实时发送至VOFA上位机进行3D可视化。代码基于开源库修改优化,适合嵌入式及物联网开发者。在基础驱动上新增…...

Qt的学习(一)
1.什么是Qt Qt特指用来进行桌面应用开发(电脑上写的程序)涉及到的一套技术Qt无法开发网页前端,也不能开发移动应用。 客户端开发的重要任务:编写和用户交互的界面。一般来说和用户交互的界面,有两种典型风格&…...

aardio 自动识别验证码输入
技术尝试 上周在发学习日志时有网友提议“在网页上识别验证码”,于是尝试整合图像识别与网页自动化技术,完成了这套模拟登录流程。核心思路是:截图验证码→OCR识别→自动填充表单→提交并验证结果。 代码在这里 import soImage; import we…...

轻量级Docker管理工具Docker Switchboard
简介 什么是 Docker Switchboard ? Docker Switchboard 是一个轻量级的 Web 应用程序,用于管理 Docker 容器。它提供了一个干净、用户友好的界面来启动、停止和监控主机上运行的容器,使其成为本地开发、家庭实验室或小型服务器设置的理想选择…...

break 语句和 continue 语句
break语句和continue语句都具有跳转作用,可以让代码不按既有的顺序执行 break break语句用于跳出代码块或循环 1 2 3 4 5 6 for (var i 0; i < 5; i) { if (i 3){ break; } console.log(i); } continue continue语句用于立即终…...