当前位置: 首页 > news >正文

推荐一款前端滑动验证码插件(Vue、uniapp)

uniapp版本:滑块拼图验证码,有后端,简单几步即可实现,小程序、h5都可以用 - DCloud 插件市场

Vue版本及cdn版本可以查阅文档: 行为验证 | Poster 文档

示例代码:

<template><view id="app"><button @click="open">验证</button><slider-captcha v-model="visible":options="options":loading="loading"@check="check"@close="close"@refresh="getSliderOptions"@error="getSliderOptions"><!-- vue2 --><view slot="title">自定义标题-安全验证</view><view slot="successText">自定义成功提示-登录中</view><view slot="errorText">自定义错误提示-是不是太难了换一个</view><view slot="tips">自定义提示拖动下方滑块完成拼图</view><!-- <view slot="question">自定义提示</view> --><!-- vue2 --><!-- vue3 --><template #title>自定义标题-安全验证</template><template #successText>自定义成功提示-登录中</template><template #errorText>自定义错误提示-是不是太难了换一个</template><template #tips>自定义提示拖动下方滑块完成拼图</template><!-- <template #question>自定义提示</template> --><!-- vue3 --></slider-captcha> </view>
</template><script>
import SliderCaptcha from '@/components/kkokk-slider-captcha.vue'
export default {components:{SliderCaptcha},data(){return {visible: false,loading: false,options: {}}},methods: {// 打开触发open() {this.visible = truethis.getSliderOptions()},// 验证check(sliderKey, sliderX, done, error){// 这里是验证是否成功的接口this.loading = trueuni.request({url: 'http://192.168.10.76:8111/', header: {// 'Content-Type': 'application/x-www-form-urlencoded''Content-Type': 'application/json' //自定义请求头信息},data:{sliderKey:sliderKey,sliderX:sliderX},method:'POST',//请求方式,必须为大写success: (res) => {this.loading = falsedone()},fail: () => {this.loading = falseerror()}})},// 关闭触发close() {},// 获取滑块验证参数getSliderOptions(){this.loading = trueuni.request({url: 'http://192.168.10.76:8111/', header: {// 'Content-Type': 'application/x-www-form-urlencoded''Content-Type': 'application/json' //自定义请求头信息},method:'GET',//请求方式,必须为大写success: (res) => {const {img, key, y} = res.datathis.options = {sliderImg: img,sliderKey: key,sliderY: y}this.loading = false}})}}
}
</script>

使用效果:

唯一不足的是:依赖的后端环境是php 

相关文章:

推荐一款前端滑动验证码插件(Vue、uniapp)

uniapp版本&#xff1a;滑块拼图验证码&#xff0c;有后端&#xff0c;简单几步即可实现&#xff0c;小程序、h5都可以用 - DCloud 插件市场 Vue版本及cdn版本可以查阅文档&#xff1a; 行为验证 | Poster 文档 示例代码&#xff1a; <template><view id"app&…...

【Git】git stash

目录 基本概念参数详解listshowsavepushpop|applydropclearbranch 参考文章 Git的stash命令是一个非常实用的功能&#xff0c;它允许开发者临时保存工作目录和暂存区的更改&#xff0c;以便能够切换到其他分支或进行其他操作&#xff0c;而不会丢失当前的修改。以下是git stash…...

不得不安利的程序员开发神器,太赞了!!

作为一名程序员&#xff0c;你是否常常为繁琐的后端服务而感到头疼&#xff1f;是否希望有一种工具可以帮你简化开发流程&#xff0c;让你专注于创意和功能开发&#xff1f;今天&#xff0c;我要向大家隆重推荐一款绝佳的开发神器——MemFire Cloud。它专为懒人开发者准备&…...

吴恩达机器学习C1W2Lab06-使用Scikit-Learn进行线性回归

前言 有一个开源的、商业上可用的机器学习工具包&#xff0c;叫做scikit-learn。这个工具包包含了你将在本课程中使用的许多算法的实现。 目标 在本实验室你可以&#xff1a; 利用scikit-learn实现基于正态方程的近似解线性回归 工具 您将使用scikit-learn中的函数以及ma…...

CSS实现表格无限轮播

<div className{styles.tableTh}><div className{styles.thItem} style{{ width: 40% }}>报警名称</div><div className{styles.thItem} style{{ width: 35% }}>开始时间</div><div className{styles.thItem} style{{ width: 25% }}>状态&…...

编程小白如何从迷茫走出

针对新生们常常感到的迷茫&#xff0c;以下是如何选择适合自己的编程语言、如何制定有效的学习计划以及如何避免常见的学习陷阱的详细建议&#xff1a; 一、如何选择适合自己的编程语言 明确需求和目标&#xff1a;不同的编程语言有不同的特点和适用场景。例如&#xff0c;Py…...

14 B端产品的运营管理

通过运营找到需求并通过交换价值提供供给&#xff0c;再逐步扩大规模、站稳脚跟&#xff0c;辅助产品在商业竞争中获胜。 B端产品运营框架 1. 打通渠道 目的&#xff1a;触达客户。 环节&#xff1a;文案策划、活动策划→广告渠道推广→线下BD。 线下BD&#xff1a;通过见面…...

STM32_RTOS学习笔记——1(列表与列表项)

总体RTOS笔记目录 一&#xff0c;列表与列表项&#xff08;本文&#xff09; 二&#xff0c;待定 视频参考&#xff1a;B站野火 一&#xff0c;C语言列表概念 列表就是C语言中的链表&#xff0c;链表就如同下面的衣架一样&#xff0c;需要的各种内容可以参考 C语言链表可…...

子网划分案例

划分子网是将一个较大的网络划分为多个较小的子网&#xff0c;以提高网络管理和安全性 子网划分可以更有效地利用 IP 地址空间&#xff0c;并且有助于控制网络流量、提高网络性能和安全性。 子网划分的主要步骤如下&#xff1a; 确定需要划分的子网数量以及每个子网所需的主…...

javaweb_02:Maven

一、引入 在javaweb的开发中&#xff0c;需要使用大量的jar包&#xff0c;我们得手动去导入&#xff0c;而Maven可以自动帮我们导入和配置这个jar包。 二、Maven项目框架管理工具 核心思想&#xff1a;约定大于配置&#xff08;有约束不违反&#xff09;&#xff1a;Maven会…...

19.延迟队列优化

问题 前面所讲的延迟队列有一个不足之处&#xff0c;比如现在有一个需求需要延迟半个小时的消息&#xff0c;那么就只有添加一个新的队列。那就意味着&#xff0c;每新增一个不同时间需求&#xff0c;就会新创建一个队列。 解决方案 应该讲消息的时间不要跟队列绑定&#xf…...

P10477 Subway tree systems 题解,c++ 树相关题目

题目 poj 链接 洛谷链接 n n n 组数据&#xff0c;每组数据给定两个 01 01 01 串&#xff08;长度不超过 3000 3000 3000&#xff09;&#xff0c;意思如下&#xff1a; 对于每一个 0 0 0&#xff0c;代表该节点有一个子节点&#xff0c;并前往该子节点。对于每一个 1 1 …...

18.jdk源码阅读之CopyOnWriteArrayList

1. 写在前面 CopyOnWriteArrayList 是 Java 中的一种线程安全的 List 实现&#xff0c;基于“写时复制”&#xff08;Copy-On-Write&#xff09;机制。下面几个问题大家可以先思考下&#xff0c;在阅读源码的过程中都会解答&#xff1a; CopyOnWriteArrayList 适用于哪些场景…...

美股:AMD展现乐观前景,挑战AI加速器市场霸主

在科技行业的激烈竞争中&#xff0c;AMD公司近期发布了对当前季度收入的乐观预测&#xff0c;显示出其新推出 一、AMD第三季度营收预期超越分析师平均预期 AMD在周二的声明中预计&#xff0c;第三季度营收将达到约67亿美元&#xff0c;这一数字超出了分析师此前平均预期的66.…...

如何提高计算机视觉技术在复杂环境和低光照条件下的物体识别准确率?

要在复杂环境和低光照条件下提高计算机视觉技术的物体识别准确率&#xff0c;可以采取以下几个方法&#xff1a; 数据增强&#xff1a;在训练集中添加各种复杂环境和低光照条件下的图片&#xff0c;通过增加数据的多样性&#xff0c;使算法能够更好地适应各种场景。 预处理&am…...

ubuntu cmake使用自己版本的qt

给一篇文章参考 https://blog.csdn.net/bank_dreamer/article/details/138678909 自己使用的范例 set(Qt5_DIR "/home/peak/Qt5.14.0/5.14.0/gcc_64/lib/cmake/Qt5")# 设置Qt5的安装目录 #set(CMAKE_PREFIX_PATH "/home/peak/Qt5.14.0")find_package(Qt5…...

Python基础知识笔记---保留字

保留字&#xff0c;也称关键字&#xff0c;是指被编程语言内部定义并保留使用的标识符。 一、保留字概览 二、保留字用途 1. False&#xff1a;表示布尔值假。 2. None&#xff1a;表示空值或无值。 3. True&#xff1a;表示布尔值真。 4. not&#xff1a;布尔逻辑操作符…...

Python面试整理-Web开发

在Python中,Web开发可以利用多种强大的框架和库来构建从简单的静态网页到复杂的动态Web应用。以下是几种流行的Python Web开发框架和相关技术的概述: 1. Flask Flask 是一个轻量级的Web应用框架,它非常灵活,适用于小型到中型项目,或作为构建微服务的基础。Flask的核心非常…...

民大食堂用餐小程序的设计

管理员账户功能包括&#xff1a;系统首页&#xff0c;个人中心&#xff0c;用户管理&#xff0c;商家管理&#xff0c;档口号管理&#xff0c;商家餐品管理&#xff0c;餐品种类管理&#xff0c;购物车管理&#xff0c;订单信息管理 微信端账号功能包括&#xff1a;系统首页&a…...

Linux系统编程(4):消息队列

Linux下的进程通信手段基本上是从Unix平台上的进程通信手段继承而来的。 而对Unix发展做出重大贡献的两大主力AT&T的贝尔实验室 以及 BSD&#xff08;加州大学伯克利分校的伯克利软件发布中心&#xff09;&#xff0c; 他们在进程间通信方面的侧重点有所不同&#xff1b; 前…...

使用VSCode开发Django指南

使用VSCode开发Django指南 一、概述 Django 是一个高级 Python 框架&#xff0c;专为快速、安全和可扩展的 Web 开发而设计。Django 包含对 URL 路由、页面模板和数据处理的丰富支持。 本文将创建一个简单的 Django 应用&#xff0c;其中包含三个使用通用基本模板的页面。在此…...

Docker 运行 Kafka 带 SASL 认证教程

Docker 运行 Kafka 带 SASL 认证教程 Docker 运行 Kafka 带 SASL 认证教程一、说明二、环境准备三、编写 Docker Compose 和 jaas文件docker-compose.yml代码说明&#xff1a;server_jaas.conf 四、启动服务五、验证服务六、连接kafka服务七、总结 Docker 运行 Kafka 带 SASL 认…...

Matlab | matlab常用命令总结

常用命令 一、 基础操作与环境二、 矩阵与数组操作(核心)三、 绘图与可视化四、 编程与控制流五、 符号计算 (Symbolic Math Toolbox)六、 文件与数据 I/O七、 常用函数类别重要提示这是一份 MATLAB 常用命令和功能的总结,涵盖了基础操作、矩阵运算、绘图、编程和文件处理等…...

CMake 从 GitHub 下载第三方库并使用

有时我们希望直接使用 GitHub 上的开源库,而不想手动下载、编译和安装。 可以利用 CMake 提供的 FetchContent 模块来实现自动下载、构建和链接第三方库。 FetchContent 命令官方文档✅ 示例代码 我们将以 fmt 这个流行的格式化库为例,演示如何: 使用 FetchContent 从 GitH…...

基于Java Swing的电子通讯录设计与实现:附系统托盘功能代码详解

JAVASQL电子通讯录带系统托盘 一、系统概述 本电子通讯录系统采用Java Swing开发桌面应用&#xff0c;结合SQLite数据库实现联系人管理功能&#xff0c;并集成系统托盘功能提升用户体验。系统支持联系人的增删改查、分组管理、搜索过滤等功能&#xff0c;同时可以最小化到系统…...

【笔记】WSL 中 Rust 安装与测试完整记录

#工作记录 WSL 中 Rust 安装与测试完整记录 1. 运行环境 系统&#xff1a;Ubuntu 24.04 LTS (WSL2)架构&#xff1a;x86_64 (GNU/Linux)Rust 版本&#xff1a;rustc 1.87.0 (2025-05-09)Cargo 版本&#xff1a;cargo 1.87.0 (2025-05-06) 2. 安装 Rust 2.1 使用 Rust 官方安…...

Unity UGUI Button事件流程

场景结构 测试代码 public class TestBtn : MonoBehaviour {void Start(){var btn GetComponent<Button>();btn.onClick.AddListener(OnClick);}private void OnClick(){Debug.Log("666");}}当添加事件时 // 实例化一个ButtonClickedEvent的事件 [Formerl…...

智能职业发展系统:AI驱动的职业规划平台技术解析

智能职业发展系统&#xff1a;AI驱动的职业规划平台技术解析 引言&#xff1a;数字时代的职业革命 在当今瞬息万变的就业市场中&#xff0c;传统的职业规划方法已无法满足个人和企业的需求。据统计&#xff0c;全球每年有超过2亿人面临职业转型困境&#xff0c;而企业也因此遭…...

Linux安全加固:从攻防视角构建系统免疫

Linux安全加固:从攻防视角构建系统免疫 构建坚不可摧的数字堡垒 引言:攻防对抗的新纪元 在日益复杂的网络威胁环境中,Linux系统安全已从被动防御转向主动免疫。2023年全球网络安全报告显示,高级持续性威胁(APT)攻击同比增长65%,平均入侵停留时间缩短至48小时。本章将从…...

Flask和Django,你怎么选?

Flask 和 Django 是 Python 两大最流行的 Web 框架&#xff0c;但它们的设计哲学、目标和适用场景有显著区别。以下是详细的对比&#xff1a; 核心区别&#xff1a;哲学与定位 Django: 定位: "全栈式" Web 框架。奉行"开箱即用"的理念。 哲学: "包含…...