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

news2024/11/25 21:40:29

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

##逻辑图:

 ##效果图:

 ##代码实现:

###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.data
      this.sessionId = this.identifyCode2
     }
   })
},

###template实现;

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

喜欢的话点个赞吧!!!

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

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

相关文章

uniapp开发小程序-实现中间凸起的 tabbar

一、效果展示&#xff1a; 二、代码实现&#xff1a; 1.首先在pages.json文件中进行tabbar的样式和列表配置&#xff0c;代码如下&#xff1a; {"pages": [ //pages数组中第一项表示应用启动页&#xff0c;参考&#xff1a;https://uniapp.dcloud.io/collocation/p…

Stable Diffusion AI绘画学习指南【本地环境搭建win+mac】

一、硬件配配置要求 系统&#xff1a;windows 10 / Mac os 硬盘&#xff1a;C 盘预留 15GB 以上&#xff0c;其他盘 50GB 以上,Stable Ddiffusion的很多大模型都是以 GB 起步。 显卡&#xff1a;4GB 以上&#xff0c;建议 8GB, 效率高&#xff0c;能玩大尺寸的图 CPU&…

Socks IP轮换:为什么是数据挖掘和Web爬取的最佳选择?

在数据挖掘和Web爬取的过程中&#xff0c;IP轮换是一个非常重要的概念。数据挖掘和Web爬取需要从多个网站或来源获取数据&#xff0c;而这些网站通常会对来自同一IP地址的请求进行限制或封锁。为了避免这些问题&#xff0c;数据挖掘和Web爬取过程中需要使用Socks IP轮换技术。在…

Redis秒杀:一人一单问题及初步解决

优惠券秒杀一人一单 前言一、需求以及之前存在的问题二、增加一人一单逻辑1.初步代码2.封装一人一单逻辑3.控制锁的粒度 三、事务控制问题四、总结 前言 跟随黑马虎哥学习redis&#xff1a; 这是我认为b站上最好的redis教程&#xff0c;各方面讲解透彻&#xff0c;知识点覆盖…

Mr. Cappuccino的第53杯咖啡——Mybatis源码分析

Mybatis源码分析 Mybatis源码分析入口1. 读取配置文件总结 2. 解析配置文件核心代码&#xff08;一&#xff09;核心代码&#xff08;二&#xff09;分析parse()方法分析build()方法 总结 3. 获取SqlSession总结 4. 获取mapper代理对象总结 5. 使用mapper代理对象执行Sql语句二…

基于SpringBoot+Vue的会员制医疗预约服务管理信息系统设计与实现(源码+LW+部署文档等)

博主介绍&#xff1a; 大家好&#xff0c;我是一名在Java圈混迹十余年的程序员&#xff0c;精通Java编程语言&#xff0c;同时也熟练掌握微信小程序、Python和Android等技术&#xff0c;能够为大家提供全方位的技术支持和交流。 我擅长在JavaWeb、SSH、SSM、SpringBoot等框架…

Android Studio log的快捷键和使用

输入logi&#xff0c;然后按下Tab键&#xff0c;会自动补全一条info级别的打印日志。输入logw&#xff0c;按下Tab键&#xff0c;会自动补全一条warn级别的打印日志&#xff0c;以此类推。 如下图所示&#xff1a;

C#项目发布

C#项目发布 vs code 打包iis 配置 vs code 打包 iis 配置

VMware Linux Centos 配置网络并设置为静态ip

在root用户下进行以下操作 1. 查看子网ip和网关 &#xff08;1&#xff09;进入虚拟网络编辑器 &#xff08;2&#xff09;进入NAT设置 &#xff08;3&#xff09;记录子网IP和子网掩码 2. 修改网络配置文件 &#xff08;1&#xff09;cd到网络配置文件路径下 [rootlo…

【视觉SLAM入门】5.1. 特征提取和匹配--FAST,ORB(关键点描述子),2D-2D对极几何,本质矩阵,单应矩阵,三角测量,三角化矛盾

"不言而善应" 0. 基础知识1. 特征提取和匹配1.1 FAST关键点1.2 ORB的关键点--改进FAST1.3 ORB的描述子--BRIEF1.4 总结 2. 对极几何&#xff0c;对极约束2.1 本质矩阵(对极约束)2.1.1 求解本质矩阵2.1.2 恢复相机运动 R &#xff0c; t R&#xff0c;t R&#xff0c;…

推荐几款小众且无广告的软件,你值得拥有

你是否喜欢一些小众且无广告的软件&#xff1f;如果是的话&#xff0c;我这边有一些给你推荐的。 护眼软件——EyeLoveU ​ EyeLoveU是一款免费的护眼软件&#xff0c;可以在你使用电脑一段时间后&#xff0c;提醒你该让眼睛休息。EyeLoveU是一种智能的眼睛保护程序&#xff…

python tkinker界面

import tkinter from PIL import Image, ImageTkdog tkinter.Tk() # 设置图片描绘的坐标&#xff0c;注意乘号是字母x dog.geometry(500x500200100) # 不允许修改大小 dog.resizable(False, False) # 不显示标题栏 dog.overrideredirect(True) # 设置白色透明色&#xff0c;这…

【玩转pandas系列】数据清洗(文末送书福利)

文章目录 一、重复值检测二、元素替换1️⃣ 元素替换replace2️⃣ 数据映射map 三、修改索引1️⃣ 修改索引名rename2️⃣ 设置索引和重置索引 四、数据处理1️⃣ apply与applymap2️⃣ transform 五、异常值处理六、抽样聚合函数1️⃣ 抽样2️⃣ 数学函数 七、分组聚合&#x…

DAY16_VUE基本用法详细版

目录 0 HBuilderX修改注释0 HBuilderX 修改.VUE中的注释颜色1 Vue入门1.1 什么是Vue1.2 Vue优点1.3 Vue案例1.3.1入门案例1.3.2 v-cloak属性1.3.3.1 v-text 指令1.3.3.2 v-html 指令1.3.3.3 v-pre 指令1.3.3.4 v-once 指令1.3.3.5 v-model 指令 1.3.4 MVVM思想 1.4 事件绑定1.4…

OpenLayers入门,OpenLayers如何加载WFS服务的要素资源数据

专栏目录: OpenLayers入门教程汇总目录 前言 本章讲解如何使用OpenLayers加载WFS服务的要素资源数据。 WFS规范介绍 WFS是基于地理要素级别的数据共享和数据操作,WFS规范定义了若干基于地理要素(Feature)级别的数据操作接口,并以 HTTP 作为分布式计算平台。通过 WFS服…

如何将工作可视化管理,工作流程管理

看板利用了对视觉内容的偏好&#xff0c;可以帮助团队理解和分析在工作中发生了什么&#xff0c;遇到了哪些问题和瓶颈&#xff0c;我们可以通过看板更好的可视化工作流程&#xff0c;可以在看板内自定义工作流程&#xff0c; 首先创建工作流任务看板 通过Leangoo领歌敏捷看板…

AD21 PCB设计的高级应用(七)盲埋孔的设置

&#xff08;七&#xff09;盲埋孔的设置 1.盲埋孔的设置2.Pad/Via模板的使用 1.盲埋孔的设置 随着目前便携式产品的设计朝着小型化和高密度的方向发展,PCB的设计难度也越来越大,对 PCB 的生产工艺提出了更高的要求。在目前大部分的便携式产品中 0.65mm间距以下 BGA封装均使用…

C#+WPF上位机开发(模块化+反应式)

在上位机开发领域中&#xff0c;C#与C两种语言是应用最多的两种开发语言&#xff0c;在C语言中&#xff0c;与之搭配的前端框架通常以QT最为常用&#xff0c;而C#语言中&#xff0c;与之搭配的前端框架是Winform和WPF两种框架。今天我们主要讨论一下C#和WPF这一对组合在上位机开…

Android Layout大点兵

原文链接 Android Layout大点兵 智能手机催生了移动互联时代&#xff0c;现如今移动应用越来越成为最为核心的终端。而GUI页面是移动互联终端的标配&#xff0c;做好一个GUI页面&#xff0c;是非常重要的&#xff0c;能极大的提升用户体验和用户满意度。安桌生态&#xff0c;自…

无涯教程-jQuery - width( val )方法函数

width(val)方法设置每个匹配元素的CSS宽度。 width( val ) - 语法 selector.width( val ) 这是此方法使用的所有参数的描述- val - 这是元素的宽度。如果未指定任何显式单位(如em或&#xff05;)&#xff0c;则将" px"连接到该值。 width( val ) - 示例 以…