項目模塊

---

一、模塊劃分

• 項目模塊
• • 1.首頁
  • 2.全部商品
  • 3. 關于我們
  • 4. 詳情頁
  • 5. 購物車
  • 6. 我的收藏
  • 7. 我的訂單
  • 總結：

1.首頁

圖片如下（示例）：

技術點:

①、登錄鑒權
請求接口時將文本框的值傳遞到請求中（需要結合Element框架）
當用戶點擊購物車或收藏判斷用戶有沒有存儲token值如果有進入，如果沒有則提示用戶先登錄彈出登錄框
②、熱門 電視影音 保護套 充電器 的數據切換
我采用的方式是利用js原生的鼠標移入事件結合$refs獲取當前節點，改變文字樣式移入時并觸發請求

2.全部商品

圖片如下（示例）：

技術點：

①、全部商品
在main.js中定義一個全局變量：Vue.prototype.$variate = {};
在商品組件中點擊瀏覽更多時將總數據的id傳遞到全局變量中，然后再全部商品組件中將id重新賦值攜帶在請求中，并重新調用總數據渲染視圖

3. 關于我們

圖片如下（示例）：

4. 詳情頁

圖片如下（示例）：

技術點:

①、商品詳情
進入商品詳情要在url地址上拼接上當前商品的唯一標識id,再進行路由跳轉，在詳情頁中獲取當前的商品，利用query或params獲取url上的id,將id攜帶在請求中請求到當前單個商品的基本信息并渲染。

5. 購物車

圖片如下（示例）：

技術點：

①、加入購物車
獲取到當前的商品后將該商品傳遞到vuex里面進行存儲，然后跳轉到購物車頁面，再利用vuex將數據v-for循環到該組件中展現出來。

6. 我的收藏

圖片如下（示例）：

技術點：

①、加入收藏
與上同理，唯一不同的是收藏有一個x號需要對該商品在vuex進行刪除操作,點擊x號時獲取當前收藏商品的id傳遞到vuex,再對總數據進行循環判斷每一項收藏商品的id與傳遞過來的id一致，利用數組方法splice進行數組刪除

7. 我的訂單

圖片如下（示例）：

---

總結：

項目技術棧：
一、Element框架
二、vuex
三、父傳子，子傳父組件通信
四、動畫
五、全局變量

項目技術難點：
1、vuex的計算屬性的使用
2、input多選框只要一個不選中 全選不選中 價格 數量變更等效果
3、瀏覽更多并跳轉到全部商品并將當前的總數據顯示出來
4、跨域

總結

以上是生活随笔為你收集整理的小米商城项目的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。