当前位置: 首页 > 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; 前…...

后进先出(LIFO)详解

LIFO 是 Last In, First Out 的缩写&#xff0c;中文译为后进先出。这是一种数据结构的工作原则&#xff0c;类似于一摞盘子或一叠书本&#xff1a; 最后放进去的元素最先出来 -想象往筒状容器里放盘子&#xff1a; &#xff08;1&#xff09;你放进的最后一个盘子&#xff08…...

React hook之useRef

React useRef 详解 useRef 是 React 提供的一个 Hook&#xff0c;用于在函数组件中创建可变的引用对象。它在 React 开发中有多种重要用途&#xff0c;下面我将全面详细地介绍它的特性和用法。 基本概念 1. 创建 ref const refContainer useRef(initialValue);initialValu…...

微软PowerBI考试 PL300-选择 Power BI 模型框架【附练习数据】

微软PowerBI考试 PL300-选择 Power BI 模型框架 20 多年来&#xff0c;Microsoft 持续对企业商业智能 (BI) 进行大量投资。 Azure Analysis Services (AAS) 和 SQL Server Analysis Services (SSAS) 基于无数企业使用的成熟的 BI 数据建模技术。 同样的技术也是 Power BI 数据…...

Linux相关概念和易错知识点(42)(TCP的连接管理、可靠性、面临复杂网络的处理)

目录 1.TCP的连接管理机制&#xff08;1&#xff09;三次握手①握手过程②对握手过程的理解 &#xff08;2&#xff09;四次挥手&#xff08;3&#xff09;握手和挥手的触发&#xff08;4&#xff09;状态切换①挥手过程中状态的切换②握手过程中状态的切换 2.TCP的可靠性&…...

测试markdown--肇兴

day1&#xff1a; 1、去程&#xff1a;7:04 --11:32高铁 高铁右转上售票大厅2楼&#xff0c;穿过候车厅下一楼&#xff0c;上大巴车 &#xffe5;10/人 **2、到达&#xff1a;**12点多到达寨子&#xff0c;买门票&#xff0c;美团/抖音&#xff1a;&#xffe5;78人 3、中饭&a…...

Java线上CPU飙高问题排查全指南

一、引言 在Java应用的线上运行环境中&#xff0c;CPU飙高是一个常见且棘手的性能问题。当系统出现CPU飙高时&#xff0c;通常会导致应用响应缓慢&#xff0c;甚至服务不可用&#xff0c;严重影响用户体验和业务运行。因此&#xff0c;掌握一套科学有效的CPU飙高问题排查方法&…...

算法:模拟

1.替换所有的问号 1576. 替换所有的问号 - 力扣&#xff08;LeetCode&#xff09; ​遍历字符串​&#xff1a;通过外层循环逐一检查每个字符。​遇到 ? 时处理​&#xff1a; 内层循环遍历小写字母&#xff08;a 到 z&#xff09;。对每个字母检查是否满足&#xff1a; ​与…...

基于SpringBoot在线拍卖系统的设计和实现

摘 要 随着社会的发展&#xff0c;社会的各行各业都在利用信息化时代的优势。计算机的优势和普及使得各种信息系统的开发成为必需。 在线拍卖系统&#xff0c;主要的模块包括管理员&#xff1b;首页、个人中心、用户管理、商品类型管理、拍卖商品管理、历史竞拍管理、竞拍订单…...

深入浅出深度学习基础:从感知机到全连接神经网络的核心原理与应用

文章目录 前言一、感知机 (Perceptron)1.1 基础介绍1.1.1 感知机是什么&#xff1f;1.1.2 感知机的工作原理 1.2 感知机的简单应用&#xff1a;基本逻辑门1.2.1 逻辑与 (Logic AND)1.2.2 逻辑或 (Logic OR)1.2.3 逻辑与非 (Logic NAND) 1.3 感知机的实现1.3.1 简单实现 (基于阈…...

STM32HAL库USART源代码解析及应用

STM32HAL库USART源代码解析 前言STM32CubeIDE配置串口USART和UART的选择使用模式参数设置GPIO配置DMA配置中断配置硬件流控制使能生成代码解析和使用方法串口初始化__UART_HandleTypeDef结构体浅析HAL库代码实际使用方法使用轮询方式发送使用轮询方式接收使用中断方式发送使用中…...