前臺部分到此結束，一路走來還挺懷念，今天主要是對整個項目的完成做一個最後的收尾工作，對於功能上的需求沒有什麼了，主要就是項目上線的一些註意事項。

一.個人中心二級路由

當我們點擊查看訂單應該跳轉到個人中心

個人中心拆分兩個子路由組件

分好組件後，在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伺服器跑起來即可