AJ-Captcha行为验证在vue中的使用

项目场景:

提示:这里简述项目相关背景:

项目场景:由原先的验证码校验升级为行为验证校验

使用方法

提示:参考文档:

参考文档:vue使用AJ-Captcha文档
gitee地址:AJ-Captcha


(1)在gitee仓库下载对用的版本,我这里用的是vue。
复制view/vue/src/components/verifition文件夹,到自己工程对应目录下,在登录页面插入如下代码。

请添加图片描述

请添加图片描述

(2)安装请求和加密依赖

npm install axios  crypto-js   -S

基础示例

<template><Verify@success="success" //验证成功的回调函数:mode="pop"     //调用的模式:captchaType="blockPuzzle"    //调用的类型 点选或者滑动:imgSize="{ width: '330px', height: '155px' }" //图片的大小对象ref="verify"></Verify>//mode="pop"模式<button @click="useVerify">调用验证组件</button>
</template>****: mode为"pop",使用组件需要给组件添加ref值,并且手动调用show方法 例: this.$refs.verify.show()****
****: mode为"fixed",无需添加ref值,无需调用show()方法****<script>
//引入组件
import Verify from "./../../components/verifition/Verify";
export default {name: 'app',components: {Verify}methods:{success(params){// params 返回的二次验证参数, 和登录参数一起回传给登录接口,方便后台进行二次验证},useVerify(){this.$refs.verify.show()}}
}
</script>

修改接口:

提示:引入组件后,修改接口:自己项目的components/verifition/Verify

1.先修改axios的默认请求接口,AJ-Captcha自己封装了一个,你也可以用自己的项目的。

components/verifition/Verify/api/index.js文件内

请添加图片描述


2.修改请求接口文件,配置成自己项目的接口

components/verifition/Verify/utils/axios.js文件内

请添加图片描述


2.修改接收接口文件,根据自己的项目修改code

components/verifition/Verify/Verify/VerifyPoints.vue文件内 点选验证
components/verifition/Verify/Verify/VerifySlide.vue文件内 行为验证
需要用到哪个改哪个,最好都改了
请添加图片描述


这里只是简略介绍一下,只是记录我使用的过程,更全面的介绍前往上面的文档地址或gitee查看

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

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

相关文章

什么是微服务?

2.微服务的优缺点 优点 单一职责原则每个服务足够内聚&#xff0c;足够小&#xff0c;代码容易理解&#xff0c;这样能聚焦一个指定的业务功能或业务需求&#xff1b;开发简单&#xff0c;开发效率提高&#xff0c;一个服务可能就是专一的只干一件事&#xff1b;微服务能够被小…

26、springboot的自动配置03--核心功能--自定义条件注解及使用

开发自己的自动配置------开发自己的条件注解 ★ 自定义条件注解 好处有两个&#xff1a; 1. 真正掌握Spring boot条件注解的本质。 2. 项目遇到一些特殊的需求时&#xff0c;也可以开发自己的自定义条件注解来解决问题。自定义条件注解&#xff1a; ▲ 所有自定义注解其实都…

ICT产教融合创新实训基地软件测试实训室建设方案

一 、系统概述 ICT产教融合创新&#xff0c;简单来说&#xff0c;就是信息与通信技术&#xff08;ICT&#xff09;与产业界、教育界的融合创新。这个概念强调了在现代社会中&#xff0c;信息技术与产业发展以及教育培训之间相互关联的重要性。 ICT产教融合创新的核心思想包括以…

lambda表达式

一&#xff0c;什么是lambda表达式 1.1 函数式接口 要想了解什么是lambda表达式&#xff0c;就必须得知道什么是函数式接口&#xff0c;函数式接口是指只包含一个抽象方法的接口。如果我们自己写一个函数时接口&#xff0c;最好在接口前添加Functionallnterface&#xff0c;和…

程序员如何利用公网远程访问查询本地硬盘【内网穿透】

&#x1f3ac; 鸽芷咕&#xff1a;个人主页 &#x1f525; 个人专栏: 《高效编程技巧》《cpolar》 ⛺️生活的理想&#xff0c;就是为了理想的生活! 公网远程访问本地硬盘文件【内网穿透】 文章目录 公网远程访问本地硬盘文件【内网穿透】前言1. 下载cpolar和Everything软件1.…

去掉鼠标系列之一: 语雀快捷键使用指南

其实应该是系列之二了&#xff0c;因为前面写了一个关于Interlij IDEA的快捷键了。 为什么要写这个了&#xff0c;主要是觉得一会儿用鼠标&#xff0c;一会儿键盘&#xff0c;一点儿不酷&#xff0c;我希望可以一直用键盘&#xff0c;抛开鼠标。后面陆续记录一下各个软件的快捷…

Lnton羚通算法算力云平台在环境配置时 OpenCV 无法显示图像是什么原因?

问题&#xff1a; cv2.imshow 显示图像时报错&#xff0c;无法显示图像 0%| | 0/1 [00:00<…

【数据结构】栈和队列

大家好&#xff01;今天我们来学习数据结构中的栈和队列。 目录 1. 栈 1.1 栈的概念及结构 1.2 栈的定义 1.3 栈的接口实现 1.3.1 初始化栈 1.3.2 入栈 1.3.3 出栈 1.3.4 获取栈顶元素 1.3.5 获取栈中有效元素个数 1.3.6 检测栈是否为空 1.3.7 销毁栈 1.4 栈的完整…

堆 和 优先级队列(超详细讲解,就怕你学不会)

优先级队列 一、堆的概念特性二、堆的创建1、向下调整算法2、向下调整建堆3、向下调整建堆的时间复杂度 三、堆的插入1、向上调整算法实现插入2、插入创建堆的时间复杂度 三、堆的删除四、Java集合中的优先级队列1、PriorityQueue 接口概述及模拟实现2、如何创建大根堆&#xf…

【Java 动态数据统计图】动态数据统计思路案例(动态,排序,containsKey)五(117)

需求&#xff1a;前端根据后端的返回数据&#xff1a;画统计图&#xff1b; 1.动态获取地域数据以及数据中的平均值&#xff0c;按照平均值降序排序&#xff1b; 说明&#xff1a; X轴是动态的&#xff0c;有对应区域数据则展示&#xff1b; X轴 区域数据降序排序&#xff1b;…

Intelij IDEA 配置Tomcat解决Application Server不显示的问题

今天搭建war工程时部署项目发现&#xff0c;IDEA的控制台没有Application Servers&#xff0c;在网上查了一下&#xff0c;总结几个比较好的解决方法&#xff0c;为了方便自己和其他人以后碰到相同的问题&#xff0c;不再浪费时间再次寻找解决办法。 Intelij IDEA 配置Tomcat时…

【Spring专题】Spring之Bean的生命周期源码解析——阶段二(二)(IOC之属性填充/依赖注入)

目录 前言阅读准备阅读指引阅读建议 课程内容一、依赖注入方式&#xff08;前置知识&#xff09;1.1 手动注入1.2 自动注入1.2.1 XML的autowire自动注入1.2.1.1 byType&#xff1a;按照类型进行注入1.2.1.2 byName&#xff1a;按照名称进行注入1.2.1.3 constructor&#xff1a;…

uniapp小程序实现上传图片功能,并显示上传进度

效果图&#xff1a; 实现方法&#xff1a; 一、通过uni.chooseMedia(OBJECT)方法&#xff0c;拍摄或从手机相册中选择图片或视频。 官方文档链接: https://uniapp.dcloud.net.cn/api/media/video.html#choosemedia uni.chooseMedia({count: 9,mediaType: [image,video],so…

【Django】无法从“django.utils.encoding”导入名称“force_text”

整晚处理 Django 的导入错误。 我将把它作为提醒&#xff0c;希望处于相同情况的人数会减少。 原因 某些软件包版本不支持Django 4 请看下表并决定Django和Python的版本 方案 如果出现难以响应&#xff0c;或者更改环境麻烦&#xff0c;请尝试以下操作 例如出现以下错误 …

【制作npm包2】了解 package.json 相关配置

制作npm包目录 本文是系列文章&#xff0c; 作者一个橙子pro&#xff0c;本系列文章大纲如下。转载或者商业修改必须注明文章出处 一、申请npm账号、个人包和组织包区别 二、了解 package.json 相关配置 三、 了解 tsconfig.json 相关配置 四、 api-extractor 学习 五、npm包…

(六)、深度学习框架中的算子

1、深度学习框架算子的基本概念 深度学习框架中的算子&#xff08;operator&#xff09;是指用于执行各种数学运算和操作的函数或类。这些算子通常被用来构建神经网络的各个层和组件&#xff0c;实现数据的传递、转换和计算。 算子是深度学习模型的基本组成单元&#xff0c;它们…

程序的DAC检查与LSM简介

程序的DAC检查 在Linux中&#xff0c;程序的DAC&#xff08;Discretionary Access Control&#xff0c;自主访问控制&#xff09;检查是指操作系统对程序执行期间对文件和资源的访问权限进行的检查。 Linux使用一种基于权限的访问控制模型&#xff0c;其中每个文件和资源都与…

Spark 图计算ONEID 进阶版

0、环境信息 本文采用阿里云maxcompute的spark环境为基础进行的&#xff0c;搭建本地spark环境参考搭建Windows开发环境_云原生大数据计算服务 MaxCompute-阿里云帮助中心 版本spark 2.4.5&#xff0c;maven版本大于3.8.4 ①配置pom依赖 详见2-1 ②添加运行jar包 ③添加配置信…

【Linux】IO多路转接——poll接口

目录 poll初识 poll函数 poll服务器 poll的优点 poll的缺点 poll初识 poll也是系统提供的一个多路转接接口。 poll系统调用也可以让我们的程序同时监视多个文件描述符上的事件是否就绪&#xff0c;和select的定位是一样的&#xff0c;适用场景也是一样的。 poll函数 po…

LC-将有序数组转换为二叉搜索树

LC-将有序数组转换为二叉搜索树 链接&#xff1a;https://leetcode.cn/problems/convert-sorted-array-to-binary-search-tree/description/ 描述&#xff1a; 给你一个整数数组 nums &#xff0c;其中元素已经按 升序 排列&#xff0c;请你将其转换为一棵 高度平衡 二叉搜索…