vue实现登录页面的验证码以及验证过程解析（面向新手)

做成之后就

是这个样子

接下来上代码

创建一个组件。显示验证码图片

模板div class=' s-canvas ' canvas id=' s-canvas ' : width=' content width ' : height=' content height '/canvas/div/template script导出默认{ name : ' SIdentify '，prop 3360 {识别代码： } {//默认注册码type: String，default: '1234' }，fontSizeMin: { //字体最小值type: Number，default: 25 }，fontSizeMax: { //字体最大值键入Number :default: 35 }，backgroundColorMin: { //验证码图片背景色最小值type: Number，default: 200 }，backgroundColorMax: { //验证码图片背景色最大值键入Number :default: 220 }，dotcolymin : {//背景干扰点最小值type: Number，default: 60 }，dotcormax: {//背景干扰点最大值键入：数字，默认值： 120 }，contentWidth: { //容器宽度键入：数字，默认值： { 90 },内容高度： { //容器高度键入： Number，default: 38 } }，methods: { //生成一个随机数randomNum (min，max){返回数学。地板(数学。random()*(max-min)min)}，//生成一个随机的颜色randomColor (min，max) {让r=this.randomNum(min，max)让g=this.randomNum(min，max)让b=this.randomNum(min，max)返回rgb(' r '，' g '，' b ')' }，draw pic(){让canvas=document。getelementbyid(' s-canvas ')让CTX=canvas。getcontext(' 2d ')CTX。textbaseline=' bottom '//绘制背景CTX。填充样式=' # E6 ecfd ' CTX。填充矩形(0，0，this.contentWidth，this.contentHeight) //绘制文字用于(设I=0；我喜欢这个。识别代码。长度；i ) { this.drawText(ctx，this.identifyCode[i]，I)}这个。(CTX)画这条线。画点(CTX)}，画文字(CTX，txt，I){ CTX。fillstyle=this。randomcolor(50，160) //随机生成字体颜色CTX。font=this。randomnum(这个。font sizemin，this.fontSizeMax) 'px SimHei' //随机生成字体大小让x=(I ^ 1)*(这个。内容宽度/(这个。识别代码。长度1))让y=这个。randomnum(这个。font sizemax，这个。内容高度-5)var deg=this。randomnum(-30，30) //修改坐标原点和旋转角度平移(x，y)旋转(度*数学).PI/180) ctx.fillText(txt，0，0) //恢复坐标原点和旋转角度旋转(-度*数学. PI/180) ctx.translate(-x，-y) }，drawLine (ctx) { //绘制干扰线用于(设I=0；i4；我){ CTX。strokestyle=这个。兰多姆颜色(100，200)CTX。begin path()CTX。moveto(this.randomNum(0，this.contentWidth)，this.randomNum(0，this。内容高度))CTX。lineto(这个。randomnum(0，this.contentWidth)，this。randomnum(0，这个。内容高度))CTX。stroke()}，drawDot (ctx) { //绘制干扰点用于(设I=0；CTX。fillstyle=this。兰多姆颜色(0，255)CTX。begin path()CTX。arc(this.randomNum(0，this.contentWidth)，this。randomnum(0，this.contentHeight)，1，0，2 * Math .皮)CTX。fill()} } } }，watch : {识别码(){ this。draw pic()} }，mounted(){ this。draw pic()} }/script在登录页面中验证码输输入框

El-form-item prop=' code ' El-input type=' text ' v-model=' form log in。代码'占位符=' -'模板槽='前置'验证码/template template slot=' append ' div class=' log in-code ' @ click=' refresh code ' Identify : Identify code=' Identify code '/Identify/div/template/El-input/El-form-item登录按钮

El-button-group El-button style=' width :100% ' @ click=' submit ' type=' primary '登录/el按钮/el按钮组引入之前的组件（在例子中它叫识别)

从""导入标识“/识别”在登录组件中引入识别（这是验证码组件)这一部分略

在数据中

//表单formLogin: { username: ' '，password: ' '，code: '' }，识别码3360 ' 1234567890 abcdefjhijklinopqrsdwxyz '，识别码： ' '，//校验规则： {用户名： [{必需： true，消息： '请输入用户名，trigger: 'blur' } ]，密码：[{必需： true，消息： '请输入密码，trigger: 'blur' }]，代码： [{ required: true，message: '请输入验证码，trigger: 'blur' }] }在安装好的中

挂载(){ //初始化验证码这个。识别代码=' this。制作代码(这个。识别码，4) }，在方法中

//引入验证接口.mapActions('d2admin/account '，['login'])，//重置验证码刷新代码(){ this。识别代码=' this。制作代码(这个。识别代码，4) }，makeCode (o，l) { for(让I=0；我。我){这个。识别代码=这个。识别代码[这个。randomNum(0，this.identifyCodes.length)] }，randomNum (min，max){ return math。地板(数学。random()*(max-min)min)}，/** * @description提交表单*///提交登录信息submit(){ if(this。表单登录。代码。tolowercase()！==这个。识别代码。tolowercase()){ this .$message.error('请填写正确验证码)this.refreshCode()返回}这个.参考文献。登录信息。验证(有效={如果(有效){//登录//注意这里的演示没有传验证码//具体需要传递的数据请自行修改代码this.login({ vm: this，username : this。表单登录。用户名，密码：这个。表单登录。密码})；} else { //登录表单校验失败这个$message.error('表单校验失败');} });}以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。