zwstar/vue-meituan

vue+node+mongodb仿美团外卖点餐系统带支付功能

更新（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://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抓取数据

效果演示

主界面

定位和搜索

扫码支付

APP支付

我的购物车

清除购物车

评论

其它

还有一些其它功能就不放图了哈

线上地址

http://39.108.3.12
请用谷歌浏览器然后开启移动端浏览，如果要调用APP支付就需要用手机自带浏览器打开，然后支付时选择调起APP支付

说明

   后端项目地址：>GitHub：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

打赏

如果觉得这个项目对你有帮忙，可以请我喝杯奶茶哈

微信：

支付宝：

vue-meituan's Issues

请问一下项目上线的流程

租了阿里云服务器,还有域名,请问怎么把项目放到服务器上,并使用nginx代理,谢谢

求帮忙

博主或者会的人可以加下我吗 qq：2606846716 微信 17609130694 谢谢了。

express路由传入回调函数 出现undefined报错 跪求一看

Error: Route.post() requires a callback function but got a [object Undefined]
at Route.(anonymous function) [as post] (/Users/meitu/Downloads/vscode工作区/meituan-backend/node_modules/express/lib/router/route.js:202:15)
at Function.proto.(anonymous function) [as post] (/Users/meitu/Downloads/vscode工作区/meituan-backend/node_modules/express/lib/router/index.js:510:19)
at Object. (/Users/meitu/Downloads/vscode工作区/meituan-backend/routes/v1.js:29:8)
at Module._compile (module.js:649:30)
at loader (/Users/meitu/Downloads/vscode工作区/meituan-backend/node_modules/babel-register/lib/node.js:144:5)
at Object.require.extensions.(anonymous function) [as .js] (/Users/meitu/Downloads/vscode工作区/meituan-backend/node_modules/babel-register/lib/node.js:154:7)
at Module.load (module.js:561:32)
at tryModuleLoad (module.js:501:12)
at Function.Module._load (module.js:493:3)
at Module.require (module.js:593:17)
at require (internal/module.js:11:18)
at Object. (/Users/meitu/Downloads/vscode工作区/meituan-backend/routes/index.js:1:1)
at Module._compile (module.js:649:30)
at loader (/Users/meitu/Downloads/vscode工作区/meituan-backend/node_modules/babel-register/lib/node.js:144:5)
at Object.require.extensions.(anonymous function) [as .js] (/Users/meitu/Downloads/vscode工作区/meituan-backend/node_modules/babel-register/lib/node.js:154:7)
at Module.load (module.js:561:32)

你好，为什么登陆不了呢？

你好，为什么登陆不了呢？还有就是首页没有数据，能帮我看看是什么问题吗？

home.vue反复跳转至登录界面，求解？

觉得您的逻辑写的没错啊！可是为什么在订单页面(order.vue)中已经登录，且使用Chrome查看localstorage也已经存储进入了username的值，但是当从订单页面跳转至home页面时仍然反复出现，重复提示登录现象！！！！求解？？？？？

希望有时间出个部署到阿里云的教程

希望有时间出个部署到阿里云的教程

前端跑起来，但是只有首页能显示，很多列表都显示苦逼的程序在加班

前端跑起来，但是只有首页能显示，很多列表都显示苦逼的程序在加班，但是我看到你的截图是有这些模块的，为啥我下载回来的没有呢

会写小程序版本吗？

对作者写的这个项目真的万分佩服，请问作者会出小程序版本吗？

纯前端：npm install报phomas跟chromdriver出错

我目前是纯前端，没有涉及后端方面的知识，所以项目clone下来后就直接npm install，在这过程中一直报这个错：Failed at the [email protected] install script.，不太明白什么原因，希望作者能告知一下

商家版怎么样了...

前端报错@/views/index/index in ./src/router/index.js 说什么找不到.

后端可以正常启动成功连接数据库,前端 npm install 没有问题 就是 npm run serve 报错了* @/views/index/index in ./src/router/index.js

• @/views/index/nearby_shops in ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??r?ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/views/category/category.vue?vue&type=script&lang=js&
  各位GitHub大佬拜托

npm run server 报错，提示如下错误

These dependencies were not found:

• @/views/index/index in ./src/router/index.js
• @/views/index/nearby_shops in ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/views/category/category.vue?vue&type=script&lang=js&

To install them, you can run: npm install --save @/views/index/index @/views/index/nearby_shops

为什么修改host没有修改地址Ip呀 后台数据库能拷贝一份给我吗？

env: require('./dev.env'),
host:"localhost",
port: 8070,
autoOpenBrowser: true,
assetsSubDirectory: 'static',
assetsPublicPath: '/',
proxyTable: {},
//代理
proxyContent:[
],
proxyPath: '',
// CSS Sourcemaps off by default because relative paths are "buggy"
// with this option, according to the CSS-Loader README
// (https://github.com/webpack/css-loader#sourcemaps)
// In our experience, they generally work as expected,
// just be aware of this issue when enabling this option.
cssSourceMap: false

安装模块启动后 （各个组件）路径全错了

@ multi ./build/dev-client ./src/main.js

error in ./src/views/confirmOrder/children/children/add_Address.vue

Module build failed: Error: ENOENT: no such file or directory, scandir 'D:\zafProject\work-project\meituan-all\meituan-font\vue-meituan\node_modules\node-sass\vendor'
at Error (native)
at Object.fs.readdirSync (fs.js:952:18)
at Object.getInstalledBinaries (D:\zafProject\work-project\meituan-all\meituan-font\vue-meituan\node_modules\node-sass\lib\extensions.js:130:13)
at foundBinariesList (D:\zafProject\work-project\meituan-all\meituan-font\vue-meituan\node_modules\node-sass\lib\errors.js:20:15)
at foundBinaries (D:\zafProject\work-project\meituan-all\meituan-font\vue-meituan\node_modules\node-sass\lib\errors.js:15:5)
at Object.module.exports.missingBinary (D:\zafProject\work-project\meituan-all\meituan-font\vue-meituan\node_modules\node-sass\lib\errors.js:45:5)
at module.exports (D:\zafProject\work-project\meituan-all\meituan-font\vue-meituan\node_modules\node-sass\lib\binding.js:15:30)
at Object. (D:\zafProject\work-project\meituan-all\meituan-font\vue-meituan\node_modules\node-sass\lib\index.js:14:35)
at Module._compile (module.js:570:32)
at Object.Module._extensions..js (module.js:579:10)
at Module.load (module.js:487:32)
at tryModuleLoad (module.js:446:12)
at Function.Module._load (module.js:438:3)
at Module.require (module.js:497:17)
at require (internal/module.js:20:19)
at Object. (D:\zafProject\work-project\meituan-all\meituan-font\vue-meituan\node_modules\sass-loader\lib\loader.js:3:14)

@ .//vue-style-loader!.//css-loader?{"minimize":false,"sourceMap":false}!.//vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-2012b16f","scoped":true,"hasInlineConfig":false}!.//sass-loader/lib/loader.js?{"sourceMap":false}!./~/vue-loader/lib/selector.js?type=styles&index=0!./src/views/confirmOrder/children/children/add_Address.vue 4:14-435 13:3-17:5 14:22-443
@ ./src/views/confirmOrder/children/children/add_Address.vue

请求一个支付相关的问题

目前微信/支付宝都不支持个人性质网站接入支付，请问您是用了第三方的接口吗?

Job

求教

老哥求教具体的运行环境版本，qq569553017

能添加作者的微信吗，想请教一下，万分感谢

VX：yy738686337

你的数据库怎么连接的

请问一下数据库的数据有吗?

请问一下您这个项目用的数据库是什么,数据有吗?我想用java改写后台,但是不知道您的api需要的数据.

若是新加一个选规格的功能，请问vuex中的购物添加事件那里应该怎么设计？

为什么只有nginx页面？ 无法进入到演示页面

商家管理的功能已经发布了不？

你好,有问题请教下

后端接口启动了，前端部分拿不到数据，有数据库文件吗？谢谢

救救孩子

运行后端项目时遇到这个报错，百度救不了我只能来这里了，难受。
好像是es6语法转es5的问题
Cannot use import statement outside a module

！！小哥哥求帮助

你好 小哥哥 帮我解答一下好么 我按照你得readme中说的进行的操作，先cnpm i 然后打开了mongodb数据库，然后 cnpm 运行了，为什么前端没有显示呢

您好，布署到vps后，页面可以出来，调不到数据

浏览器调试出现很多这种连接不到服务器，请问是哪里的参数没设置对？
http://localhost:8080/sockjs-node/info?t=1563760392545

求助

你好 我这个商家数据显示不出来，登录一直失败但是不报错

在你的location.vue里面使用search组件

父组件
location.vue
methods请求接口，
子组件 search.vue 用props接收，watch监听input的val变化，this.fun_click(val)，这个方法是用的父传子，为什么还能把input 的value值回传给父组件的fun_click()，我不太理解。
我的方法是用子传父 在子组件watch监听input的value值，this.$emit('fun_click',value);回传，没有用props，所以想问：父传子props，在watch监听，能把value值不用$emit传给父组件吗？
我是不理解你的方法，并不是你的不对，如果感兴趣可以回答一下

您好，我改了confing/index.js的assetsPublicPath配置项

引文我需要把这个项目放到一个文件夹里，配置项是自己的文件夹名字，然后 npm run build 后打包出来的资源放在服务器根目录，有个错误信息，能加下你的微信么 我微信：17621375308

前后端都跑起来了，数据也导进去了，但是前端没出现数据，定位也不行

数据也导进去了，但是前端没出现数据
腾讯的KEY也设定了，定位也不行，不知道出了什么问题

我有问题想请教一下作者，我的qq是2359602415

你还找工作么？

可以聊聊哇？

前后端可以跑起来，但是前端没有出现数据！！

前端的配置文件修改为: baseURL: 'http://127.0.0.1:3000
打开数据库为空：
`

use meituan
switched to db meituan
show collections
addresses
admins
comments
orders
pays

db.orders.find()
" 没有数据....... "
`

请问是那个步骤错了？