vue的点餐系统设计与实现【字数：9232】
目录
1.引言 1
2.概述 2
3.系统开发技术 3
4.系统需求分析 5
4.1系统的性能要求 5
4.2系统功能需求分析 5
5.系统设计 6
5.1系统总体功能划分 6
5.2系统模型设计 7
5.3系统结构 8
6.功能页面实现 11
6.1 数据相关 11
6.2各模块功能总体设计 13
6.3菜单页设计 13
6.4评论页面设计 23
6.5商家页面设计 26
7.系统评价 28
7.1系统主要优点 28
7.2系统存在的不足与改进方案 28
总 结 29
参考文献 30
致 谢 30
1.引言
经济的快速发展给人们的生活带来了许多的变化，人们对于生活质量的要求也越来越高，外出就餐成了很多人放松自己，嘉奖自己的一种方式。在这样一种大环境下，随之而来的是就餐高峰期间，餐厅满员，服务员却无法及时的服务客人，大大降低了餐厅的服务质量，也使客人有许多不满意之处。那么如何有效减轻这样一种现状呢？
减轻这种现状可以有很多解决方案，最为有效且快速的方法莫过于点餐系统的使用。在过往，外出就餐的流程是进店之后等待有无空位，坐下后服务员拿来菜单，客户挑选菜品，服务员在一旁等待并记下菜品，然后拿到厨房，通知厨房可以开始烹饪，在厨房烹饪这段时间内，客户需要继续等待一段不短的时间，最后才可以开始享受餐点。离开前还需至前台付款。在繁忙的就餐高峰期间，这一流程还有可能会更漫长，比如服务员人员不足造成客人等待点单等问题。甚至有可能造成前厅忙，厨房闲的现象。所以，提高餐厅工作效率，提升用户愉悦度是必须要考虑的问题。
而点餐系统能很好的减轻甚至解决这一问题，客人进店后，用植入于移动设备上的智能点餐系统选择菜品，这不仅仅给了客人更多更自由的选择时间，同时也解放了服务员，无需服务员在一旁等待，可自行去忙其他事。客人选择好之后自行选择支付方式并付款，菜单转到后厨，也节省了服务员到后厨的这一段时间，享用完餐点之后就可离开，无 *好棒文|www.hbsrm.com +Q: ^351916072^
需排队结账付款。整个过程给了客人更大的自由度，对餐厅的效率也有一定的提高。
本系统主要有以下功能：
1.根据菜品分类选择菜品，加入购物车中，并可在购物车中对菜品进行修改。
2.可查看此道菜品的详情，来判断是否喜爱。并可查看关于这道菜的评论。
3.查看本餐厅的相关信息，如地址，联系方式等。
如今，网络与移动设备遍布我们的生活，利用网络与移动设备来提高工作效率是很多人的第一选择。点餐系统不论是从载体而言，还是从性能方面而言，都是缓解餐厅就餐高峰期的不二之选。
2.概述
设计并开发这一点餐系统，运用到了web开发，计算机网络，vue.js，node.js，webpack，JavaScript，HTML语言等知识。对已有的web系统进行学习与分析，设计出试用于现实生活的同时兼具高效性与实用性的基于vue.js的点餐系统。
根据这一想法，此系统的主要功能如下所示：
1.商品页：商品页可以根据菜品的分类：如凉菜，甜点等大概念，选择自己喜爱的菜品，并加入购物车。选择完毕后，可在购物车里对菜品进行二次筛选。选择完毕后，点击支付，可选择利于自己的支付方式付款。
2.商品详情页：点击商品，可查看此商品的基本信息，比如更细节的图片，商品价格，对此道菜的其他客人的评价等，以此来作为您是否选择的参考依据。
3.评论页：可查看其他客人对这家餐厅菜品的所有评价。可根据好评与差评来进行选择性的查看。
4.商家详情页：这一页面可查看此家餐厅的一些基本信息，如营业时间，餐厅地址，联系方式等。
开发并设计一款点餐系统来提高餐厅工作效率，提升用户愉悦度是本系统的存在意义。与此同时，本系统也是一个案例，本系统的实现，不仅仅是一个餐厅效率问题的缓解与解决，更是利用软件技术，利用开发解决生活问题的典型，本文对未来社会发展的高效性，人民生活的幸福度提升都是一种探索与启发。
3.系统开发技术
设计并实现本系统主要用到 vue，node.js，webpack，vuecli，stylus，JavaScript，等技术与知识。
（1）Vue简介
随着移动设备的普及与性能提升，移动端的网页应用开发成为一种流行。显然PC端开发方案在这里并不合适，这时vue的优点就显现出来了。
Vue是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue被设计为可以自底向上逐层应用。Vue的核心库只关注视图层。[6]
Vue易用、灵活、速度快，为构建完整的现代Web应用提供了所需的所有功能，其渐进式的特点也让开发者能够轻松上手。[4]
Vue的优点在于数据驱动和视图组件化，具有轻量、组件化和友好的API。[1]不同于传统的操作，手动改变DOM来改变视图， Vue只需要改变数据，就会自动改变视图，数据改变驱动了视图的自动更新，这是MVVM思想的实现。视图组件化是指把一整个网页拆分成一个一个的区块，可以把每个区块看作成一个组件。由此，网页由多个组件拼接或者嵌套组成。
版权保护: 本文由 hbsrm.com编辑，转载请保留链接: www.hbsrm.com/jsj/wljs/188.html
