Vue에서 인증 코드를 구현하는 방법-View.js-php.cn

Vue는 확인 코드 메서드를 구현합니다. 1. js 구성 요소를 소개합니다. 3. 확인 개체를 정의합니다. 5. 유효성 검사() 메서드를 통해 입력이 올바른지 확인합니다.

Vue에서 인증 코드를 구현하는 방법

이 기사의 운영 환경: Windows 7 시스템, vue 버전 2.9.6, DELL G3 컴퓨터.

Vue는 인증코드를 어떻게 구현하나요

Vue는 인증코드 기능을 구현합니다

구체적인 내용은 다음과 같습니다

1. 효과

Vue에서 인증 코드를 구현하는 방법

2.1 js 컴포넌트 생성

Vue에서 인증 코드를 구현하는 방법 Content

(직접 붙여넣어도 되는데, 너비와 높이를 변경해야 하며, _init 메소드에서 너비와 높이를 수정해야 함)

function GVerify (options) { // 创建一个图形验证码对象，接收options对象为参数
 this.options = { // 默认options参数值
  id: &#39;&#39;, // 容器Id
  canvasId: &#39;verifyCanvas&#39;, // canvas的ID
  width: &#39;80&#39;, // 默认canvas宽度
  height: &#39;30&#39;, // 默认canvas高度
  type: &#39;number&#39;, // 图形验证码默认类型blend:数字字母混合类型、number:纯数字、letter:纯字母
  code: &#39;&#39;
 }
 
 if (Object.prototype.toString.call(options) === &#39;[object Object]&#39;) { // 判断传入参数类型
  for (var i in options) { // 根据传入的参数，修改默认参数值
   this.options[i] = options[i]
  }
 } else {
  this.options.id = options
 }
 
 this.options.numArr = &#39;0,1,2,3,4,5,6,7,8,9&#39;.split(&#39;,&#39;)
 this.options.letterArr = getAllLetter()
 
 this._init()
 this.refresh()
}
 
GVerify.prototype = {
 /** 版本号**/
 version: &#39;1.0.0&#39;,
 
 /** 初始化方法**/
 _init: function () {
  var con = document.getElementById(this.options.id)
  var canvas = document.createElement(&#39;canvas&#39;)
  // this.options.width = con.offsetWidth > 0 ? con.offsetWidth : &#39;30&#39;
  // this.options.height = con.offsetHeight > 0 ? con.offsetHeight : &#39;30&#39;
  this.options.width = &#39;160&#39;
  this.options.height = &#39;50&#39;
  canvas.id = this.options.canvasId
  canvas.width = this.options.width
  canvas.height = this.options.height
  canvas.style.cursor = &#39;pointer&#39;
  canvas.innerHTML = &#39;您的浏览器版本不支持canvas&#39;
  con.appendChild(canvas)
  var parent = this
  canvas.onclick = function () {
   parent.refresh()
  }
 },
 
 /** 生成验证码**/
 refresh: function () {
  var canvas = document.getElementById(this.options.canvasId)
  if (canvas.getContext) {
   var ctx = canvas.getContext(&#39;2d&#39;)
  }
  ctx.textBaseline = &#39;middle&#39;
 
  ctx.fillStyle = randomColor(180, 240)
  ctx.fillRect(0, 0, this.options.width, this.options.height)
 
  if (this.options.type === &#39;blend&#39;) { // 判断验证码类型
   var txtArr = this.options.numArr.concat(this.options.letterArr)
  } else if (this.options.type === &#39;number&#39;) {
   var txtArr = this.options.numArr
  } else {
   var txtArr = this.options.letterArr
  }
 
  for (var i = 1; i <= 4; i++) {
   var txt = txtArr[randomNum(0, txtArr.length)]
   this.options.code += txt
   ctx.font = randomNum(this.options.height / 2, this.options.height) + &#39;px SimHei&#39; // 随机生成字体大小
   ctx.fillStyle = randomColor(50, 160) // 随机生成字体颜色
   ctx.shadowOffsetX = randomNum(-3, 3)
   ctx.shadowOffsetY = randomNum(-3, 3)
   ctx.shadowBlur = randomNum(-3, 3)
   ctx.shadowColor = &#39;rgba(0, 0, 0, 0.3)&#39;
   var x = this.options.width / 5 * i
   var y = this.options.height / 2
   var deg = 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)
  }
  /** 绘制干扰线**/
  for (var i = 0; i < 4; i++) {
   ctx.strokeStyle = randomColor(40, 180)
   ctx.beginPath()
   ctx.moveTo(randomNum(0, this.options.width), randomNum(0, this.options.height))
   ctx.lineTo(randomNum(0, this.options.width), randomNum(0, this.options.height))
   ctx.stroke()
  }
  /** 绘制干扰点**/
  for (var i = 0; i < this.options.width / 4; i++) {
   ctx.fillStyle = randomColor(0, 255)
   ctx.beginPath()
   ctx.arc(randomNum(0, this.options.width), randomNum(0, this.options.height), 1, 0, 2 * Math.PI)
   ctx.fill()
  }
 },
 
 /** 验证验证码**/
 validate: function (code) {
  var code = code.toLowerCase()
  var v_code = this.options.code.toLowerCase()
  if (code == v_code) {
   return true
  } else {
   return false
  }
 }
}
/** 生成字母数组**/
function getAllLetter () {
 var letterStr = &#39;a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z,A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P,Q,R,S,T,U,V,W,X,Y,Z&#39;
 return letterStr.split(&#39;,&#39;)
}
/** 生成一个随机数**/
function randomNum (min, max) {
 return Math.floor(Math.random() * (max - min) + min)
}
/** 生成一个随机色**/
function randomColor (min, max) {
 var r = randomNum(min, max)
 var g = randomNum(min, max)
 var b = randomNum(min, max)
 return &#39;rgb(&#39; + r + &#39;,&#39; + g + &#39;,&#39; + b + &#39;)&#39;
}
 
export {
 GVerify
}

로그인 후 복사

2.2 로그인 페이지

2.2.1 컴포넌트 소개

[....<script>]
 
import { GVerify } from &#39;../../static/js/verifyCode&#39;;
 
[export default { ....]

로그인 후 복사

2.2.2 검증 객체 정의

verifyCode 주의

data: function () {
  return {
   title: &#39;若晨后台管理系统&#39;,
   ruleForm: {
    username: &#39;&#39;,
    password: &#39;&#39;,
    verifyCode: &#39;&#39;
   },
   rules: {
    username: [
     { required: true, message: &#39;请输入用户名&#39;, trigger: &#39;blur&#39; }
    ],
    password: [{ required: true, message: &#39;请输入密码&#39;, trigger: &#39;blur&#39; }],
    verifyCode: [
     { required: true, message: &#39;请输入验证码&#39;, trigger: &#39;blur&#39; }
    ]
   },
   verifyCode: null
  }
 },

로그인 후 복사

2.2.3 노드 초기화

<el-form-item prop="verifyCode" class="verifyCodeItemCss">
     <el-input class="verify_css" placeholder="请输入4位验证码" v-model="ruleForm.verifyCode" @keyup.enter.native="submitForm(&#39;ruleForm&#39;)"></el-input>
     <!--关键 ↓-->
     <div id="v_container"></div>
</el-form-item>

로그인 후 복사

Mounted 메소드에서 'v_container'를 div의 id로 초기화

mounted () {
  this.verifyCode = new GVerify(&#39;v_container&#39;)
}

로그인 후 복사

2.2.4 입력이 맞는지 검증

데이터에 정의된 verifyCode 객체의 verify() 메소드를 통해 입력이 올바르게 true를 반환하면 오류는 false를 반환합니다

var that = this
 
   // 获取验证码
   var verifyCode = this.ruleForm.verifyCode
   var verifyFlag = this.verifyCode.validate(verifyCode)
   if (!verifyFlag) {
    that.$notify.error({
     title: &#39;系统提示&#39;,
     message: &#39;验证码输入错误&#39;
    })
    return;
   } else {
    that.$notify({
     title: &#39;系统提示&#39;,
     message: &#39;验证码输入正确&#39;,
     type: &#39;success&#39;
    })
   }

로그인 후 복사

3. 모든 페이지 코드


 
<script>
import { GVerify } from &#39;../../static/js/verifyCode&#39;;
export default {
 data: function () {
  return {
   title: &amp;#39;若晨后台管理系统&amp;#39;,
   ruleForm: {
    username: &amp;#39;&amp;#39;,
    password: &amp;#39;&amp;#39;,
    verifyCode: &amp;#39;&amp;#39;
   },
   rules: {
    username: [
     { required: true, message: &amp;#39;请输入用户名&amp;#39;, trigger: &amp;#39;blur&amp;#39; }
    ],
    password: [{ required: true, message: &amp;#39;请输入密码&amp;#39;, trigger: &amp;#39;blur&amp;#39; }],
    verifyCode: [
     { required: true, message: &amp;#39;请输入验证码&amp;#39;, trigger: &amp;#39;blur&amp;#39; }
    ]
   },
   verifyCode: null
  }
 },
 mounted () {
  // 随机播放帧数
  this.videoCut()
 
  this.verifyCode = new GVerify(&#39;v_container&#39;)
 },
 methods: {
  submitForm (formName) {
   var that = this
 
   // 获取验证码
   var verifyCode = this.ruleForm.verifyCode
   var verifyFlag = this.verifyCode.validate(verifyCode)
   if (!verifyFlag) {
    that.$notify.error({
     title: &amp;#39;系统提示&amp;#39;,
     message: &amp;#39;验证码输入错误&amp;#39;
    })
    return;
   } else {
    that.$notify({
     title: &amp;#39;系统提示&amp;#39;,
     message: &amp;#39;验证码输入正确&amp;#39;,
     type: &amp;#39;success&amp;#39;
    })
   }
 
   this.$refs[formName].validate(valid => {
    if (valid) {
     // 判断是否登录成功
 
     let param = {
      userName: that.ruleForm.username,
      passWord: that.ruleForm.password
     }
 
     // this.axios.post(this.$service.user.USER_LOGIN_API.url,param).then(res=>{
     //   console.log("请求成功",res)
     //   if(res.data.data != undefined){
     //     that.$notify({
     //       title: &#39;系统提示&#39;,
     //       message: &#39;登录成功&#39;,
     //       type:"success"
     //     });
     //           // 存local
     //     localStorage.setItem(&#39;ms_username&#39;,res.data.data.userNickName);
     //     localStorage.setItem(&#39;token&#39;,res.data.data.id);
     //     self.$router.push(&#39;/index&#39;);
     //   }else{
     //     that.$notify.error({
     //     title: &#39;系统提示&#39;,
     //     message: &#39;用户账户密码输出错误&#39;
     //     });
     //   }
 
     localStorage.setItem(&#39;ms_username&#39;, &#39;admin&#39;)
     localStorage.setItem(&#39;token&#39;, &#39;admin&#39;)
     that.$router.push(&#39;/index&#39;)
    } else {
     console.log(&#39;error submit!!&#39;)
     return false
    }
   })
  },
 
  videoCut () {
   $(&#39;video&#39;).on(&#39;loadedmetadata&#39;, function (event) {
    var duration = Math.ceil(this.duration)
    this.currentTime = Math.round(Math.random() * duration)
   })
  }
 }
}
</script>

로그인 후 복사