vue大型電商專案尚品彙（前臺篇）day05

10發表於2022-05-29

Vue

緊急更新第二彈，然後就剩下最後一彈，也就是整個前臺的專案

一.購物車

1.加入購物車（新知識點）

加入到購物車是需要介面操作的，因為我們需要將使用者的加入到購物車的儲存到伺服器資料庫，你的賬號後面才會在你自己的購物車看到，所以這裡要先寫介面

然後vuex三部曲，

返回來的資料沒有data，就是告訴你成功了，存近資料庫了所以確實也不需要什麼data，所以這裡vuex三部曲，只需要到actions這一步就可以了

成功與失敗的判定：

之前在actions裡面的操作都是async加await的操作，他們的原理是這樣的，是必須配合一起使用，但是各負責各的事，async是負責這個函式的返回值只一個promise物件，而await是能拿到promise的成功返回物件，但是拿到了也只能在函式裡面操作

所以這裡的解決方法就是，讓actions裡面的函式awiat接收成功回撥資料，然後判斷成功返回一個資訊，else就是失敗，失敗就用promise.reject這個方法來返回捕捉一個promise失敗的資訊返回出來，最後由於async的修飾，都是返回的promise物件，然後在這邊dispatch是呼叫的actions這裡面的函式相當於，所以會接受到一個promise物件，也可以用await來接受成功的回撥，但是這裡如果是失敗的話由於前面丟擲的是一個Error錯誤資訊，所以可能會導致程式崩潰，這裡可以用try catch來讓程式正常走下去

2.路由跳轉

接著上面的邏輯，當我們成功執行就是接著執行，catch裡面是出現了錯誤才執行

3.傳遞引數之會話儲存

接下來可以進行傳遞引數過去，在我們的購物車介面顯示了，我們這裡需要的引數有四個，其中有三個都是在詳情元件當中的計算屬性之中，另外一個是單獨的一個資料

路由傳參時，一些簡單的資料可以通過query或者params傳遞過去，但是一些複雜的資料比如陣列、物件等這些用url傳過去就不太好了，可以通過sessionStorage或者localStorage來傳遞

有了這些引數，就可以動態展示資料了。當然要先轉回物件

4.獲取購物車列表

編寫介面並放到vuex檢視，注意購物車的資料是進入到這個頁面後開始獲取

資料返回成功，但是data為空

其原因是因為在這類功能的實現上，需要你的一個個人資訊，不然邏輯實現不了，上面加入了購物車都不知道為了誰去儲存，但是我們上面加入購物車的介面確實也只有兩個引數，那麼怎麼讓我們伺服器知道這是誰的資料呢，這裡需要一個uuid

下一個問題：既然介面都不讓帶，那我們從哪裡向伺服器發我們的uuid遊客身份，請求頭，也就是我們封裝的請求攔截器那裡，後端比如node就可以通過req來拿到你這個身份資訊然後將你的購物車資訊一起存到資料庫

但是給的這個id還需要一些邏輯處理，最重要的就是我們每次點進來都是相同的不能再去創造一個，可以把這個id定義在detail的state裡面，然後他的值為呼叫一個函式，可以保證每個id都是獨立的，那麼這個函式就要分為一個模組單獨拎出來做處理

首先建立一個utils的資料夾，這個檔案件一般是拿來放一些常用的功能模組，比如正則、臨時身份等，在這裡面要思考的是怎麼讓我們每次進來都是得到的那一個臨時身份，不會再變，可以把我們獲取到的id存放在localstorage，每次進來先檢查有沒有

state引入並呼叫函式

最後在請求攔截器用請求頭髮送我們的臨時身份，注意可以在這裡直接引入store，然後就拿到所有的倉庫資訊，然後就是注意，請求頭後面的屬性是跟後端程式設計師商量好的也就是他那邊定義的變數不能亂寫

5.購物車資料動態展示

繼續完成vuex剩下的工作

以後注意一下凡是跟ajax和vuex過來的資料然後出現undefined的錯誤，一般優先考慮是不是沒有用異或語法考慮到請求還沒到的時候會出現的這些錯誤

全選按鈕用計算屬性來做，一個新的陣列方法 every，也是對陣列進行遍歷，裡面可以去判斷陣列的元素是否全滿足，如果全滿足返回true，否則返回false

有些時候邏輯是對的，但是效果不能效可以試試簡寫形式

6.處理產品數量

首先要明白這個操作是要請求資料的，因為你每點一次都會儲存進伺服器，然後你重新整理就不會丟了，而且他用的介面跟我們的新增進伺服器是同一個介面

既然改動他需要儲存到伺服器，那麼這裡就是三個事件，用同一個處理函式，那就只有靠傳進來的引數來區別了

然後我們檢視參考文件，這個介面要傳進來兩個引數，一個是你點選這個物品的id

第三個引數有點不一樣，我們要加要減是直接傳這個差值進來

整體函式如圖

7.刪除指定產品

配置介面並放入vuex由於，刪除不需要資料返回，所以直接做一個primise的成功失敗返回結果

注意就是這邊接受也是用一個try catch來做

8.修改產品狀態

介面+vuex

為單選框增加點選事件

9.刪除選中的全部產品

由於我們沒有全部刪除的介面，所以只能一個一個來刪除，可以派發到actons裡面，在這裡面來呼叫單刪除的介面

在這裡面做一個迴圈判斷，有多少選擇的就呼叫幾次單刪除

現在可以實現批量刪除，但是要返回瀏覽器端結果，所以這裡又是返回的promise，但是這裡有多個，用到一個promise.all方法跟陣列的every類似，所有的promise為成功就返回成功，否則返回失敗

這邊照樣用try catch來捕獲錯誤

這裡有一個注意點，因為我們返回的是promise物件，而且最主要的是有多個，本身就是非同步，所以這邊在等待結果的時候用一個await，等待所有結束，再去執行重新整理資料，不然就會出現刪除了一部分，另一部分還會在頁面上的結果

10.全選

因為又要迴圈呼叫介面所以派發actions，在這裡面做邏輯

二.登入註冊

1.靜態元件

要注意一下@符要在css中用的話，需要在前面加入~

2.註冊（不考慮表單驗證）

先暫時不考慮表單驗證，首先我們的所有表單資料肯定都是雙向繫結的，我要收集，也可以改你的值

先完成驗證碼這一塊，這一塊真實的需求是，傳送手機號到後端，後端給使用者傳送簡訊，這裡就直接傳送手機號到後面，默你會來一條簡訊即可

我們的註冊介面只需要手機號、驗證碼、密碼三個引數，做一個簡單的驗證傳進去即可

3.登入

再開始登入之前，先說一下token，之前node就建立過token，也理解過，現在印象更深刻了，當你登入過後，伺服器會給你返回一個token，你儲存起來，其作用就是為了你去訪問一些要許可權的地址，比如你的個人資訊，你的購物車等等，有這個token就相當於有了通行證，可以暢通無阻

建立介面函式，放進vuex

登入成功會返回token，先放進vuex保管，但是要注意vuex不適合永續性保管，一重新整理資料就會丟，同時登陸成功還應該跳轉到首頁，所以需要判定 try catch

4.token獲取使用者資訊

跳到首頁我們應該展示登陸的使用者名稱，利用token來獲取介面

先理通一個邏輯，我們發起獲取使用者名稱的請求應該在home的mounted，然後登陸之後才會有token，我們需要在請求攔截器發起一個帶有token的請求，所以登入之後才會登入成功顯示使用者名稱，所以每次進來都會重新登入，因為vuex保管的資料並收不永續性的，而我們請求頭髮起的token也是靠vuex獲得的。

注意，因為我們跳轉的事home元件，所以應該定義在home元件去派發獲取使用者資訊的actions，並非header元件

扥路成功拿到資料，將header進行一個v-if判斷

5.存在問題

問題一

雖然登陸成功，但是一重新整理就沒有了，原因是vuex不是持久化儲存

可以在獲取到token的時候，將token儲存進localstorage，同時state獲取的是localstorage裡面的token

但是這樣有個問題就是隻能保證home元件可以重新整理繼續顯示，其他元件由於沒有派發actons雖然有token但是沒有使用者名稱拿來展示

問題二

使用者已經登入就不應該再可以進入login元件

6.退出登入

點選派發請求，但是這個請求只是伺服器的token清空，我們自己也需要將使用者資訊清掉，同時token清掉

不管在任何介面退出應該都返回home元件，所以要判斷成功與失敗的返回結果

7.路由守衛許可權（重點）

首先路由守衛就不用多說了，全域性是每個路由切換都要觸發的，獨享是進入你這一個要觸發，元件內是進入這個元件和離開這個元件，主要是有一點我們的守衛放行next（）括號裡面有四個引數，詳情參考vue-router官網，一種是無引數就是放行到任意元件你去的那個，也可以（'/home'）就是跳轉到你指定的元件，還有兩個這裡用不到

來解決我們之前的問題，首先我們登陸就不能進入login了，全域性前置路由守衛，拿到我們的token，有token就說明肯定是登陸過的

在已登入狀態下先判斷是否會進入login，如果進入了就跳轉到home

否則就是進入的除login外的任意元件，但是在這裡面還要進行判斷，目的是來解決我們任意元件任意重新整理只要登入了都會顯示使用者名稱，可以先判斷是否有loginName這個屬性，注意這裡不能判斷有沒有這個userInfo這個物件，因為空物件預設是為true

如果有就正常放行，如果沒有那麼就派發一下，再放行，這樣一來就不用所有元件都去mounted派發，讓他有userInfo了

還需要完善最後一步，就是我們有沒有派發失敗的情況，那就是我們的token到期的時候就會派發失敗，一般體現在一直是自動登入，長時間不登入就會讓你重新登入一下，所以這裡還要用try catch來做，vuex處理成功就跳轉，處理失敗，執行一下退出登入那個操作可以清空伺服器和本地的token，再讓你跳轉到login元件，因為你到這個元件後在登入，又會獲得新的token