一对一直播源码运行的过程中,肯定少不了参数验证和用户登录,那么是怎么实现的呢?
1.参数校验
<script>
import "~/assets/css/page-sj-person-loginsign.css";
import userApi from "@/api/user";
import {setUser} from "@/utils/auth";
import WechatLogin from "@/components/wechatLogin/wechatLogin";
export default {
data() {
return {
pojo: {}, // 整个表单的实体对象
code: "", // 验证码
checked: false, // 是否同意服务条款
mobile: "", // 手机号码
password: "", // 密码
remenberMe: false, // 记住我
dialogVisible: false, // 弹出框
};
},
methods: {
sendsms() {
// 验证手机号
if (!/^((13[0-9])|(15[^4])|(18[0,2,3,5-9])|(17[0-8])|(147))\d{8}$/g.test(this.pojo.mobile)) {
this.$message({
message: "手机填写有误",
type: 'error',
showClose: true,
});
return;
}
userApi.sendsms(this.pojo.mobile).then((response) => {
this.$message({
message: response.data.message,
type: (response.data.flag ? 'success' : 'error'),
showClose: true,
});
});
},
register() {
// 数据校验
let validateObj = this.dataValidate();
if (!validateObj.flag) {
this.$message({
message: validateObj.errMsg,
type: 'error',
showClose: true,
});
return;
}
// 进行注册
userApi.register(this.pojo, this.code).then((response) => {
this.$message({
message: response.data.message,
type: (response.data.flag ? 'success' : 'error'),
showClose: true,
});
});
},
// 校验数据
dataValidate() {
let errMsg = "";
// 判断昵称
if (!this.pojo.nickname) {
errMsg = "昵称不能为空";
return {
flag: false,
errMsg,
};
}
// 判断密码
if (!this.pojo.password || this.pojo.password.length <= 6 || this.pojo.password.length >= 16) {
errMsg = "密码长度必须在6-16之内";
return {
flag: false,
errMsg,
};
}
// 是否同意了服务条款
if (!this.checked) {
errMsg = "必须先同意服务条款";
return {
flag: false,
errMsg,
};
}
return {
flag: true,
errMsg,
};
},
login() {
// 登录校验
if (!/^((13[0-9])|(15[^4])|(18[0,2,3,5-9])|(17[0-8])|(147))\d{8}$/g.test(this.mobile)) {
this.$message({
message: "手机填写有误",
type: 'error',
showClose: true,
});
return;
}
if (!this.password) {
this.$message({
message: "密码不能为空",
type: 'error',
showClose: true,
});
return;
}
userApi.login(this.mobile, this.password).then((response) => {
if (response.data.flag) {
let data = response.data.data;
// 将返回的数据存入cookie
setUser(data.id, data.token, data.name, data.avatar);
location.href = "/manager"; // 登录成功,跳转到用户中心
} else {
this.$message({
message: response.data.message,
type: 'error',
showClose: true,
});
}
});
},
showWechatLogin() {
this.dialogVisible = true;
},
},
head: {
script: [
// 导入生成微信二维码的js
{src: 'https://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js'},
],
},
components: {
WechatLogin,
},
}
</script>
2.用户未登录页面跳转
<script>
import "~/assets/css/page-sj-person-homepage.css";
import {getUser} from "@/utils/auth";
export default {
created() {
if (getUser().name === undefined) {
// 未登录
this.$router.push('/login_register');
}
},
}
</script>
以上,就是一对一直播源码实现参数验证和用户登录的内容了。
声明:本文由云豹科技转发自洋人德德博客,如有侵权请联系作者删除