[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-8888":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":10,"totalLinesOfCode":10,"stars":12,"forks":13,"watchers":14,"openIssues":15,"contributorsCount":16,"subscribersCount":16,"size":16,"stars1d":16,"stars7d":16,"stars30d":17,"stars90d":16,"forks30d":16,"starsTrendScore":16,"compositeScore":18,"rankGlobal":10,"rankLanguage":10,"license":10,"archived":19,"fork":19,"defaultBranch":20,"hasWiki":21,"hasPages":19,"topics":22,"createdAt":10,"pushedAt":10,"updatedAt":23,"readmeContent":24,"aiSummary":25,"trendingCount":16,"starSnapshotCount":16,"syncStatus":26,"lastSyncTime":27,"discoverSource":28},8888,"vue-meituan","zwStar\u002Fvue-meituan","zwStar","vue+node+mongodb仿美团外卖点餐系统带支付功能","",null,"Vue",1597,457,35,32,0,1,53.08,false,"master",true,[],"2026-06-12 04:00:41","## 更新（2019\u002F6\u002F5） ##\n项目已经发布一年多的时间，vue-cli已经升级到3.0，很多依赖也都更新了导致项目跑不起来，这里简单的把项目升级到vue-cli3版本，接下来准备发布小程序版本的，感谢大家的支持。\n\n## 关于 ##\n2019届大三学生，前段时间一直想一个人单独开发一个较为完整的项目，在众多应用中，考虑之后选择了美团外卖来模仿，这段时间就利用课余时间进行开发，前端用vue+vuex+vue-router+axios，因为需要用到定位和支付等功能，需要后端配合，而且想要做真正数据交互，所以用express(基于nodejs的框架)做后台，数据库用NOSQL的mongodb。 前端项目包含20多个路由，涉及到vue文件有40个，功能设计登录，定位，浏览商品，加购物车，下订单，支付(支持微信和支付宝的扫码支付和调起app支付)，评价，个人信息更改，是一个较为完整的项目。\n\n### 注意：此项目为个人开发实践练习，不作为任何商业用途\n\n\n\n## 社区地址\n   掘金地址：>[https:\u002F\u002Fjuejin.im\u002Fpost\u002F5aca46e2f265da238c3af4ca](https:\u002F\u002Fjuejin.im\u002Fpost\u002F5aca46e2f265da238c3af4ca)\n\n   思否地址：>[https:\u002F\u002Fsegmentfault.com\u002Fa\u002F1190000014267516?utm_source=index-hottest](https:\u002F\u002Fsegmentfault.com\u002Fa\u002F1190000014267516?utm_source=index-hottest)\n## 功能 ##\n- 登录\u002F注销\n- IP定位\n- 搜索地址\n- 获取商店(计算当前位置和商店的距离)\n- 加购物车\n- 下订单\n- 支付(支持微信和支付宝的扫码支付和调起app支付)\n- 评价\n- 头像上传(用了七牛云存储)\n- 图片懒加载\n\n\n## 技术栈 ##\n- Webpack-cli搭建项目\n- Vue全家桶(vue+vuex+vue-router)\n- CSS预处理器SCSS\n- axios与后端进行请求数据\n- 七牛云存储图片\n- 支付宝和微信支付\n- 使用better-scroll滚动\n- Express搭建后端服务\n- Mongoose对MongoDB进行便捷操作\n- 使用Charles抓取数据\n\n\n## 效果演示\n### 主界面 ###\n![主界面](screenshots\u002Findex3.gif)\n### 定位和搜索 ###\n![定位](screenshots\u002Flocation.gif)\n### 扫码支付 ###\n![扫码支付](screenshots\u002Fscan_pay.gif)\n### APP支付 ###\n![调用APP支付](screenshots\u002Fapp_pay.gif)\n### 我的购物车 ###\n![购物车](screenshots\u002Fcart.gif)\n### 清除购物车 ###\n![清除购物车](screenshots\u002FclearCart.gif)\n### 评论 ###\n![评论](screenshots\u002Fcomment.gif)\n### 其它 ###\n![其它](screenshots\u002Fother.gif)\n### 还有一些其它功能就不放图了哈 ###\n\n## 线上地址 ##\n    http:\u002F\u002F39.108.3.12\n    请用谷歌浏览器然后开启移动端浏览，如果要调用APP支付就需要用手机自带浏览器打开，然后支付时选择调起APP支付\n\n## 说明\n    后端项目地址：>[GitHub：https:\u002F\u002Fgithub.com\u002FzwStar\u002Fmeituan-backend](https:\u002F\u002Fgithub.com\u002FzwStar\u002Fmeituan-backend)\n\n## 未完待续 ##\n    还有商家管理PC端还没写完，等写完再开源出来\n\n## 项目部署\n\n阿里云 CentOS 7.4 64位\n\n## 项目运行\n\n```\n项目运行之前，请确保系统已经安装以下应用\n1、node\n2、mongodb\n```\n\n```\ngit clone https:\u002F\u002Fgithub.com\u002FzwStar\u002Fvue-meituan.git\n\ncd vue-meituan\n\nnpm install\n\nnpm run serve\n\n访问: http:\u002F\u002Flocalhost:8080 (确保后端项目服务已开启)\n\n```\n\n# 项目布局\n\n```\n.\n├── api                             后端接口\n├── config.js                       运行配置\n├── assets                          静态资源\n├── components                      全局组件\n├── router                          路由\n├── store                           vuex\n├── styles                          全局样式\n├── views                           页面\n├── App.vue                         入口页面\n├── main.js                         入口\n├── .babelrc                        babel-loader 配置\n├── .gitignore                      git 忽略项\n├── favicon.ico                     favicon图标\n├── index.html                      html模板\n└── package.json                    package.json\n.\n\n```\n\n\n## 写在最后 ##\n因为还是学生，平时最多也是和同学一起开发，并没有参与过真正的企业团队开发，所以应该有很多地方做的不是很好，欢迎各位大佬们给我提一些意见。\n\n 如果有问题，您可以在 Issues 中提问哈。\n 如果您对这个项目感兴趣，请Star支持下，谢谢！\n# License\n    MIT\n\n# 打赏\n如果觉得这个项目对你有帮忙，可以请我喝杯奶茶哈\n\n微信：\n\n\u003Cimg src=\"https:\u002F\u002Fgithub.com\u002FzwStar\u002Fvue-meituan\u002Fblob\u002Fv2.0\u002Fscreenshots\u002FweChat.jpg\" width=\"275\" alt=\"微信\"\u002F>\n支付宝：\n\n\u003Cimg src=\"https:\u002F\u002Fgithub.com\u002FzwStar\u002Fvue-meituan\u002Fblob\u002Fv2.0\u002Fscreenshots\u002Falipay.jpg\" width=\"275\" alt=\"支付宝\"\u002F>\n\n\n\n\n\n\n","该项目是一个基于Vue+Node+MongoDB的仿美团外卖点餐系统，具备完整的支付功能。它使用了Vue全家桶（vue+vuex+vue-router）进行前端开发，后端则采用Express框架配合Mongoose操作MongoDB数据库。项目实现了登录、定位、商品浏览、购物车管理、订单处理及微信支付宝支付等核心功能，并支持图片懒加载和七牛云存储。适用于学习前后端分离技术栈、电商应用开发以及支付接口集成的场景。",2,"2026-06-11 03:20:11","top_language"]