1.3k stars介绍一个开源版的美团外卖项目

小半 • 2022年11月3日下午7:59 • 开源速递 • 阅读 125

微信公众号:[开源日记],分享10k+Start的优质开源项目。

关于作者

2019届大三学生，前段时间一直想一个人单独开发一个较为完整的项目，在众多应用中，考虑之后选择了美团外卖来模仿，这段时间就利用课余时间进行开发，前端用Vue+vuex+vue-router+axios，因为需要用到定位和支付等功能，需要后端配合，而且想要做真正数据交互，所以用express(基于nodejs的框架)做后台，数据库用NOSQL的mongodb。前端项目包含20多个路由，涉及到vue文件有40个，功能设计登录，定位，浏览商品，加购物车，下订单，支付(支持微信和支付宝的扫码支付和调起app支付)，评价，个人信息更改，是一个较为完整的项目。

GitHub数据

1.3k stars
37 watching
413 forks

开源地址:https://github.com/zwStar/vue-meituan

功能

登录/注销
IP定位
搜索地址
获取商店(计算当前位置和商店的距离)
加购物车
下订单
支付(支持微信和支付宝的扫码支付和调起app支付)
评价
头像上传(用了七牛云存储)
图片懒加载

技术栈

Webpack-cli搭建项目
Vue全家桶(vue+vuex+vue-router)
CSS预处理器SCSS
axios与后端进行请求数据
七牛云存储图片
支付宝和微信支付
使用better-scroll滚动
Express搭建后端服务
Mongoose对MongoDB进行便捷操作
使用Charles抓取数据

效果演示

主界面

定位和搜索

扫码支付

APP支付

我的购物车

清除购物车

其它

说明

后端项目地址

GitHub：https://github.com/zwStar/meituan-backend

项目部署

阿里云 CentOS 7.4 64位

项目运行

项目运行之前，请确保系统已经安装以下应用
1、node
2、mongodb

git clone https://github.com/zwStar/vue-meituan.git

cd vue-meituan

npm install

npm run serve

访问: http://localhost:8080 (确保后端项目服务已开启)

项目布局

.
├── api                             后端接口
├── config.js                       运行配置
├── assets                          静态资源
├── components                      全局组件
├── router                          路由
├── store                           vuex
├── styles                          全局样式
├── views                           页面
├── App.vue                         入口页面
├── main.js                         入口
├── .babelrc                        babel-loader 配置
├── .gitignore                      git 忽略项
├── favicon.ico                     favicon图标
├── index.html                      html模板
└── package.json                    package.json