摘 要随着时代的进步，移动技术的发展，我们已经进入互联网时代，每个人都有随时随地的上网聊天，购物。这时候不仅仅购物平台的兴起，美食外卖平台也在兴起，典型外卖平台有美团，饿了么等平台。而本次项目重构移动端美团外卖平台前台网页项目，实现线上订餐系统。本项目美团外卖前端基于Vue框架，后端使用nodejs中的express框架，前后端交互中使用Axios作为请求，IDE工具使用微软的Visual Studio Code作为集成开发工具。使用Webpack打包前端，后台数据库选择MongoDB，使用roboMongoDB工具可视化操作数据库。项目实现了线上点餐，用户登录，自动登录，路由拦截，定位等功能，线上点餐临时购物车没有选择存储到数据库，通过浏览器本地数据存储，通过获取浏览器数据实现持久化。使用nodejs作为后端语言，处理并接受请求，访问数据库，传回相应数据实现增删改查的功能。
目录
1.绪论 1
1.1研究背景 5
1.2项目目标及设计思想 5
1.3 论文结构 6
2.开发工具及关键技术 7
2.1 开发工具 7
2.1.1开发环境Visual Studio Code 7
2.1.2 开发语言JavaScript 7
2.1.3 Vue框架 7
2.2 开发技术 8
2.2.1 Webpack技术 8
2.2.2 MVVM模式简介 8
2.2.3 Vuex技术 9
2.2.4 express技术 9
3.项目总体设计 12
3.1 项目功能需求分析 12
3.1.1 用户登录验证 13
3.1.2 购物车模块需求 13
3.1.3 订单需求 13
3.1.4 后端Api模块需求 13
3.1.5 用例图 14
3.3 项目数据库的设计 14
3.3.1 项目数据库 14
3.3.2 数据库表的关系图 17
4.项目功能详细设计与实现 18
4.1 用户模块功能的实现 18
4.1 *景先生毕设|www.jxszl.com +Q: ￥351916072$ 
.1用户登陆 18
4.1.2商家信息 23
4.1.3用户注销 31
4.2 购物车模块功能的实现 33
4.2.1 添加商品 33
4.3 订单模块 38
4.3.1 提交订单 38
4.4 定位模块 38
4.4.1 获取定位 38
4.4.2 修改地址 41
5.项目测试及演示 44
5.1 测试内容 44
5.2 测试总结 34
6.研究意义 35
6.1 项目研究意义 45
7.总结与展望 46
7.1 项目项目总结 46
7.2 展望 46
参考文献 48
致谢 39
1.绪论
1.1研究背景
互联网的受欢迎给生活带来了很多舒适感。随着移动应用的快速发展，订单应用成功地占领了整个食品店。APP的订单提供给人类的方便服务。网上平台向客户提供服务，严格来说这是第三方O2O平台。
第一.需求分析
（1）在顾客看来，顾客不仅可以单独外出做饭，还可以选择很多食物。这个基本的要点是购买粮食，然后产生了其他社会需要，比如食物的分配等。
（2）商人眼中，一方面通过手机订餐APP，用户可以通过社交网络共享食物，并以此增进顾客的资源和受欢迎程度;另一方面，商人可以对所有商店实行全面的可移动管理，降低餐饮企业运营成本。
第二.产品特点对比
美团外卖平台
美团外卖平台是独立于美团网的外卖平台，他也拥有自己的物流平台，主要发挥便利性强，选择性高，主要的消费人群是白领，做饭时间不够，出门花费时间长选择性差，,而外卖平台正好满足这批人正餐的需求，也为商家提供更多的生意。相对其他o2o外卖平台产品，美团外卖UI风格相对简洁，用户快捷简单，且会将曾经下过单的商家放到最上面，便于顾客下次关顾。
饿了么
有自己的方向，定位明确。现在，学生占了用户中的大部分。根据科比和奔跑吧兄弟等明星的受欢迎程度，这次宣传是为了迎合大学生的主页。我们与不同行业的企业合作推出了广告专栏。
作为“互联网+外卖”趋势的领导者，更多的是加大了用户的选择，但店面混杂，难以管理。此外，他们中的大多数都是私营企业，他们的声誉受到这样一个事实的影响：即使是一些黑人作坊，也很难保证它们的存在。售后服务不好，退货麻烦也是其需要注意和改进的地方。
1.2项目目标及设计思想
该项目设计的主要目的是学习外卖平台的使用和数据的操作重构美团外卖。实现用户登录，添加购物车，添加订单等交互。
本次项目中，前端开发框架使用Vue框架，后端开发技术使用nodeJS中的express框架，数据库方面使用了MongoDB分布型数据库，IDE方面Visual Studio Code作为集成开发工具。在Vue中引入Ant design Vue UI框架，,Vuex作为状态管理，vuexpersistedstate,使用sass作为页面样式语言，最终完成用户登录，定位，操作购物车，生成订单，删除订单，路由拦截等功能。
1.3 论文结构
论文主要分为七个部分：
（1）项目目标任务分析
（2）开发工具及关键技术介绍
（3）项目总体设计
（4）功能设计与实现
（5）测试项目
（6）项目研究意义
（7）总结与期望
2.开发工具及关键技术
开发时使用的环境为：node 10.15，npm 6.4.1，开发工具有：Visual Studio Code、Vue、Vuex，用到的主要技术有：sass、webpack、axios、express等。
2.1 开发工具
2.1.1开发环境Visual Studio Code
Visual Studio Code是一款免费开放源码的IDE，能够适配当前比较流行的开发语言，可自行安装热门功能的插件，推荐使用记录的语言的插件，例如Vue的vetur等，有智能代码完成等功能，可操作git，该软件支持跨平台的Win、Mac和Linux。

原文链接：http://www.jxszl.com/jsj/qrs/82904.html