## 更新(2019/6/5) ##
项目已经发布一年多的时间,vue-cli已经升级到3.0,很多依赖也都更新了导致项目跑不起来,这里简单的把项目升级到vue-cli3版本,接下来准备发布小程序版本的,感谢大家的支持。
## 关于 ##
2019届大三学生,前段时间一直想一个人单独开发一个较为完整的项目,在众多应用中,考虑之后选择了美团外卖来模仿,这段时间就利用课余时间进行开发,前端用vue+vuex+vue-router+axios,因为需要用到定位和支付等功能,需要后端配合,而且想要做真正数据交互,所以用express(基于nodejs的框架)做后台,数据库用NOSQL的mongodb。 前端项目包含20多个路由,涉及到vue文件有40个,功能设计登录,定位,浏览商品,加购物车,下订单,支付(支持微信和支付宝的扫码支付和调起app支付),评价,个人信息更改,是一个较为完整的项目。
### 注意:此项目为个人开发实践练习,不作为任何商业用途
## 社区地址
掘金地址:>[https://juejin.im/post/5aca46e2f265da238c3af4ca](https://juejin.im/post/5aca46e2f265da238c3af4ca)
思否地址:>[https://segmentfault.com/a/1190000014267516?utm_source=index-hottest](https://segmentfault.com/a/1190000014267516?utm_source=index-hottest)
## 功能 ##
- 登录/注销
- IP定位
- 搜索地址
- 获取商店(计算当前位置和商店的距离)
- 加购物车
- 下订单
- 支付(支持微信和支付宝的扫码支付和调起app支付)
- 评价
- 头像上传(用了七牛云存储)
- 图片懒加载
## 技术栈 ##
- Webpack-cli搭建项目
- Vue全家桶(vue+vuex+vue-router)
- CSS预处理器SCSS
- axios与后端进行请求数据
- 七牛云存储图片
- 支付宝和微信支付
- 使用better-scroll滚动
- Express搭建后端服务
- Mongoose对MongoDB进行便捷操作
- 使用Charles抓取数据
## 效果演示
### 主界面 ###
![主界面](screenshots/index3.gif)
### 定位和搜索 ###
![定位](screenshots/location.gif)
### 扫码支付 ###
![扫码支付](screenshots/scan_pay.gif)
### APP支付 ###
![调用APP支付](screenshots/app_pay.gif)
### 我的购物车 ###
![购物车](screenshots/cart.gif)
### 清除购物车 ###
![清除购物车](screenshots/clearCart.gif)
### 评论 ###
![评论](screenshots/comment.gif)
### 其它 ###
![其它](screenshots/other.gif)
### 还有一些其它功能就不放图了哈 ###
## 线上地址 ##
http://39.108.3.12
请用谷歌浏览器然后开启移动端浏览,如果要调用APP支付就需要用手机自带浏览器打开,然后支付时选择调起APP支付
## 说明
后端项目地址:>[GitHub:https://github.com/zwStar/meituan-backend](https://github.com/zwStar/meituan-backend)
## 未完待续 ##
还有商家管理PC端还没写完,等写完再开源出来
## 项目部署
阿里云 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
.
```
## 写在最后 ##
因为还是学生,平时最多也是和同学一起开发,并没有参与过真正的企业团队开发,所以应该有很多地方做的不是很好,欢迎各位大佬们给我提一些意见。
如果有问题,您可以在 Issues 中提问哈。
如果您对这个项目感兴趣,请Star支持下,谢谢!
# License
MIT
# 打赏
如果觉得这个项目对你有帮忙,可以请我喝杯奶茶哈
微信:
<img src="https://github.com/zwStar/vue-meituan/blob/v2.0/screenshots/weChat.jpg" width="275" alt="微信"/>
支付宝:
<img src="https://github.com/zwStar/vue-meituan/blob/v2.0/screenshots/alipay.jpg" width="275" alt="支付宝"/>
没有合适的资源?快使用搜索试试~ 我知道了~
温馨提示
基于node js、vue、mongodb等技术构建的web系统,界面美观,功能齐全,适合用作毕业设计、课程设计作业等,项目均经过测试,可快速部署运行! 基于node js、vue、mongodb等技术构建的web系统,界面美观,功能齐全,适合用作毕业设计、课程设计作业等,项目均经过测试,可快速部署运行! 基于node js、vue、mongodb等技术构建的web系统,界面美观,功能齐全,适合用作毕业设计、课程设计作业等,项目均经过测试,可快速部署运行!
资源推荐
资源详情
资源评论
收起资源包目录
vue+node+mongodb仿美团外卖点餐系统带支付功能.zip (100个子文件)
.eslintignore 28B
index3.gif 3.06MB
makeOrder.gif 1MB
scan_pay.gif 582KB
comment.gif 530KB
app_pay.gif 457KB
clearCart.gif 405KB
location.gif 205KB
other.gif 172KB
cart.gif 126KB
loading.gif 71KB
.gitignore 214B
index.html 658B
favicon.ico 4KB
weChat.jpg 26KB
alipay.jpg 20KB
restaurant.jpg 4KB
skeleton_restaurant.jpg 2KB
我的收藏.jpg 1KB
qrcode.js 32KB
index.js 5KB
cart.js 4KB
address.js 2KB
user.js 1KB
index.js 1KB
request.js 1KB
order.js 979B
mutation-types.js 978B
main.js 968B
restaurant.js 931B
restaurant.js 758B
upload.js 471B
location.js 302B
vue.config.js 294B
index.js 271B
auth.js 269B
config.js 190B
babel.config.js 174B
package.json 1KB
README.md 5KB
pay_adv.png 145KB
friend_img.png 106KB
user-banner.png 58KB
nothing.png 40KB
logo.png 7KB
shoploading.png 3KB
default-avatar.png 2KB
home-active.png 2KB
star24_half@2x.png 1KB
star24_off@2x.png 1KB
star24_on@2x.png 1KB
home.png 1KB
my.png 1KB
index-active.png 854B
index.png 736B
order-active.png 411B
order.png 405B
common.scss 1KB
mixin.scss 1KB
cart.vue 13KB
confirm_order.vue 11KB
pay.vue 11KB
comment.vue 11KB
comment.vue 10KB
menu.vue 9KB
nearby_shops.vue 9KB
order_detail.vue 8KB
bottom.vue 8KB
home.vue 7KB
store.vue 6KB
order.vue 6KB
comment.vue 6KB
nav.vue 4KB
addressInfo.vue 4KB
seller.vue 4KB
Index.vue 4KB
login.vue 4KB
address.vue 3KB
store_detail.vue 3KB
scan.vue 3KB
address.vue 3KB
location.vue 3KB
friend.vue 3KB
search.vue 3KB
selector.vue 3KB
add_address.vue 2KB
bottom.vue 2KB
search.vue 2KB
head.vue 2KB
error.vue 1KB
star.vue 1KB
littleCart.vue 1KB
alertTip.vue 1KB
star.vue 969B
footprint.vue 917B
thank_record.vue 916B
category.vue 881B
collection.vue 782B
App.vue 742B
loading.vue 496B
共 100 条
- 1
资源评论
白话机器学习
- 粉丝: 1w+
- 资源: 7671
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
最新资源
- 2025年 UiPath AI和自动化趋势:代理型AI的崛起及企业影响
- 基于Java的环境保护与宣传网站的设计与实现毕业论文.doc
- 2025年人形机器人产业发展蓝皮书-量产及商业化关键挑战
- 互联网金融发展指数 (第二期,2014年1月-2015年12月).zip
- 百度智能云千帆大模型平台推进企业多模态生成式AI应用
- 形状检测32-YOLO(v5至v9)、COCO、CreateML、Darknet、Paligemma数据集合集.rar
- qwewq23132131231
- 2024年智算云市场发展与生态分析报告
- 冒泡排序算法解析及优化.md
- MySQL中的数据库管理语句-ALTER USER.pdf
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功