vue 验证登录,vue项目登录获取验证码
这篇文章主要为大家详细介绍了某视频剪辑软件实现登录验证码，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了某视频剪辑软件实现登录验证码的具体代码，供大家参考，具体内容如下
先来演示效果图
帆布验证码组件（可直接复制，无需改动)
模板
画布
画布id= s-canvas :width=内容宽度:height=内容高度/canvas
/div
/模板
脚本
导出默认值{
名称：侧面识别，
道具：{
识别码：{
类型：字符串，
默认值："1234"
},
fontSizeMin: {
类型：数量，
默认值：25
},
fontSizeMax: {
类型：数量，
默认值：30
},
backgroundColorMin: {
类型：数量，
默认值：255
},
backgroundColorMax: {
类型：数量，
默认值：255
},
colorMin: {
类型：数量，
默认值：0
},
colorMax: {
类型：数量，
默认值：160
},
lineColorMin: {
类型：数量，
默认值：100
}，lineColorMax: {
类型：数量，
默认值：255
},
dotColorMin: {
类型：数量，
默认值：0
},
dotColorMax: {
类型：数量，
默认值：255
},
内容宽度：{
类型：数量，
默认值：112
},
内容高度：{
类型：数量，
默认值：31
}
},
方法：{
//生成一个随机数
随机编号(最小值，最大值){
回归数学。地板(数学。random()*(max-min)min)
},
//生成一个随机的颜色
随机颜色(最小值，最大值){
设r=this.randomNum(最小值，最大值)
设g=this.randomNum(最小值，最大值)
设b=this.randomNum(最小值，最大值)
返回" rgb( r ， g ， b )"
},
drawPic() {
让画布=文档。getelementbyid( s-canvas )
let ctx=canvas.getContext(2d )
ctx.textBaseline=bottom
//绘制背景
CTX。填充样式=this。随机颜色(这个。背景色最小值，this.backgroundColorMax)
ctx.fillRect(0，0，this.contentWidth，this.contentHeight)
//绘制文字
对于(设I=0；我这个。识别代码。长度；i ) {
this.drawText(ctx，this.identifyCode[i]，I)
}
本。画线(ctx)
这个。绘图点(ctx)
},
drawText(ctx，txt，i) {
CTX。填充样式=this。随机颜色(这个。color min，this.colorMax)
CTX。font=this。random num(这个。最小字体大小，this.fontSizeMax) px SimHei
设x=(I ^ 1)*(这个。内容宽度/(这个。识别代码。长度^ 1))
设y=这个。random num(这个。最大字体大小，this.contentHeight - 5)
var deg=this.randomNum(-45，45)
//修改坐标原点和旋转角度
ctx.translate(x，y)
ctx.rotate(度数*数学/180).
ctx.fillText(txt，0，0)
//恢复坐标原点和旋转角度
CTX . rotate(-deg * Math ./180).
ctx.translate(-x，-y)
},
绘制线(ctx) {
//绘制干扰线
对于(设I=0；i5；i ) {
CTX。笔画风格=这个。随机颜色(这个。线条颜色最小值，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()
}
},
绘图点(ctx) {
//绘制干扰点
对于(设I=0；i 80i ) {
CTX。填充样式=this。随机颜色(0.255)
ctx.beginPath()
ctx.arc(this.randomNum(0，this.contentWidth)，this.randomNum(0，this.contentHeight)，1，0，2 * Math .PI)
ctx.fill()
}
}
},
观察：{
identifyCode() {
this.drawPic()
}
},
已安装(){
this.drawPic()
}
}
/脚本
样式范围。表示“上帝的”: sblood画布{
高度：38px
}。帆布画布
边距-顶部：1px
左边距：8px
}
/风格
注册页面的超文本标记语言部分，按需改动
引入验证码组件
方法方法
注册页面完整代码
style lang=less
@import ./登录。少’；
/风格
模板
div class= log in @ keydown。enter=处理提交
div class=login-con
card:bordered= false style= width:350 px；高度：380像素
div class=form-con
制表符值=名称1 :动画=假
选项卡窗格标签=登录name=name1
form ref= loginForm :model= form :rules= rules :label-width= 90 inline
表单项标签=帐号prop=用户名
输入v-model=形式。用户名 placeholder=请输入帐号ref= input clearable style= width:200 px /
/FormItem
表单项标签=密码prop=密码
输入v-model=形式。密码 placeholder=请输入密码clearable style=width: 200px/
/FormItem
表单项标签=验证码prop=verificationCode
输入v-model=形式。验证码 placeholder=请输入验证码clearable style=width: 200px/
div @ click=刷新代码 style= margin-top:20px
！-验证码组件-
s-identify:识别码=识别码/s-identify
/div
/FormItem
div style=text-align: center
button @ click= handle submit type= primary style= margin-right:20px 登录/按钮
/div
/表单
/TabPane
选项卡窗格标签=注册name=name2
form ref=“form validate”:model=“form validate”:rules=“rule validate”:label-width=“90”inline
表单项标签=帐号prop=用户名
输入v-model=表单验证。用户名 placeholder=请输入帐号ref= input clearable style= width:200 px /
/FormItem
表单项标签=密码prop=密码
输入v-model=表单验证。密码 placeholder=请输入密码clearable style=width: 200px/
/FormItem
表单项标签=手机号prop=mobile
输入v-model=表单验证。手机 placeholder=请输入手机号clearable style=width: 200px /
/FormItem
表单项标签=短信验证码prop=header
输入v-model=表单验证。标题“placeholder=”短信验证码style=width: 200px/
Button type= primary size= small @ click= get code :disabled= code disabled { { codeMsg } }/Button
/FormItem
div style=text-align: center
button type= primary @ click= register( form validate )注册/按钮
/div
/表单
/TabPane
/选项卡
/div
/卡片
/div
！-真空粒子
color=#FF4500
:particleOpacity=0.7
:particlesNumber=300
shapeType=circle
:particleSize=7
linesColor=#00FF00
：线宽=2
:lineLinked=true
:lineOpacity=0.4
:linesDistance=150
:moveSpeed=4
:hoverEffect=true
hoverMode=grab
:clickEffect=true
clickMode=排斥
/vue-粒子-
/div
/模板
脚本
从" js-cookie "导入曲奇；
从" @/服务/服务"导入{apiRequest，login，get code }；
从" @/组件/侧面标识符"导入侧面标识；
导出默认值{
组件：{ SIdentify }，
名称：登录，
data() {
返回{
表单：{},
表单验证：{},
规则：{
用户名：[
{必需：真，消息： 登录用户名不能为空，触发器：模糊 }
],
密码：[
{必需：真，消息： 登录密码不能为空，触发器：模糊 }
],
验证码：[
{必需：真，消息： 验证码不能为空，触发器：模糊 }
]
},
规则验证：{
用户名：[
{必需：真，消息： 登录用户名不能为空，触发器：模糊 }
],
密码：[
{必需：真，消息： 登录密码不能为空，触发器：模糊 }
],
手机：[
{必需：真，消息： 手机号不能为空，触发器：模糊 }
],
标题：[
{必需：真，消息： 短信验证码不能为空，触发器：模糊 }
]
},
img:././static/grey_wolf.jpg ，
//是否禁用按钮
codeDisabled: false，
//倒计时秒数
倒计时：60,
//按钮上的文字
codeMsg:获取验证码，
//定时器
计时器：空，
识别码："",
识别码：“1234567890 abcdefjhijklinopqrsduvwxyz”，
};
},
方法：{
//刷新验证码
refreshCode () {
this.identifyCode=
这个。做代码(这个。识别代码，4)；
},
makeCode (o，l) {
对于(设I=0；I l；i ) {
这个。识别码=这个。识别代码[这个。随机数(0，this.identifyCodes.length)]
}
},
随机编号(最小值，最大值){
回归数学。地板(数学。random()*(max-min)min)
},
//获取短信验证码
getCode() {
//验证码60秒倒计时
如果(!this.timer) {
这个。getvalidstr()；
这个。timer=setInterval(这个。getvalidstr，1000)；
}
apiRequest(this，getCode(this.form.mobile)，response={
});
},
getValidStr(){
如果(这个。倒数0这个。倒计时=60){
这个。倒数-；
如果（这个。倒计时！==0) {
this.codeMsg=重新发送(‘这个。倒数“)”；
this.codeDisabled=true
}否则{
清除间隔(这个。定时器)；
this.codeMsg=获取验证码；
倒计时=60
this.timer=null
this.codeDisabled=false
}
}
},
handleSubmit() {
这个. refs.loginForm.validate((有效)={
如果（有效){
//登录密码做讯息摘要5加密
让密码=这个$复制到。MD5(这个。形式。密码)；
//登录接口请求
apiRequest(this，login(this.form.username，password)，response={
这个. store.commit(setUserInfo ，response。数据)；
Cookies.set(user ，this。形式。用户名)；
Cookies.set(userId ，响应。数据。id)；
本地存储。会话id=响应。会话id
这个. store.commit(setAvator ， )；
如果(这个。形式。username=== admin ){
Cookies.set(access ，0)；
}否则{
Cookies.set(access ，1)；
}
这个1000美元路由器。push({ name: home _ index })；
});
}
});
},
注册(){
}
},
已安装(){
//初始化验证码
this.identifyCode=
这个。做代码(这个。识别代码，4)
},
};
/脚本
风格
/风格
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。