Vue+Express全棧購物商城

1、前言提綱

基於Vue和Express框架寫的一個全棧購物商城，記錄項目過程當中遇到的一些問題以及經驗和技巧。

2、歷史版本

1. 基於Vue-CLI2.0:點我查看

   這個分支版本是一兩年前的，基於Vue-CLI2.0寫的，數據請求是Mock，純前端的項目。

2. 基於 Vue-CLI3.0:點我查看

   這個分支版本是基於Vue-CLI3.0的，將腳手架從2.0遷移升級到了3.0，遇到的一些問題和坑也都填完了~也是純Web端Mock模擬數據的項目。

3. 當前版本:點我查看

   基於Vue-CLI3.0,前端用Vue全家桶，後端用Express+MongoDB+Redis，後臺管理系統CMS是用的Vue-Element-Admin

3、詳情

1.前端

在線預覽:https://www.fancystore.cn

手機直接掃描二維碼真機體驗:

1.1 技術棧:

• Vue全家桶(Vue-CLI3,Vue2.x)
• Vue-Router(頁面KeepAlive的處理)
• Vuex(狀態管理庫，刷新保存狀態)
• Axios(二次封裝配置的數據請求)
• Less(CSS預處理)
• I18n(國際化處理)
• Vant(UI庫,按需加載+rem)
• SEO(預渲染)
• Sentry(線上錯誤日誌監控)
• Travic(自動構建,持續部署)

1.2適配

項目代碼px自動轉換爲rem，須要在main.js中引入amfe-flexible庫

Vant UI庫也有REM單位，須要在vue.config.js中配置:

1.3 SEO

單頁(SPA)SEO是一個痛點，目前有兩種方式，一種是SSR,一種是預渲染(PrerenderSPAPlugin)。

這個項目是用預渲染(PrerenderSPAPlugin)+vue-meta-info這兩個庫來作SEO優化的。

1. 將rouer.js模式改成mode:history
2. 下載安裝PrerenderSPAPlugin

   PrerenderSPAPlugin是Google的一個庫，基於Chromium是獲取數據，安裝PrerenderSPAPlugin的時候會自動下載Chromium瀏覽器，國內npm安裝Chromium會常常安裝失敗，建議用淘寶的cnpm安裝

npm install -g cnpm --registry=https://registry.npm.taobao.org
    cnpm install PrerenderSPAPlugin --save

1. 在vue.config.js中引入PrerenderSPAPlugin，配置須要預渲染的路由。
2. 下載安裝 vue-meta-info

   在main.js中引入vue-meta-info，在每一個頁面配置meta信息，這樣每一個單頁路由都有不一樣的title,理由爬蟲引擎抓取重要內容，利於SEO。

預渲染前只有一個index.html,預渲染後最後打包出來的預渲染目錄文件以下:

1.4 路由懶加載以及緩存keep-alive動的態判斷

項目中會使用keep-alive會提升用戶體驗和網站的性能,若是想實現部分頁面緩存，部分頁面不須要緩存，能夠在router.js裏面的路由添加meta.keepalive在跟router-vier加入判斷:

1.5 Vuex狀態管理頁面刷新失效問題

用Vuex管理全局的狀態，會遇到刷新頁面的時候全部的狀態丟失或者重置，能夠在App.vue的鉤子函數添加代碼，會在頁面刷新的時候將Vuex存儲到Storage中，刷新完成後又再從Storage取出來存到Vuex裏面:

1.6 封裝數據請求

封裝Axios，添加Axios請求(request)和相應(response),統一處理錯誤信息或者登陸認證的消息,全部的數據請求都存放到api目錄下，對應的頁面方便後續的維護和管理。

1.7 打包構建優化vue.config.js

1. 區分開發環境和生產環境
2. alias的方式直接指定目錄。
3. CDN

   生產環境中將一些共有庫Vue,vuex,vue-router等庫不打包到項目中，而是經過CDN的方式引入這些共有庫，這樣能夠減小項目的大小，也能夠藉助CDN的優點，讓網站加載更快。推薦一個強大的cdn庫：[https://www.bootcdn.cn/](https://www.bootcdn.cn/)

4. 生產環境壓縮和出去console打印日誌
5. 生產環境開啓gzip壓縮
6. 生產環境啓用預渲染
7. 生產環境分離css，外鏈CSS能夠緩存

1.7 錯誤日誌監控Sentry

集成Sentry開源日誌監控系統，在官網註冊獲取key，在main.js中引入RavenVue並配置便可

1.8 自動構建和持續集成

Github自動構建和持續集成基於Travis

1. 登陸Travis選擇須要持續集成的項目。
2. 在.travis.yml寫上相應的config,服務器配置ssh_key，
3. 每次代碼push到指定分支(好比master)的時候，Travis會自動執行項目上的.travis.yml文件，開始自動構建，構建成功經過scp密令傳送到服務器，完成自動部署的功能。

   每次須要發版，只須要push代碼，而後去喝杯咖啡，回來就已經構建發佈完成，解放勞動力

1.9 代碼自動格式化優化

團隊合做的時候，每一個成員用的編輯器不一樣，縮進格式也不一樣，這樣合併代碼的時候會出現各類意外的狀況，團隊統一編輯器和編輯器不太現實，由於每一個人的寫代碼習慣和風格不一致。能夠藉助husky 和 link-stage，每次commit的時候都會安裝配置的規則格式化代碼，參考文章:http://www.javashuo.com/article/p-cytevpsq-cy.html

1.10代碼優化

1. 設計模式

表單驗證須要寫不少判斷條件，if-else 或者swith，當條件越多時或者後面須要修改需求條件的時候，會變得不是很好維護，能夠用策略模式來重構業務代碼:

1. 善用Mixin,提取共用的組件，將項目組件化

Vue的Mixin複用代碼，能夠更好的提升開發效率和可維護性
除了將一些共用的頁面作成組件引入的方式以外，大文件項目也分好幾個模塊，將文件才成模塊的方式會更好維護和更好的閱讀。

2.服務端

2.1 技術棧:

• Node
• Express
• Mongo
• Mongoose
• Redis
• Qiniu
• PM2

2.2 登陸受權

用Session認證機制，來實現登陸登出。
配置Session的加密解密，將Session存儲到Redis，提升性能,若是有多臺服務器，Redis能夠共享Session。

2.3 中間件判斷用戶是否登陸:

有些API請求是須要用戶登陸才能夠訪問的，能夠寫中間件來判斷:

2.4 中間件判斷用戶的權限:

有些API的請求是須要判斷用戶是否有權限，好比添加、刪除和更新，會在中間件判斷是否有權限

2.5 PM2多進程啓動項目

2.6 Mongodb優化設置索引

2.7 Redis作緩存

2.8 七牛雲對象存儲配置Key還有域名的綁定以及HTTPS證書的申請

3.後臺管理系統CMS

在線預覽:https://www.fancystore.cn/admin

3.1技術棧

vue-element-admin

配合後端作了權限系統，根據用戶的權限來展現和隱藏菜單和按鈕。

4.服務器

1. Nginx配置gzip和緩存策略，根據不一樣的 URL來代理。
2. 申請HTTPS證書,全站升級到HTTPS，配置HTTP2.0的協議。

Github:

前端: https://github.com/czero1995/fancy-store

服務端: https://github.com/czero1995/fancy-store-server.git

後臺管理CMS: https://github.com/czero1995/fancy-store-admin.git