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

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

##逻辑图:

 ##效果图:

 ##代码实现:

###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>

喜欢的话点个赞吧!!!

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

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…

gateway过滤器没生效,特殊原因

看这边文章的前提&#xff0c;你要会gateway&#xff0c;知道过滤器怎么配置&#xff1f; 直接来看过滤器&#xff0c;局部过滤器 再来看配置 请求路径 http://127.0.0.1:8080/appframework/services/catalog/catalogSpecials.json?pageindex1&pagesize10&pkidd98…

【微服务】springboot整合redis哨兵集群使用详解

目录 一、前言 二、环境准备 三、安装redis 3.1 前置准备 3.1.1 下载安装包 3.1.2 准备依赖环境 3.1.3 上传并解压包 3.2 执行安装 四、搭建redis主从集群 4.1 环境准备 4.2 搭建过程 4.2.1 创建实例文件目录 4.2.2 修改redis.conf配置文件 4.2.3 拷贝配置文件 4…

微信小程序页面传值为对象[Object Object]详解

微信小程序页面传值为对象[Object Object]详解 1、先将传递的对象转化为JSON字符串拼接到url上2、在接受对象页面进行转译3、打印结果 1、先将传递的对象转化为JSON字符串拼接到url上 // info为对象 let stationInfo JSON.stringify(info) uni.navigateTo({url: /pages/statio…

【枚举边+树的直径】CF14D

Problem - 14D - Codeforces 题意&#xff1a; 思路&#xff1a; 两条链不相交&#xff0c;说明是在不同连通分量中&#xff0c;我们可以枚举边来把树分为两个连通分量&#xff0c;然后分别计算直径即可 Code&#xff1a; #include <bits/stdc.h>#define int long lo…

809 服务端程序

809 服务端程序 目录概述需求&#xff1a; 设计思路实现思路分析1.Byte2MessageDecoder2.Tcp client:3.1234.demo 拓展实现 参考资料和推荐阅读 Survive by day and develop by night. talk for import biz , show your perfect code,full busy&#xff0c;skip hardness,make …

微服务性能分析工具 Pyroscope 初体验

Go 自带接口性能分析工具 pprof&#xff0c;较为常用的有以下 4 种分析&#xff1a; CPU Profiling: CPU 分析&#xff0c;按照一定的频率采集所监听的应用程序 CPU&#xff08;含寄存器&#xff09;的使用情况&#xff0c;可确定应用程序在主动消耗 CPU 周期时花费时间的位置…

Vue2 第十二节 Vue组件化编程 (二)

1. VueComponent 2. 单文件组件 一. VueComponent 组件本质上是一个名为VueComponent的构造函数&#xff0c;不是程序员定义的&#xff0c;是Vue.extend生成的只需要写<school/>或者<school><school/>&#xff0c;Vue解析时&#xff0c;会帮我们创建schoo…

[golang gin框架] 44.Gin商城项目-微服务实战之后台Rbac微服务之权限的增删改查微服务

上一节讲解了[golang gin框架] 43.Gin商城项目-微服务实战之后台Rbac微服务之管理员的增删改查以及管理员和角色关联,这里讲解权限管理Rbac微服务权限的增删改查微服务 一.实现后台权限管理Rbac之权限增删改查微服务服务端功能 1.创建Access模型 要实现权限的增删改查,就需要…

深度学习:BatchNorm、LayerNorm、InstanceNorm、GroupNorm和SwitchableNorm的理解

深度学习&#xff1a;BatchNorm、LayerNorm、InstanceNorm、GroupNorm和SwitchableNorm的理解 深度学习中的NormBatchNormLayerNormInstanceNormGroupNormSwitchableNorm 附录 深度学习中的Norm 在深度学习中会经常遇到BatchNorm、LayerNorm、InstanceNorm和GroupNorm&#xf…

处理nacos、tomcat、nginx日志增长过快问题

1.nacos日志清理 修改nacos-logback.xml 将日志级别改为error级&#xff0c;减少info级日志产生量 将<maxHistory>调整为2以下&#xff0c;将 <totalSizeCap>调整为2GB左右 比如&#xff1a; [rootiZ0jlapur4hqjezy8waee0Z logs]# ll -h total 2.1G -rw-r--r-…

pip安装lap出现问题

解决方法一 用conda安装&#xff0c;用以下命令&#xff1a; conda install -c conda-forge lap解决方法二 用pip安装&#xff0c;用以下命令&#xff1a; pip install gitgit://github.com/gatagat/lap.git文章目录 解决方法一解决方法二摘要YoloV8改进策略&#xff1a;基…

pointpillars的demo过程记录

1、进入pp conda activate pp 2、cd到/home/fyy/OpenPCDet-master/tools打开终端 python demo.py --cfg_file cfgs/kitti_models/pointpillar.yaml --ckpt /home/fyy/OpenPCDet-master/pointpillar_7728\ \(1\).pth --data 000009.bin 直接就可以demo显示了

(自控原理)自动控制的分类与基本要求

一、分类 1、线性连续控制系统 2、非线性控制系统 判断是时变时不变看的是系数&#xff0c;判断线性还是非线性看的是变量 二、基本要求 三、自动控制的分析方法

抄写Linux源码(Day1:获取并运行 Linux0.11)

Day1&#xff1a;获取并运行 Linux0.11 参考资料&#xff1a;https://zhuanlan.zhihu.com/p/438577225 这是我参考的一个别人写的 Linux0.11 解读&#xff1a;https://github.com/dibingfa/flash-linux0.11-talk 我获取 Linux-0.11 源码的链接&#xff1a;https://github.com/…

LabVIEW开发航天器动力学与控制仿真系统

LabVIEW开发航天器动力学与控制仿真系统 计算机仿真是工程设计和验证的非常有用的工具。它节省了大量的时间、金钱和精力。航天器动力学与控制仿真系统由LabVIEW程序开发&#xff0c;它是模拟航天器等动态系统的有用工具。还可轻松与硬件连接并输出真实信号。 项目采用系统工…

【Linux】git三板斧教程(免密提交配置)

git 什么是git&#xff1f;Linux下安装git基于git的一些商业网站介绍在gitee上创建仓库注册账号创建项目将仓库克隆到本地 git三板斧git三板斧第一招&#xff1a;git add三板斧第二招&#xff1a;git commit三板斧第三招&#xff1a;git push git免密码提交git log查看提交日志…

拿捏--->逻辑推断问题(猜凶手+猜名次)

文章目录 猜凶手问题题目描述算法思路代码实现 猜名次问题题目描述算法思路代码实现 猜凶手问题 题目描述 算法思路 代码实现 #define _CRT_SECURE_NO_WARNINGS #include<stdio.h> int main() {char killer 0;for (killer A; killer < D; killer){if ((killer ! …

react中的高阶组件理解与使用

一、什么是高阶组件&#xff1f; 其实就是一个函数&#xff0c;参数是一个组件&#xff0c;经过这个函数的处理返回一个功能增加的组件。 二、代码中如何使用 1&#xff0c;高级组件headerHoc 2&#xff0c;在普通组件header中引入高阶组件并导出高阶组件&#xff0c;参数是普…

【 Redis】的乱码问题

问题描述&#xff1a; 使用RedisTemplate存储的数据&#xff0c;在 redis-cli 客户端查看时&#xff0c;key 和 value 都会携带类似\xac\xad\这样的字符串。 原因&#xff1a; 由于默认使用了 jdk 的序列化方式。以下是支持的序列化方式 项目一般都会有缓存&#xff0c;常常…