企业做网站需要做哪些工作,广告公司有哪些,网站首页设计分析,网站怎么做登录界面前言
验证码的用途#xff1a;通过要求用户输入一串难以被机器自动识别的字符或图像#xff0c;有效阻止恶意用户或脚本通过暴力破解方式尝试登录账户。验证码的分类#xff1a;常见的验证码有短信、文本、图形等#xff0c;安全度越高#xff0c;依赖的插件或服务也越多…前言
验证码的用途通过要求用户输入一串难以被机器自动识别的字符或图像有效阻止恶意用户或脚本通过暴力破解方式尝试登录账户。验证码的分类常见的验证码有短信、文本、图形等安全度越高依赖的插件或服务也越多。 今天我们来做一个简单的纯前端字符验证码码组件不需要插件仅做为示例。 先看一下效果
分析
一个简单的字符验证码只需求定义一个字符集一个随机生成函数就可以了。如果要再进一步增加一些效果如干扰线干扰点则需要借助Canvas来进行绘制以增强可视化效果。
基础代码示例
以下代码就完成了简单验证码的核心工作生成指定位数的随机验证码。
// 生成校验码
const makeCode (len 4) {let code ;const codeLength len; //验证码的长度// 定义生成验证码的字符集,去除易混淆的字符集1il0oOconst identifyCodes 123456789abcdefjhijkinpqrsduvwxyzABCDEFGHJKLMNPQRSTUVWXYZ;for (let i 0; i codeLength; i) {// 获取随机字符code identifyCodes[randomNum(0, identifyCodes.length)];}return code; //把code值赋给验证码
};
//随机数生成根据角标拿字符串的值
const randomNum (min 0, max: number) Math.floor(Math.random() * (max - min)) min;组件化及可视化增强
下面我们来做一个完整的vue验证码组件并借助Canvas添加干扰线和干扰点的效果。 既然是组件就需要几个参数供调用者调整常规的就是组件的宽、高、字号以及是否需要干扰线或干扰点所以这里只定义了这几个参数。 多余的就不说了直接上代码。
1、vue验证码组件代码
templatediv classs-canvascanvasids-canvas:widthcontentWidth:heightcontentHeightclickrefreshCode/canvas/div
/template
script langts setup
import { ref, onMounted, withDefaults, defineProps } from vue;// 定义props类型
interface CodeProps {/** 默认验证码 */defaultCode?: string;/** 容器宽度 */contentWidth?: number;/** 容器高度 */contentHeight?: number;/** 最大干扰线0时无干扰线 */maxLine?: number;/** 最大干扰点0时无干扰点 */maxDot?: number;/** 字体最小值 */fontSizeMin?: number;/** 字体最大值 */fontSizeMax?: number;
}
// props默认值
const props withDefaults(definePropsCodeProps(), {contentWidth: 90,contentHeight: 30,fontSizeMin: 25,fontSizeMax: 30,maxLine: 4,maxDot: 10,
});const emit defineEmits([update:verifyCode]);
//验证码
const verifyCode ref();onMounted(() {verifyCode.value props.defaultCode || makeCode();emit(update:verifyCode, verifyCode.value);drawPic(verifyCode.value);
});
// 生成校验码
const makeCode (len 4) {let code ;const codeLength len; //验证码的长度// 定义生成验证码的字符集,去除易混淆的字符集1il0oOconst identifyCodes 123456789abcdefjhijkinpqrsduvwxyzABCDEFGHJKLMNPQRSTUVWXYZ;for (let i 0; i codeLength; i) {// 获取随机字符code identifyCodes[randomNum(0, identifyCodes.length)];}return code; //把code值赋给验证码
};// 重置验证码
const refreshCode () {verifyCode.value makeCode();emit(update:verifyCode, verifyCode.value);drawPic(verifyCode.value);
};
// 定义暴露接口
// defineExpose({ refreshCode });//随机数生成根据角标拿字符串的值
const randomNum (min 0, max: number) Math.floor(Math.random() * (max - min)) min;// 生成一个随机的颜色
function randomColor(min: number, max: number) {let r randomNum(min, max);let g randomNum(min, max);let b randomNum(min, max);return rgb( r , g , b );
}
/** 绘制文字 */
function drawPic(verifyCode: string) {let canvas document.getElementById(s-canvas) as HTMLCanvasElement;if (!canvas) {console.error(找不到 canvas 元素);return;}//创建一个2D对象作为上下文。let ctx canvas.getContext(2d) as CanvasRenderingContext2D;ctx.textBaseline bottom;// 绘制背景ctx.fillStyle #e6ecfd;ctx.fillRect(0, 0, props.contentWidth, props.contentHeight);// 绘制文字for (let i 0; i verifyCode.length; i) {drawText(ctx, verifyCode, i);}drawLine(ctx, props.maxLine);drawDot(ctx, props.maxDot);
}/**在画布上显示数据* param ctx CanvasRenderingContext2D* param verifyCode 要显示的文字* param index 字符索引*/
function drawText(ctx: CanvasRenderingContext2D, verifyCode: string, index: number) {ctx.fillStyle randomColor(50, 160); // 随机生成字体颜色ctx.font randomNum(props.fontSizeMin, props.fontSizeMax) px SimHei; // 随机生成字体大小let x (index 1) * (props.contentWidth / (verifyCode.length 1));let y randomNum(props.fontSizeMax, props.contentHeight - 5);var deg randomNum(-10, 15);// 修改坐标原点和旋转角度ctx.translate(x, y);ctx.rotate((deg * Math.PI) / 180);ctx.fillText(verifyCode[index], 0, 0);// 恢复坐标原点和旋转角度ctx.rotate((-deg * Math.PI) / 180);ctx.translate(-x, -y);
}
/** 绘制干扰线* param ctx CanvasRenderingContext2D* param max 最大干扰线个数*/
function drawLine(ctx: CanvasRenderingContext2D, maxLine 4) {if (maxLine 0) {return;}for (let i 0; i maxLine; i) {ctx.strokeStyle randomColor(150, 200);ctx.beginPath();ctx.moveTo(randomNum(0, props.contentWidth), randomNum(0, props.contentHeight));ctx.lineTo(randomNum(0, props.contentWidth), randomNum(0, props.contentHeight));ctx.stroke();}
}
/** 绘制干扰点* param ctx CanvasRenderingContext2D* param max 最大干扰点个数*/
function drawDot(ctx: CanvasRenderingContext2D, maxDot 10) {if (maxDot 0) {return;}for (let i 0; i maxDot; i) {ctx.fillStyle randomColor(0, 255);ctx.beginPath();ctx.arc(randomNum(0, props.contentWidth), randomNum(0, props.contentHeight), 1, 0, 2 * Math.PI);ctx.fill();}
}
/script
2、使用验证码组件
代码可直接复制进行验证ui使用了ant-design-vue如果用的不是ant则直接替换组件即可。 templatediv classmaindiv classcontainerdiva-input placeholder请输入验证码 v-model:valuecode/a-input/divdiv!--验证码组件--VerifyCode v-model:verifyCodeidentifyCode/VerifyCode/div/divdivp当前验证码: {{ identifyCode }}手动输入验证码: {{ code }}/pa-button typeprimary clicksubmit提交/a-button/div/div
/templatescript langts setup
import { ref, onMounted } from vue;
import { message } from ant-design-vue;
import VerifyCode from ./verifyCode.vue;
// 验证码输入框内容
let code ref();
// 验证码图片内容
let identifyCode ref();
function submit() {if (code.value ) {message.error(请先输入验证码);return;}if (identifyCode.value code.value) {message.success(验证码正确✓);} else {message.error(验证码错误,请重新输入);}
}
/script
style langless scoped
.main {padding: 20px;
}
.container {display: flex;flex-direction: row;align-items: flex-start;justify-content: center;
}
/style
注意事项
通过update:verifyCode:来实现验证码的自动回填减少了业务使用方的数据交互处理。
最终效果
