vue实现登录页面的验证码以及验证过程解析(面向新手)


Posted in Javascript onAugust 02, 2019

做成之后就

vue实现登录页面的验证码以及验证过程解析(面向新手)

是这个样子

接下来上代码

创建一个组件。显示验证码图片

<template>
 <div class="s-canvas">
  <canvas id="s-canvas" :width="contentWidth" :height="contentHeight"></canvas>
 </div>
</template>
<script>
export default{
 name: 'SIdentify',
 props: {
  identifyCode: { // 默认注册码
   type: String,
   default: '1234'
  },
  fontSizeMin: { // 字体最小值
   type: Number,
   default: 25
  },
  fontSizeMax: { // 字体最大值
   type: Number,
   default: 35
  },
  backgroundColorMin: { // 验证码图片背景色最小值
   type: Number,
   default: 200
  },
  backgroundColorMax: { // 验证码图片背景色最大值
   type: Number,
   default: 220
  },
  dotColorMin: { // 背景干扰点最小值
   type: Number,
   default: 60
  },
  dotColorMax: { // 背景干扰点最大值
   type: Number,
   default: 120
  },
  contentWidth: { // 容器宽度
   type: Number,
   default: 90
  },
  contentHeight: { // 容器高度
   type: Number,
   default: 38
  }
 },
 methods: {
  // 生成一个随机数
  randomNum (min, max) {
   return Math.floor(Math.random() * (max - min) + min)
  },
 
  // 生成一个随机的颜色
  randomColor (min, max) {
   let r = this.randomNum(min, max)
   let g = this.randomNum(min, max)
   let b = this.randomNum(min, max)
   return 'rgb(' + r + ',' + g + ',' + b + ')'
  },
 
  drawPic () {
   let canvas = document.getElementById('s-canvas')
   let ctx = canvas.getContext('2d')
   ctx.textBaseline = 'bottom'
   // 绘制背景
   ctx.fillStyle = '#e6ecfd'
   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(50, 160) // 随机生成字体颜色
   ctx.font = this.randomNum(this.fontSizeMin, this.fontSizeMax) + 'px SimHei' // 随机生成字体大小
   let x = (i + 1) * (this.contentWidth / (this.identifyCode.length + 1))
   let y = this.randomNum(this.fontSizeMax, this.contentHeight - 5)
   var deg = this.randomNum(-30, 30)
   // 修改坐标原点和旋转角度
   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 < 4; i++) {
    ctx.strokeStyle = this.randomColor(100, 200)
    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 < 30; 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()
   }
  }
 },
 watch: {
  identifyCode () {
   this.drawPic()
  }
 },
 mounted () {
  this.drawPic()
 }
}
</script>

在登录页面中
验证码输输入框

<el-form-item prop="code">
  <el-input type="text" v-model="formLogin.code" placeholder="- - - -">
   <template slot="prepend">验证码</template>
   <template slot="append">
    <div class="login-code" @click="refreshCode">
     <Identify :identifyCode="identifyCode"></Identify>
    </div>
   </template>
  </el-input>
 </el-form-item>

登录按钮

<el-button-group>
        <el-button style="width:100%" @click="submit" type="primary">登录</el-button>
 </el-button-group>

引入之前的组件(在例子中它叫identify)

import Identify from './identify'

在登录组件中引入Identify (这是验证码组件)这一部分略

在data中

// 表单
   formLogin: {
    username: "",
    password: "",
    code: ""
   },
   identifyCodes: '1234567890abcdefjhijklinopqrsduvwxyz',
   identifyCode: '',
   // 校验
   rules: {
    username: [
     { required: true, message: "请输入用户名", trigger: "blur" }
    ],
    password: [{ required: true, message: "请输入密码", trigger: "blur" }],
    code: [{ required: true, message: "请输入验证码", trigger: "blur" }]
   }

在mounted中

mounted () {
  // 初始化验证码
  this.identifyCode = ''
  this.makeCode(this.identifyCodes, 4)
 },

在method中

// 引入验证接口
...mapActions("d2admin/account", ["login"]),
    // 重置验证码
  refreshCode () {
   this.identifyCode = ''
   this.makeCode(this.identifyCodes, 4)
  },
  makeCode (o, l) {
   for (let i = 0; i < l; i++) {
    this.identifyCode += this.identifyCodes[this.randomNum(0, this.identifyCodes.length)]
   }
  },
  randomNum (min, max) {
   return Math.floor(Math.random() * (max - min) + min)
  },
  /**
  * @description 提交表单
  */
  // 提交登录信息
  submit() {
    if (this.formLogin.code.toLowerCase() !== this.identifyCode.toLowerCase()) {
    this.$message.error('请填写正确验证码')
    this.refreshCode()
    return
   }
   this.$refs.loginForm.validate(valid => {
    if (valid) {
     // 登录
     // 注意 这里的演示没有传验证码
     // 具体需要传递的数据请自行修改代码
     this.login({
      vm: this,
      username: this.formLogin.username,
      password: this.formLogin.password
     });
    } else {
     // 登录表单校验失败
     this.$message.error("表单校验失败");
    }
   });
  }

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
HTML页面滚动时获取离页面顶部的距离2种实现方法
Sep 05 Javascript
使用JSON.parse将json字符串转换成json对象的时候会出错
Sep 04 Javascript
JavaScript 常见安全漏洞和自动化检测技术
Aug 21 Javascript
js实现选项卡内容切换以及折叠和展开效果【推荐】
Jan 08 Javascript
jQuery与vue实现拖动验证码功能
Jan 30 jQuery
详解Chai.js断言库API中文文档
Jan 31 Javascript
微信小程序手机号码验证功能的实例代码
Aug 28 Javascript
React SSR样式及SEO的实践
Oct 22 Javascript
微信小程序页面滚动到指定位置代码实例
Sep 07 Javascript
JS实现滑动导航效果
Jan 14 Javascript
JS遍历树层级关系实现原理解析
Aug 31 Javascript
JS绘图Flot应用图形绘制异常解决方案
Oct 16 Javascript
详解element-ui中el-select的默认选择项问题
Aug 02 #Javascript
jQuery实现checkbox全选、反选及删除等操作的方法详解
Aug 02 #jQuery
150行Node.js实现的dns代理工具
Aug 02 #Javascript
el-select 下拉框多选实现全选的实现
Aug 02 #Javascript
js动态获取时间的方法分析
Aug 02 #Javascript
微信小程序实现语音识别转文字功能及遇到的坑
Aug 02 #Javascript
jQuery pager.js 插件动态分页功能实例分析
Aug 02 #jQuery
You might like
PHP中计算字符串相似度的函数代码
2012/12/29 PHP
PHP中$this和$that指针使用实例
2015/01/06 PHP
纯php生成随机密码
2015/10/30 PHP
WordPress中创建用户角色的相关PHP函数使用详解
2015/12/25 PHP
php 输出json及显示json中的中文汉字详解及实例
2016/11/09 PHP
javascript入门·动态的时钟,显示完整的一些方法,新年倒计时
2007/10/01 Javascript
JavaScript基础篇之变量作用域、传值、传址的简单介绍与实例
2013/06/29 Javascript
node.js入门教程
2014/06/01 Javascript
WordPress 单页面上一页下一页的实现方法【附代码】
2016/03/10 Javascript
JS递归遍历对象获得Value值方法技巧
2016/06/14 Javascript
JavaScript数组去重的6个方法
2017/01/21 Javascript
Mongoose中document与object的区别示例详解
2017/09/18 Javascript
[01:20:37]FNATIC vs NIP 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/19 DOTA
[46:14]完美世界DOTA2联赛PWL S3 Magma vs INK ICE 第一场 12.11
2020/12/16 DOTA
python登陆asp网站页面的实现代码
2015/01/14 Python
为Python程序添加图形化界面的教程
2015/04/29 Python
Python回文字符串及回文数字判定功能示例
2018/03/20 Python
Python实现将json文件中向量写入Excel的方法
2018/03/26 Python
python实现列表中最大最小值输出的示例
2019/07/09 Python
Python StringIO如何在内存中读写str
2020/01/07 Python
python实现控制台输出彩色字体
2020/04/05 Python
Python3与fastdfs分布式文件系统如何实现交互
2020/06/23 Python
django template实现定义临时变量,自定义赋值、自增实例
2020/07/12 Python
PyCharm配置anaconda环境的步骤详解
2020/07/31 Python
详解查看Python解释器路径的两种方式
2020/10/15 Python
python实现三壶谜题的示例详解
2020/11/02 Python
python中os.remove()用法及注意事项
2021/01/31 Python
HTML5 FormData 方法介绍以及实现文件上传示例
2017/09/12 HTML / CSS
HTML5之SVG 2D入门2—图形绘制(基本形状)介绍及使用
2013/01/30 HTML / CSS
遮罩层 + Iframe实现界面自动显示的示例代码
2020/04/26 HTML / CSS
J2EE面试题大全
2016/08/06 面试题
大学生实习感言
2014/01/16 职场文书
工作违纪的检讨书范文
2019/07/09 职场文书
Django一小时写出账号密码管理系统
2021/04/29 Python
Python多线程实用方法以及共享变量资源竞争问题
2022/04/12 Python
ipad隐藏软件app图标方法
2022/04/19 数码科技