当前位置: 首页 > news >正文

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

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

##逻辑图:

 ##效果图:

 ##代码实现:

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

喜欢的话点个赞吧!!!

相关文章:

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

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

【Java】springboot框架 粮油质量溯源MES生产加工管理系统源码

粮油质量溯源MES生产加工管理系统源码&#xff0c;实现一物一码&#xff0c;全程追溯&#xff0c;正向追踪&#xff0c;逆向溯源。技术架构&#xff1a;spring bootmybatiseasyuimysql 。 粮油生产质量追溯系统实现种植主体、种植基地、生产计划、压榨、精炼、包装、销售、物料…...

macOS install redis遇到的bug(tar包,homebrew安装,守护进程redis.conf配置)

官网下载tar包再make install 首先是sudo make test的时候一直报 !!! WARNING The following tests failed: *** [err]: trim on SET with big value in tests/unit/type/string.tcl Expected [r memory usage key] < 42000 (context: type source line 478 file /usr/loca…...

面试题:创建JS对象的几种方式?构造函数是什么?new操作符具体干了什么?为什么字符串可以使用length?

内置构造函数还未更新完&#xff0c;待更新。。。 js创建对象的三种方式&#xff1f;构造函数是什么&#xff1f;new操作符具体干了什么&#xff1f;为什么字符串可以使用length&#xff1f; 内置构造函数还未更新完&#xff0c;待更新。。。一、利用对象字面量创建对象二、利用…...

LabVIEW深度相机与三维定位实战(下)

‍‍&#x1f3e1;博客主页&#xff1a; virobotics的CSDN博客&#xff1a;LabVIEW深度学习、人工智能博主 &#x1f384;所属专栏&#xff1a;『LabVIEW深度学习实战』 &#x1f37b;上期文章&#xff1a;『LabVIEW深度相机与三维定位实战&#xff08;上&#xff09;』 &#…...

【基础类】—CSS盒模型的全面认识

一、基本概念&#xff1a;标准IE模型 盒模型&#xff1a;margin border padding content 标准模型&#xff1a;将元素的宽度和高度仅计算为内容区域的尺寸&#xff08;content-box&#xff0c;默认&#xff09; 当CSS盒模型为 标准盒模型 &#xff08;box-sizing: conten…...

ATFX汇评:非农就业报告来袭,汇市或迎剧烈波动

ATFX汇评&#xff1a;美国非农就业报告每月发布一次&#xff0c;其中非农就业人口和失业率两项数据最受关注。7月季调后非农就业人口&#xff0c;将于今日20:30公布&#xff0c;前值为20.9万人&#xff0c;预期值20万人&#xff1b;7月失业率&#xff0c;同一时间公布&#xff…...

SpringBoot的常用注解的服用方式

1. SpringBootApplication 1.1 概述 SpringBootApplication是SpringBoot应用程序的核心注解&#xff0c;通常用于主类上。它包含了以下三个注解&#xff1a; Configuration&#xff1a;表示该类是一个配置类&#xff0c;用于定义Spring的配置信息。EnableAutoConfiguration&…...

[课程][原创]CMakeLists编写实战linux版

课程地址&#xff1a;https://edu.csdn.net/course/detail/38887 课程介绍课程目录讨论留言 你将收获 学会如何编写CMakeLIsts 学会如何调试自己cmake项目 学会如何引用头文件和库 学会如何调用开源库 适用人群 对CMakeLists感兴趣的入门学者 课程介绍 CMake是一个跨…...

静态路由下一跳地址怎么确定(静态路由配置及讲解)

一、用到的所有命令及功能 ①ip route-static 到达网络地址 子网掩码 下一跳 // 配置静态路由下一跳指的是和当前网络直接连接的路由器的接口地址非直连网段必须全部做路由路径是手工指定的&#xff0c;在大规模网络上不能用&#xff0c;效率低&#xff0c;路径是固定的稳定的…...

SPSS‖参数与非参数检验对比课程中的 配对样本T检验

特点&#xff1a;在配对样本T检验中&#xff0c;强调被试一定要同质&#xff08;同一样本&#xff0c;不同变量环境&#xff09;&#xff0c;其目的就为了消除目的是额外变量的影响&#xff0c;更能反映自变量和因变量之间的关系。 •配对样本t检验的过程&#xff0c;是对两个…...

AI赋能转型升级 助力打造“数智辽宁”——首次大模型研讨沙龙在沈成功举行

当前&#xff0c;以“ChatGPT”为代表的大模型正在引领新一轮全球人工智能技术发展浪潮&#xff0c;推动人工智能从以专用小模型定制训练为主的“手工作坊时代”&#xff0c;迈入以通用大模型预训练为主的“工业化时代”&#xff0c;正不断加速实体经济智能化升级&#xff0c;深…...

JVM、Redis、反射

JVM JVM是Java virtual machine&#xff08;Java虚拟机&#xff09;的缩写&#xff0c;是一种用于计算机的规范&#xff0c;是通过在实际计算机上仿真模拟各种计算机功能来实现的。 主要组件构成&#xff1a; 1.类加载器 子系统负责从文件系统或者网络中加载Class文件&…...

【Spring练习项目】博客系统

目录 1.项目展示2.项目结构设计3.项目功能设计4 数据库准备4.1 建表4.2 DB相关数据 5.项目模块6.添加项目公共模块6.1 common6.2 实现前端界面 7.功能实现7.1实现博客列表约定前后端交互接口实现服务器代码实现客户端代码 7.2实现博客详情约定前后端交互接口实现服务器代码实现…...

神策新一代分析引擎架构演进

近日&#xff0c;神策数据已经推出全新的神策分析 2.5 版本&#xff0c;该版本支持分析模型与外部数据的融合性接入&#xff0c;构建全域数据融合模型&#xff0c;实现从用户到经营的全链路、全场景分析。新版本的神策分析能够为企业提供更全面、更有效的市场信息和经营策略&am…...

Systemui的介绍以及与普通应用的差异

一.SystemUI的介绍 简介 SystemUI是Android操作系统的一个关键组件&#xff0c;主要负责管理和提供用户界面的核心元素&#xff0c;如状态栏、导航栏和锁屏界面等。从下面两点出发了解SystemUI的特性&#xff1a; 一下就是systemui的部分界面&#xff0c;还包括锁屏界面&…...

群狼调研—产业园物业满意度的调研对象

群狼调研**&#xff08;湖南物业满意度调查&#xff09;**受顾客委托开展产业园物业满意度调查&#xff0c;产业园物业满意度调研对象&#xff1a;产业园物业满意度调研的对象主要是产业园内的企业和租户。这包括在产业园内租用场地或办公空间的企业、工厂、工作室等&#xff0…...

想参加华为杯竞赛、高教社杯和数学建模国赛的小伙伴看过来

本文目录 ⭐ 赛事介绍⭐ 辅导比赛 ⭐ 赛事介绍 ⭐ 参赛好处 ⭐ 辅导比赛 ⭐ 写在最后 ⭐ 赛事介绍 华为杯全国研究生数学建模竞赛是由华为公司主办的一项面向全国研究生的数学建模竞赛。该竞赛旨在通过实际问题的建模和解决&#xff0c;培养研究生的创新能力和团队合作精神&a…...

ELK 企业级日志分析系统

目录 ELK 概述 1、ELK 简介 2、为什么要使用 ELK&#xff1a; 3、完整日志系统基本特征 4、ELK 的工作原理&#xff1a; 总结 ELK Elasticsearch 集群部署&#xff08;在Node1、Node2节点上操作&#xff09; 1&#xff0e;环境准备 2&#xff0e;部署 Elasticsearch …...

PyTorch Lightning教程六:优化代码

有时候模型训练很慢&#xff0c;代码写得冗长之后&#xff0c;没法诶个检查到底那块出现了占用了时空间&#xff0c;本节通过利用Lightning的一些方法&#xff0c;检查分析是那块代码出现了问题&#xff0c;从而来进一步指导和优化代码 本节主要基于性能分析方法&#xff0c;通…...

2025年能源电力系统与流体力学国际会议 (EPSFD 2025)

2025年能源电力系统与流体力学国际会议&#xff08;EPSFD 2025&#xff09;将于本年度在美丽的杭州盛大召开。作为全球能源、电力系统以及流体力学领域的顶级盛会&#xff0c;EPSFD 2025旨在为来自世界各地的科学家、工程师和研究人员提供一个展示最新研究成果、分享实践经验及…...

质量体系的重要

质量体系是为确保产品、服务或过程质量满足规定要求&#xff0c;由相互关联的要素构成的有机整体。其核心内容可归纳为以下五个方面&#xff1a; &#x1f3db;️ 一、组织架构与职责 质量体系明确组织内各部门、岗位的职责与权限&#xff0c;形成层级清晰的管理网络&#xf…...

《通信之道——从微积分到 5G》读书总结

第1章 绪 论 1.1 这是一本什么样的书 通信技术&#xff0c;说到底就是数学。 那些最基础、最本质的部分。 1.2 什么是通信 通信 发送方 接收方 承载信息的信号 解调出其中承载的信息 信息在发送方那里被加工成信号&#xff08;调制&#xff09; 把信息从信号中抽取出来&am…...

自然语言处理——循环神经网络

自然语言处理——循环神经网络 循环神经网络应用到基于机器学习的自然语言处理任务序列到类别同步的序列到序列模式异步的序列到序列模式 参数学习和长程依赖问题基于门控的循环神经网络门控循环单元&#xff08;GRU&#xff09;长短期记忆神经网络&#xff08;LSTM&#xff09…...

使用 SymPy 进行向量和矩阵的高级操作

在科学计算和工程领域&#xff0c;向量和矩阵操作是解决问题的核心技能之一。Python 的 SymPy 库提供了强大的符号计算功能&#xff0c;能够高效地处理向量和矩阵的各种操作。本文将深入探讨如何使用 SymPy 进行向量和矩阵的创建、合并以及维度拓展等操作&#xff0c;并通过具体…...

Java + Spring Boot + Mybatis 实现批量插入

在 Java 中使用 Spring Boot 和 MyBatis 实现批量插入可以通过以下步骤完成。这里提供两种常用方法&#xff1a;使用 MyBatis 的 <foreach> 标签和批处理模式&#xff08;ExecutorType.BATCH&#xff09;。 方法一&#xff1a;使用 XML 的 <foreach> 标签&#xff…...

HTML前端开发:JavaScript 获取元素方法详解

作为前端开发者&#xff0c;高效获取 DOM 元素是必备技能。以下是 JS 中核心的获取元素方法&#xff0c;分为两大系列&#xff1a; 一、getElementBy... 系列 传统方法&#xff0c;直接通过 DOM 接口访问&#xff0c;返回动态集合&#xff08;元素变化会实时更新&#xff09;。…...

Unity中的transform.up

2025年6月8日&#xff0c;周日下午 在Unity中&#xff0c;transform.up是Transform组件的一个属性&#xff0c;表示游戏对象在世界空间中的“上”方向&#xff08;Y轴正方向&#xff09;&#xff0c;且会随对象旋转动态变化。以下是关键点解析&#xff1a; 基本定义 transfor…...

微服务通信安全:深入解析mTLS的原理与实践

&#x1f525;「炎码工坊」技术弹药已装填&#xff01; 点击关注 → 解锁工业级干货【工具实测|项目避坑|源码燃烧指南】 一、引言&#xff1a;微服务时代的通信安全挑战 随着云原生和微服务架构的普及&#xff0c;服务间的通信安全成为系统设计的核心议题。传统的单体架构中&…...

高防服务器价格高原因分析

高防服务器的价格较高&#xff0c;主要是由于其特殊的防御机制、硬件配置、运营维护等多方面的综合成本。以下从技术、资源和服务三个维度详细解析高防服务器昂贵的原因&#xff1a; 一、硬件与技术投入 大带宽需求 DDoS攻击通过占用大量带宽资源瘫痪目标服务器&#xff0c;因此…...