基于Vue2的外卖应用

阅读目录

1. 项目概述
2. 项目难点

 

---

回到顶部

项目概述

　　作为一个刚入门前端的新人，我觉得这种电商或者购物网站类型的项目是能够很好地锻炼自己的机会。我的项目是搭建一个移动端的外卖应用，页面分为用户注册登录、商家搜索、订单查看、个人中心等多个模块，用户可以进入商家查看商品详情、商家信息以及买家评论，将商品添加购物车并下单。前端部分是全由我一个人负责的，包括页面的布局设计以及数据渲染，前后端接口对接。

　　整个项目是使用Vue脚手架进行搭建，使用了vue-router插件构建单页面应用。为了方便管理数据，这里我使用了vuex来集中管理所有组件的数据，对于部分仅限于某些父子关系的组件之间的通信，我是通过vue的props属性实现父组件向子组件传递数据，然后子组件是通过$emit来触发父组件中绑定的自定义事件，实现子组件向父组件通信。获取数据方面，我封装了axios到一个api文件中，来实现统一的接口，方便vux中的actions去调用。

　　整个项目的样式都是我使用css来编写的，部分图标使用了阿里的矢量图标库。首页关于商品种类这一块，使用了swiper插件来实现轮播图。然后关于路由权限管理这一块，我为订单列表和个人中心模块所对应的路由添加了meta字段，调用beforeEach导航守卫在每次路由跳转时进行判断，防止用户在未登录或登出状态下修改url来回退到之前的私有页面，因为部分页面只有用户登录了才能看到。跨域问题我是通过配置了代理来拦截ajax请求。

　　最后，在所需要的几个功能都实现了之后，我尝试着去进行优化。比如，单页面应用的首屏加载慢问题（虽然对于我这个小项目来说并不是很明显），这里我使用了路由懒加载... 

回到顶部

项目难点

 1.忽略页面渲染的异步性

　　在点进去的商家菜单里，我实现了左侧菜单分类导航栏与右侧菜品列表的互动。左边点击导航栏某个分类时，右侧能自动滚动到该类菜品所处的位置；然后右侧滚动查看菜品时，左侧导航栏也能根据滑动到的菜品激活某个分类（实现高亮）。对于点单这个组件，我是在mounted()钩子函数中分发一个获取商家菜单信息的action，在组件挂载后异步获取数据。这里肯定是要获取了数据之后才对数据进行操作，所以我还传进去一个callback函数，但发现对数据的操作不生效。

　　这里是因为我忽略了页面渲染也是异步的，数据修改后并没有立即进行页面的刷新，因此必须还要调用nextTick()函数，让组件刷新后再操作数据。这里的操作是指根据渲染出来的各类菜品，调用clientHeight去获取每个分类在视口中的位置，从而确定滚动条的滚动位置，实现与左侧导航栏的互动。

 

2.弹出提示框时为界面添加蒙层时，蒙层没有完全覆盖页面

　　制作蒙层的<div>元素我是放在HTML文档最前面的，虽然它使用固定定位position:fixed的方式在点击时显示在视口中央，但由于HTML文档后面的内容也是声明了position:relative，因此，按照源码顺序后面内容仍然显式在蒙层的前面。这里因为我当时CSS样式写得比较乱，导致没搞清楚堆叠上下文的堆叠次序，最后是通过设置z-index属性来调整蒙层的堆叠上下文。