当前位置: 首页 > 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;通…...

Twilio Breakout SDK:NB-IoT终端轻量级命令通道实现

1. Twilio Breakout Arduino库深度解析&#xff1a;面向NB-IoT终端的轻量级命令通道实现 1.1 库定位与硬件平台约束 Twilio Breakout SDK并非通用型Arduino通信库&#xff0c;而是为特定硬件组合深度定制的窄带物联网&#xff08;NB-IoT&#xff09;终端控制中间件。其设计严格…...

图像面积计算实战:四邻域标记与轮廓算法的对比与应用

1. 图像面积计算的基础概念 在图像处理领域&#xff0c;计算目标对象的面积是最基础也是最重要的任务之一。想象一下医生需要测量肿瘤的大小&#xff0c;或者质检员要计算产品缺陷的面积&#xff0c;这些都离不开准确的面积计算。我刚开始接触这个领域时&#xff0c;常常被各种…...

RGBLEDBlender:嵌入式RGB LED色彩混合与动态控制库

1. RGBLEDBlender 库深度解析&#xff1a;面向嵌入式系统的RGB色彩混合与动态控制方案1.1 库定位与工程价值RGBLEDBlender 是一个轻量级、面向实时性要求的RGB LED色彩混合控制库&#xff0c;专为资源受限的微控制器平台&#xff08;如Arduino系列、STM32F0/F1等Cortex-M0/M3内…...

AI NLP核心技术指南

AI NLP核心技术指南...

Qwen3-TTS-12Hz-1.7B-VoiceDesign提示词工程:精准控制语音输出

Qwen3-TTS-12Hz-1.7B-VoiceDesign提示词工程&#xff1a;精准控制语音输出 用自然语言描述你心中的声音&#xff0c;让AI帮你实现 你有没有试过在脑子里想象一个特别的声音&#xff0c;却不知道怎么用技术参数来表达&#xff1f;比如想要一个"略带沙哑的成熟男声&#xff…...

绝区零自动化助手终极指南:如何实现游戏全自动一条龙服务

绝区零自动化助手终极指南&#xff1a;如何实现游戏全自动一条龙服务 【免费下载链接】ZenlessZoneZero-OneDragon 绝区零 一条龙 | 全自动 | 自动闪避 | 自动每日 | 自动空洞 | 支持手柄 项目地址: https://gitcode.com/gh_mirrors/ze/ZenlessZoneZero-OneDragon 还在为…...

值类型与引用类型:别再只背“栈和堆”了,看这 个实际影响节

基础示例&#xff1a;单工作表 Excel 转 TXT 以下是将一个 Excel 文件中的第一个工作表转换为 TXT 的完整步骤&#xff1a; 1. 加载并读取Excel文件 from spire.xls import * from spire.xls.common import * workbook Workbook() workbook.LoadFromFile("示例.xlsx"…...

大模型SLA指标体系构建,从推理吞吐QPS、上下文长度衰减率到幻觉率基线校准的7维监控矩阵

第一章&#xff1a;大模型工程化服务等级协议SLA设计 2026奇点智能技术大会(https://ml-summit.org) 大模型工程化落地的核心挑战之一&#xff0c;在于将非确定性推理能力封装为可度量、可保障、可运维的生产级服务。SLA设计不再是传统API响应延迟与可用性的简单延伸&#xff…...

基于File-Based App开发MVP项目汤

Issue 概述 先来看看提交这个 Issue 的作者是为什么想到这个点子的&#xff0c;以及他初步的核心设计概念。?? 本 PR 实现了 Apache Gravitino 与 SeaTunnel 的集成&#xff0c;将其作为非关系型连接器的外部元数据服务。通过 Gravitino 的 REST API 自动获取表结构和元数据&…...

HagiCode Desktop 混合分发架构解析:如何用 PP 加速大文件下载闻

一、Actor 模型&#xff1a;不是并发技巧&#xff0c;而是领域单元 Actor 模型的本质是&#xff1a; Actor 是独立运行的实体 Actor 之间只通过消息交互 Actor 内部状态不可被外部直接访问 Actor 自行决定如何处理收到的消息 Actor 模型真正解决的是&#xff1a; 如何在不共享状…...