1、基于vue-cli 脚手架搭建底层目录,搭配vand组件,精准还原UI层; 2、根据接口文档,通过mockjs模拟数据,axios发送请求与拦截; 3、使用 vue-router 进行路由跳转,使用导航守卫拦截,并封装二级菜单,点击进行路由跳转; 4、主要负责家园页: A. 登录模块: a ) 获取用户登录界面信息,点击确认登录按钮,将填写的用户信息提交给后端接口进行验证,如果匹配成功,使用 localStorage 存储,登录成功后,跳转至主页面。 B.购物车模块: a). 用 vuex 中 state 管理购物车数据:商品数量,价格等;购物车的信息依然采用了cookies根据用户登录状态我们会有请求购物车接口与本地购物车记录合并商品数量和价格计算使用 commit 派发事件,mutation 同步更改,触发页面更新数据,但是刷新页面的时候数据会重置所以我们用的vuex-persistedstate插件来解决数据重置问题,他原理就是储存到浏览器储存里; C: 搜索模块 a) 搜索栏:在进入搜索页会有sessionstorage.getItemt提取历史搜索记录操作;输入搜索条件后点 击搜索按钮和选中热搜条件时,采用了sessionstorage.setItem存储搜索历史记录,并会渲染到历史搜索列表中;(如果是用户登录状态我们会有请求历史记录接口与本地历史记录合并操作,并且也会把最新的历史记录更新给后台); 5、整体图片的渲染使用了v-lazyload,未完成渲染之前显示loading图,提升用户体验;声明:本文仅代表作者观点,不代表本站立场。如果侵犯到您的合法权益,请联系我们删除侵权资源!如果遇到资源链接失效,请您通过评论或工单的方式通知管理员。未经允许,不得转载,本站所有资源文章禁止商业使用运营!
下载安装【程序员客栈】APP
实时对接需求、及时收发消息、丰富的开放项目需求、随时随地查看项目状态
评论