# elm-frontend **Repository Path**: anlzou/elm-frontend ## Basic Information - **Project Name**: elm-frontend - **Description**: elm 前端项目 - **Primary Language**: Unknown - **License**: Not specified - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2020-11-06 - **Last Updated**: 2021-03-13 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # 关于 使用vue2仿饿了么外卖平台的单页应用，由于时间原因，未使用小程序框架重构，使用webapck在开发中搭建前后端分离开发环境，前端负责展现/交互逻辑，后端负责业务/数据接口。 ## 说明 > 开发环境 Windows10、nodejs 12.9.1 > 此项目的所有接口数据都来源于配套的后台系统 [后台项目传送地址](https://gitee.com/anlzou/elm-backend) >>**若使用本地的后台而不是线上部署的后台, 此时启动本项目的命令为：`npm run local` 而不是 `npm run dev`** > 基于element-ui搭建的 [后台管理页面](https://gitee.com/anlzou/elm-manage) ## 技术栈 vue2 + vuex + vue-router + webpack + ES6 + fetch + sass + flex + svg ## 参考开源框架&库 - [vant](https://github.com/youzan/vant) - [vux](https://github.com/airyland/vux) ## 项目运行 ``` git clone https://gitee.com/anlzou/elm-frontend.git   cd elm-frontend npm install 或 yarn(推荐) npm run dev ``` # 目标功能 - [x] 定位功能 -- 完成 - [x] 选择城市 -- 完成 - [x] 搜索地址 -- 完成 - [x] 展示所选地址附近商家列表 -- 完成 - [x] 搜索美食，餐馆 -- 完成 - [x] 根据距离、销量、评分、特色菜、配送方式等进行排序和筛选 -- 完成 - [x] 餐馆食品列表页 -- 完成 - [x] 购物车功能 -- 完成 - [x] 店铺评价页面 -- 完成 - [x] 单个食品详情页面 -- 完成 - [x] 商家详情页 -- 完成 - [x] 登录、注册 -- 完成 - [x] 修改密码 -- 完成 - [x] 个人中心 -- 完成 - [x] 下单功能 -- 完成 - [x] 订单列表 -- 完成 - [x] 订单详情 -- 完成 - [x] 添加、删除、修改收货地址 -- 完成 - [x] 帐户信息 -- 完成 - [x] 服务中心 -- 完成 - [x] 红包 -- 完成 - [x] 上传头像 -- 完成 - [ ] 付款 -- 未完成 # 最终目标 1、用node.js构建一个模拟外卖平台的后台系统。 2、写出跨 Android 和 IOS 的原生APP版本，使用uni-app重构。 3、如果时间来的及，会出一卖家版本。 # 项目布局 ``` . ├── build // webpack配置文件 ├── config // 项目打包路径 ├── elm // 上线项目文件，放在服务器即可正常访问 ├── screenshots // 项目截图 ├── src // 源码目录 │   ├── components // 组件 │   │   ├── common // 公共组件 │   │   │   ├── alertTip.vue // 弹出框组件 │   │   │   ├── buyCart.vue // 购物车组件 │   │   │   ├── computeTime.vue // 倒计时组件 │   │   │   ├── loading.vue // 页面初始化加载数据的动画组件 │   │   │   ├── mixin.js // 组件混合(包括：指令-下拉加载更多，处理图片地址) │   │   │   ├── ratingStar.vue // 评论的五颗星组件 │   │   │   └── shoplist.vue // msite和shop页面的餐馆列表公共组件 │   │   ├── footer │   │   │   └── footGuide.vue // 底部公共组件 │   │   └── header │   │   └── head.vue // 头部公共组件 │   ├── config // 基本配置 │   │   ├── env.js // 环境切换配置 │   │   ├── fetch.js // 获取数据 │   │   ├── mUtils.js // 常用的js方法 │   │   └── rem.js // px转换rem │   ├── images // 公共图片 │   ├── page │   │   ├── balance │   │   │   ├── balance.vue // 余额页 │   │   │   └── children │   │   │   └── detail.vue // 余额说明 │   │   ├── benefit │   │   │   ├── benefit.vue // 红包页 │   │   │   └── children │   │   │   ├── commend.vue // 推荐有奖 │   │   │   ├── coupon.vue // 代金券说明 │   │   │   ├── exchange.vue // 兑换红包 │   │   │   ├── hbDescription.vue // 红包说明 │   │   │   └── hbHistory.vue // 历史红包 │   │   ├── city │   │   │   └── city.vue // 当前城市页 │   │   ├── confirmOrder │   │   │   ├── children │   │   │   │   ├── children │   │   │   │   │   ├── addAddress.vue // 添加地址页 │   │   │   │   │   └── children │   │   │   │   │   └── searchAddress.vue // 搜索地址页 │   │   │   │   ├── chooseAddress.vue // 选择地址页 │   │   │   │   ├── invoice.vue // 选择发票页 │   │   │   │   ├── payment.vue // 付款页 │   │   │   │   ├── remark.vue // 订单备注页 │   │   │   │   └── userValidation.vue // 用户验证页 │   │   │   └── confirmOrder.vue // 确认订单页 │   │   ├── find │   │   │   └── find.vue // 发现页 │   │   ├── food │   │   │   └── food.vue // 食品筛选排序页 │   │   ├── forget │   │   │   └── forget.vue // 忘记密码，修改密码页 │   │   ├── home │   │   │   └── home.vue // 首页 │   │   ├── login │   │   │   └── login.vue // 登录注册页 │   │   ├── msite │   │   │   └── msite.vue // 商铺列表页，外卖首页 │   │   ├── order │   │   │   ├── children │   │   │   │   └── orderDetail.vue // 订单详情页 │   │   │   └── order.vue // 订单列表页 │   │   ├── points │   │   │   ├── children │   │   │   │   └── detail.vue // 积分说明 │   │   │   └── points.vue // 积分页 │   │   ├── profile │   │   │   ├── children │   │   │   │   ├── children │   │   │   │   │   ├── address.vue // 地址 │   │   │   │   │   └── children │   │   │   │   │   ├── add.vue // 新增地址 │   │   │   │   │   └── children │   │   │   │   │   └── addDetail.vue // 搜索地址 │   │   │   │   ├── info.vue // 帐户信息 │   │   │   │   └── setusername.vue // 重置用户名 │   │   │   └── profile.vue // 个人中心 │   │   ├── search │   │   │   └── search.vue // 搜索页 │   │   ├── service │   │   │   ├── children │   │   │   │   └── questionDetail.vue // 问题详情 │   │   │   └── service.vue // 服务中心 │   │   └── shop │   │      ├── children │   │       │   ├── children │   │       │   │   └── shopSafe.vue // 商铺认证信息页 │   │       │   ├── foodDetail.vue // 商铺信息页 │   │       │   └── shopDetail.vue // 单个商铺信息页 │   │       └── shop.vue // 商铺筛选页 │   ├── plugins // 引用的插件 │   ├── router │   │   └── router.js // 路由配置 │   ├── service // 数据交互统一调配 │   │   ├── getData.js // 获取数据的统一调配文件，对接口进行统一管理 │   │   └── tempdata // 开发阶段的临时数据 │   ├── store // vuex的状态管理 │   │   ├── action.js // 配置actions │   │   ├── getters.js // 配置getters │   │   ├── index.js // 引用vuex，创建store │   │   ├── modules // store模块 │   │   ├── mutation-types.js // 定义常量muations名 │   │   └── mutations.js // 配置mutations │   └── style │   ├── common.scss // 公共样式文件 │   ├── mixin.scss // 样式配置文件 │   └── swiper.min.css │   ├── App.vue // 页面入口文件 │   ├── main.js // 程序入口文件，加载各种公共组件 ├── favicon.ico // 图标 ├── index.html // 入口html文件 . ``` # 项目文档 [doc](https://gitee.com/anlzou/elm-doc) # 项目构建&打包配置 [有道云笔记](http://note.youdao.com/noteshare?id=1d04c007bbf671bb2b9741b870f68337&sub=51F4A2649B204A428D2A17E0080FB23E) # 服务器配置 申请域名备案和做OSS对象存储比较费时间，因此静态文件存储使用基于七牛云的第三方。 ```js /** * path: build/dev-server.js * 线上环境服务器 */ case 'online': var proxypath = 'http://anlzou.xyz'; break; /** * path: src/config/env.js * 阿里云OSS */ baseUrl = '//anlzou.oss-cn-shenzhen.aliyuncs.com'; imgBaseUrl = '//anlzou.oss-cn-shenzhen.aliyuncs.com/img'; ``` # TODO - [x] 修复选择城市后手动刷新显示 - [ ] 同一地域商家少于20，测试大于20，是否显示“没有更多了” - path(row 82): elm-frontend\src\service\getData.js - [ ] 包装费价格不合理，状态管理bug ![](./src/images/problem/problem_1.png) # 浏览器缓存数据不及时更新数据问题 ## 设置不缓存 解决办法：按F12 打开 Network 勾选第二行的 Disable cache 即可 ## 正常重新加载 按F12 打开 Network，刷新F5 ## 清空缓存并硬性重新加载 需要先打开控制台(f12)，然后在页面的刷新按钮上右键 ,清空缓存并硬性重新加载。 这样可以确保完全从新加载。