学员作品:Vue 框架快速搭建美图移动端商城

当今社会的快速发展,【效率】二字贯穿人们的生活!前端攻城狮在工作中更是要求要高效的完成每一个项目;目前流行的三大框架承担了此项工作,Vue 的学习使用更是将 简单、快速、高效 完美的展现了出来~

妙味北京 JS 实体班学员 * 松 正是跟随技术的潮流,紧紧的抓住了 Vue 的优势,熟练掌握了该框架,并主流使用 Vue 搭建了此项目:美图移动端商城;

项目名称: 美图移动端商城

项目地址: http://m.microbu.com/170613/shensong/#/

开发周期: 14 天

开发技术栈:

  • Vue-cli 快速搭建单页应用
  • Vue 核心框架
  • Vue-Router 单页面路由跳转
  • Axios 基于 Promise 对象,实现 Ajax 请求
  • Vuex 集中式状态管理
  • Stylus CSS 预处理
  • IconFont 矢量图标
  • Easy-Mock 模拟数据,实现前后端数据分离
  • Better-Scroll 实现页面滚动
  • Vue-Infinite-Scroll 实现上拉加载
  • Vue-Lazyloay 实现图片懒加载

设计思路与功能:

数据获取

  • 采用 Easy-Mock 模拟数据,实现前后端数据分离。

  • 在 Vue-cli 中使用 proxyTable 代理解决开发环境的跨域问题。

  • 同一文件目录下封装 Axios 请求,实现 Ajax 集中式管理。

页面优化

  • 引入 fastclick 插件,解决移动端 click 事件的 300ms 延迟。

  • 使用 Vue 内置组件 keep-alive,将匹配的组件进行缓存,减少 ajax 请求。

  • 使用媒体查询(@media),针对不同的设备像素比(device-pixel-ratio)进行缩放,实现移动端1px边框。

  • 引入 Vue-Lazyloay 插件,实现图片懒加载。

  • 通过媒体查询(@media),配合不同的设备像素比(device-pixel-ratio),分别切出@2x@3x的图片,来实现移动端 Retina 屏幕图片的适配。

轮播图组件

  • 引入 Better-Scroll 插件,实现轮播图组件的高效复用。

定位查找体验店

  • 首先获取所属 IP 网络的省份信息,然后从所有省份中选择定位的省份,最后根据省份的省会城市查找到当前体验店的信息。

复杂配件页的路由实现

  • 将不同配件通过动态路由:id 都匹配到 GoodsLists 组件,然后根据不同配件下是否有机型数据通过动态路由:model同样都匹配到 GoodsLists 组件。这样 GoodsLists 组件与 Goods 组件形成了路由嵌套关系,GoodsLists 组件共享了 MHeader 和 Category 组件。

登录跳转

  • 通过在路由配置中添加 meta 字段,然后配合 vue-router 的导航钩子函数 beforeEach,拦截导航,实现登录跳转。使用 localstorage 保存登录信息,实现登录持久化。

加入购车小球动画

  • 通过过渡动画的三个钩子函数进入前 beforeEnter、进入中 enter、进入后afterEnter,实现加入购物车的小球动画效果。

购物车

  • 使用 Vuex 集中式管理购物车数据,实现购物车的单选、全选、价格合计、增减、删除、全部删除等。用 localstorage 保存已购商品信息,实现数据持久化。

遇到的难点及解决方法:

  • 当使用 Vue 内置组件 keep-alive 缓存页面时,返回首页轮播图出现不轮播的现象。解决方法是利用声明周期的两个钩子函数 activated 和 deactivated,让轮播图重新计算宽度,利用 BetterScroll 的 refresh 方法,重新刷新,实现轮播的效果;同样,当屏幕宽度发生变化,轮播图出现宽度不适应的现象。解决方法是当组件渲染时,在钩子函数 mounted 绑定 resize 事件,监听窗口改变,重新计算刷新。

  • 登录页面如何判断某个路由是否需要登录。在路由配置的时候添加 meta 字段,表示进入此路由是需要登录的。然后利用 vue-router 的全局钩子函数 beforeEach 拦截导航,判断是否需要登录。登录成功后将登录信息保存在 localstrage 中,下次就可以跳过登录。

  • 多个动态路由匹配同一个详情页 Detail 组件,如何实现首次进入数据通过 Ajax 获取,再次进入不发送 Ajax 请求。解决方法是利用 Vuex 储存数据。结合 keep-alive 的两个钩子函数 activated 和 deactivated 实现。每个商品详情页首次加载数据都储存到 Vuex,再次进入数据直接通过 Vuex 获取。

  • 配件页点击切换速度过快,会出现内容串页的现象。解决方法是利用 Axios 的取消请求实现。预先在 Axios 请求中添加一个 cancelToken 字段。每次点击切换时,先 cancel 取消本次请求。然后发送新的请求。


该同学目前已顺利供职于 360 公司。并祝福学弟学妹们顺利完成毕业作品、进入心仪的公司。

查看更多学员作品:http://miaov.com/index.php/example/exampleList


相关课程推荐:

妙味 Vue 系统修炼与精彩实战(周末班)

开班时间:2018 年 1 月 6 日

课程总费用:1888 元/位

课程优惠信息:

☩ 凡 12 月 29 日之前报名者,每人减免 88 元,即:1800 元/位;
☩ 凡 2 人组团报名,每人减免 158 元,即:1730 元/位;
☩ 凡 3 人组团报名,每人减免 188 元,即:1700 元/位;

详情介绍:http://miaov.com/index.php/news/newsDetail/nid/284


JS 课程目录:

报名地址:http://miaov.com/index.php/course/coursedetail/cid/36


课程咨询:

咨询QQ:2852509866

微信咨询:miaov-class

电话咨询:010-57269690

妙味网友
请登录后留言,请登录注册
 
 
 
 
 
联系我们

点我咨询QQ客服

010-57269690

在线微信客服
客服1
客服在线时间

工作日:9:30~18:00

周六:10:00~17:00

妙味公众号