緊急更新第二彈，然後就剩下最後一彈，也就是整個前臺的專案
一.購物車
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
三.交易
1.靜態元件搭建
2.獲取交易頁資料
這個頁面需要兩個資訊獲取介面一個是，地址資訊
介面管理+vuex走起
應該在交易頁的mounted觸發
3.頁面展示資料
商品詳情展示
地址資訊展示
主要是點選的時候有一個排他操作
事件委派，傳進來兩個值一個你點的這個物件，一個整個陣列
然後就是點選的這個地址資訊下面結算的口子要顯示，可以用一個計算屬性先把當前這個default這個算出來，這裡用到一個陣列的find方法返回第一個滿足條件的值
4.提交訂單（不再使用vuex）
先完成靜態頁面
然後就應該是看怎麼來使用介面，從現在開始後面的介面就不再使用倉庫來做了，以防應對某些情況下沒有vuex的時候
首先我們還是可以使用介面統一管理進行管理我們的介面
當我們不再使用vuex了，呼叫介面應該在元件內去呼叫，但是我們這裡也有簡便方法，可以把這整個介面檔案引入到入口檔案，需要注意的是以別名的方式來引入，然後跟全域性事件匯流排一樣，在beforeCreated鉤子裡面讓他等於一個$API，那麼我們以後要呼叫介面直接用這個api即可
再點選提交訂單的時候發起請求
5.獲取訂單號展示支付資訊
試想以前用vuex這個時候得到資料了，應該去判斷是否成功，然後將我們的資料儲存起來，這裡沒有vuex就儲存在這個元件
跳轉到支付介面之後首先把訂單號換了，然後需要獲取介面，將我們的支付金額換了
注意，生命週期函式不能被async修飾
6.ElementUI按需匯入
元件庫：基於vue pc端：ElementUI 移動端：vant
ElementUI快速語法提示外掛vue-helper
注意除了以前所熟知的按需匯入，還可以將其註冊成為api這樣形式的按需匯入
7.qrcode生成二維碼
下載qrcode這個包，他可以將我們的一些資訊處理成二維碼
要注意qrcode返回的是一個promise物件，要拿到結果要加上await
8.微信支付
當你點開支付介面，就可以開啟一個定時器，每一秒就去介面查詢一下你有沒有支付成功，支付成功就自動跳轉
需要將我們的code儲存下來，因為後面還會點選我已支付進行驗證一次
參考餓了麼文件，這個元件有一個關閉前的回撥，接受三個引數，第一個是你點選的是什麼按鈕，第二個是vc例項，第三個是關閉這個彈窗
