前臺部分到此結束，一路走來還挺懷念，今天主要是對整個專案的完成做一個最後的收尾工作，對於功能上的需求沒有什麼了，主要就是專案上線的一些注意事項。
一.個人中心二級路由
當我們點選檢視訂單應該跳轉到個人中心
個人中心拆分兩個子路由元件
分好元件後，在routes裡面父元件寫上childre配置項
寫路由不需要寫/了，寫跳轉路由需要寫全地址
路由重定向
二.我的訂單
獲取訂單列表詳情，儲存資料
注意這裡的佈局是採用的table，裡面每一個訂單為一個table
一個訂單裡面可一次性買多個東西吧，所以一行就是一件物品，這裡的rospan要動態改為物品陣列的長度
同時由於我們後面這些內容是集中顯示，所以只需要顯示一個的就可以了，並非每個遍歷出來都有一個這些列
三.未登入的導航守衛判斷
在未登入的狀態下不應該能夠隨便進入訂單、購物車、個人中心等介面，所以需要到全域性前置路由守衛設定許可權
但是有個問題我們正常應該是點選誰，然後提示登入登入完成後繼續進入的是這個頁面而並非是進入home
可以給我們往login跳的地方來一個query引數
然後去我們點選登入按鈕這個判斷一下，不是直接跳到home介面了
四.登入的獨享守衛
我們進入交易介面，只能從購物車進入，其他地方不能進來，這裡會用到next第三種用法next（false）表示從哪來回哪去
1.元件內守衛
我們支付成功介面只能從支付介面來，所以同樣的事情也可以由元件守衛完成
五.圖片懶載入
vue-lazyload
它是一個外掛，所以需要Vue.use，注意這裡我們的圖片需要引入，才能用
然後給我們需要懶載入的圖片新增自定義指令
來回顧一下自定義外掛和自定義指令
首先自定義指令必須是暴露的一個物件，然後這個物件肯定是要封裝一個install方法，而且他接受兩個引數，一個是Vue，有了他可以做很多事情Vue.component、Vue.directive等，第二個引數是我們在註冊那裡傳進來的值
引數可以為物件等任意形式
那麼就可以用這個外掛裡面來定義一個全域性自定義指令，將這個指令的語法修改為傳進來的引數，後面是指令的回撥，接受兩個引數，第一個是繫結這個指令的元素，第二個是這個元素的一些資訊也可以拿到他的元素體內容
六.vee-validate表單驗證
用的是vee-validate2版本
首先需要安裝並註冊，因為是一個外掛，由於main入口檔案內容已經過多，這裡可以把這個模組單拎出來然後直接匯入進入口檔案
註冊之後需要引入一個配置項，後面表單屬性會用到主要是用來做中文匹配的。
我們需要中文所以還要引入中文包
配置好過後就可以對相應的input表單做一些處理了，基本格式沒變，加了一個name，一個自定義指令還有一個動態的類名，下面的錯誤資訊也要動態展現，這裡規則驗證跟node裡面的validate差不多
我來說一下匹配規則，首先引入的中文包能保證我們的提示資訊除特殊欄位也就是phone之外都轉換為中文，不要就是這種效果
我們的關鍵字phone就是我們規定的attr匹配來進行轉換，你定義的是什麼，提示資訊就會轉換為什麼，表單裡面name就是讓你去找配置裡面對應的什麼屬性
驗證碼部分同理
密碼這裡跟上面差不多，說一下確認密碼部分，我們的規則已經在配置檔案寫好了，這裡只需要在匹配規則寫上屬性名值為要匹配的值
單選框需要用到自定義規則，true就返回true，false就走否定規則
最後一步關鍵，要全部驗證成功才能點選註冊去發請求，他返回的是一個布林值
七.路由懶載入
當打包的時候，js包會變得非常大，載入也會很慢，我們可以把不同的路由對應的元件分割成不同的程式碼塊，當路由訪問時再去載入
原理上是這樣
可以簡寫為
八.打包上線
1.map檔案處理
當我們專案完成準備上線打包後，可以看到在我們的js資料夾裡面有很多的map檔案
先了解他是幹嘛的，因為我們打包之後，所有的js檔案都是壓縮且加密的，如果出現錯誤無法提示哪一行哪一列有錯，而我們的map檔案就是來做這件事情的，專案上線後會給你提示哪一行哪一列有錯誤，但是我們專案都上線了，一般也不需要提示錯誤資訊了，所以一般是可以刪除的，也可以在vue.config.js裡面配置productionSourceMap為false也是可以的
這樣打包出來就不會有map檔案了。
2.伺服器
購買伺服器之後
- 先修改密碼
- 然後開啟安全組，把那些埠號開啟
- 然後就可以通過xshell或者xftp去操作你的伺服器了
3.Nginx反向代理
先丟擲一個問題：當使用者一訪問你這個伺服器的地址，怎麼就能直接訪問到你dist打包下的index.html，也就是怎麼就能找到你的專案，畢竟一個centos裡面有那麼多目錄
然後瞭解一個概念：我們使用者訪問的是買來的伺服器的地址，而我們專案裡面所有的資料介面都是向另一個伺服器要來的資源，我們買來的伺服器能向介面的伺服器要資源的這種行為就是Nginx反向代理，Nginx是一個伺服器，反向代理是一種行為
流程：
-
xhell進入根目錄下的etc下的Nginx資料夾
-
如果裡面只有四五個檔案說明還沒有安裝Nginx（yum install nginx）
-
安裝完nginx伺服器之後，開啟nginx.conf檔案，新增兩個配置項
-
這個可解決使用者一訪問伺服器就訪問我們的專案設定
-
這個可解決nginx反向代理問題
-
最後 service nginx start讓nginx伺服器跑起來即可