vue大型電商專案尚品彙(前臺篇)day05終結篇

10 發表於 2022-05-30
Vue

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

一.個人中心二級路由

當我們點選檢視訂單應該跳轉到個人中心

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

分好元件後,在routes裡面父元件寫上childre配置項

image-20220527110554370

寫路由不需要寫/了,寫跳轉路由需要寫全地址

image-20220527110748505

路由重定向

image-20220527110930228

二.我的訂單

獲取訂單列表詳情,儲存資料

image-20220527115407921

注意這裡的佈局是採用的table,裡面每一個訂單為一個table

image-20220527165534620

一個訂單裡面可一次性買多個東西吧,所以一行就是一件物品,這裡的rospan要動態改為物品陣列的長度

同時由於我們後面這些內容是集中顯示,所以只需要顯示一個的就可以了,並非每個遍歷出來都有一個這些列

image-20220527165939987

三.未登入的導航守衛判斷

在未登入的狀態下不應該能夠隨便進入訂單、購物車、個人中心等介面,所以需要到全域性前置路由守衛設定許可權

image-20220527180554975

但是有個問題我們正常應該是點選誰,然後提示登入登入完成後繼續進入的是這個頁面而並非是進入home

可以給我們往login跳的地方來一個query引數

image-20220527180806824

然後去我們點選登入按鈕這個判斷一下,不是直接跳到home介面了

image-20220527181043755

四.登入的獨享守衛

我們進入交易介面,只能從購物車進入,其他地方不能進來,這裡會用到next第三種用法next(false)表示從哪來回哪去

image-20220527202058161

1.元件內守衛

我們支付成功介面只能從支付介面來,所以同樣的事情也可以由元件守衛完成

image-20220527202659988

五.圖片懶載入

vue-lazyload

它是一個外掛,所以需要Vue.use,注意這裡我們的圖片需要引入,才能用

image-20220527212349428

然後給我們需要懶載入的圖片新增自定義指令

image-20220527212403249

來回顧一下自定義外掛和自定義指令

首先自定義指令必須是暴露的一個物件,然後這個物件肯定是要封裝一個install方法,而且他接受兩個引數,一個是Vue,有了他可以做很多事情Vue.component、Vue.directive等,第二個引數是我們在註冊那裡傳進來的值

image-20220527212833890

引數可以為物件等任意形式

image-20220527212939223

那麼就可以用這個外掛裡面來定義一個全域性自定義指令,將這個指令的語法修改為傳進來的引數,後面是指令的回撥,接受兩個引數,第一個是繫結這個指令的元素,第二個是這個元素的一些資訊也可以拿到他的元素體內容

image-20220527213253275

六.vee-validate表單驗證

用的是vee-validate2版本

首先需要安裝並註冊,因為是一個外掛,由於main入口檔案內容已經過多,這裡可以把這個模組單拎出來然後直接匯入進入口檔案

image-20220530094137632

image-20220530094146261

註冊之後需要引入一個配置項,後面表單屬性會用到主要是用來做中文匹配的。

image-20220530094554030

我們需要中文所以還要引入中文包

image-20220530094817434

配置好過後就可以對相應的input表單做一些處理了,基本格式沒變,加了一個name,一個自定義指令還有一個動態的類名,下面的錯誤資訊也要動態展現,這裡規則驗證跟node裡面的validate差不多

image-20220530101150819

我來說一下匹配規則,首先引入的中文包能保證我們的提示資訊除特殊欄位也就是phone之外都轉換為中文,不要就是這種效果

image-20220530102229049

我們的關鍵字phone就是我們規定的attr匹配來進行轉換,你定義的是什麼,提示資訊就會轉換為什麼,表單裡面name就是讓你去找配置裡面對應的什麼屬性

驗證碼部分同理

image-20220530102911780

密碼這裡跟上面差不多,說一下確認密碼部分,我們的規則已經在配置檔案寫好了,這裡只需要在匹配規則寫上屬性名值為要匹配的值

image-20220530104811275

單選框需要用到自定義規則,true就返回true,false就走否定規則

image-20220530105449455

image-20220530105622937

最後一步關鍵,要全部驗證成功才能點選註冊去發請求,他返回的是一個布林值

image-20220530110124170

七.路由懶載入

當打包的時候,js包會變得非常大,載入也會很慢,我們可以把不同的路由對應的元件分割成不同的程式碼塊,當路由訪問時再去載入

原理上是這樣

image-20220530111236189

可以簡寫為

image-20220530111507476

八.打包上線

1.map檔案處理

當我們專案完成準備上線打包後,可以看到在我們的js資料夾裡面有很多的map檔案

image-20220530112122497

先了解他是幹嘛的,因為我們打包之後,所有的js檔案都是壓縮且加密的,如果出現錯誤無法提示哪一行哪一列有錯,而我們的map檔案就是來做這件事情的,專案上線後會給你提示哪一行哪一列有錯誤,但是我們專案都上線了,一般也不需要提示錯誤資訊了,所以一般是可以刪除的,也可以在vue.config.js裡面配置productionSourceMap為false也是可以的

image-20220530112420897

這樣打包出來就不會有map檔案了。

2.伺服器

購買伺服器之後

  • 先修改密碼
  • 然後開啟安全組,把那些埠號開啟
  • 然後就可以通過xshell或者xftp去操作你的伺服器了

3.Nginx反向代理

先丟擲一個問題:當使用者一訪問你這個伺服器的地址,怎麼就能直接訪問到你dist打包下的index.html,也就是怎麼就能找到你的專案,畢竟一個centos裡面有那麼多目錄

然後瞭解一個概念:我們使用者訪問的是買來的伺服器的地址,而我們專案裡面所有的資料介面都是向另一個伺服器要來的資源,我們買來的伺服器能向介面的伺服器要資源的這種行為就是Nginx反向代理,Nginx是一個伺服器,反向代理是一種行為

image-20220530144245800

流程:

  • xhell進入根目錄下的etc下的Nginx資料夾

  • 如果裡面只有四五個檔案說明還沒有安裝Nginx(yum install nginx)

  • 安裝完nginx伺服器之後,開啟nginx.conf檔案,新增兩個配置項

  • 這個可解決使用者一訪問伺服器就訪問我們的專案設定

    image-20220530145646650

  • 這個可解決nginx反向代理問題

    image-20220530145709625

    image-20220530145802824

  • 最後 service nginx start讓nginx伺服器跑起來即可