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表…...
谷歌浏览器插件
项目中有时候会用到插件 sync-cookie-extension1.0.0:开发环境同步测试 cookie 至 localhost,便于本地请求服务携带 cookie 参考地址:https://juejin.cn/post/7139354571712757767 里面有源码下载下来,加在到扩展即可使用FeHelp…...
Android Wi-Fi 连接失败日志分析
1. Android wifi 关键日志总结 (1) Wi-Fi 断开 (CTRL-EVENT-DISCONNECTED reason3) 日志相关部分: 06-05 10:48:40.987 943 943 I wpa_supplicant: wlan0: CTRL-EVENT-DISCONNECTED bssid44:9b:c1:57:a8:90 reason3 locally_generated1解析: CTR…...
Leetcode 3576. Transform Array to All Equal Elements
Leetcode 3576. Transform Array to All Equal Elements 1. 解题思路2. 代码实现 题目链接:3576. Transform Array to All Equal Elements 1. 解题思路 这一题思路上就是分别考察一下是否能将其转化为全1或者全-1数组即可。 至于每一种情况是否可以达到…...

VB.net复制Ntag213卡写入UID
本示例使用的发卡器:https://item.taobao.com/item.htm?ftt&id615391857885 一、读取旧Ntag卡的UID和数据 Private Sub Button15_Click(sender As Object, e As EventArgs) Handles Button15.Click轻松读卡技术支持:网站:Dim i, j As IntegerDim cardidhex, …...
Qt Widget类解析与代码注释
#include "widget.h" #include "ui_widget.h"Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget) {ui->setupUi(this); }Widget::~Widget() {delete ui; }//解释这串代码,写上注释 当然可以!这段代码是 Qt …...

什么是库存周转?如何用进销存系统提高库存周转率?
你可能听说过这样一句话: “利润不是赚出来的,是管出来的。” 尤其是在制造业、批发零售、电商这类“货堆成山”的行业,很多企业看着销售不错,账上却没钱、利润也不见了,一翻库存才发现: 一堆卖不动的旧货…...
Linux云原生安全:零信任架构与机密计算
Linux云原生安全:零信任架构与机密计算 构建坚不可摧的云原生防御体系 引言:云原生安全的范式革命 随着云原生技术的普及,安全边界正在从传统的网络边界向工作负载内部转移。Gartner预测,到2025年,零信任架构将成为超…...

AI书签管理工具开发全记录(十九):嵌入资源处理
1.前言 📝 在上一篇文章中,我们完成了书签的导入导出功能。本篇文章我们研究如何处理嵌入资源,方便后续将资源打包到一个可执行文件中。 2.embed介绍 🎯 Go 1.16 引入了革命性的 embed 包,彻底改变了静态资源管理的…...

GC1808高性能24位立体声音频ADC芯片解析
1. 芯片概述 GC1808是一款24位立体声音频模数转换器(ADC),支持8kHz~96kHz采样率,集成Δ-Σ调制器、数字抗混叠滤波器和高通滤波器,适用于高保真音频采集场景。 2. 核心特性 高精度:24位分辨率,…...
python报错No module named ‘tensorflow.keras‘
是由于不同版本的tensorflow下的keras所在的路径不同,结合所安装的tensorflow的目录结构修改from语句即可。 原语句: from tensorflow.keras.layers import Conv1D, MaxPooling1D, LSTM, Dense 修改后: from tensorflow.python.keras.lay…...