Vue仿蘑菇街商城項目（vue+koa+mongodb）

1背景介紹

你們好，我是六六。學習了很長時間，爲此想作一個項目來鍛鍊一下本身，因而便看上了蘑菇街（有不少漂亮的衣服和美女哈哈哈）。因此打算從零仿照蘑菇街官網來作一個項目，如今項目終於上線了。對於項目有任何問題或者建議均可以評論，我歡迎你們來提意見。

github地址：github.com/6sy/myShop

2項目介紹

• 登陸，登出功能
• 註冊功能
• 商品展現功能
• 用戶搜索功能
• 用戶收藏功能
• 購物車功能
• 訂單功能
• 我的中心
• 更換頭像
• 商家聊天
• 開發問題
• 部署問題
• 項目優化

3.登陸註冊模塊

需求分析：

完成用戶登陸，用戶註冊，註冊信息保存於數據庫。

前端vue頁面繪製，使用axios完成數據請求，使用koa搭建服務器,採用token驗證機制，採用mongodb數據庫，使用bcryptjs對密碼加密

性能分析：

使用慢網速測試，檢查一處問題，已解決。在10.2處

4.商品展現功能

需求分析：

展現推薦商品，以及具體的每一個商品。

技術分析：

經過動態路由進行傳參。商品列表下拉加載更多，藉助了插件。

展現圖：

5.用戶搜索模塊

需求分析：

完成用戶搜索商品功能，並能夠對搜索物品按需求展現。並保存搜索記錄。

技術分析：

經過路由傳參到組件，組件在經過參數進行網絡請求加載處對應的商品。

6.用戶收藏功能

需求分析：

完成對商品收藏與取消收藏功能。

技術分析：

在每一個用戶中有一個user_collect屬性保存着一個數組，收藏時須要將商品id添加到這個數組中便可。每次進入商品時，遍歷這個數組判斷是否有這個id，有就添加樣式。取消收藏從數組中刪除便可。

7.購物車功能

需求分析：

添加商品進入購物車，在購物車中進行選擇並加入訂單。

技術分析：

添加商品保存到數據庫中，購物車頁面在經過網絡請求獲取購物車數據。

9.訂單功能

需求分析：

把購物車中選中的商品跳轉到訂單模塊，並選擇地址，完成信息填寫。

展現：

10.我的中心

需求分析：

能夠從我的中心中查到咱們訂單的狀況。

展現：

11.更換頭像

需求分析：

實現用戶的上傳頭像，和自定義裁剪

技術分析：

採用canvas技術進行裁剪，並經過FormData上傳圖片到服務器。

效果圖：

問題：

• 實現了裁剪，可是大小不是自定義的，在之後逐漸改善。

12.商家聊天

需求分析：

實現用戶與商家的溝通，商家有一個列表記錄全部聊天用戶。

技術分析：

採用socket.io實現通訊。vue組件採用bus總線通訊。

效果圖：

問題：

• 組件內的數據保存在組件內，一刷新就沒有了。應該在每次組件銷燬保存到服務器裏
• input輸入框的高度應該隨輸入文字的增多而變高，列表中的聊天記錄同理。
• 沒有消息提醒功能

13. 開發遇到的問題

13.1:

使用koa寫中間件的時候，必定要使用異步。

13.2 網速過慢error:

當網速過慢時，沒法進行註冊，點擊註冊無任何反應：
分析：因爲網速過慢，在進行帳號重複驗證時，沒有經過驗證則已經點擊註冊了，而此時帳號經過斷定變量仍爲false,即便已知足卻由於條件不夠沒法註冊。

if (this.isAccount && this.isPassword) {......}        //經過條件，進行網絡請求
複製代碼

解決：聲明一個變量isClick，判斷符合這種狀況下，爲true,在帳號重複性網絡請求成功後，從新發送一次註冊。

13.3：從新刷新error:

當遇到頁面刷新時，頁面加載報錯
分析：有些數據是經過其餘組件傳入的，從新刷新致使無數據加載報錯。
解決：

• 經過對數據判斷，若是沒有數據經過路由直接返回首頁。
• 特定的數據能夠經過網絡請求解決。

13.4：從新刷新error

判斷一個空對象 分析：聊天組件刷新時，因爲數據時經過組件傳參進入，若是刷新致使數據丟失，數據和視圖會報錯，判斷this.$route.params是否爲空對象便可 解決：

isEmptyObj (obj) {
      return (Object.prototype.toString.call(obj) === '[object Object]')
        && (Object.getOwnPropertyNames(obj).length === 0)
        && (Object.getOwnPropertySymbols(obj).length === 0)
    }
複製代碼

13.5：vue渲染問題：

我用一個對象存儲聊天記錄，對象名爲用戶名，對象值爲一個數組，數組每一項爲每一句聊天的記錄.

chatUsers: {
        '小李': [{ 'msg': 'obj' }, { 'msg': '你好啊' }],
        '小張': [{ 'msg': 'obj' }, { 'msg': '你好啊' }]
      }
複製代碼

需求是：要獲取每一個用戶的最後一句聊天記錄，並顯示。因此很容易用到v-for。

<!-- 聊天列表 -->
    <ul>
      <li v-for='(item,index) in chatUsers'
          :key='index'>{{item[item.length-1]['msg']}}</li>      
    </ul>
複製代碼

報錯：

分析：根據報錯緣由大概是render渲染出錯，可是邏輯是沒有問題的啊，就是拿不到msg這個屬性。
解決：因此我換了一個思路，設置一個對象，用來存儲最後一句聊天記錄就能夠了。

// 最後聊天信息
      chatLastMsg: {

      }
複製代碼

// 將這個對象的屬性設爲響應式
    handleMsg (msg) {
      if (!this.chatUsers[msg.name]) {
        this.$set(this.chatUsers, msg.name, [])
        this.$set(this.chatLastMsg, msg.name, '')
      }
複製代碼

//每次傳入消息都賦值給這個對象，也就是最後一次消息了
 this.chatLastMsg[msg.name] = msg.msg
複製代碼

13.6數據請求報錯：

找到問題代碼：

this.shop = Object.keys(this.cartList)
複製代碼

分析：在打開購物車頁面時，須要進行請求，可是當購物車爲空時，請求回來的數據使this.cartList爲undefined，致使報錯。

解決：

this.cartList? this.shop = Object.keys(this.cartList):this.shop=[]
複製代碼

14.部署問題

14.1上傳圖片路徑：

分析：在本地開發時，保存圖片路勁和上傳服務端是不同的，須要改成真實路徑。

14.2本地數據庫導入服務器數據庫：

問題：導入成功後，服務器端會從新建立一個集合，並不會使用我導入的集合。我導入的數據就沒法使用。

解決：從服務器端從新建立集合，並將本地數據導入集合內就可使用了。

15.性能優化

優化前：大概加載出來須要7秒左右，可謂是至關可怕的。核心資源爲600kb左右。

1.引入cdn

單文件從600kb壓縮到300kb了

2.啓用gzip壓縮。

單文件從300kb壓縮到90kb了，加載時間也減小到 1.5s左右了。（有緩存因素影響）

3.路由懶加載

資源懶加載，被訪問時纔會被加載對應的js模塊，而不是第一次加載全部資源

第一次加載核心資源從90kb變成48kb了。

4.屬性再也不響應式：待完成

16.總結

這是我學習以來，第一次從0搭建一個項目，從vue框架到服務器端，再到數據庫。在過程當中，遇到了不少問題，不過最終都克服了他們。遇到問題不可怕，由於問題都是要被解決的。