vue實現登入驗證碼
阿新 • • 發佈:2021-08-15
本文例項為大家分享了實現登入驗證碼的具體程式碼,供大家參考,具體內容如下
先來demo效果圖
canvas驗證碼元件(可直接複製,無需改動)
<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: 30 },backgroundColorMin: { type: Number,default: 255 },backgroundColorMax: { type: Number,colorMin: { type: Number,default: 0 },colorMax: { type: Number,default: 160 },lineColorMin: { type: Number,default: 100 },lineColorMax: { type: Number,dotColorMin: { type: Number,dotColorMax: { type: Number,contentWidth: { type: Number,default: 112 },contentHeight: { type: Number,default: 31 } },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 = this.randomColor(this.backgroundColorMin,this.backgroundColorMax) ctx.fillRect(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' let x = (i + 1) * (this.contentWidth / (this.identifyCode.length + 1)) let 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) // 恢復座標原點和旋轉角度 ctx.rotate(-deg * Math.PI / 180) ctx.translate(-x,-y) },drawLine(ctx) { // 繪製干擾線 for (let i = 0; i < 5; 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.contentHeight)) ctx.stroke() } },drawDot(ctx) { // 繪製干擾點 for (let i = 0; i < 80; i++) { ctx.fillStyle = this.randomColor(0,255) ctx.beginPath() ctx.arc(this.randomNum(0,this.contentHeight),1,2 * Math.PI) ctx.fill() } } },watch: { identifyCode() { this.drawPic() } },mounted() { this.drawPic() } } </script> <style scoped> .s-canvas { height: 38px; } .s-canvas canvas{ margin-top: 1px; margin-left: 8px; } </style>
login頁面的html部分,按需改動
引入驗證碼元件
methods方法
login頁面完整程式碼
<style lang="less"> @import './login.less'; </style> <template> <div class="login" @keydown.enter="handleSubmit"> <div class="login-con"> <Card :bordered="false" style="width: 350px;height: 380px"> <div class="form-con"> <Tabs value="name1" :animated="false"> <TabPane label="登入" name="name1"> <Form ref="loginForm" :model="form" :rules="rules" :label-width="90" inline> <FormItem label="帳號" prop="username"> <Input v-model="form.username" placeholder="請輸入帳號" ref="input" clearable style="width: 200px"/> </FormItem> <FormItem label="密碼" prop="password"> <Input v-model="form.password" placeholder="請輸入密碼" clearable style="width: 200px"/> </FormItem> <FormItem label="驗證碼" prop="verificationCode"> <Input v-model="form.verificationCode" placeholder="請輸入驗證碼" clearable style="width: 200px"/> <div @click="refreshCode" style="margin-top: 20px"> <!--驗證碼元件--> <s-identify :identifyCode="identifyCode"></s-identify> </div> </FormItem> <div style="text-align: center"> <Button @click="handleSubmit" type="primary" style="margin-right: 20px">登入</Button> </div> </Form> </TabPane> <TabPane label="註冊" name="name2"> <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="90" inline> <FormItem label="帳號" prop="username"> <Input v-model="formValidate.username" placeholder="請輸入帳號" ref="input" clearable style="width: 200px"/> </FormItem> <FormItem label="密碼" prop="password"> <Input v-model="formValidate.password" placeholder="請輸入密碼" clearable style="width: 200px"/> </FormItem> <FormItem label="手機號" prop="mobile"><Input v-model="formValidate.mobile" placeholder="請輸入手機號" clearable style="width: 200px" /> </FormItem> <FormItem label="簡訊驗證碼" prop="header"> <Input v-model="formValidate.header" placeholder="簡訊驗證碼" style="width: 20http://www.cppcns.com0px"/> <Button type="primary" size="small" @click="getCode" :disabled="codeDisabled">{{codeMsg}}</Button> </FormItem> <div style="text-align: center"> <Button type="primary" @click="register('formValidate')">註冊</Button> </div> </Form> </TabPane> </Tabs> </div> </Card> </div> <!--<vue-particles color="#FF4500" :particleOpacity="0.7" :particlesNumber="300" shapeType="circle" :particleSize="7" linesColor="#00FF00" :linesWidth="2" :lineLinked="true" :lineOpacity="0.4" :linesDistance="150" :moveSpeed="4" :hoverEffect="true" hoverMode="grab" :clickEffect="true" clickMode="repulse" > </vue-particles>--> </div> </template> <script> import Cookies from '-cookie'; import {apiRequest,login,getCode} from '@/service/service'; import SIdentify from '@/components/SIdentify'; export default { components: { SIdentify },name: 'login',data() { return { form: {},formValidate: {},rules: { username: [ {required: true,message: '登入使用者名稱不能為空',trigger: 'blur'} ],password: [ {required: true,message: '登入密碼不能為空',verificationCode: [ {required: true,message: '驗證碼不能為空',trigger: 'blur'} ] },ruleValidate: { username: [ {required: true,trigger: 'blur'} tMvdcFknty ],mobile: [ {required: true,message: '手機號不能為空',header: [ {required: true,message: '簡訊驗證碼不能為空',img:'../../static/grey_wolf.jpg',// 是否禁用按鈕 codeDisabled: false,// 倒計時秒數 countdown: 60,// 按鈕上的文字 codeMsg: '獲取驗證碼',// 定時器 timer: null,identifyCode: '',identifyCodes: '1234567890abcdefjhijklinopqrsduvwxyz',}; },methods: { // 重新整理驗證碼 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,// 獲取簡訊驗證碼 getCode() { // 驗證碼60秒倒計時 if (!this.timer) { this.getValidStr(); this.timer = setInterval(this.getValidStr,1000); } apiRequest(this,getCode(this.form.mobile),response => { }); },getValidStr(){ if (this.countdown > 0 && this.countdown <= 60) { this.countdown--; if (this.countdown !== 0) http://www.cppcns.com{ this.codeMsg = "重新發送(" + this.countdown + ")"; this.codeDisabled = true; } else { clearInterval(this.timer); this.codeMsg = "獲取驗證碼"; this.countdown = 60; this.timer = null; this.codeDisabled = false; } } },handleSubmit() { this.$refs.loginForm.validate((valid) => { if (valid) { //登入密碼做MD5加密 let password = this.$copyto.md5(this.form.password); //登入介面請求 apiRequest(this,login(this.form.username,password),response => { this.$store.commit('setUserInfo',response.data); Cookies.set('user',this.form.username); Cookies.set('userId',response.data.id); localStorage.sessionId = response.sessionId this.$store.commit('setAvator',''); if (this.form.userName === 'admin') { Cookies.set('access',0); } else { Cookies.set('access',1); } this.$router.push({name: 'home_index'}); }); } }); },register() { } },mounted () { // 初始化驗證碼 this.identifyCode = '' this.makeCode(this.identifyCodes,4) },}; </script> <style> </style>
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支援我們。