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 maxlength使用说明
Sep 09 Javascript
js日期对象兼容性的处理方法
Jan 28 Javascript
JavaScript获得url查询参数的方法
Jul 02 Javascript
Angular2中Bootstrap界面库ng-bootstrap详解
Oct 18 Javascript
jQuery操作css样式
May 15 jQuery
jquery Ajax实现Select动态添加数据
Jun 08 jQuery
JS判断一个数是否是水仙花数
Jun 11 Javascript
ES6的解构赋值实例详解
May 06 Javascript
解决layer 关闭当前弹窗 关闭遮罩层 input值获取不到的问题
Sep 25 Javascript
vue动态渲染svg、添加点击事件的实现
Mar 13 Javascript
vue 项目引入echarts 添加点击事件操作
Sep 09 Javascript
js对象属性名驼峰式转下划线的实例代码
Sep 17 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
多人战的战术与战略
2020/03/04 星际争霸
解析htaccess伪静态的规则
2013/06/18 PHP
Yii使用migrate命令执行sql语句的方法
2016/03/15 PHP
PHP中静态变量的使用方法实例分析
2016/12/01 PHP
PHP微信开发之微信录音临时转永久存储
2018/01/26 PHP
JS实现淘宝幻灯片效果的实现方法
2013/03/22 Javascript
javascript操作css属性
2013/12/30 Javascript
Jquery插件分享之气泡形提示控件grumble.js
2014/05/20 Javascript
c#+jquery实现获取radio和checkbox的值
2020/09/12 Javascript
JS运动基础框架实例分析
2015/03/03 Javascript
JS获取表格内指定单元格html内容的方法
2015/03/31 Javascript
Jquery全选与反选点击执行一次的解决方案
2015/08/14 Javascript
图解JavaScript中的this关键字
2020/05/28 Javascript
用jquery快速解决IE输入框不能输入的问题
2016/10/04 Javascript
Vue中render函数的使用方法
2018/01/31 Javascript
支付宝小程序自定义弹窗dialog插件的实现代码
2018/11/30 Javascript
Nodejs中获取当前函数被调用的行数及文件名详解
2018/12/12 NodeJs
vue.js+elementUI实现点击左右箭头切换头像功能(类似轮播图效果)
2019/09/05 Javascript
Node.js创建一个Express服务的方法详解
2020/01/06 Javascript
WebStorm中如何将自己的代码上传到github示例详解
2020/10/28 Javascript
[03:27]最受玩家喜爱奖提名:PZH_Element 致玩家寄语
2016/12/20 DOTA
[01:14]DOTA2 7.22版本新增神杖效果展示(智力英雄篇)
2019/05/29 DOTA
Python二叉搜索树与双向链表转换实现方法
2016/04/29 Python
Python实现判断一行代码是否为注释的方法
2018/05/23 Python
python和shell监控linux服务器的详细代码
2018/06/22 Python
浅析Python四种数据类型
2018/09/26 Python
Python模块、包(Package)概念与用法分析
2019/05/31 Python
在Python中append以及extend返回None的例子
2019/07/20 Python
Flask框架模板渲染操作简单示例
2019/07/31 Python
Python(PyS60)实现简单语音整点报时
2019/11/18 Python
Python SMTP发送电子邮件的示例
2020/09/23 Python
html5适合移动应用开发的12大特性
2014/03/19 HTML / CSS
经典而简洁的婚礼主持词
2014/03/13 职场文书
2019大学毕业晚会主持词
2019/06/21 职场文书
SQL Server携程核心系统无感迁移到MySQL实战
2022/06/01 SQL Server
MySQL示例讲解数据库约束以及表的设计
2022/06/16 MySQL