摘 要

在我国国民经济的稳定快速发展和居民收入水平的提高的背景下，餐饮业表现出蓬勃发展的势态。改革开放以来，餐饮业的发展十分迅速，然而激烈的竞争和生意的难做也是餐饮业的普遍问题。在这样的情况下，移动自助订购系统方便快捷，订单灵活，餐后结算也完全是自助服务，大大节省了劳动力和时间，因此客人可以更及时地享用到自己喜欢的美味佳肴。

该系统的前端使用Vuejs框架通过双向数据绑定功能来实现前端MVVM设计模式。 利用Vuejs的优势来对前端页面进行组件化和模块化，并使用Vuejs官方路由插件vue-router插件通过浏览器路由分发为系统启用单页应用程序开发并利用Vuex对应用的所有组件状态进行集中式存储管理。以Hbuilde X作为主要开发工具，通过Webpack构建工具打包编译以及压缩代码，并使用Vue官方提供的脚手架vue-cli构建web工程模板。使用axios库来进行前端数据请求的相关操作。实现了一个网络点餐系统，包括分类浏览、添加菜品、结算等功能。

关键词：单页应用；Vue.js框架；MVVM设计模式；点餐系统

Abstract

Due to the steady and rapid growth of the national economy of China and the increase in the income level of residents, the food and beverage market has developed rapidly. Catering consumption has become an important force in which demand continues to grow regularly throughout the year. After reform and opening up, the food and beverage industry has developed rapidly.But fierce competition and difficult business are also common problems in the catering industry. In this case, the mobile self-service ordering system is convenient and quick, ordering is flexible, order settlement is fully self-service, saving manpower and time, so that customers can eat their own delicious meals in a more timely manner.

The front-end of the system uses the Vue.js framework to implement the front-end MVVM design pattern through two-way data binding. Use Vuejs to combine front-end modules and make them modular, and use the official Vuejs routing plugin to develop single-page applications for your system through browser routing distribution, realize the system's single-page application development through the route distribution of the browser, and use Vuex to centrally store and manage all the component states of the application . Use Hbuilde X as the main development tool, use the Webpack generation tool to package, compile and compress the code, and use the official vue-cli framework provided by Vue to create a Web project template. Do it using the Axios library to perform operations related to front-end data requests. We have implemented an online ordering system, which includes functions such as classified browsing, adding food and payment.

Key Words：Single page application；Vue.js framework；MVVM design；Ordering system

目 录

第1章 绪论 1

1.1 研究背景 1

1.2 国内外研究现状 2

1.3 研究内容 3

第2章 关键技术 4

2.1 前端工程化 4

2.2 Webpack构建工具 5

2.3 Vue.js框架 6

2.4 本章小结 7

第3章 系统需求分析 8

3.1 功能性需求分析 8

3.2 非功能性需求分析 9

3.3 本章小结 9

第4章 系统设计 11

4.1 系统模块设计 11

4.2 数据库表设计 12

4.3 本章小结 15

第5章 系统实现 16

5.1 系统开发和运行环境 16

5.2 系统实现基础 17

5.3 系统功能模块 20

5.4 本章小结 23

第6章 系统测试 24

6.1 功能测试 24

6.2 性能测试 25

6.3 本章小结 25

第7章 总结与展望 26

7.1 全文总结 26

7.2 展望 26

致 谢 27

参考文献 28

第1章 绪论

研究背景

自1990年代以来，中国餐饮业发展迅速，行业规模急剧扩大，其增长率和持续的时间超过了其他行业。多年来，餐饮业的销售额增长已超过12％，超过同期社会消费品零售总额的5％-21％。从1999年到2011年，中国餐饮行业的零售额每年平均增长21％以上。这比社会消费品总销售额的年平均增长率快约8％，其在社会消费品零售总额中的份额从1991年的5.3％增加到2011年的11.4％。近年来，餐饮业零售额对社会消费品零售总额的贡献一般在18％左右，直接使社会消费品零售总额增长了2-3％左右。从区域角度来看，东部沿海地区的餐饮业零售额很高，中部地区贡献最大。另一方面，西方餐饮业占该地区消费品零售总额的大部分。在零售方面，广东，四川，江苏和浙江四个省的零售额最高。在中国东部省市，人们忙于工作和生活，因此快餐的销量明显高于晚餐，其中快餐占广东市场的90％。广州的人均食品消费支出是全国平均水平的五倍，位居全国第一。

中国是一个伟大的美食大国，古话有“民以食为天”，而国内则散布着各种类型和大小的餐馆。但是，当前的自助点餐仅限于一些中级或高级的餐厅，这些餐厅更加关注餐厅的品牌和客户体验和规模。饭店设备更新的速度与相关技术的发展和行业的价格密切相关，总的来说饭店设备更新的频率较低。毫无疑问，网络点餐系统将大大降低餐馆的成本，仅凭电子点餐设备就可以节省很多成本。当前，中国大多数饭店和饭店都面临着在中午和晚上等待高峰和排队点餐的情况。大部分客人都会在下午工作，或者在晚上加班，过长的点餐时间会占用他们的工作时间。饭店服务人员还会花费大量时间订购，这增加了饭店成本。