基于SpringBoot和微信小程序的餐馆点餐系统的设计和实现(二)

简介: 基于SpringBoot和微信小程序的餐馆点餐系统的设计和实现

5系统功能与界面的实现

5.1 登录模块功能设计与界面实现

餐馆订餐系统连接界面如图5-1所示。输入页面包含一个帐户输入字段和一个密码输入字段。输入您的账号和密码,点击“登录”进入系统。此处帐户密码不能为空。如果密码输入错误,系统会提示密码输入错误,无法登录系统。管理帐号为admin,123456是登陆密码。

该系统适用于餐厅管理员和餐厅前台工作人员。

第一个是餐厅管理员,他主要负责维护餐厅、菜品类别和菜品的轮播图。此外,您还可以查看来自餐厅客户的订单和排序信息。

微信小程序的使用端,额外采取了微信手机号快捷登陆功能,操作界面如下图所示。

5.2 餐厅管理员模块的实现

登录后默认进入第一个模块,在系统中心查看每月收入金额,方便餐厅老板投票。

该系统使用了一个流行的开源框架,基于一流的技术框架。餐厅点餐系统首页包括左侧菜单区和中心模块显示区。在中间模块显示区定义两个常用报表,用户美化用户界面。

系统菜单包括统计信息、餐厅管理员、轮播图管理、菜品类目管理、菜品管理、菜品订单、排号管理、退出系统这8个菜单。餐厅管理员对该系统拥有完全的权限。

统计模块是我们看到的系统的主页。单击“退出登录模块”,退出系统。对其他模块进行了详细描述。

餐厅管理员模块的操作界面如图5-3所示,餐厅管理员模块的中央部分放了一张表格,表格的字段包括ID、名字、密码、手机号/微信、类型、创建时间、修改时间和操作按钮。

用户可以单击“添加管理员”(界面顶部黄色按钮)进入餐厅管理界面。添加餐厅管理界面不同于当前界面,顶部是“餐厅管理员修改/添加”的模块标题,告知用户这是餐厅管理员的修改添加界面,给与用户做区分提醒,如图5-4所示。

一旦用户输入了他们的姓名、手机号码和密码,点击底部的“提交”按钮。如图5-5所示,系统根据用户输入的信息询问添加是否成功,为了提醒到用户但不做干扰,该界面会停留三秒,结束后自动跳转到上一个页面,对用户交互做的很友好。

5.3 轮播图管理模块的实现

轮播图管理模块可以对餐厅大屏幕上的图像进行配置。该模块可以控制小程序的轮播图内容,即轮播图的图片用于在微信小程序页面上显示图像。编辑后台轮播图后,用户可以在微信小程序中看到最新的图像。轮播图管理界面如图5-6所示。

系统支持添加轮播图的功能。单击顶部黄色的“添加轮播图”按钮,进入添加轮播图界面,系统顶部展示了“轮播图添加/修改”标题,告知用户这个是添加修改轮播图的界面,如图5-7所示。

同样,管理员也可以根据需要,修改、删除轮播图,修改后原有图片会保留在数据库,只是逻辑删除,但微信小程序上不会显示修改前的图片。删除图片后,被删除的图片将不在微信小程序上进行展示,但必须要保留至少一张图片,否则微信小程序将无法展示轮播图,如图5-8所示。

5.4 菜品类目管理模块的实现

菜品类目管理是对餐厅的菜品类目信息进行管理,菜品类目是菜品的一个属性,能否让餐厅管理员更为方便的管理自己的菜品,如川菜、粤菜等,系统使用一张表格来实现,可以让用户整洁的看出系统存放着哪些菜品类目,让用户对餐馆的菜品分类有一个基础的了解,操作界面如图5-9所示。

5.5 菜品管理模块的实现

菜品管理模块,用于录入餐厅所拥有的菜品信息。这个模块用于维护餐厅下设的所有菜品档案,支持基本的增加、删除、编辑、查询操作,如图5-10和图5-11所示。

在微信小程序中,用户也可以查询餐厅可下单的菜品档案,左侧展示了所有的菜品类型,当用户选择左侧的菜品类型后,右侧会展示所选菜品类型下所有的菜品,用于可以点击黄色加号按钮,将菜品加入购物车,加购完成后,点击底部的“选好了”按钮,即可提交菜品订单,具体界面如图5-12所示。

5.6 顾客下单模块的设计实现

菜品订单管理模块,维护了顾客在餐厅的下单信息。可以点击详情按钮查看更为详细的订单信息,也可以取消该订单。另外支持订单一键导出Excel,模块主界面如图5-13所示。

工作人员可以点击详情按钮,查看顾客订单的详情信息,如图5-14所示,可以在PC后台完成订单或取消订单。对于订单已经完成的情况下,也就是说订单已经服务完成,这个时候是不可以进行取消订单操作的,符合现实情况。

顾客在微信下程序端也可以查询订单状态,并且支持催单功能,如图5-15所示。对于已经完成的订单,用户可以对此进行评价,如图5-16和图5-17所示。

5.7 本章小结

本章主要介绍了系统各子功能模块的实现方法和技术栈,展示了各模块的前端页面,对各子模块的功能内容和具体工作方式进行了详细的归纳描述和分析。

本系统是基于开源框架开发的。在上一节中,使用了 View UI 组件库,前端还与Axios结合,用于前后数据交互。后台由Spring开始,Spring MVC连接前端与MyBatis连接数据库集成。

用户:餐厅老板、前台接待员、顾客。管理员帐户为admin。密码是123456。所使用对象的登录系统页面也有所不同。

6 结论与展望

6.1 结论

本文介绍并设计了餐厅点餐系统。在系统总体结构的基础上,提出了餐厅点餐系统的五个功能模块。最后,进行了餐厅点餐系统的开发。

我将餐馆点餐系统的设计分为三块:

(1)最开始,我通过大量的国内外文献对餐厅点餐系统的现状进行了对比分析,国内外现状的优缺点,开发过程中所采用的具体技术,对所采用的技术的优缺点进行了界定和说明。

(2)分析餐厅点餐系统的系统需求和功能需求,确定系统功能,进行系统开发可行性分析,确定系统开发可行性,并在此基础上完成数据库配置。

(3)在编码实现阶段,使用开发工具完成编码实现,并引入SpringBoot框架简化web开发。在数据层,使用MyBatis和MySQL框架,使用Maven进行管理,使用Vue框架开发前端。

6.2 展望

本文开发的餐馆点餐系统可以有效地满足网上餐馆点餐的需求。操作合理,操作简单,界面简单美观,适合餐馆团队使用。然而,由于个人水平等因素的缺乏,在研究中还存在许多问题和不足。例如,本文开发的餐馆点餐系统使用的是MySQL存储系统生成的数据。但是,如果信息量在后期增加,则会影响性能。在后期,将考虑添加缓存,以增加数据存储容量。其次,确保客户信息的安全也是一个重要的关键点。个人信息的安全非常重要。本文不讨论信息安全。为了完善该系统,信息安全也应该进行详细讨论。由于系统本身没有连接到实际的餐馆系统,因此无法查询现有的餐馆菜品信息。

参考文献

[1]李泉溪,吴硕.ZigBee餐馆点餐系统点餐系统研究[J].河南科技大学学报(自然科学版).2011(05)

[2]王加梁,姚嘉鑫.3G技术在餐馆点餐系统点餐系统中的应用研究[J].中国新通信.2013(04)

[3]张琳.基于Android餐馆点餐系统点餐系统的设计与实现[ D].厦门大学2014

[4]邓佩.基于Android平台的餐馆点餐系统点餐系统设计与实现[J].电脑编程技巧与维护.2013(12)

[5]李满玲.基于微信的餐饮行业收银管理系统设计探讨[J].通讯世界.2015(21)

[6]凌质亿,刘哲星,曹蕾.高并发环境下 Apache与 Nginx的I/O性能比较[J].计算机系统应用.2013(06)

[6]田丽,李颖.基于IPv6电子报餐管理系统的设计与实现[J].深圳大学学报(理工版),2020,37(S1):165-168.

[7]逢利华,张锦春.基于Hadoop的分布式数据库系统[J].办公自动化.2014(05)

[8]吴智辉.移动个性化推荐系统设计与实现[ D].电子科技大学2012.

[9]薛晶晶,王彦明.基于Spring Boot技术微信平台的校园食堂智能点餐系统[J]电子世界,2018(14): 193-194.

[10]田苗,张明龙.校园微信订餐平台在高校食堂的应用探析[J].纳税,2018 (5) : 195.

[11]Cao Fengping; Zhu Lin. Research on Campus Attendance System Based on Face Recognition and Trajectory Tracking [J]. IOP Conference Series: Earth and Environmental Science, Volume 769, Issue 4. 2021.

[12]Donger Zhou. Design of Student Attendance System based on 2.4Ghz RFID Technology[J]. Journal of Physics: Conference Series. Volume 1924, Issue 1. 2021.

致谢

大学的四年是如此仓促,以至于他们很快就要毕业了。在此,我要感谢我的导师对我的项目的指导,也感谢我的同学对我的项目的指导。时间很短,每个人都很忙,但他们仍然可以帮助我很多。从初稿的创作到完成,在公司实习的业余时间,在如此繁忙的工作环境下,我一直在写初稿和文档。感谢老师们,我的班主任,以及所有聚集在这里的学生们。

我还要感谢我的家人在物质和精神上的帮助,让我能够在大学四年健康的生活,让我成就现在的自己。


引用说明:

引用以上内容的用户,必须同意以下内容,否则请勿引用!

  1. 出于自愿而使用本文,了解引用本文的风险,且同意自己承担引用本文的风险。
  2. 利用本文内容构建的任何信息内容以及导致的任何版权纠纷和法律争议及后果和作者无关,作者对此不承担任何责任。
  3. 在任何情况下,对于因引用本文而导致的任何难以合理预估的损失(包括但不仅限于商业利润损失、业务中断与业务信息丢失),作者概不承担任何责任。
  4. 必须了解使用本文内容的风险,作者不对其提供二次维护服务,也不提供任何有关资料。

相关文章
|
13天前
|
小程序 JavaScript Java
基于SpringBoot+Vue+uniapp微信小程序的微信课堂助手小程序的详细设计和实现
基于SpringBoot+Vue+uniapp微信小程序的微信课堂助手小程序的详细设计和实现
46 3
|
13天前
|
小程序 JavaScript Java
基于SpringBoot+Vue+uniapp微信小程序的电子商城购物平台的详细设计和实现
基于SpringBoot+Vue+uniapp微信小程序的电子商城购物平台的详细设计和实现
42 3
|
13天前
|
小程序 JavaScript Java
基于SpringBoot+Vue+uniapp微信小程序的英语学习交流平台的详细设计和实现
基于SpringBoot+Vue+uniapp微信小程序的英语学习交流平台的详细设计和实现
27 2
|
13天前
|
小程序 JavaScript Java
基于SpringBoot+Vue+uniapp微信小程序的微信阅读网站小程序的详细设计和实现
基于SpringBoot+Vue+uniapp微信小程序的微信阅读网站小程序的详细设计和实现
39 2
|
20天前
|
小程序 前端开发 API
微信小程序全栈开发中的异常处理与日志记录
【4月更文挑战第12天】本文探讨了微信小程序全栈开发中的异常处理和日志记录,强调其对确保应用稳定性和用户体验的重要性。异常处理涵盖前端(网络、页面跳转、用户输入、逻辑异常)和后端(数据库、API、业务逻辑)方面;日志记录则关注关键操作和异常情况的追踪。实践中,前端可利用try-catch处理异常,后端借助日志框架记录异常,同时采用集中式日志管理工具提升分析效率。开发者应注意安全性、性能和团队协作,以优化异常处理与日志记录流程。
|
20天前
|
小程序 安全 数据安全/隐私保护
微信小程序全栈开发中的身份认证与授权机制
【4月更文挑战第12天】本文探讨了微信小程序全栈开发中的身份认证与授权机制。身份认证包括手机号验证、微信登录和第三方登录,而授权机制涉及角色权限控制、ACL和OAuth 2.0。实践中,开发者可利用微信登录获取用户信息,集成第三方登录,以及实施角色和ACL进行权限控制。注意点包括安全性、用户体验和合规性,以保障小程序的安全运行和良好体验。通过这些方法,开发者能有效掌握小程序全栈开发技术。
|
20天前
|
JavaScript 前端开发 小程序
微信小程序全栈开发之性能优化策略
【4月更文挑战第12天】本文探讨了微信小程序全栈开发的性能优化策略,包括前端的资源和渲染优化,如图片压缩、虚拟DOM、代码分割;后端的数据库和API优化,如索引创建、缓存使用、RESTful API设计;以及服务器的负载均衡和CDN加速。通过这些方法,开发者可提升小程序性能,优化用户体验,增强商业价值。
|
20天前
|
小程序 前端开发 JavaScript
微信小程序全栈开发中的PWA技术应用
【4月更文挑战第12天】本文探讨了微信小程序全栈开发中PWA技术的应用,PWA结合Web的开放性和原生应用的性能,提供离线访问、后台运行、桌面图标和原生体验。开发者可利用Service Worker实现离线访问,Worker处理后台运行,Web App Manifest添加桌面图标,CSS和JavaScript提升原生体验。实践中需注意兼容性、性能优化和用户体验。PWA技术能提升小程序的性能和用户体验,助力开发者打造优质小程序。
|
3天前
|
小程序 前端开发 JavaScript
轻松学会微信小程序开发(一)
轻松学会微信小程序开发(一)
|
3天前
|
JSON 小程序 JavaScript
微信小程序开发1
微信小程序开发1

热门文章

最新文章