小A最終考核(一):所有基本功能的完成

• 整個頁面我首先以完成功能為核心，暫未進行仔細的設計布局，只是大致做了一些簡單的布局

使用的全域變數

1.baseURL（用于資料傳輸前與相應的后綴拼接再發送AJAX請求）

const baseURL = "http://www.rushmc.top/api/";

2.queryURL (用于查詢服務器上檔案(配合src))

• 例如上傳頭像后為了顯示,利用引數拼接插入設定好的img標簽的src屬性中

const queryURL = "http://www.rushmc.top/";
//引數拼接
let userAvatar = document.getElementById("userImg");
    userAvatar.setAttribute("src",queryURL + user.data.photo);

3.window.userInfoG

• 為了獲取登陸之后的用戶資料物件(在AJAX回應時賦值資料物件)
• 獲取:

window.userInfoG = false;

//這里的value是AJAX發送成功后的得到的回應資料(是物件)
postForm(data,"login").then(
            function(value){               
                if(value.code == 200){
                    //獲取登陸后的用戶所有資訊
                    window.userInfoG = value;
                    alert("賬戶密碼正確，登陸成功!");
                    
                    // 切換用戶資訊,并且利用動態結點顯示
                    putHtmlStr(value);
                }
                else if(value.code ==300){
                    alert("賬戶或者密碼錯誤！");
                }
                else{
                    alert("后臺tmd炸了！！！！");
                }
            },
            function(reason){
                alert("請求發送失敗，請檢測網路!");
            }
        );
    }

• 使用
  • 個人發布動態時自動在formdata中加入ID
  • 注銷時,該屬性置為false
  • 進入個人空間的時候看看有沒有登陸
  • 在個人空間查看個人動態時,引數拼接用這里面的id

//以第4個為例子
let urls = "dynamicState/select/" + window.userInfoG.data.id;
    pathGetData(urls).then(function(value){...},
        function(reason){...}    );

封裝的AJAX請求(配合Promise使用)

GET請求

function dyGetForm(urls){
    //urls是呼叫功能域名的后面的內容
    let p1 = new Promise(function (resolve, reject) {
        var xhr = new XMLHttpRequest();
        xhr.open("GET", baseURL+urls,true);
        xhr.send();
        //每次xhr的狀態發送改變就呼叫handle函式
        xhr.onreadystatechange = handle;

        function handle() {
  
          if (this.readyState != 4) {
            return;
          }
          if (this.status == 200) {
              //回傳資訊
            let info = JSON.parse(xhr.responseText);
              //resolve把p1這個promise物件狀態改變為成功,并且將值傳進去
            resolve(info);
          } else {
            let info = JSON.parse(xhr.responseText);
              //resolve把p1這個promise物件狀態改變為失敗,并且將值傳進去
            reject(info);
          }
        }
      });
	//回傳Promise物件
      return p1;
}

使用

queryDyAllBtn.onclick = function(){
  // 查詢所有動態的頁面出現,個人空間消失

    dyGetForm("dynamicState/select/all").then(
        value=>{
        ...對回應報文進行展示或處理
        },
        reason=>{
        ...AJAX回傳的狀態碼不為200
        }

POST請求

• 基本每個功能都會用

//用于上傳輸入資料，得到回應資料
//用戶發送AJAX通用函式
function postForm(data,urls){
    let p1 = new Promise(function (resolve, reject) {
        var xhr = new XMLHttpRequest();
        xhr.open("POST", baseURL+urls,true);
        xhr.send(data);
        xhr.onreadystatechange = handle;
        function handle() {
          //這一步操作很關鍵，因為一開始readyState的值是1，按以往寫肯定會reject，然后就無法改變了
          //所以我們要讓它非4的時候趕緊出來，不要執行resolve和reject
          if (this.readyState != 4) {
            return;
          }
          if (this.status == 200) {
            let info = JSON.parse(xhr.responseText);
            resolve(info);
          } else {
            let info = JSON.parse(xhr.responseText);
            reject(info);
          }
        }
      });
      return p1;
}

使用

• 動態查詢模塊為例

Ipt = document.getElementById("searchIpt").value;
    if(Ipt){
        let urls = "dynamicState/search/" + Ipt;
        pathGetData(urls).then(
            value=>{
                if(value.code == 200){  
                    //插入內容到頁面中
                    insertSearchHtml(value);
                    //獲得點擊標題實作查看詳細的鍵
                    let detailBtn = document.getElementsByClassName("detailDyS");
                    //在這個函式里面為按鈕系結事件
                    toSearchDetail(value,detailBtn);
                }
                else if(value.code == 11000){
                    alert(value.msg);
                }
            },
            reason=>{}
            )
    }

用戶模塊

用戶登陸/注冊/注銷

登陸流程以及代碼

流程：

獲取輸入框的內容–>進行正則驗證–>利用remember函式看是否需要記住賬戶密碼–>利用changeData函式按POST發送輸入框內容并回傳回應資料

代碼：

注冊流程以及代碼

流程：

獲取輸入框的內容–>進行正則驗證賬戶和手機號–>利用changeData函式按POST發送輸入框內容并回傳回應資料–>彈出框告訴您的賬號

代碼：

注銷流程以及代碼

流程：

• window中專門存登陸后的用戶資訊的物件清空（window.userInfoG）
• 用戶資訊界面消失
• 輸入框清空,記住賬戶密碼勾選重置
• 移除localStorage中的賬戶密碼
• 如果在登陸時候打開了個人空間,注銷時候會關掉個人空間

代碼：

修改密碼

流程:

• 注意:修改密碼是在用戶登陸后才能進行的

構造FormData物件data -->將window.userInfoG中的id自動append到data中 -->彈出輸入框輸入新密碼 --> 將密碼放入data中 --> 彈出框告訴用戶新密碼 -->注銷重新登陸(正常操作)

代碼:

登陸注冊的正則驗證

流程：

• 定義兩個正則運算式,用于驗證賬號和手機號碼是否格式正確，其他密碼，用戶名則是利用了maxlength限制輸入的字數，

定義–>點擊登陸(注冊)–>判斷輸入框內容資料是否符合–>符合才發送AJAX請求

代碼:

 let reg1 = /\W{1,10}/;
 let reg2 = /[1][3]\d{0,9}$|[1][5]\d{0,9}$|[1][7]\d{0,9}$|[1][8]\d{0,9}$/;

if(!reg1.test(usernameV)){
        if(reg2.test(phoneV)){
            changeData();
        }
        else{
            alert("電話應該是以13、15、17、18開頭的電話的11位數字！")
        }
    }
    else{
        alert("賬號只由英文，數字和下劃線‘_’的10位以內字符組成");
    }
}

記住賬號密碼

流程:

檢查記住賬戶密碼勾選是否勾上–>利用localStorage存入賬戶密碼–>重繪頁面或重新打開時利用window.onload檢查localStorage中的是否是否有存賬戶密碼–>有就獲取相應的值放入輸入框，并且自動勾選(沒有或注銷就清空，不勾選)

函式：

  //remName和remPW是存入localStorage的鍵名
  let remember = function(){
        if(remName.checked){ window.localStorage.setItem("remName",lgNameInner.value);
        }
        else{
            window.localStorage.removeItem("remName"); 
        }
        if(remPW.checked){
      window.localStorage.setItem("remPW",pwInner.value);
        }
        else{
            window.localStorage.removeItem("remPW");
        }
    }
  
  //重繪頁面或重新打開頁面自動檢測
window.onload = function (){
    if(window.localStorage.getItem("remName")){
        remName.checked = true;
        lgNameInner.value = window.localStorage.getItem("remName");
    }
    else{
        remName.checked = false;
        lgNameInner.value = "";
    }
    if(pwInner.value = window.localStorage.getItem("remPW")){
        remPW.checked = true;
        pwInner.value = window.localStorage.getItem("remPW");
    }
    else{
        remPW.checked = false;
        pwInner.value = "";
    }
}

用戶個人資訊展示

流程：

繼登陸后會自動顯示資料–>傳入用戶登陸后的回應資料給putHtmlStr函式的引數user用戶資訊展示–>利用選擇器把展示用戶資料的div中的li取出并用模板字串，

函式:

  let putHtmlStr = function(user){ 
   //傳進來的user是后臺的用戶登陸后的回應資料
       
   //下面兩行是顯示用戶的頭像
    let userAvatar = document.getElementById("userImg");
    userAvatar.setAttribute("src",queryURL + user.data.photo);

   // 這里是顯示用戶資訊
    let li = document.querySelectorAll(".userInfo li");
     li[0].innerHTML = `歡迎回來,${user.data.name}`
     li[1].innerHTML = `ID:${user.data.id}`
     li[2].innerHTML = `密碼:${user.data.password}`
     li[3].innerHTML = `電話:${user.data.phone}`
   
   //用戶資訊界面覆寫登陸界面彈出
      userInfoBox.style.display = "flex";
    }

上傳/顯示用戶頭像

流程：

構造FormData物件data -->獲取圖片檔案并加入data中 --> 將window.userInfoG中的id自動append到data中 -->交換資料 --> 利用setAttribute將img的路徑改變為服務器傳出來的，

代碼：

動態模塊

發布動態

輸入內容的輸入框的樣式(textarea)

讓它跟接近是輸入內容的效果

流程：

獲取輸入的各個資訊 --> 查看勾選框是否勾選從而選擇是否上傳檔案 -->是否標題和內容里面不為空 --> 利用POST進行資料交換 -->發布界面消失

代碼:

洗掉動態

流程:

洗掉按鈕觸發 --> 輸入要洗掉的動態 ID --> 輸入的ID是否為數字 --> 利用POST進行資料交換 --> 展示個人動態

代碼:

展示所有用戶的動態

注意:

• 這里我們只需要獲取用戶動態的部分資訊來展示動態的小卡片，并非動態詳細內容(我獲取的是標題，內容(利用CSS省略過多的)，發布者名稱和發布者時間)
• 小卡片上內容省略的展示如下

所用到的全域變數：

重要的函式：

1.轉換為模板字串的函式()(用于所有動態累加插入頁面)

2.插入函式(插入模板字串到容器中)

3.觸發事件

流程:

利用封裝的GET發送AJAX請求結合Promise獲得資料 --> 呼叫insertAllDyHtml將資料傳入 --> 通過for遍歷資料加到總的模板字串之中 --> 插入到動態大容器的HTML中即可顯示 --> 獲取每個動態小卡片上面的標題按鈕(為查看詳細動態做準備)

查看所有用戶的動態詳情

注意:

用戶的圖片我們需要判斷有多少張，查看下面的函式二

重要的函式:

1.為動態小卡片能進入詳細動態的標題系結事件的函式 toDetailDy

2.詳細動態的模板字串的函式 htmlDyDetail

展示和查看本人的動態

• 大體上與上面相似，只是獲取的

搜索動態(沒有濫用全域變數)

• 相對于展示查看所有動態有所優化,因為用全域變數來獲取HTML里面的標簽，在標簽多且累贅的時候很容易出現問題，所以優化就是多利用函式傳參

重要的函式:

1.為輸入框敲擊回車系結事件

2.提交的時候觸發的事件(插入所有動態小卡片，給標題按鈕系結事件)

3.為動態小卡片按鈕系結進入詳細內容事件，再在動態詳細中的回退按鈕系結事件的函式toSearchDetail

流程：

獲取輸入框資料 --> 是否輸入框不為空 --> 發送請求并得到資料 --> 呼叫insertSearchHtml函式插入動態小卡片到容器中 --> 為小卡片的標題按鈕系結事件并且為動態詳細中的回傳按鈕系結事件

小結

1. 結合Promise再來使用AJAX請求真的很方便

2. 為了防止代碼累贅不清晰，要優化代碼，基本都變成模塊化操作函式，使得結構更加清晰，也防止重復耦合

3. 像此類與登陸用戶連接的操作，要用在全域定義一個屬性專門存登陸后的用戶資料，同時注意什么時候清除(注銷)

4. 盡量將濫用全域變數的行為多變為傳參到函式的行為，因為一些系列的動態操作可能使全域變數改變