我上一篇关于 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);
- }
- },
来源: https://www.cnblogs.com/youku/p/8625618.html