Vue implements login verification code
|
This article example shares the specific code of vue to implement the login verification code for your reference. The specific content is as follows Let’s start with the demo effect diagram
Canvas verification code component (can be copied directly without modification)
<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,
default: 255
},
colorMin:
type: Number,
default: 0
},
colorMax: {
type: Number,
default: 160
},
lineColorMin: {
type: Number,
default: 100
},lineColorMax: {
type: Number,
default: 255
},
dotColorMin: {
type: Number,
default: 0
},
dotColorMax: {
type: Number,
default: 255
},
contentWidth: {
type: Number,
default: 112
},
contentHeight: {
type: Number,
default: 31
}
},
methods: {
// Generate a random number randomNum(min, max) {
return Math.floor(Math.random() * (max - min) + min)
},
// Generate a random color 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'
// Draw the background ctx.fillStyle = this.randomColor(this.backgroundColorMin, this.backgroundColorMax)
ctx.fillRect(0, 0, this.contentWidth, this.contentHeight)
// Draw text 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)
// Modify the coordinate origin and rotation angle ctx.translate(x, y)
ctx.rotate(deg * Math.PI / 180)
ctx.fillText(txt, 0, 0)
// Restore the coordinate origin and rotation angle ctx.rotate(-deg * Math.PI / 180)
ctx.translate(-x, -y)
},
drawLine(ctx) {
// Draw interference lines 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.contentWidth), this.randomNum(0, this.contentHeight))
ctx.stroke()
}
},
drawDot(ctx) {
// Draw interference points for (let i = 0; i < 80; 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>
<style scoped>
.s-canvas {
height: 38px;
}
.s-canvas canvas{
margin-top: 1px;
margin-left: 8px;
}
</style>The HTML part of the login page can be modified as needed
Introducing the verification code component
methods
Login page complete code
<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="Login" name="name1">
<Form ref="loginForm" :model="form" :rules="rules" :label-width="90" inline>
<FormItem label="Account" prop="username">
<Input v-model="form.username" placeholder="Please enter your account number" ref="input" clearable style="width: 200px"/>
</FormItem>
<FormItem label="Password" prop="password">
<Input v-model="form.password" placeholder="Please enter your password" clearable style="width: 200px"/>
</FormItem>
<FormItem label="VerificationCode" prop="verificationCode">
<Input v-model="form.verificationCode" placeholder="Please enter the verification code" clearable style="width: 200px"/>
<div @click="refreshCode" style="margin-top: 20px">
<!--Verification code component-->
<s-identify :identifyCode="identifyCode"></s-identify>
</div>
</FormItem>
<div style="text-align: center">
<Button @click="handleSubmit" type="primary" style="margin-right: 20px">Login</Button>
</div>
</Form>
</TabPane>
<TabPane label="Register" name="name2">
<Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="90" inline>
<FormItem label="Account" prop="username">
<Input v-model="formValidate.username" placeholder="Please enter your account number" ref="input" clearable style="width: 200px"/>
</FormItem>
<FormItem label="Password" prop="password">
<Input v-model="formValidate.password" placeholder="Please enter your password" clearable style="width: 200px"/>
</FormItem>
<FormItem label="Mobile Number" prop="mobile">
<Input v-model="formValidate.mobile" placeholder="Please enter your mobile number" clearable style="width: 200px" />
</FormItem>
<FormItem label="SMS verification code" prop="header">
<Input v-model="formValidate.header" placeholder="SMS verification code" style="width: 200px"/>
<Button type="primary" size="small" @click="getCode" :disabled="codeDisabled">{{codeMsg}}</Button>
</FormItem>
<div style="text-align: center">
<Button type="primary" @click="register('formValidate')">Register</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 'js-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: 'Login username cannot be empty', trigger: 'blur'}
],
password: [
{required: true, message: 'Login password cannot be empty', trigger: 'blur'}
],
verificationCode:
{required: true, message: 'Verification code cannot be empty', trigger: 'blur'}
]
},
ruleValidate: {
username: [
{required: true, message: 'Login username cannot be empty', trigger: 'blur'}
],
password: [
{required: true, message: 'Login password cannot be empty', trigger: 'blur'}
],
mobile: [
{required: true, message: 'Phone number cannot be empty', trigger: 'blur'}
],
header: [
{required: true, message: 'SMS verification code cannot be empty', trigger: 'blur'}
]
},
img:'../../static/grey_wolf.jpg',
// Whether to disable the button codeDisabled: false,
// Countdown seconds countdown: 60,
// The text on the button codeMsg: 'Get verification code',
//Timer timer: null,
identifyCode: '',
identifyCodes: '1234567890abcdefjhijklinopqrsduvwxyz',
};
},
methods: {
// Refresh verification code 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)
},
// Get the SMS verification code getCode() {
// 60-second countdown for verification code 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) {
this.codeMsg = "Resend(" + this.countdown + ")";
this.codeDisabled = true;
} else {
clearInterval(this.timer);
this.codeMsg = "Get verification code";
this.countdown = 60;
this.timer = null;
this.codeDisabled = false;
}
}
},
handleSubmit() {
this.$refs.loginForm.validate((valid) => {
if (valid) {
// MD5 encryption of login password let password = this.$copyto.md5(this.form.password);
//Login interface request 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 () {
// Initialize the verification code this.identifyCode = ''
this.makeCode(this.identifyCodes, 4)
},
};
</script>
<style>
</style>The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM. You may also be interested in:
|
<<: Nginx configuration PC site mobile site separation to achieve redirection
>>: Analysis of MySQL query sorting and query aggregation function usage
Recommend
Compilation process analysis of Remax framework for writing small programs using React (recommended)
Remax is an open source framework developed by An...
Why MySQL database avoids NULL as much as possible
Many tables in MySQL contain columns that can be ...
One minute to experience the smoothness of html+vue+element-ui
Technology Fan html web page, you must know vue f...
Simple analysis of EffectList in React
Table of contents EffectList Collection EffectLis...
Detailed explanation of Linux kernel macro Container_Of
Table of contents 1. How are structures stored in...
JavaScript implements click toggle function
This article example shares the specific code of ...
Solution to the problem that MySQL commands cannot be entered in Chinese
Find the problem Recently, when I connected to th...
React method of displaying data in pages
Table of contents Parent component listBox List c...
Implementation of fuzzy query like%% in MySQL
1, %: represents any 0 or more characters. It can...
The difference between delete, truncate, and drop and how to choose
Preface Last week, a colleague asked me: "Br...
Execution context and execution stack example explanation in JavaScript
JavaScript - Principles Series In daily developme...
Implementation of one-click TLS encryption for docker remote api
Table of contents 1. Change the 2375 port of Dock...
Detailed explanation of html printing related operations and implementation
The principle is to call the window.print() metho...
jQuery implements ad display and hide animation
We often see ads appear after a few seconds and t...
Solution to MySQL garbled code problem under Linux
The project interacts with the server, accesses t...