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

随机验证码vue实现,登录验证码随机验证码数字和字母类型的

1、组件

<!--loginCode登录验证码组件-->

<template>

  <canvas id="canvasCode" :width="contentWidth" :height="contentHeight" />

</template>

<script>

export default {

  name: 'LoginCode',

  props: {

    identifyCode: {

      type: String,

      default: '6834'

    },

    fontSizeMin: {

      type: Number,

      default: 20

    },

    fontSizeMax: {

      type: Number,

      default: 38

    },

    backgroundColorMin: {

      type: Number,

      default: 180

    },

    backgroundColorMax: {

      type: Number,

      default: 240

    },

    colorMin: {

      type: Number,

      default: 50

    },

    colorMax: {

      type: Number,

      default: 160

    },

    lineColorMin: {

      type: Number,

      default: 40

    },

    lineColorMax: {

      type: Number,

      default: 180

    },

    dotColorMin: {

      type: Number,

      default: 0

    },

    dotColorMax: {

      type: Number,

      default: 255

    },

    contentWidth: {

      type: Number,

      default: 110

    },

    contentHeight: {

      type: Number,

      default: 46

    }

  },

  watch: {

    identifyCode() {

      this.drawPic()

    }

  },

  mounted() {

    this.drawPic()

  },

  methods: {

    // 生成一个随机数

    randomNum(min, max) {

      return Math.floor(Math.random() * (max - min) + min)

    },

    // 生成一个随机的颜色

    randomColor(min, max) {

      const r = this.randomNum(min, max)

      const g = this.randomNum(min, max)

      const b = this.randomNum(min, max)

      return 'rgb(' + r + ',' + g + ',' + b + ',' + '0.7' + ')'

    },

    drawPic() {

      const canvas = document.getElementById('canvasCode')

      const ctx = canvas.getContext('2d')

      ctx.textBaseline = 'bottom'

      // 绘制背景

      ctx.fillStyle = this.randomColor(

        this.backgroundColorMin,

        this.backgroundColorMax

      )

      ctx.fillRect(0, 0, this.contentWidth, this.contentHeight)

      // 绘制文字

      for (let i = 0; i < this.identifyCode.length; i++) {

        this.drawText(ctx, this.identifyCode[i], i)

      }

      this.drawLine(ctx)

      this.drawDot(ctx)

    },

    drawText(ctx, txt, i) {

      ctx.fillStyle = this.randomColor(this.colorMin, this.colorMax)

      ctx.font =

        this.randomNum(this.fontSizeMin, this.fontSizeMax) + 'px SimHei'

      const x = (i + 1) * (this.contentWidth / (this.identifyCode.length + 1))

      const y = this.randomNum(this.fontSizeMax, this.contentHeight - 5)

      var deg = this.randomNum(-45, 45)

      // 修改坐标原点和旋转角度

      ctx.translate(x, y)

      ctx.rotate((deg * Math.PI) / 180)

      ctx.fillText(txt, 0, 0)

      // 恢复坐标原点和旋转角度

      ctx.rotate((-deg * Math.PI) / 180)

      ctx.translate(-x, -y)

    },

    drawLine(ctx) {

      // 绘制干扰线

      for (let i = 0; i < 8; i++) {

        ctx.strokeStyle = this.randomColor(

          this.lineColorMin,

          this.lineColorMax

        )

        ctx.beginPath()

        ctx.moveTo(

          this.randomNum(0, this.contentWidth),

          this.randomNum(0, this.contentHeight)

        )

        ctx.lineTo(

          this.randomNum(0, this.contentWidth),

          this.randomNum(0, this.contentHeight)

        )

        ctx.stroke()

      }

    },

    drawDot(ctx) {

      // 绘制干扰点

      for (let i = 0; i < 100; i++) {

        ctx.fillStyle = this.randomColor(0, 255)

        ctx.beginPath()

        ctx.arc(

          this.randomNum(0, this.contentWidth),

          this.randomNum(0, this.contentHeight),

          1,

          0,

          2 * Math.PI

        )

        ctx.fill()

      }

    }

  }

}

</script>


2、登录页面上使用

data里面定义值

     identifyCodeType: 'abcdefghuiokvbnm1234567890', // 定义验证类型 1.数字 2.字母

      identifyCode: '',

      inputCode: '', // text框输入的验证码

// 导入组件

import loginCode from '@/components/loginCode.vue'

 <el-form-item prop="username" style="position: relative;">

                <!-- <span class="el-icon-document" style="font-size:20px;color:#A7A7A7;z-index:1;position: absolute;top:29%;" /> -->

                <span class="svg-container">

                  <svg-icon icon-class="login-user1" class="svg-icon" />

                </span>

                <el-input

                  v-model="inputCode"

                  style="width: 305px"

                  type="text"

                  placeholder="请输入您的验证码"

                />

                <div style="position: absolute;top:2px;right:0px" @click="refreshCode()">

                  <loginCode :identify-code="identifyCode" />

                </div>

                <!-- <div style="display: flex; align-items: center; justify-content: center"> -->

                <!-- <span>验证码:</span> -->

                <!--   <el-input

                    v-model="inputCode"

                    style="width: 180px"

                    type="text"

                    placeholder="请输入您的验证码"

                  /> -->

                <!--  <div @click="refreshCode()">

                    <loginCode :identify-code="identifyCode" />

                  </div> -->

                <!-- </div> -->

              </el-form-item>

 mounted() {

    this.refreshCode()

  },

 // 验证码规则

    getSubmitData() {

      if (this.inputCode === '') {

        alert('请输入验证码')

        return

      }

      if (this.identifyCode !== this.inputCode) {

        this.inputCode = ''

        this.refreshCode()

        alert('请输入正确的验证码!')

        return

      } else {

        this.$message({

          message: '验证成功',

          type: 'success'

        })

      }

    },

    // 验证码

    randomNum(min, max) {

      return Math.floor(Math.random() * (max - min) + min)

    },

    // 初始化验证码

    refreshCode() {

      this.identifyCode = '' // 输入框置空

      this.makeCode(this.identifyCodeType, 4) // 验证码长度为4

    },

    // 随机切换验证码

    makeCode(o, l) {

      for (let i = 0; i < l; i++) {

        this.identifyCode +=

          this.identifyCodeType[

            this.randomNum(0, this.identifyCodeType.length)

          ]

      }

      console.log(this.identifyCode)

    },

验证码校验和登录合并

handleLogin() {

      // 验证码校验

      if (this.inputCode === '') {

        alert('请输入验证码')

        return

      }

      if (this.identifyCode !== this.inputCode) {

        this.inputCode = ''

        this.refreshCode()

        alert('请输入正确的验证码!')

        return

      } else {

        this.$message({

          message: '验证成功',

          type: 'success'

        })

      }

相关文章:

随机验证码vue实现,登录验证码随机验证码数字和字母类型的

1、组件 <!--loginCode登录验证码组件--> <template> <canvas id"canvasCode" :width"contentWidth" :height"contentHeight" /> </template> <script> export default { name: LoginCode, props: { identif…...

xlrd与xlwt操作Excel文件详解

Python操作Excel的模块有很多&#xff0c;并且各有优劣&#xff0c;不同模块支持的操作和文件类型也有不同。下面是各个模块的支持情况&#xff1a; .xls.xlsx获取文件内容写入数据修改文件内容保存样式调整插入图片xlrd√√√xlwt√√√√√xlutils√√√√xlwings√√√√√…...

A Survey of Embodied AI: From Simulators to Research Tasks 论文阅读

论文信息&#xff1a; 题目&#xff1a;A Survey of Embodied AI: From Simulators to Research Tasks 作者&#xff1a;Jiafei Duan, Samson Yu 来源&#xff1a;arXiv 时间&#xff1a;2022 Abstract 通过评估当前的九个具体人工智能模拟器与我们提出的七个功能&#xff0…...

spark-sql数据重复之File Output Committer问题

前言 我们先来回顾下之前介绍过的三种Committer&#xff1a;FileOutputCommitter V1、FileOutputCommitter V2、S3A Committer&#xff0c;其基本代表了整体的演进趋势。 核心代码讲解详细参照&#xff1a;Spark CommitCoordinator 保证数据一致性 OutputCommitter commitTask…...

面试热题(前中序遍历构建树)

给定两个整数数组 preorder 和 inorder &#xff0c;其中 preorder 是二叉树的先序遍历&#xff0c; inorder 是同一棵树的中序遍历&#xff0c;请构造二叉树并返回其根节点。 题目中是给定两个数组&#xff0c;一个是存放这颗树的前序遍历的数组&#xff0c;一个是存放这棵树的…...

美术:贴图

游戏模型制作流程&#xff0c;SP和BP根据情况来选择软件对UV进行处理 3Dmax 制作模型和动画&#xff08;橘肉&#xff09;RizomUV 对模型进行展UV&#xff08;橘皮&#xff09;Substance Painter 纹理手绘&#xff08;给橘皮制定想要的皮肤&#xff09;BodyPaint 3D 纹理手绘&a…...

[MAUI]模仿微信“按住-说话”的交互实现

今天使用这个控件&#xff0c;做一个模仿微信“按住-说话”的小功能&#xff0c;最终效果如下&#xff1a; 使用.NET MAUI实现跨平台支持&#xff0c;本项目可运行于Android、iOS平台。 创建页面布局 新建.NET MAUI项目&#xff0c;命名HoldAndSpeak MainPage.xaml中创建一个…...

windows开机运行jar

windows开机自启动jar包&#xff1a; 一、保存bat批处理文件 echo off %1 mshta vbscript:CreateObject("WScript.Shell").Run("%~s0 ::",0,FALSE)(window.close)&&exit java -jar E:\projects\ruoyi-admin.jar > E:\server.log 2>&1 &…...

使用DockerFile一键创建自定义linux开发环境

1&#xff0c;使用dcokerfile文件构建镜像&#xff0c;参考如下文件 # 使用ubuntu:20.04镜像作为基础 FROM ubuntu:20.04# 调整时区 ENV DEBIAN_FRONTENDnoninteractive TZAsia/Shanghai# build参数 ARG userxiang usergroupduo# 设置默认工作路径 WORKDIR /home/${user}# 拷贝…...

“深入探索JVM:解密Java虚拟机的工作原理“

标题&#xff1a;深入探索JVM&#xff1a;解密Java虚拟机的工作原理 摘要&#xff1a;本文将深入探索Java虚拟机&#xff08;JVM&#xff09;的工作原理&#xff0c;从字节码到实际执行过程&#xff0c;从内存管理到垃圾回收等方面进行解析&#xff0c;帮助读者更好地理解和优…...

【华为OD机试】数字最低位排序【2023 B卷|100分】

【华为OD机试】-真题 !!点这里!! 【华为OD机试】真题考点分类 !!点这里 !! 题目描述 给定一个非空数组(列表) 起元素数据类型为整型 请按照数组元素十进制最低位从小到大进行排序 十进制最低位相同的元素,相对位置保持不变 当数组元素为负值时,十进制最低为等同于去除符号…...

【Odoo16前端源码分析】xml模板的加载

一、模板内容的来源 情况A&#xff0c;组件类的template属性&#xff0c;比如ActionContainer.template /* odoo/addons/web/static/src/webclient/actions/action_container.js */export class ActionContainer extends Component {setup() {..} } .. ActionContainer.templ…...

Open3D (C++) 计算矩阵的广义逆

目录 一、算法原理1、广义逆2、计算过程二、代码实现三、结果展示四、参考链接本文由CSDN点云侠原创,原文链接。爬虫网站自重,把自己当个人,爬些不完整的误导别人有意思吗???? 一、算法原理 1、广义逆 非方阵不存在逆,但是存在广义逆(伪逆)。对于一个矩阵...

11.物联网操作系统内存管理

一。STM32编译过程及程序组成 STM32编译过程 程序的组成、存储与运行 MDK生成的主要文件分析 1.STM32编译过程 1.源文件&#xff08;Source code&#xff09;--》目标文件&#xff08;Object code&#xff09; .c(C语言)通过armcc生成.o&#xff0c;.s&#xff08;汇编&…...

举办活动发布会,如何得到媒体支持?

传媒如春雨&#xff0c;润物细无声&#xff0c;大家好&#xff0c;我是51媒体网胡老师。 举办活动发布会并得到媒体报道的支持是一个关键的宣传和推广手段。以下是一些建议&#xff0c;帮助你增加吸引媒体关注和报道的机会&#xff1a; 1. 策划新闻价值&#xff1a;确保你的发…...

1139 First Contact(unique函数,string.substr()函数)

PTA | 程序设计类实验辅助教学平台 用map套个set来实现邻接表&#xff08;排序都免了&#xff09; #include<bits/stdc.h> using namespace std; int n,m,k; string a,b; map<string,set<string>>mp; int main() {cin.tie(0);cin >> n >> m;fo…...

Python元编程-装饰器介绍、使用

目录 一、Python元编程装饰器介绍 二、装饰器使用 1. 实现认证和授权功能 2.实现缓存功能 3.实现日志输出功能 三、附录 1. logging.basicConfig介绍 2. 精确到毫秒&#xff0c;打印时间 方法一&#xff1a;使用datetime 方法二&#xff1a;使用time 一、Python元编程…...

python进程池的使用

进程池的创建 apply() apply()方法用于向进程池提交一个任务&#xff0c;并等待任务完成并返回结果。 apply_async() apply_async()方法用于向进程池提交一个异步任务&#xff08;即无需等待任务完成&#xff09;&#xff0c;将任务加入到进程池的队列里&#xff0c;并立即…...

Dockerfile构建lamp镜像

1、构建目录 [rootdocker ~]# mkdir compose_lamp [rootdocker ~]# cd compose_lamp/ 2、编写Docekerfile [rootdocker compose_lamp]# vim Dockerfile #基础镜像 FROM centos:7#维护该镜像的用户信息 MAINTAINER Crushlinux <crushlinux163.com>#安装httpd RUN yum -…...

LeetCode724. 寻找数组的中心下标

题干 给你一个整数数组 nums &#xff0c;请计算数组的 中心下标 。 数组 中心下标 是数组的一个下标&#xff0c;其左侧所有元素相加的和等于右侧所有元素相加的和。 如果中心下标位于数组最左端&#xff0c;那么左侧数之和视为 0 &#xff0c;因为在下标的左侧不存在元素。…...

【kafka】Golang实现分布式Masscan任务调度系统

要求&#xff1a; 输出两个程序&#xff0c;一个命令行程序&#xff08;命令行参数用flag&#xff09;和一个服务端程序。 命令行程序支持通过命令行参数配置下发IP或IP段、端口、扫描带宽&#xff0c;然后将消息推送到kafka里面。 服务端程序&#xff1a; 从kafka消费者接收…...

java_网络服务相关_gateway_nacos_feign区别联系

1. spring-cloud-starter-gateway 作用&#xff1a;作为微服务架构的网关&#xff0c;统一入口&#xff0c;处理所有外部请求。 核心能力&#xff1a; 路由转发&#xff08;基于路径、服务名等&#xff09;过滤器&#xff08;鉴权、限流、日志、Header 处理&#xff09;支持负…...

从零实现富文本编辑器#5-编辑器选区模型的状态结构表达

先前我们总结了浏览器选区模型的交互策略&#xff0c;并且实现了基本的选区操作&#xff0c;还调研了自绘选区的实现。那么相对的&#xff0c;我们还需要设计编辑器的选区表达&#xff0c;也可以称为模型选区。编辑器中应用变更时的操作范围&#xff0c;就是以模型选区为基准来…...

智能在线客服平台:数字化时代企业连接用户的 AI 中枢

随着互联网技术的飞速发展&#xff0c;消费者期望能够随时随地与企业进行交流。在线客服平台作为连接企业与客户的重要桥梁&#xff0c;不仅优化了客户体验&#xff0c;还提升了企业的服务效率和市场竞争力。本文将探讨在线客服平台的重要性、技术进展、实际应用&#xff0c;并…...

如何在看板中有效管理突发紧急任务

在看板中有效管理突发紧急任务需要&#xff1a;设立专门的紧急任务通道、重新调整任务优先级、保持适度的WIP&#xff08;Work-in-Progress&#xff09;弹性、优化任务处理流程、提高团队应对突发情况的敏捷性。其中&#xff0c;设立专门的紧急任务通道尤为重要&#xff0c;这能…...

【ROS】Nav2源码之nav2_behavior_tree-行为树节点列表

1、行为树节点分类 在 Nav2(Navigation2)的行为树框架中,行为树节点插件按照功能分为 Action(动作节点)、Condition(条件节点)、Control(控制节点) 和 Decorator(装饰节点) 四类。 1.1 动作节点 Action 执行具体的机器人操作或任务,直接与硬件、传感器或外部系统…...

数据链路层的主要功能是什么

数据链路层&#xff08;OSI模型第2层&#xff09;的核心功能是在相邻网络节点&#xff08;如交换机、主机&#xff09;间提供可靠的数据帧传输服务&#xff0c;主要职责包括&#xff1a; &#x1f511; 核心功能详解&#xff1a; 帧封装与解封装 封装&#xff1a; 将网络层下发…...

【android bluetooth 框架分析 04】【bt-framework 层详解 1】【BluetoothProperties介绍】

1. BluetoothProperties介绍 libsysprop/srcs/android/sysprop/BluetoothProperties.sysprop BluetoothProperties.sysprop 是 Android AOSP 中的一种 系统属性定义文件&#xff08;System Property Definition File&#xff09;&#xff0c;用于声明和管理 Bluetooth 模块相…...

华为云Flexus+DeepSeek征文|DeepSeek-V3/R1 商用服务开通全流程与本地部署搭建

华为云FlexusDeepSeek征文&#xff5c;DeepSeek-V3/R1 商用服务开通全流程与本地部署搭建 前言 如今大模型其性能出色&#xff0c;华为云 ModelArts Studio_MaaS大模型即服务平台华为云内置了大模型&#xff0c;能助力我们轻松驾驭 DeepSeek-V3/R1&#xff0c;本文中将分享如何…...

Python基于历史模拟方法实现投资组合风险管理的VaR与ES模型项目实战

说明&#xff1a;这是一个机器学习实战项目&#xff08;附带数据代码文档&#xff09;&#xff0c;如需数据代码文档可以直接到文章最后关注获取。 1.项目背景 在金融市场日益复杂和波动加剧的背景下&#xff0c;风险管理成为金融机构和个人投资者关注的核心议题之一。VaR&…...