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
Detailed steps for installing and configuring mysql 5.6.21
1. Overview MySQL version: 5.6.21 Download addres...
Use vertical-align to align input and img
Putting input and img on the same line, the img ta...
Control the vertical center of the text in the HTML text box through CSS
When the height attribute of Text is defined, the ...
Detailed explanation of MySQL multi-table query examples [link query, subquery, etc.]
This article describes MySQL multi-table query wi...
How to configure user role permissions in Jenkins
Jenkins configuration of user role permissions re...
The difference between char, varchar and text field types in MySQL
In MySQL, fields of char, varchar, and text types...
Detailed process of zabbix monitoring process and port through agent
Environment Introduction Operating system: centos...
React entry-level detailed notes
Table of contents 1. Basic understanding of React...
How to deploy redis in linux environment and install it in docker
Installation Steps 1. Install Redis Download the ...
Summary of data interaction between Docker container and host
Preface When using Docker in a production environ...
Three ways to align div horizontal layout on both sides
This article mainly introduces three methods of i...
Ubuntu boot auto-start service settings
How to create a service and auto-start it in Ubun...
SQL function to merge a field together
Recently, I need to query all the fields in a rel...
How to use the Marquee tag in XHTML code
In the forum, I saw netizen jeanjean20 mentioned h...
Jenkins+tomcat automatic hot deployment/restart and solutions to problems encountered (recommended)
1. Background The company's projects have alw...