一、写在前面
各位掘金的小伙伴们,上周发了一篇Vue登录注册-掘金可爱萌猫的文章,没想到获得了掘金官方的推荐和广大掘友们的热情点赞和评论,很多掘友们已经"插眼"坐等源码了,在这里非常感谢大家的关注点赞和评论,源码将在月底放出,敬请期待,也希望掘友们不要吝啬手中的小星星,顺手点个赞,让更多的小伙伴看到😄,大家一起学习,一起进步!
因为最近工作比较忙,为了让掘友们读懂源码,我需要把源码注释尽可能的写的详细些,方便大家学习,还请各位掘友耐心等待哈~
二、个人中心页面搭建
整个个人中心页面,相对整个项目来说比较简单,没有太过于复杂的业务逻辑,主要是合理熟练的使用Vant来搭建UI界面,以下是个人中心用到的Vant组件.
三、个人中心完整效果图
- 未登录状态的个人中心
- 登录后的个人中心及个人资料
- 修改性别和生日
- 我的订单
- 我的优惠券
- 我的绿卡
四、个人中心数据保存
项目的所有数据来源自己抓包并通过Easy-Mock模拟搭建后台数据接口,Vuex + 本地localStorage来存储数据,个人中心模块也不例外,当用户未登录状态的时候,限制某些功能不能进入,如:个人资料,我的订单,我的优惠券,我的绿卡等,当用户通过登录界面向后台发送登录请求后,后台会返回Token值和用户数据,将返回的用户数据通过Vuex来保存到本地进行增删改查。
五、核心代码
- 个人中心
往期分享链接
-
Vue甜小白系列专栏:
-
每周一道算法题系列
-
Vue 实战电商项目系列
最后感谢您的关注!
我的GitHub,希望能得到你的小星星~
希望我的分享对你能有帮助,有不正确的地方也希望得到您的勘误!本人将不胜感激,另外如果你想获取前端整期学习视频和资料扫一扫下面的二维码,回复学习即可,也希望在前端进阶的路上,我们一起成长,一起进步!
