Vue電商項目-我的中心

1、寫在前面

各位掘金的小夥伴們,上週發了一篇Vue登陸註冊-掘金可愛萌貓的文章,沒想到得到了掘金官方的推薦和廣大掘友們的熱情點贊和評論,不少掘友們已經"插眼"坐等源碼了,在這裏很是感謝你們的關注點贊和評論,源碼將在月底放出,敬請期待,也但願掘友們不要吝嗇手中的小星星,順手點個贊,讓更多的小夥伴看到😄,你們一塊兒學習,一塊兒進步!

由於最近工做比較忙,爲了讓掘友們讀懂源碼,我須要把源碼註釋儘量的寫的詳細些,方便你們學習,還請各位掘友耐心等待哈~

2、我的中心頁面搭建

整個我的中心頁面,相對整個項目來講比較簡單,沒有太過於複雜的業務邏輯,主要是合理熟練的使用Vant來搭建UI界面,如下是我的中心用到的Vant組件.

3、我的中心完整效果圖

• 未登陸狀態的我的中心

• 登陸後的我的中心及我的資料

• 修改性別和生日

• 個人訂單

• 個人優惠券

• 個人綠卡

  

4、我的中心數據保存

項目的全部數據來源本身抓包並經過Easy-Mock模擬搭建後臺數據接口,Vuex + 本地localStorage來存儲數據,我的中心模塊也不例外,當用戶未登陸狀態的時候,限制某些功能不能進入,如:我的資料,個人訂單,個人優惠券,個人綠卡等,當用戶經過登陸界面向後臺發送登陸請求後,後臺會返回Token值和用戶數據,將返回的用戶數據經過Vuex來保存到本地進行增刪改查。

5、核心代碼

• 我的中心

  

往期分享連接

• Vue甜小白系列專欄:

  • Vue從甜小白到皮大佬系列(一) Vue是個啥?
  • Vue從甜小白到皮大佬系列(二) v-指令
  • Vue從甜小白到皮大佬系列(三) 生命週期
  • Vue從甜小白到皮大佬系列(四) 自定義指令
  • Vue從甜小白到皮大佬系列(五) 組件
  • Vue從甜小白到皮大佬系列(六) 組件通訊
  • Vue從甜小白到皮大佬系列(七) Vue Router
  • Vue從甜小白到皮大佬系列(八) Vuex

• 每週一道算法題系列

  • 逆波蘭表達式求值
  • 斐波那契數列
  • 合併兩個有序鏈表

• Vue 實戰電商項目系列

  • Vue登陸註冊-掘金可愛萌貓

最後感謝您的關注!

個人GitHub,但願能獲得你的小星星~

但願個人分享對你能有幫助,有不正確的地方也但願獲得您的勘誤!本人將不勝感激,另外若是你想獲取前端整期學習視頻和資料掃一掃下面的二維碼,回覆學習便可,也但願在前端進階的路上,咱們一塊兒成長,一塊兒進步!