前言:在springboot+vue的前后端分离项目中,使用最简单的方式完成登陆页面验证码功能
前端整体结构;
把vueImageVerify复制粘贴到components文件夹中,附上vueImageVerify代码
<template>
<div class="div" @click="createdCode">
<canvas id="div" :width="contentWidth" :height="contentHeight" />
</div>
</template>
<script>
import Vue from 'vue'
export default Vue.extend({
props: {
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: 120
},
contentHeight: {
type: Number,
default: 54
}
},
data() {
return {
identifyCode: ''
}
},
mounted() {
this.createdCode()
},
methods: {
// 生成4个随机数
createdCode() {
const len = 4
const codeList = []
const chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz01234569'
const charsLen = chars.length
for (let i = 0; i < len; i++) {
codeList.push(chars.charAt(Math.floor(Math.random() * charsLen)))
}
this.identifyCode = codeList.join('')
this.$emit('getIdentifyCode', this.identifyCode.toLowerCase())
this.drawPic()
console.log(this.identifyCode)
},
// 生成一个随机数
randomNum(min, max) {
return Math.floor(Math.random() * (max - min) + min)
},
// 生成一个随机的颜色
randomColor(min, max) {
const r = this.randomNum(min, max)
const g = this.randomNum(min, max)
const b = this.randomNum(min, max)
return 'rgb(' + r + ',' + g + ',' + b + ')'
},
drawPic() {
const canvas = document.getElementById('div')
const ctx = canvas.getContext('2d')
ctx.textBaseline = 'bottom'
// 绘制背景
ctx.fillStyle = this.randomColor(
this.backgroundColorMin,
this.backgroundColorMax
)
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(this.colorMin, this.colorMax)
ctx.font =
this.randomNum(this.fontSizeMin, this.fontSizeMax) + 'px SimHei'
const x = (i + 1) * (this.contentWidth / (this.identifyCode.length + 1))
const 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, 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.contentWidth),
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.contentWidth),
this.randomNum(0, this.contentHeight),
1,
0,
2 * Math.PI
)
ctx.fill()
}
}
}
})
</script>
<style scoped>
.div {
margin: 0;
padding: 0;
height: 18px;
}
.div canvas {
margin-top: 0px;
margin-left: 6px;
height: 45px;
}
</style>
在login.vue页面添加验证代码
<!-- 验证码 -->
<el-form-item>
<el-row :gutter="24">
<el-col :span="16" :offset="0">
<el-input
v-model="loginForm.code"
placeholder="请输入验证码"
/>
<!-- 引入图标 -->
<!-- <el-input
v-model="loginForm.code"
prefix-icon="el-icon-info"
style="margin-left: 5px; fill: currentColor"
/> -->
</el-col>
<el-col :span="8" :offset="0">
<vue-image @getIdentifyCode="getIdentifyCodes" />
</el-col>
</el-row>
</el-form-item>
同样,在方法中申明getIdentifyCodes,不然不起作用
getIdentifyCodes(value) {
console.log('------', value)
// 判断验证码输入是否有误 和输入的文本框
// if (this.verify.toLowerCase() != value.toLowerCase()) {
// Toast.fail('验证码有误')
// return
// }
this.valiatecode = value.toLowerCase()
},
最后修改handleLogin方法
handleLogin() {
// 验证码判断
if (this.valiatecode.toLowerCase() != this.loginForm.code.toLowerCase()) {
console.log(this.valiatecode, this.loginForm.code)
this.$notify({
title: 'warning',
message: '验证码错误',
type: 'warning',
duration: 2000
})
return
}
// 登陆判断
this.$refs.loginForm.validate(valid => {
if (valid) {
this.loading = true
this.$notify({
title: 'Success',
message: '登录成功',
type: 'success',
duration: 2000
})
this.$store.dispatch('user/login', this.loginForm)
.then(() => {
this.$router.push({ path: this.redirect || '/', query: this.otherQuery })
this.loading = false
})
.catch(() => {
this.loading = false
})
} else {
console.log('error submit!!')
return false
}
})
},
成功