基于微信小程序的食堂点餐系统的设计与实现
摘要
在互联网普及的时代里， 应用程序、软件系统都出现在我们的生活中， 这些软件应用程序每时每刻 为我们的生活提供方便。其中小程序是移动运用中既满足日常使用又具有方便快捷的特点的应用。如今 在疫情下生活的我们用尽一切去自我防护， 都在尽力不给国家与社会添麻烦。但本人通过在校期间的观 察发现， 在午晚餐高峰时校园食堂仍然会出现因排队点餐出现人群拥挤情况， 为此， 本人基于微信小程
序研究食堂线上点餐系统， 希望能够缓解排队点餐期间人群聚集的问题。
本文讲述了基于微信小程序开发的食堂点餐系统，借助微信开发者工具使用 JavaScript 语言对小 程序进行开发。小程序主要分为用户端与商家端， 用户端提供基本的线上点餐功能， 用户在小程序中支 付下单， 下单时也可添加备注信息， 并且查看餐品制作进度、对餐品进行评价等。商家端主要是商家对
自己商铺中的菜品进行增删改操作。
本系统经测试表明， 已满足线上点餐的基本功能， 能够为师生提供便捷的校园食堂点餐服务， 但系
统中还存在着许多需要改善的用户交互设计，接下来将继续改进系统使其能够更加完善。
关键词：微信小程序，校园食堂，线上点餐
Canteen ordering system based on WeChat applet
Abstract
In the era of Internet popularization, applications and software systems appear in our life. These software applications provide convenience for our life all the time. Among them, small program is an application that not only meets the daily use, but also has the characteristics of convenience and quickness in mobile application. Now living under the epidemic, we are doing everything to protect ourselves and trying our best not to cause trouble to the country and society. However, through my observation at school, I found that the campus canteen will still be crowded due to queuing for ordering at the peak of lunch and dinner. Therefore, I study the canteen online ordering system based on wechat applet, hoping to alleviate the problem of crowd aggregation during
queuing for ordering.
This paper describes the canteen ordering system based on wechat applet development. This paper uses JavaScript language to develop the applet with the help of wechat developer tools.The applet is mainly divided into client and merchant. The client provides basic online ordering function. Users can pay for orders in the applet, add notes when placing orders, check the production progress of meals, evaluate meals, etc.The merchant side is mainly used by merchants to add, delete and modify dishes in their own shops. The system has met the basic functions of online ordering, can provide convenient services for users, and can realize the
significance of design.
The test of the system shows that it has met the basic functions of online ordering and can provide convenient ordering services for teachers and students in the campus canteen. However, there are still many user interaction designs that need to be improved in the system. Next, we will continue to improve the system
to make it more perfect.
KeyWords: WeChat applet,Campus canteen, online ordering
目 录
第一章 绪论
1.1 研究背景及意义
1999 年 2 月腾讯公司发布腾讯 QQ，历时 12 年后， 2011 年 1 月 21 日腾讯公司再度推 出一个为智能终端提供即时通讯服务的免费应用程序--微信。腾讯 QQ 在刚推出时主要以 PC 端为主，不仅功能与业务丰富，页面交互设计也较为合理。微信应用程序主要以手机端 为主,推崇小而精,内容比较精练。所以在微信推出后就以病毒式传播， 用户人数不断增加。 这也为 2017 年微信小程序推出后的发展提供了先天优势， 使得小程序赢得了用户的广泛关 注。当下很多用户厌倦了 App 功能单一和需要下载的弊端，很多简化的用户需求就可以用 微信小程序实现，并且可以直接绑定微信帐号，免去了注册和下载麻烦[1]。微信针对开发 者也开放了开发社区，为大家提供了许多开发的接口。这对小型创业企业来说既是机遇， 也是挑战[2]。微信小程序本身是依托于微信而存在的应用程序，所以不需要考虑设备兼容 性的问题，这无形中节省了开发成本。这也是本次论文选择基于微信小程序开发食堂点餐 系统的原因。同时希望通过设计这款小程序， 使食堂点餐更加受人欢迎，也使食堂与互联 网相联系，扩大食堂的影响力[3]。
2020 年初新冠疫情的出现，国家倡导无接触点餐，要求大家做到点餐就餐无接触， 因 此线上点餐的方式迅速普及。线上点餐对于商家来说能够节省大量的前台人工点餐劳动力， 对于用户来说方便快捷，最重要的一点是它能够做到一定程度上的无接触。线上点餐缓解 学校食堂就餐空间有限、现场等候时间长以及避免人群聚集病毒飞沫传 染风险等问题[4]。 校园是人群高聚集的地方， 一旦出现防护不当就极可能造成悲剧，这使得我们需要更加重 视防护尽量避免人群聚集。但学校即使发布了食堂错峰就餐的通知与安排也还是无法控制 同学们在同一时间下课前往食堂排队就餐时的拥挤现象。开发本系统的意义在于能够让同 学在线上点餐，在收到餐品制作完成通知后再前往食堂取餐，这样就避免了排队等餐时的 接触。 一方面解决了同学们排长队等待的困扰，另一方面也使学校能够最大程度保障校园 安全。
随着 21 世纪初，我国的移动互联网不断的进步与突破，从 2009 年开始国家大规模地 部署 3G 网络， 我国大部分地区都已覆盖移动网络通信设施。在普及网络的同时国家也在致 力研究能让大家使用上更快的网络， 直到 2021 年我们的移动基础设施已经进行到了第三次 的更新换代， 开启了 5G 智能时代。互联网的快速发展推动了我国商业模式的变化， 许多行 业都逐渐将发展重心从传统的线下经营模式慢慢转向了互联网销售模式，堂食消费是餐饮
消费的传统模式， 然而随着互联网的普及，外卖消费已逐步渗入社会生活，成为堂食消费 的重要补充[5]。
美团外卖于 2010 年正式成立至今一直稳居中国十大外卖品牌榜榜首， 它和饿了么外卖 成为了我国的两大外卖平台，如今已从最初的单一点餐平台发展成了综合性平台。 外卖平 台的兴起，不仅让白领，蓝领， 学生等，解决了吃饭的问题，也让她们能够足不出户就能 享受到美食[6]。然而在国内的学校食堂， 对于食堂线上点餐普遍运用得并不广泛[7]。目前校 园中使用手机点餐到店自取方式的一般是一些大牌的连锁奶茶店，它们使用公司开发的微 信小程序，而奶茶店运用对于这种线上点餐小程序广泛的原因主要是因为，在线下奶茶店 一般门店不大，而人流量巨大， 排队就能劝退不少客人。采用了自助点餐后顾客可提前下 单后等待出餐了再到门店取走， 这样既是为奶茶店留住了顾客，同样的对于顾客而言也是 一种极大的便利。但小程序开发需要一定的成本，所以许多学校食堂并没有为食堂堂商家 专门开发线上点餐的小程序。市面上目前也并没有出色的为校园食堂线上点餐提供服务的 平台，所以都是校方在需要时会为自己的学校的食堂专门开发。国外使用餐厅点餐系统则 是从 2001 年开始的， 大部分的餐厅已经应用上了比较完善的点餐系统[8]。顾客可使用本 餐厅的点餐系统进行自主下单， 在餐厅忙碌的时既不需要等待服务员过来点餐，还能拥有 充足的时间思考想要下单的餐品。同时还为餐厅的服务人员节省了大量的劳动力。
通过对现有的外卖小程序用户下单流程与特点进行调查，并结合学校食堂情况对本系 统进行需求分析后设计系统功能。首先考虑设计本系统的初衷是为避免学生在食堂排队就 餐时出现人群聚集，再考虑到学校倡导环保不提倡使用一次性打包碗筷，本系统不提供安 排配送服务。为此特别设计了可查看餐品的实时制作进度功能，商家在餐品制作完成时上 报系统，系统将数据传到云后台同步到学生订单中，可有效免学生在食堂等餐时间。其他 功能设计以快捷方便为主要目的，只为能够最大程度上为学生节省时间。
本系统总共包括三种角色：
（1）食堂管理员， 设置此角色的原因在于想要入驻食堂的商家需经过学校的安全审核 才可入驻。
（2）商家， 商家可在登录商家端对自己电脑店铺中的菜品进行管理， 以及在商家端完
成订单出餐。
（3）用户，能够在小程序中进行商品浏览、下单等一些基本功能， 主要可以查看订单 制作进度。
本篇论文对基于微信的食堂点餐小程序进行了设计与实现。本篇论文主要分为六个章 节也就是分为六个部分对系统进行了全面的描述。
第一章，绪论，主要是对本系统研究时的背景以及在此背景下研究本系统的意义进行
了阐述。以及围绕本系统对国内外的现状做了研究。
第二章，开发环境及相关技术，对本系统的开发环境以及支持系统开发的相关技术做 了简单的描述。
第三章，系统可行性研究与需求分析，从经济、技术、市场三个方面进行了系统的可 行性研究。确定本次系统开发可行后进行了系统的需求分析，其中使用到了使用 UML 用 例图的设计方式来对系统功能进行直观的展现，为接下来系统的设计做好前提准备。
第四章，系统设计，在第三章需求分析的基础上对系统进行更加详细的设计， 使用系 统功能结构图以及 UML 顺序图来对系统进行逻辑分析设计。再使用 E-R 图辅助设计出了 系统数据库中应使用到的表。
第五章，系统实现，对系统主要页面以及功能进行了全面的描述。通过图片的方式展 示了系统的前端界面，结合界面对实现的功能进行详细介绍。
第六章，系统测试，在系统完成后对系统的基本功能采用黑盒测试的方式进行验证，
验证系统是否满足需求规格要求。
第二章 开发环境及相关技术
本次系统开发是基于微信小程序开发的应用程序，以微信平台作为程序运行依托。系 统采用的是云开发无需搭建服务器，直接使用平台提供的 API 进行业务操作。
2.1 开发环境
操作系统： Microsoft Windows10
程序语言： JavaScript
开发工具：微信开发者工具， HBuilder X
微信小程序是是一款无需下载，无需安装的的应用。打破传统应用 App 下载安装才可 使用的步骤，给予用户“即用即走”的体验感。如果不再使用小程序， 只需关闭页面，不 卸载程序就不清除缓存，方便用户使用，同时也减少了内存占用。[9]此外对比传统软件的 开发宣传成本，微信小程序开发成本低，能够节省大量资金，人力，时间，是开发者能够 专注做好产品，同时背靠微信 10 亿+用户节省推广成本。同时小程序内容丰富但用户操作
简单，能够使用户获得最佳体验感。
HBuilder 是 DCloud(数字天堂)推出的一款是为前端开发者服务的通用 IDE。界面清爽 简洁，绿柔主题经过科学的脑疲劳测试，最适合人眼长期观看的主题界面。主要是其强大 的语法提示功能，精准、全面、细致，快速提高开发效率。最全的语法库和 浏 览 器 兼 容
数据、可以方便的制作手机 APP 等。
在 1995 年时， 由 Netscape 公司的 Brendan Eich 在网景导航者浏览器上首次设计实现 而成。 JavaScript 是动态的，它可以直接对用户或客户输入做出响应， 无须经过 Web 服务 程序。并且 JavaScript 具有强大的跨平台型，只要能运行浏览器的计算机，都运行它。
2.3 本章小结
本章介绍了基于微信小程序的食堂点餐系统的开发环境、所使用到的编程技术，也对 使用到的 IDE 做了简单了介绍。
第三章 系统可行性研究与需求分析
在本系统开发前需要对系统进行可行性研究，分别从经济、技术、市场三个放面进行 可行性研究，从而考虑本系统是否值得开发。
3.1 系统可行性研究
（1）系统完成后所带来的效果：学与生商家能够直接在小程序中快速、高效的完成餐 品交易。无需有过多的线下接触，系统的设计能够最大化的解决食堂因点餐排队过于拥挤 的问题。
（2）主要功能：食堂商家能够上传菜品到小程序中，学生能够在程序中看到食堂各个 商家的菜品并且下单。学生下单后商家账号能够立刻接收到订单并且在制作完成后在小程 序中上报出餐，后台将出餐信息同步到学生订单中。食堂管理员能够管理小程序后台，进 行添加商家或移除等操作。
对系统开发的过程中所产生的成本，以及后期系统的维护成本与系统上线后所带来的 收益等进行分析。首先， 开发系统用到的开发工具， HbuilderX、微信开发者工具都是开源 软件无需下载费用，目前微信开放社区提供了很多 API 供开发者免费使用。但本系统开发 使用的是云开发， 需要使用微信云开发资源每月需要进行资源额度购买，除此之外均为人 工技术费用。在系统上线后学生能够在除食堂之外的地方直接对食堂菜品浏览下单能够增 加一定的销量，同时线上点餐节省食堂点餐人工费用，综合来说本系统在经济上可以带来 不错的效益。
本系统为微信小程序开发， 小程序前端使用原生 JavaScript 进行页面编写， 后台使用 的是 node.js 语言， JavaScript 为大学课程中所学习的内容， 而 node.js 学习教程可直接 在网上免费获取。而数据存储采用的是微信开发者工具提供的云开发后台，可以之间满足 开发所需要的数据存储管理等需求。所以目前的技术是支持开发本系统的
如今许多 APP 的下载都带着许多附加广告等，甚至市场上许多不合法软件的出现危害 到消费者的隐私安全。但本系统采用的微信小程序无需安装下载，通过微信打开即可直接 使用，这也是软件发展的一大趋势，方便快捷。再从市场调查中发现， 目前软件市场中还 未出现一款较完善的食堂点餐小程序。因而从市场发展前景方面看，本课题研究的方向有 很大的发展空间。
（1）在系统分析与设计中， 软件的需求分析的软件开发极为重要的组成部分。在完成 软件可行性研究后软件项目真正的起点就是需求分析。做好了需求分析能够为后期减少很 多不必要的麻烦， 因为软件项目一旦完成后再修改需求的成本将会大大提高，也是给编码 人员增加了极大的工作量。本次系统功能需求分析采用的是 UML 用例图来表示， UML 用例 图能够很好的展示外部角色户能够观察到的系统的功能，并描述出每个功能的操作角色是 谁。
系统完整的用例图能够直观的展示出使用系统的每个角色与系统功能之间的关系。图 3-1 为微信食堂点餐小程序完整用例图。
图 3-1 微信食堂点餐小程序系统完整用例图
（2）从软件开发的角度，用例图只是简单的用图形的方式表示，因此还需要编写用例 规约对每个用例进行详细的说明，用例规约能够帮助开发人员对系统有一个更加详细的了 解，表 3-1、3-2、3-3、3-4 为该系统主要 4 个用例的用例规约。
表 3-1 登录模块用例规约
| 用例名称 | 登录 |
| 参与者 | 游客（未登录用户） |
| 前置条件 | 正常进入小程序，游客通过未登录购物车页面、订单页面跳转登录页面， 或直接进入登录页面 |
| 基本事件流 | 1. 游客进入食堂点餐系统小程序 2. 游客点击进入登录页面 3. 游客在登录页面选择身份学生登录或商家登录 4. 选择学生登录后弹出微信授权登录， 选择商家登录则输入账号密码登录 5. 用户登录成功可购买菜品，商家登录成功进去商家功能模块 |
| 扩展事件流 | 2a:游客拒绝授权登录，登录失败 4a:商家输入账号密码错误，提示错误 |
| 结论 | 只有当游客同意授权登录或商家输入正确的用户名和密码才能正常使用小 程序其他功能 |
表 3-2 购买菜品模块用例规约
| 用例名称 | 购买菜品 |
| 参与者 | 用户（已授权登录用户） |
| 前置条件 | 用户授权登录成功后 |
| 基本事件流 | A1: 1.用户进入食堂点餐小程序 2.从首页选择商铺点击进入商铺 3.在商铺中选择菜品点击进入查看详情 4.在菜品详情页点击立即购买按钮购买菜品 A2: 1.用户进入食堂点餐小程序 2.从首页选择商铺点击进入商铺 3.在商铺中选择菜品点击进入查看详情 4.在菜品详情页点击加入购物车按钮将菜品加入购物车 5.从底部导航栏进入购物车，选择刚刚加购的菜品点击购买按钮完成菜品 购买 |
| 结论 | 购买菜品的方式有两种，需要用户进行正确的操作即可完成购买 |
表 3-3 评价菜品模块用例规约
| 用例名称 | 评价菜品 |
| 参与者 | 用户（已授权登录用户） |
| 前置条件 | 用户购买菜品，用餐完毕后此订单交易完成。 |
| 基本事件流 | 1.游客进入食堂点餐系统小程序 2.通过底部导航栏进入我的订单页面 3.选择已完成订单，点击订单后评价按钮 4.跳转到此菜品详情页中评价板块 5.用户输入对菜品评价点击发布按钮完成评价 |
| 扩展事件流 | 3a:无法对未完成订单进行评价 5a:用户输入评价内容为空时将跳出错误提示 |
| 结论 | 用户需选择已完成订单才能对菜品进行评价，且评价内容不可为空 |
表 3-4 上传菜品模块用例规约
| 用例名称 | 上传菜品 |
| 参与者 | 商家（已成功登录商家） |
| 前置条件 | 商家成功登录，并进入商家端 |
| 基本事件流 | 1.商家进入食堂点餐系统小程序 2.商家在菜单栏中选择添加菜品按钮，进入添加菜品详情信息页面 3.在添加菜品页面商家输入菜品名称、价格、描述、图片等信息。 4.点击上传菜品按钮，提示添加成功则为上传菜品成功 |
| 扩展事件流 | 4a:菜品信息栏名称、价格、描述、图片为空提示错误 |
| 结论 | 商家需要填写完成菜品信息才可成功上传菜品到商铺中 |
微信食堂点餐小程序前端主要使用角色有游客、用户、商家三种。
小程序中用户登录方式采用微信提供的授权登录方式， 此方式简单快捷，且用户不需 要输入个人信息用户会更加愿意使用。进入小程序时不需要第一时间授权，但未授权用户 无法对菜品进行下单操作，游客可先进行商品浏览，也可查看菜品详情与菜品所收到的评 价后再考虑是否授权登录。游客用例图中共有 6 个用例如图 3-2 所示。
用户可在登录页面进行授权登录。也可从购物车、订单页面点击跳转到登录页面进行 操作。授权登录后用户可在菜品详情页进行加入购物车或直接购买的操作。在购物车中查 看加购菜品，可从在购物车中下单并同时对购买订单添加备注信息，如取餐时间、个人口 味等，也可将菜品从购物车中删除。在购物车下单后可在订单页面查看餐品准备情况，查 看商家是否出餐。订单完成后用户可对菜品进行评价，供其他用户做下单参考。用户用例 图中共有 10 个用例如图 3-3 所示。
因学校食堂对商家管控严格， 本系统中商家需要先通过学校审核，获取资格后从系统 管理员那获取登录的账号密码。从登录页面选择商家登录， 输入账号密码即可登录。登录 后商家可进行菜品添加操作，可查看已添加菜品列表，菜品列表中可进行编辑菜品信息与 删除菜品的操作。接收到订单后开始制作菜品， 并及时上报出餐。商家还可查看本店账单， 查看历史收益。商家用例图中共有 7 个用例如图 3-4 所示。
因本系统基于微信小程序开发，经分析与研究后决定采用微信云开发控制台作为本系 统后台管理员操作端。使用云开发控制台不仅操作简单，同时在另一方面还节省了开发费 用。系统管理员能够添加商铺， 为商家注册账号。对商家已发布菜品进行监管，以及监管 用户对菜品的评价，如出现不当言论可进行删除。管理员用例图中共有 7 个用例如图 3-5
所示。
图 3-2 游客用例图
图 3-3 用户用例图
3-4 商家用例图
3-5 管理员用例图
（1）安全性需求
本系统面向的用户为在校师生，系统应该具有保护用户信息，防止用户输入信息丢失 的能力。开发人员应对用户在本系统输入的信息进行加密技术等保护， 对后台管理员加强
监管保护用户个人隐私安全。
（2）易用性需求
微信小程序本身具有简单便捷的特点，本系统设计初衷也是为能够给师生用餐带来便 利。所以系统设计应满足交互界面简单，美观，用户操作设置应简单易懂。使用户使用起 来能够轻松快捷。
（3）可维护性
开发人员在编写代码时应遵从编写原则， 为后期增添、修改系统预留接口。保证后期 如需要修改代码时不会使系统功能受到影响。各个模块都应该独立，保证在修改一个模块 时另一个模块不会受到影响。
本章主要对微信食堂点餐小程序进行了需求分析，主要分为系统功能与非功能分析， 其中系统功能又分为前端功能分析与后台功能分析。通过两个大方面对系统进行了全面的 分析，为后面的系统设计打好基础。
第四章 系统设计
4.1 设计目标
目前学校中还没有提供学生一个食堂线上点餐的平台，本系统为师生设计食堂点餐小 程序，系统功能主要是为师生提供基本的线上点餐服务，学生能够在小程序中下单食堂菜 品，添加备注取餐时间，并且能在小程序订单中查看餐品是否制作完成。让师生在学校的 任何地方都能提前预定食堂的餐品，节省下来的时间能有更好的学业安排。
系统结构图能够展示一个系统的层次和系统的每个模块。在需求分析阶段本人已经通 过用例图初步分析了系统每个角色的功能，在系统设计阶段再将每一个功能模块与系统的 层次关系使用结构图展现出来。结构图中能够清楚的了解到每个功能模块之间的关系。系
统功能结构图如图 4- 1 所示。
图 4-1 系统功能结构图
UML 中顺序图一般是用于描述系统使用过程中一个情景，顺序图能够准确的展现出系 统中一个动作的操作逻辑，也是设计者实现系统的一条路线，一个顺序图可能是一个用例 的一部分。以下是本系统主要功能顺序图，清楚地展示了本系统功能实现的逻辑步骤。
用户在小程序中浏览商铺， 选择想要点餐的商铺， 进入商铺内挑选菜品进行支付购买。 用户购买菜品顺序图如图 4-2 所示。
图 4-2 用户购买菜品顺序图
商家登录自己的账户，进入小程序商家端在菜单栏中选择添加菜品， 填写要添加菜品 的详细信息后点击上传，菜品将同步添加到商品列表中。商家添加菜品顺序图如图 4-3 所 示。
图 4-3 商家添加菜品顺序图
商家接收到用户的菜品订单后开始进行订单制作，制作完成后点击上报出餐， 数据库 将菜品状态更新， 同步到用户订单中，告知用户餐品已制作完后。商家上报出餐用户接收 顺序图如图 4-4 所示。
图 4-4 商家上报出餐用户接收顺序图
本系统使用的是微信云开发提供的数据库，云开发数据库无需自己搭建数据库，直接 在前端中编写读取函数即可直接的读取 JSON 数据。数据库是系统实现的关键，在设计数 据库时需要遵守数据库设计的基本原则，才可保证数据库的层次分明， 以及合理的布局。 数据库设计主要分为两个部分， 一为数据库概念结构设计，二为数据库逻辑结构设计。
273
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
