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 相关文章推荐
JQuery UI皮肤定制
Jul 27 Javascript
jQuery UI Autocomplete 1.8.16 中文输入修正代码
Apr 16 Javascript
DOM节点的替换或修改函数replaceChild()用法实例
Jan 12 Javascript
jQuery晃动层特效实现方法
Mar 09 Javascript
javascript实现多栏闭合展开式广告位菜单效果实例
Aug 05 Javascript
jQuery实现文字自动横移
Jan 08 Javascript
浅谈Angular路由复用策略
Oct 04 Javascript
详解js类型判断
May 22 Javascript
JS加密插件CryptoJS实现AES加密操作示例
Aug 16 Javascript
Vue 框架之键盘事件、健值修饰符、双向数据绑定
Nov 14 Javascript
Vant Weapp组件踩坑:picker的初始赋值解决
Nov 12 Javascript
JS开发前端团队展示控制器来为成员引流
Aug 14 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 array_multisort()函数的使用札记
2011/07/03 PHP
php+mysql数据库查询实例
2015/01/21 PHP
php将图片文件转换成二进制输出的方法
2015/06/10 PHP
PHP+MySQL存储数据常见中文乱码问题小结
2016/06/13 PHP
php文件上传原理与实现方法详解
2019/12/20 PHP
js实现图片放大缩小功能后进行复杂排序的方法
2012/11/08 Javascript
jquery实现隐藏与显示动画效果/输入框字符动态递减/导航按钮切换
2013/07/01 Javascript
HTML页面弹出居中可拖拽的自定义窗口层
2014/05/07 Javascript
JavaScript中定义函数的三种方法
2015/03/12 Javascript
jQuery mobile 移动web(4)
2015/12/20 Javascript
ES6记录异步函数的执行时间详解
2016/08/31 Javascript
jquery对Json的各种遍历方法总结(必看篇)
2016/09/29 Javascript
BootStrap Table 设置height表头与内容无法对齐的问题
2016/12/28 Javascript
JS中DOM元素的attribute与property属性示例详解
2018/09/04 Javascript
JS编写兼容IE6,7,8浏览器无缝自动轮播
2018/10/12 Javascript
Node.js net模块功能及事件监听用法分析
2019/01/05 Javascript
vue实现的下拉框功能示例
2019/01/29 Javascript
JS函数进阶之继承用法实例分析
2020/01/15 Javascript
React+EggJs实现断点续传的示例代码
2020/07/07 Javascript
Python实现对excel文件列表值进行统计的方法
2015/07/25 Python
Python脚本实现自动发带图的微博
2016/04/27 Python
Pyecharts绘制全球流向图的示例代码
2020/01/08 Python
python实现百度OCR图片识别过程解析
2020/01/17 Python
pandas和spark dataframe互相转换实例详解
2020/02/18 Python
解决Tensorflow2.0 tf.keras.Model.load_weights() 报错处理问题
2020/06/12 Python
详解如何在PyCharm控制台中输出彩色文字和背景
2020/08/17 Python
Python tkinter之ComboBox(下拉框)的使用简介
2021/02/05 Python
用CSS3的box-reflect设置文字倒影效果的方法讲解
2016/03/07 HTML / CSS
HTML5边玩边学(2)基础绘图实现方法
2010/09/21 HTML / CSS
浅谈html5与APP混合开发遇到的问题总结
2018/03/20 HTML / CSS
分布式数据库需要考虑哪些问题
2013/12/08 面试题
教师年度考核评语
2014/04/28 职场文书
毕业证委托书范文
2014/09/26 职场文书
大学毕业谢师宴致辞
2015/07/27 职场文书
golang的文件创建及读写操作
2022/04/14 Golang
科学家测试在太空中培育人造肉,用于未来太空旅行
2022/04/29 数码科技