用vue开发一个app(4,一个久等了的文章)H5直播平台登录注册(1)
我上一篇关于vue的文章和这一篇时间隔了有点久了。最近终于写完了。
因为我一直想写个有点实绩的东西,而不是随便写一个教程一样东西。结合最近在项目中学到的经验和我的一点创意。
首先介绍下这是个什么!
H5直播平台!
不是一个标题,我已经开发完了。
接着这里是登录注册的流程图
这边微信登录,因为没有我个人没有权限开通服务号,所以没有测试。用的还是16年我上个公司的代码。
验证码我用的是aliyun的短信平台,大部分短信平台都有个需要企业资质的东西。
因为这是个个人站,只有腾讯云和阿里云有个人的
简单介绍下这边先验证了一下是否是个手机号
然后验证码这块我也没有找到自动发送的,所以我在考虑是让php生成一个随机数还是js math.floor生成最大6位的随机数。
最后偷了个懒
codeBtn(){ if(this.disabled==false){ var reg=11 && /^((13|14|15|17|18)[0-9]{9})$/; if(this.mobile==''){ alert("请输入手机号码"); }else if(!reg.test(this.mobile)){ alert("手机格式不正确"); }else{ this.random = Math.floor(Math.random() * 999999); this.iscoder=true; console.log(this.random); this.time=60; this.disabled=true; this.timer(); this.model.coder({mobile:this.mobile,code:this.random}); } }
关于提交验证码这边的倒计时,我是这样写的
timer() { if (this.time > 0) { this.time--; this.btntxt=this.time+"s"; setTimeout(this.timer, 1000); } else{ this.time=0; this.btntxt="获取"; this.disabled=false; } },
这样我就能用户点击注册按钮先执行这步
registerBtn(){ if(this.iscoder==false){ alert("请获取验证码哟") }else if(this.coderNumber!=this.random){ alert("验证码不对哟") }else{ let form = document.querySelector('form[name="register"]'); let formData = new FormData(form); this.model.register(formData); } },
用vue开发一个app(4,一个久等了的文章)H5直播平台登录注册(1)