摘要：随着时代的进步，移动技术的发展，我们已经进入互联网时代，每个人都有随时随地的上网聊天，购物。这时候不仅仅购物平台的兴起，美食外卖平台也在兴起，典型外卖平台有：美团，饿了么等平台。而本次项目重构移动端美团外卖平台前台网页项目，实现线上订餐系统。

本项目美团外卖前端基于Vue框架，后端使用nodejs中的express框架，前后端交互中使用Axios作为请求，IDE工具使用微软的Visual Studio Code作为集成开发工具。使用Webpack打包前端，后台数据库选择MongoDB，使用roboMongoDB工具可视化操作数据库。

项目实现了线上点餐，用户登录，自动登录，路由拦截，定位等功能，线上点餐临时购物车没有选择存储到数据库，通过浏览器本地数据存储，通过获取浏览器数据实现持久化。使用nodejs作为后端语言，处理并接受请求，访问数据库，传回相应数据实现增删改查的功能。

关键词：美团外卖  Vue  Webpack  MongoDB数据库   roboMongoDB可视化工具 

目录

摘要

Abstract

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.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