先看效果图吧~
一步一步解析吧。
1、样式以及dom (校验我就不写了但是我会给加校验的方式)
<el-form-item label="验证码" prop="check">
<el-input type="text"
clearable
style=" width: 55%;"
v-model="loginForm.check"
placeholder="请输入验证码">
</el-input>
<div style="width:100px;height:42px;float: right;margin-right: 30px" @click="refreshCode">
<img :src="getVerfyCode" style="width:100px;height:35px;cursor: pointer">
</div>
</el-form-item>
这里img显示的图片是后台给的blob格式
首先,在created中 先存一下验证码的规则。时间戳加随机数 根据需求修改
export default {
name: 'Login',
data () {
return {
loginForm: {},
getVerfyCode: '',
key: '',
//校验方式
loginRules: {
username: [
{ required: true, trigger: 'blur', validator: validateUsername }],
password: [
{ required: true, trigger: 'blur', validator: validatePassword }],
check: [
{ required: true, message: '请输入4位验证码!', trigger: 'blur', },
{ min: 4, max: 4, message: '长度为4个字符!', trigger: 'blur' }]
},
uuidKey:''
}
},
created () {
this.$cookieStore.setCookie('checkKey', this.generateUUID())//生成uuid存储一下
this.getCode() //获取验证码
this.$cookieStore.delCookie('token') // 清除cookie
this.$cookieStore.delCookie('workType')
this.$cookieStore.delCookie('username')
},
methods: {
handleLogin () {
//登陆校验
this.$refs.loginForm.validate(valid => {
if (valid) {
this.$store.dispatch("Login", this.loginForm)
.then(r => {
if (r.success) {
this.$router.push("/edu/home");
} else {
this.$message({
message: r.message,
type: 'warning'
});
}
})
.catch(r => {
console.log(r)
});
} else {
return false
}
})
},
//注册
registerUser () {
this.$router.push({ path: '/register' })
},
generateUUID () {
let d = new Date().getTime()
let uuid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
let r = (d + Math.random() * 16) % 16 | 0
d = Math.floor(d / 16)
return (c == 'x' ? r : (r & 0x3 | 0x8)).toString(16)
})
return uuid
},
getCode () {
this.key = this.$cookieStore.getCookie('checkKey')
this.loginForm.key = this.key
console.log(this.key);
//在这里调用接口获取后台给的url 调用接口的时候 需要自己加参数 当然,传参不只这一种方式(调用接口方法每个人估计不一样 一定要换)
this.$axios({
method: 'get',
url: '/auth/getCode?key=' + this.key + '&' + new Date().getTime(),
responseType: 'blob'
}).then(res => {
const content = res.data
const blob = new Blob([content])
let url = window.URL.createObjectURL(blob)
//赋值给我们要渲染的地方
this.getVerfyCode = url
})
.catch(function (error) {
console.log(error)
})
},
//点击图片的时候更换验证码
refreshCode () {
this.getCode()
},
}
}