// 给输入手机号的input框绑定一个焦点消失事件
check_mobile() {
if (!this.mobile) return;
if (!this.mobile.match(/^1[3-9][0-9]{9}$/)) {
this.$message({
message: '手机号有误',
type: 'warning',
duration: 1000,
onClose: () => {
// 清空input框的值
this.mobile = '';
}
});
return false;
}
// 走到这是前端校验手机号正确合法,则现在开始发送axios请求,向后端进行请求在校验一处
// params是get请求需要带的数据
this.$axios.get(this.$settings.base_url + '/user/check_telephone/', {params: {telephone: this.mobile}}).then(response => {
if (response.data.code == 1) {
// 手机号存在合法,允许发送验证码
this.is_send = true;
} else {
this.$message({
message: '手机号不存在',
type: 'warning',
duration: 1000,
onClose: () => {
this.mobile = '';
}
});
}
}).catch(error => {
console.log(error)
})
},
// 当点击发送验证码时,触发该事件
send_sms() {
// 先定义了一个is_send字段默认是false,当该字段为false就直接return了
if (!this.is_send) return;
// 用户点了一次又设置成false
this.is_send = false;
// 定义了一个变量初始为60
let sms_interval_time = 60;
this.sms_interval = "发送中...";
// 向后端获取验证码的接口发送请求,请求其获取验证码
this.$axios.get(this.$settings.base_url + '/user/send/', {params: {telephone: this.mobile}}).then(response => {
if (response.data.code) {
this.$message({
message: '发送验证码成功',
type: 'success',
duration: 1000,
});
}
}).catch(error => {
})
// setInterval是一个定时器,第一个参数是一个函数,第二个参数是每隔多长时间执行一下这个函数
let timer = setInterval(() => {
if (sms_interval_time <= 1) { // 如果小于等于1则把定时器清除
clearInterval(timer);
this.sms_interval = "获取验证码";
this.is_send = true; // 重新回复点击发送功能的条件
} else {
sms_interval_time -= 1;
// ${sms_interval_time}秒后再发` es6语法,格式化字符串
this.sms_interval = `${sms_interval_time}秒后再发`;
}
}, 1000);
},
// 点击验证码的登录按钮,向后端发送请求
code_login() {
if (this.mobile && this.sms) {
// 发送请求
this.$axios.post(this.$settings.base_url + '/user/code_login/', {
telephone: this.mobile,
code: this.sms,
}).then(response => {
// console.log(response.data)
// 先判断手机号和验证码是否正确
if (response.data.code == 0) {
this.$message({
message: response.data.msg['non_field_errors'][0],
type: 'warning'
})
} else {
// 成功之后,把token和username保存到cookies里
this.$cookies.set('token', response.data.token, '7d')
this.$cookies.set('username', response.data.username, '7d')
// 登录成功关闭登录窗口
this.$emit('close')
// 当关闭登录窗口时,立刻提醒前端显示用户名
this.$emit('loginsuccess')
}
}).catch(errors => {
})
} else {
this.$message({
message: '用户名和验证码必须填哦!',
type: 'warning'
})
}
}
原文地址:http://www.cnblogs.com/suncolor/p/16855728.html
1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,请务用于商业用途!
3. 如果你也有好源码或者教程,可以到用户中心发布,分享有积分奖励和额外收入!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!
7. 如遇到加密压缩包,默认解压密码为"gltf",如遇到无法解压的请联系管理员!
8. 因为资源和程序源码均为可复制品,所以不支持任何理由的退款兑现,请斟酌后支付下载
声明:如果标题没有注明"已测试"或者"测试可用"等字样的资源源码均未经过站长测试.特别注意没有标注的源码不保证任何可用性