項目模塊

---

一、模塊劃分

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

1.首頁

圖片如下（示例）：

技術(shù)點:

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

2.全部商品

圖片如下（示例）：

技術(shù)點：

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

3. 關(guān)于我們

圖片如下（示例）：

4. 詳情頁

圖片如下（示例）：

技術(shù)點:

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

5. 購物車

圖片如下（示例）：

技術(shù)點：

①、加入購物車
獲取到當(dāng)前的商品后將該商品傳遞到vuex里面進(jìn)行存儲，然后跳轉(zhuǎn)到購物車頁面，再利用vuex將數(shù)據(jù)v-for循環(huán)到該組件中展現(xiàn)出來。

6. 我的收藏

圖片如下（示例）：

技術(shù)點：

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

7. 我的訂單

圖片如下（示例）：

---

總結(jié)：

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

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。