前端生成图片验证码怎么做?

##题记:我们实现一个功能首先想一下我们需要做哪些工作,比如我们需要生成一个随机的图片验证码,我们需要一个就是点击事件获取验证码,通过接口我们去获取图片路径进行渲染就行,这里边还要牵扯一件事情就是获取一个随机数字,通过随机数字我们传给后端索取一个随机图片;

##逻辑图:

 ##效果图:

 ##代码实现:

###01.定义变量;

identifyCode2: '',//随机数字
downloadUrl:'',//图片路径

###02.随机数的方法;

randomNum(min, max) {return Math.floor(Math.random() * (max - min) + min)
},// 生成四位随机验证码
makeCode(o, l) {for (let i = 0; i < l; i++) {this.identifyCode2 += this.identifyCodes[this.randomNum(0, this.identifyCodes.length)]}
},

###03.验证码的方法;

// 获取图片验证码
refreshCode() {api.captcha({ sessionId: this.identifyCode2 }).then((res) => {if (res.success) {this.downloadUrl = res.datathis.sessionId = this.identifyCode2}})
},

###template实现;

<span class="refreshCode" @click="refreshCode"><img :src="downloadUrl" width="100" height="36">
</span>

喜欢的话点个赞吧!!!

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

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

相关文章

HTTP之Session、Cookie 与 Application

目录 简介cookiecookie生命周期 sessionsession生命周期 HTTP cookies示例application 简介 cookie、seesion、application三个都会缓存我们用户状态的数据&#xff0c;使得我们在浏览器访问网站时可以更快速的获取到信息。 主要原因在于HTTP协议是无状态的&#xff0c;我们每…

Git笔记--Ubuntu上传本地项目到github

目录 1--基本配置 2--本地上传 1--基本配置 ① 创建ssh-key cd ~/.sshssh-keygen -t rsa -C "邮箱地址"② 查看并关联ssh-key gedit id_rsa.pub 复制内容&#xff0c;在 GitHub 中依次点击 Settings -> SSH and GPG keys -> New SSH key&#xff0c;将 id…

Linux虚拟机中安装MySQL5.6.34

目录 第一章、xshell工具和xftp的使用1.1&#xff09;xshell下载与安装1.2&#xff09;xshell连接1.3&#xff09;xftp下载安装和连接 第二章、安装MySQL5.6.34&#xff08;不同版本安装方式不同)2.1&#xff09;关闭防火墙&#xff0c;传输MySQL压缩包到Linux虚拟机2.2&#x…

Mybatis 知识点

Mybatis 知识点 1.1 Mybatis 简介 1.1.1 什么是 Mybatis Mybatis 是一款优秀的持久层框架支持定制化 SQL、存储过程及高级映射Mybatis 几乎避免了所有的 JDBC 代码和手动设置参数以及获取结果集MyBatis 可以使用简单的 XML 或注解来配置和映射原生类型、接口和 Java 的 POJO…

Spring的@Scheduled

Spring的Scheduled的默认线程池数量为1&#xff0c;也就是说定时任务是单线程执行的。这意味着最多同时只有一个任务在执行。当一个任务还在执行时&#xff0c;其他任务会等待其完成&#xff0c;然后按照其预定的执行策略依次执行。 测试代码&#xff1a; 启动类上加注解Enab…

网络编程 IO多路复用 [epoll版] (TCP网络聊天室)

//head.h 头文件 //TcpGrpSer.c 服务器端 //TcpGrpUsr.c 客户端 通过IO多路复用实现服务器在单进程单线程下可以与多个客户端交互 API epoll函数 #include<sys/epoll.h> int epoll_create(int size); 功能&#xff1a;创建一个epoll句柄//创建红黑树根…

线程、进程和管程

一、线程 1.1 定义 线程&#xff1a;线程是进程中的实体&#xff0c;一个进程可以拥有多个线程&#xff0c;一个线程必须有一个父进程。线程有时被称为轻量级进程&#xff0c;是程序执行流的最小单元。 线程的组成部分&#xff1a; 1. 线程ID&#xff1a;线程标识符 2. 当前…

【C++从0到王者】第十五站:list源码分析及手把手教你写一个list

文章目录 一、list源码分析1.分析构造函数2.分析尾插等 二、手把手教你写一个list1.结点声明2.list类的成员变量3.list类的默认构造函数4.list类的尾插5.结点的默认构造函数6.list类的迭代器7.设计const迭代器8.list的insert、erase等接口9.size10.list的clear11.list的析构函数…

arm neon/fpu/mfloat

neon官网介绍: Arm Neon technology is an advanced Single Instruction Multiple Data (SIMD) architecture extension for the A-profile and R-profile processors. Neon technology is a packed SIMD architecture. Neon registers are considered as vectors of elements …

前沿分享-会发电的水凝胶敷料

四川大学的研究团队设计了一种新型的伤口敷料&#xff0c; 将电刺激治疗引入伤口敷料&#xff0c;达到营造湿润环境的同时利用电刺激来加速愈合的效果。 上半部分由树状纳米纤维构成&#xff0c;下半部分由双网络导电水凝胶构成&#xff0c;加入了铁离子和儿茶酚。该部分用于贴…

【FPGA IP系列】FIFO的通俗理解

FPGA厂商提供了丰富的IP核&#xff0c;基础性IP核都是可以直接免费调用的&#xff0c;比如FIFO、RAM等等。 本文主要介绍FIFO的一些基础知识&#xff0c;帮助大家能够理解FIFO的基础概念。 一、FIFO介绍 FIFO全称是First In First Out&#xff0c;即先进先出。 FIFO是一个数…

语义检索系统【四】:基于ERNIE-Gram的Pair-wise和基于RocketQA的CrossEncoder训练的单塔模型实现数据精排

搜索推荐系统专栏简介:搜索推荐全流程讲解(召回粗排精排重排混排)、系统架构、常见问题、算法项目实战总结、技术细节以及项目实战(含码源) 专栏详细介绍:搜索推荐系统专栏简介:搜索推荐全流程讲解(召回粗排精排重排混排)、系统架构、常见问题、算法项目实战总结、技术…

无涯教程-Lua - 环境安装

在Windows上安装 为Windows环境开发了一个单独的名为" SciTE"的IDE,可以从https://code.google.com/p/luaforwindows/下载部分。 运行下载的可执行文件以安装Lua IDE。 由于它是一个IDE&#xff0c;因此您可以使用它来创建和构建Lua代码。 如果您有兴趣在命令行模…

微服务架构的模式介绍

1.微服务架构模式方案 用Scale Cube方法设计应用架构&#xff0c;将应用服务按功能拆分成一组相互协作的服务。每个服务负责一组特定、相关的功能。每个服务可以有自己独立的数据库&#xff0c;从而保证与其他服务解耦。 1.1 聚合器微服务设计模式 聚合器调用多个服务实现应用程…

Jmeter远程服务模式运行时引用csv文件的路径配置

问题 在使用jmeter过程中&#xff0c;本机的内存等配置不足&#xff0c;启动较多的线程时&#xff0c;可以采用分布式运行。 在分布式运行的时候&#xff0c;jmeter会自动将脚本从master主机发送到remote主机上&#xff0c;所以不需要考虑将脚本拷贝到remote主机。但是jmeter…

UPnP是什么?有什么更好的连接方案?快解析内网穿透

一、UPnP是什么 有些小伙伴对于UPnP并不了解&#xff0c;其实UPnP只是一种网络协议&#xff0c;主要作用就是简化家庭和企业网络中设备之间的连接和通信过程&#xff0c;它的主要目标是实现网络的无缝连接&#xff0c;并简化相关网络操作。 二、UPnP有什么主要作用&#xff1…

125.验证回文串

目录 一、题目 二、代码 一、题目 125. 验证回文串 - 力扣&#xff08;LeetCode&#xff09; 二、代码 class Solution { public: bool ABC(char& s) {if (s > 65 && s < 90){s 32;return true;}if (s > 97 && s < 122){return true;}if …

Chapter 10: Dictionaries | Python for Everybody 讲义笔记_En

文章目录 Python for Everybody课程简介DictionariesDictionariesDictionary as a set of countersDictionaries and filesLooping and dictionariesAdvanced text parsingDebuggingGlossary Python for Everybody Exploring Data Using Python 3 Dr. Charles R. Severance 课程…

linux安装Tomcat及部署jpress的详细教程!!!

一、YUM在线安装 1、查看Tomcat相关安装包 [rootlocalhost ~]# yum list | grep tomcat tomcat.noarch 7.0.76-16.el7_9 updates tomcat-admin-webapps.noarch 7.0.76-16.el7_9 updates tomcat-docs…

2D视觉检测算法整理

1.ROI pooling 和 ROI align的区别 ROI pooling第一步根据候选区域找特征图的位置&#xff0c;可能不是刚好对应&#xff0c;需要一次量化&#xff0c;如上图所示&#xff0c;第二次是特征图需要转化为特定的大小&#xff0c;这时候pooling可能也不能正好整除&#xff0c;所以第…