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,但愿能获得你的小星星~

但愿个人分享对你能有帮助,有不正确的地方也但愿获得您的勘误!本人将不胜感激,另外若是你想获取前端整期学习视频和资料扫一扫下面的二维码,回复学习便可,也但愿在前端进阶的路上,咱们一块儿成长,一块儿进步!