项目介绍
vue-meituan 一款基于Vue.js开源框架开发的功能完善的仿美团外卖点餐系统，附带支付功能。项目前端采用Vue全家桶（Vue + Vuex + Vue-router）进行开发，后端使用Express框架（基于Node.js），数据库采用MongoDB（NoSQL），实现了从用户登录、定位、浏览商品、加购物车、下订单到支付的全流程功能。
应用场景
-
个人开发实践：适合前端开发者或全栈开发者进行个人项目实践，提升Vue.js及相关技术的掌握程度。 -
教学演示：可作为高校计算机相关专业或培训机构的教学案例，用于讲解Vue.js全家桶、Express框架及MongoDB数据库的实际应用。 -
小型外卖平台原型：对于想要快速搭建一个小型外卖平台的创业者或团队，本项目提供了一个可参考的原型。
功能模块
用户模块
-
登录/注销：用户可以通过账号密码进行登录和注销操作。 -
个人信息更改：用户可以修改个人信息，如头像、昵称等。 -
头像上传：支持用户上传头像，使用七牛云存储进行图片管理。
定位模块
-
IP定位：通过IP地址自动定位用户所在城市。 -
搜索地址：用户可以手动输入地址进行搜索和定位。
商品模块
-
获取商店：根据用户当前位置，计算并展示附近商店及其距离。 -
浏览商品：用户可以浏览商店内的商品信息，包括价格、图片、描述等。
购物车模块
-
加购物车：用户可以将心仪的商品加入购物车。 -
清除购物车：支持用户清空购物车。 -
我的购物车：展示用户当前购物车中的商品列表。
订单模块
-
下订单：用户可以提交购物车中的商品生成订单。 -
订单管理：用户可以查看自己的订单历史及订单详情。
支付模块
-
支付功能：支持微信和支付宝的扫码支付和调起app支付。
评价模块
-
商品评价：用户可以对购买过的商品进行评价和打分。
功能特点
-
功能完善：实现了从用户登录到支付的全流程功能，覆盖了外卖点餐系统的核心需求。 -
技术先进：采用Vue.js全家桶进行前端开发，Express框架搭建后端服务，MongoDB作为数据库，技术栈先进且实用。 -
响应式设计：页面布局合理，支持不同尺寸设备的访问。 -
数据交互真实：通过后端服务实现真实的数据交互，提升项目的实用性。 -
支付功能齐全：支持多种支付方式，满足用户多样化的支付需求。
项目技术栈
-
Vue.js：核心框架，用于构建用户界面。 -
Vuex：状态管理库，用于管理应用中的所有组件的状态。 -
Vue-router：路由管理库，用于构建单页面应用（SPA）的路由系统。 -
Webpack-cli：项目构建工具，用于打包和优化前端资源。 -
SCSS：CSS预处理器，用于编写更易于维护和扩展的样式代码。 -
axios：HTTP客户端库，用于与后端服务进行数据交互。 -
better-scroll：滚动库，用于优化页面滚动体验。 -
七牛云存储：图片存储服务，用于管理用户上传的头像等图片资源。
项目布局
├── 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
功能演示
开源地址
https://github.com/zwStar/vue-meituan
