美多商城

电子商务 B2B 案例ID：187456

杨成伟

2 年经验· 交通银行

微信扫码沟通，客服可协助直接对接工程师；如当前档期不合，也可继续推荐相似案例作者。

案例介绍

项目技术：Vue-Cli + Vue-Router +Vuex+ Element-UI + Axios
项目描述：
美多商城主要满足于大众进行网上购物的需求，该商城主要有登录、注册、首页、商品详情页、我的购物车、我的订单搜索、我的收藏等功能模块，满足用户的需求，使用第三方插件美化页面，提高用户的体验；
责任描述：
●通过beforeEach路由前置守卫进行登录验证拦截，如果设置的meta字段为true，需要进行登录验证，为false的可以进行进行next(),在需要进行登录的页面，再进行判断是否已经登录过了；
●商品详情页主要是对某个商品的详细信息进行展示，用户可以在这里把喜欢的商品加入购物车或收藏列表。
●使⽤ Promise封装⽹络请求,处理多异步任务并发执⾏;在vue.config.js脚本里通过设置proxy解决跨域问题；
●使⽤Vue-Router实现页⾯之间的路由跳转、Vuex 实现状态管理，在搜索模块中使用了组件内的beforeRouteEnter、beforeRouteUpdate进行组件重用判断，并将登录之后的凭证存在仓库，用于各个页面使用;
●我的购物车页面，调用接口获取添加的商品并进行渲染，使用Element-Ui上的el-checkbox组件，将选中状态字段存在数组里与原商品的长度进行比较，从而判断是否单选还是全选，并将选中的商品总价进行计算；
●配合测试产品⼈员解决bug以及后期维护⼯作。