最近做的项目，不需要后端接口，只需要前端验证，如图
初始页面
获取验证码
验证码的文件，直接复制就行
<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: 35,
},
backgroundColorMin: {
// 验证码图片背景色最小值
type: Number,
default: 200,
},
backgroundColorMax: {
// 验证码图片背景色最大值
type: Number,
default: 220,
},
dotColorMin: {
// 背景干扰点最小值
type: Number,
default: 60,
},
dotColorMax: {
// 背景干扰点最大值
type: Number,
default: 120,
},
contentWidth: {
// 容器宽度
type: Number,
default: 90,
},
contentHeight: {
// 容器高度
type: Number,
default: 38,
},
},
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");
//创建一个2D对象作为上下文。
let ctx = canvas.getContext("2d");
ctx.textBaseline = "bottom";
// 绘制背景
ctx.fillStyle = "#e6ecfd";
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(50, 160); // 随机生成字体颜色
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(-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);
},
// 绘制干扰线
drawLine(ctx) {
for (let i = 0; i < 4; i++) {
ctx.strokeStyle = this.randomColor(100, 200);
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 < 30; 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>
登录页面，运用验证码
<div style="position: relative;margin: 20px 0;">
<el-input style="width: 100px;margin-right: 10px;" v-model="code" placeholder="验证码">
</el-input>
//组件
<dentify v-if="identifyCode" :identifyCode="identifyCode" style="width: 100px;height: 4
0px;display: inline-block;position: absolute;top: 0px;"></dentify>
<el-button v-if="identifyCode" @click="refreshCode" style="margin-left: 100px;color:
#c4c4c4;">换一换</el-button>
<el-button v-else @click="refreshCode" style="color: #c4c4c4;">获取验证码</el-button>
</div>
<el-button @click="Submit" class="buton">登录 </el-button>import dentify from "@/components/dentify.vue";
export default {
components: {
dentify,
},
data() {
return {
code:'',
identifyCodes: "1234567890abcdefjhijklinopqrsduvwxyz", //随机串内容,从这里随机抽几个显示验证码
identifyCode: "", //验证码图片内容
timer: null, //设置计时器
count:'',
};
},
methods: {
//判断验证码并提交
async Submit() {
console.log(this.count,'count')
if(this.identifyCode ==''){
this.$message({
message: '获取验证码',
type: 'warning'
});
}else if(this.count == 0){
this.$message.error("验证码失效");
}else if(this.code == ''){
this.$message.error("验证码不能为空");
}else if(this.identifyCode == this.code){
await GET_LOGIN(this.form).then((res) => {
console.log(res, "ress");
if (res.code == 200) {
this.$message({
message: "登陆成功",
type: "success",
});
} else {
this.$message.error(res.msg);
}
});
}else{
this.$message.error("验证码错误");
}
},
// 重置验证码并倒计时
refreshCode() {
this.identifyCode = "";
this.count = ""
this.makeCode(this.identifyCodes, 4);
let TIME_COUNT = 60;
if (!this.timer) {
this.count = TIME_COUNT;
this.timer = setInterval(() => {
if (this.count > 0 && this.count <= TIME_COUNT) {
this.count--;
} else {
clearInterval(this.timer);
this.timer = null;
}
}, 1000);
}
},
//获取验证码的值
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);
},
}
}
