用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）