我要评论实现效果
// template
<el-form :model="loginform" :rules="fieldrules" ref="loginform" label-position="left" label-width="0px" class="login-container">
<span class="tool-bar"></span>
<h2 class="title">用户登陆</h2>
<el-form-item prop="account">
<el-input type="text" v-model.trim="loginform.account" auto-complete="false" placeholder="账号"></el-input>
</el-form-item>
<el-form-item prop="password" class="item-m10">
<el-input type="password" v-model.trim="loginform.password" auto-complete="false" placeholder="密码"></el-input>
</el-form-item>
<el-form-item prop="code" align="left" style="margin-top: 20px">
<el-input v-model="loginform.code" style="width: 170px" placeholder="验证码，点击图片刷新"></el-input>
<el-tag class="login-tag-code" @click="getcode">{{ viewcode }}</el-tag>
</el-form-item>
<div class="checked-item">
<el-checkbox v-model="checked">记住密码</el-checkbox>
</div>
<el-form-item style="width: 100%" class="btn-item">
<el-button style="width: 100%" @click.native.prevent="loginsubmit" :loading="loading">登录</el-button>
</el-form-item>
// js
// ---------分割线
data () {
return {
viewcode: '',
loginform: {
account: '',
password: '',
src: '',
code: ''
},
fieldrules: {
account: [{ required: true, message: '请输入账号', trigger: 'blur' }],
password: [{ required: true, message: '请输入密码', trigger: 'blur' }]
},
checked: false,
// 加载中的标志
loading: false
}
},
// ------ 分割线
methods: {
loginsubmit () {
if (!this.loginform.account || !this.loginform.password) {
this.$message.error('账号或密码不能为空！')
return
}
if (!this.loginform.code || this.loginform.code !== this.viewcode) {
this.$message.error('验证码不正确！')
return
}
this.loading = true
let userinfo = {
account: this.loginform.account,
password: this.loginform.password
}
//登陆接口
this.$api.login
.login(userinfo)
.then((res) => {
if (this.checked) {
let rememberinfo = json.stringify({ ...userinfo })
localstorage.setitem('rememberinfo', rememberinfo) // 记住密码时 保存login
} else {
localstorage.removeitem('rememberinfo')
}
this.$router.push('/') // 登录成功，跳转到主页
this.loading = false
})
.catch((err) => {
this.$message({ message: err.message, type: 'error' })
})
},
//获取验证码
getcode () {
this.viewcode = ''
let codestring = '0123456789abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz'
let codearray = codestring.split('')
let num = codearray.length
let newcodearray = []
for (let i = 0; i < 5; i++) {
let index = math.floor(math.random() * num)
newcodearray.push(codearray[index])
}
this.viewcode = newcodearray.join('')
},
},
mounted () {
this.getcode()
if (localstorage.getitem('rememberinfo')) {
// 有上次登录信息 显示上次登录
let rememberdata = json.parse(localstorage.getitem('rememberinfo'))
const { account, password } = rememberdata
this.loginform.account = account
this.loginform.password = password
}
}
样式代码省略。。。
总结
到此这篇关于vue前端实现login页登陆验证码的文章就介绍到这了,更多相关vue登陆页验证码内容请搜索代码网以前的文章或继续浏览下面的相关文章希望大家以后多多支持代码网！
发表评论