摘 要

随着中国经济的飞速增长，消费者的智能化水平不断提高，许多智能手机和相关的软件正在得到更多的关注和支持。在餐饮行业，除了外卖以外就是到店里就餐，在店里就餐如果需要等待点餐的话，用户的体验度就会急剧下降，很多餐饮店也开始开发网上订餐的系统，这样的系统给用户带来了新的体验，尤其是在时间和空间上，让使用者不管身在何处，只要连上网就能够选购餐品，进行点餐。

本研究设计了一种基于JavaScript的网上点餐微信小程序，旨在实现用户便捷、高效的在线订餐体验。该小程序整合了微信平台和JS语言的优势，提供了用户注册登录、浏览菜单、下单支付等功能模块。在实现过程中，采用了前后端分离的架构设计，利用JS技术实现了数据交互、页面渲染等操作，并通过微信开放平台接口实现了用户信息的管理和支付功能。用户可以通过微信小程序快速浏览餐厅菜单，选择菜品并加入购物车，完成订单支付。该研究基于JavaScript技术的优势，实现了用户交互界面的流畅性和响应速度，提升了用户体验。该网上点餐微信小程序在提高用户订餐便捷性的同时，也为餐厅提供了一种在线销售的渠道，促进了餐饮行业的发展。未来研究可进一步优化界面设计、增加个性化推荐功能，提升用户粘性和商业效益。

关键词：微信小程序；Springboot；网上点餐；JavaScript

Abstract

With the rapid growth of the Chinese economy and the continuous improvement of consumer intelligence, many smartphones and related software are receiving more attention and support. In the catering industry, besides takeout, it's all about dining in the store. If you need to wait for your order while dining in the store, the user experience will sharply decline. Many restaurants have also started to develop online ordering systems, which bring new experiences to users, especially in terms of time and space. Users can choose and order food as long as they are connected to the internet, no matter where they are.

This study designed a JavaScript based online ordering WeChat mini program, aiming to achieve a convenient and efficient online ordering experience for users. This mini program integrates the advantages of WeChat platform and JS language, providing functional modules such as user registration and login, browsing menus, and placing orders and payments. In the implementation process, a front-end and back-end separation architecture design was adopted, and JS technology was used to achieve data interaction, page rendering, and other operations. User information management and payment functions were also implemented through the WeChat open platform interface. Users can quickly browse restaurant menus, select dishes, and add them to their shopping cart through WeChat mini programs to complete order payments. This study is based on the advantages of JavaScript technology, achieving smooth and responsive user interaction interfaces, and improving user experience. The online ordering WeChat mini program not only improves the convenience of user ordering, but also provides restaurants with an online sales channel, promoting the development of the catering industry. Future research can further optimize interface design, add personalized recommendation functions, enhance user stickiness and commercial benefits.

Key words：WeChat Mini Program; Springboot; Online ordering; JavaScript

目  录

1 绪论

1.1 研究背景与意义

1.2研究现状

1.3论文主要研究内容

1.4论文组织结构

2 相关技术介绍

2.1 微信开发者工具

2.2 小程序框架以及目录结构介绍

2.3  Java编程语言

2.4  Springboot框架

3 系统分析设计

3.1 可行性分析

3.1.1 技术可行性分析

3.1.2 经济可行性分析

3.1.3 操作可行性分析

3.2 系统流程分析

3.2.1 用户登录流程

3.2.2 数据添加流程

3.2.3 信息数据流程

3.3 功能需求分析

3.4 非功能性需求分析

3.5系统角色用例分析

3.5.1系统前台用户用例

3.5.2系统后端用例

4 系统概要设计

4.1系统架构设计

4.2系统功能结构设计

4.3数据库概念结构设计

4.4数据库逻辑结构设计

5 系统的实现

5.1前台用户功能模块

5.1.1 前台首页界面

5.1.2注册界面

5.1.3登录界面

5.1.4 餐饮资讯界面

5.1.5 菜品中心详情界面

5.1.6购物车管理界面

5.1.7订单管理界面

5.2后台功能模块

5.2.1 系统用户界面

5.2.2 在线客服管理界面

5.2.3 系统管理界面

5.2.4 资源管理界面

5.2.5 菜品中心管理界面

5.2.6 分类列表界面

6系统的测试

6.1 测试的目的

6.2 系统部分测试

6.3 系统测试结果

结论

参考文献

致谢

1 绪论

1.1 研究背景与意义

随着数字化技术的迅猛发展，人们的生活方式也发生了翻天覆地的变化。在线点餐已经成为现代社会中一种常见的、便捷的用餐方式。传统的电话点餐方式已经逐渐被互联网订餐系统所取代，而微信小程序作为移动互联网应用的一种形式，为餐饮行业提供了更加方便高效的点餐渠道。

随着人们生活节奏的加快，外出就餐时间的减少，以及个性化、便捷、准确的需求增加，网上点餐微信小程序的应用已经成为餐饮行业发展的必然选择。通过微信小程序，消费者可以随时随地浏览菜单、下单、付款以及选择自提或外卖配送等服务，极大地提升了用户体验。

研究网上点餐微信小程序的意义在于促进餐饮行业的数字化转型和提升服务质量。通过深入研究点餐小程序的设计与使用，可以为餐饮企业提供更加智能化、便捷化的订单管理和服务体验。同时，研究网上点餐微信小程序对消费者的使用习惯、消费行为以及需求变化等方面的影响，有助于优化用户体验，提高用户粘性和消费体验。

此外，研究网上点餐微信小程序还可以为企业提供更多的营销渠道和数据支持，帮助企业更好地了解消费者需求，精准推送营销活动，提升品牌知名度和用户黏性。总的来说，研究网上点餐微信小程序不仅有助于餐饮行业的发展，也符合消费者日益增长的个性化、便捷化消费需求，具有重要的实践意义和推广价值。

1.2研究现状

随着互联网技术的不断发展和普及，餐饮行业也面临着巨大的变革和挑战。传统的点餐方式存在着诸多问题，如人力成本高、效率低下、易出错等。而随着智能手机的普及，微信小程序成为了一种方便快捷的点餐方式。

微信小程序是一种基于微信平台的应用程序，用户可以通过微信进行使用，无需下载和安装。微信小程序具有轻量级、快捷、无需下载等特点，为用户提供了便利的使用体验。

目前，国内外已经有许多餐饮机构推出了自家的微信小程序点餐平台，实现了线上点餐和线下取餐的无缝对接。这种基于微信小程序的点餐方式不仅方便了用户，也提高了餐饮机构的运营效率和服务质量。

然而，目前网上点餐微信小程序仍存在一些问题。首先，用户对于微信小程序点餐的认知度不高，还存在一些使用障碍。其次，餐饮机构的微信小程序点餐平台功能还不够完善，无法满足用户的个性化需求。再次，由于信息不对称和评价机制不健全，用户往往难以获得真实的评价和体验。

本论文旨在研究网上点餐微信小程序的背景、现状及其存在的问题，并提出相应的解决方案。通过对现有微信小程序点餐平台的分析和对用户需求的调查，提出优化微信小程序点餐平台的建议，以改善用户体验和提高餐饮机构的运营效率。通过本论文的研究，可以为网上点餐微信小程序提供有针对性的改进方案，提高用户体验和餐饮机构的运营效率，促进餐饮业的可持续发展。

1.3论文主要研究内容

基于JS的网上点餐微信小程序的开发及实现，所研究的主要内容如下：

(1)首先是确定选题，确定好所要做的系统，并对系统的背景及现在面临的一些问题等进行系统的初步确认。

(2)系统确认完成后，结合系统开发的需求进行确认系统开发所使用的技术，基于JS的网上点餐微信小程序的开发使用SpringBoot框架，结合微信开发者工具，MySQL数据库进行平台的搭建开发，确认好使用的技术进行技术分析，所使用的技术是否可以完成系统的实现。

(3)确定好系统使用的技术，进行确认系统所划分的用户触，并且根据用户触划分确定所要设计的功能模块，对基于JS的网上点餐微信小程序的设计主要划分别为普通用户和管理员，并且所使用的功能模块也相应不同，但系统的数据库实现的内容是交互的，普通用户可以随时根据自己的需求进行菜品中心搜索及下单购买，对于管理员可以根据自己的权限进行在线信息的处理及操作。

(4)系统的功能模块确认完成后进行程序及界面的设计，设计完成后，组通过测试来判断程序是否完善，对于系统测试，要不同的用户进行不同的内容编辑及提交，及使用不同的测试方式找出程序中存在的漏洞,并对程序出现的漏洞问题进行在线解决处理，如果测试系统没有任何问题时，可以将系统上传进行正式操作使用。

1.4论文组织结构

论文主要架构、章节安排如下所示：

第一章：绪论，介绍研究背景和目的及意义，对国内外研究现状展开分析。

第二章 相关技术介绍：该章节详细介绍了springboot框架的特点和应用以及小程序框架介绍，以及Java语言在系统开发中的重要性，为后续系统设计和实现提供了技术支持。

第三章：系统分析，通过用户需求分析和功能需求分析，明确用户对系统的需求和系统应具备的功能。

第四章：系统设计，设计系统架构，包括选择合适的架构模式和数据库设计，以及各个模块的详细设计。

第五章：系统实现，选择合适的技术工具和框架，逐一实现各个模块，建立数据库连接并实现前端界面开发。

第六章：系统测试，进行整体系统测试及个别测试用例举例，确保系统功能的正确性、协调性和稳定性。

第七章，总结，总结研究工作的主要内容和成果，评价系统的优点和不足，并提出改进和进一步研究的建议，强调研究的意义和影响。

2 相关技术介绍

2.1 微信开发者工具

微信开发者工具是一款专门为微信小程序开发者打造的集成开发环墨，它提供了代码编辑、代码审查、代码上传、代码预览等一系列开发所需的功能。通过微信开发者工具，开发者可以高效地进行小程序的开发、调试和发布。它支持实时预览，可以帮助开发者快速查看代码修改后的效果，同时还提供了丰富的插件和扩展功能，为开发者提供了更加便捷的开发体验。微信开发者工具的不断更新和优化，为小程序开发者提供了强大的工具支持，助力他们开发出更加优质的小程序产品。

2.2 小程序框架以及目录结构介绍

在前端界面方面，微信小程序成为了一个理想的平台。通过微信小程序开发框架，使用JavaScript等前端技术进行开发，构建出精美、直观的用户界面。微信小程序还提供了丰富的API和组件库，如模板消息、支付接口和用户授权等，使得系统具备更多的交互和功能扩展能力。

2.3  Java编程语言

在后端开发中，使用Java作为主要编程语言。Java是一种通用的、面向对象的编程语言，具有跨平台性、稳定性和可靠性等特点，适用于构建复杂的后端逻辑处理。通过Java的多线程处理能力，系统能够同时处理多个用户请求，保证了系统的并发性能。

2.4  Springboot框架

而在Spring Boot框架的应用上，它简化了传统Java开发的繁琐配置和依赖管理。借助Spring Boot的自动配置和约定大于配置的原则，开发人员可以更专注于业务逻辑的实现，而无需过多关注底层细节。Spring Boot还提供了丰富的插件和扩展，方便集成其他组件和服务，如数据库连接池、消息队列等，进一步增强了系统的功能和性能。

通过整合这些技术，基于Spring Boot和微信小程序的网上点餐系统实现了后端与前端之间的高效交互。Java提供了强大的后端处理能力，Spring Boot简化了开发流程，微信小程序提供了优雅的前端界面。用户可以通过微信小程序浏览各类菜品，查看详细描述、价格和图片等信息。他们可以自由选择菜品的口味、商家和配送方式，并通过在线支付完成订单。

3 系统分析设计

3.1 可行性分析

在系统分析的早期阶段进行可行性分析是至关重要的。通过对技术、经济和操作等方面的分析，可以评估系统开发的可行性，从而决定系统是否值得开发。对于网上点餐微信小程序，技术上需要考虑微信小程序开发的技术要求和可行性，经济上需要评估开发和维护成本以及潜在的收益，操作上需要分析用户需求和市场需求是否足够支撑系统的开发和运营。这样的可行性分析有助于在项目初期就对系统的发展前景有一个清晰的认识，为后续的开发工作提供了重要的参考依据。

3.1.1 技术可行性分析

基于微信小程序的网上点餐系统采用了成熟的技术，如Java、Spring Boot和微信小程序开发框架。这些技术在业界被广泛应用并得到验证，具有稳定性和可靠性。开发人员能够充分利用这些技术来构建系统，并且可以借助开发社区的支持解决遇到的问题。

3.1.2 经济可行性分析

网上点餐系统能够满足用户需求，提升商家竞争力，为餐饮行业带来更多的订单和销售机会。通过在线支付和快速配送等功能，系统能够提高订单转化率和顾客满意度，从而增加收入。同时，通过有效的后台管理和自动化流程，系统也能够减少人力成本和操作费用。

3.1.3 操作可行性分析

系统的操作可行性取决于用户、管理员对系统的易用性和学习成本。通过采用微信小程序作为前端界面，用户能够在熟悉的微信环境中进行操作，并且微信小程序提供了简单直观的用户界面。管理员可以通过后台管理系统轻松管理商品、订单和物流。对于商家而言，系统提供了易于操作的功能，如在线客服等，帮助他们提供更好的服务。

3.2 系统流程分析

3.2.1 用户登录流程

登录模块主要满足管理员以及用户的权限登录，用户登录流程图如图3-1所示。

图3-1登录操作流程图

3.2.2 数据添加流程

管理员增加数据的流程包括登录系统，进入数据管理页面，选择新增数据选项，填写相关信息，确认提交后系统进行数据验证和存储。管理员可查看新增数据是否成功，确保信息的准确性和完整性。该流程设计简洁明了，为管理员提供了方便的数据录入方式，保证系统数据的及时更新和有效管理，提高管理效率和数据质量。添加数据流程如图3-2所示。

图3-2 数据添加流程图

3.2.3 信息数据流程

管理员删除数据的流程包括登录系统，进入数据管理页面，选择需要删除的数据，进行删除操作，确认删除后系统进行数据验证，删除相关信息。管理员可查看删除后的数据是否正确，确保数据的完整性和清洁性。该流程设计简洁明了，为管理员提供了方便的数据删除方式，保证系统数据的准确性和规范性。删除数据流程图如图3-3所示。

图3-3 数据删除流程图

3.3 功能需求分析

（1）菜品中心模块：针对网上点餐微信小程序的功能需求，管理员需要在系统中添加各种菜品信息，以便用户进行查询和购买。管理员在此模块主要负责对菜品信息的增加、删除、修改和查询。而对于游客和普通用户，他们可以实现对菜品信息的查询、收藏、评论、加购和立即购买等操作。这些功能的设计将有助于提升用户体验，促进用户对菜品信息的浏览和购买行为。下图3-4所示。

图3-4 菜品中心模块用例图

（2）餐饮资讯模块：管理员在后台可以对餐饮资讯及其分类进行增加、删除、修改和查询的操作，以便及时更新和管理餐饮资讯。而游客可以通过小程序查看餐饮资讯，而用户则可以对餐饮资讯进行收藏、点赞和评论等互动操作，从而提升用户参与度和用户体验。这样的设计有助于丰富小程序的内容，增加用户粘性，促进用户的互动和参与。如下图3-5所示。

图3-5餐饮资讯模块用例图

（3）用户管理模块：在前台，游客可以通过注册成为系统的用户，从而参与到系统当中。管理员可以对已注册的用户进行修改、删除和查询操作，同时也可以添加新的用户。这样的设计使得系统具有完善的用户管理功能，管理员可以灵活地管理用户信息，而用户也可以通过注册成为系统的一员，享受到更多的个性化服务和功能。如下图3-6所示。

图3-6用户管理模块用例图

（4）购物管理：用户可以对喜欢的菜品信息进行购买，可以选择立即购买或者加入到购物车中进行购买。这种设计使用户可以根据自己的需求和购买习惯，灵活地选择购买方式，提升了用户的购物体验和便利性。如下图3-7所示。

图3-7购物管理模块用例图

（5）我的订单管理：在网上点餐微信小程序中，用户和管理员都具备订单管理的功能，可以对订单进行查看和删除操作。这样的设计使得用户和管理员都能够方便地管理订单信息，提升了系统的灵活性和用户体验。可以对订单进行查看、删除。如下图3-8所示。

图3-8订单管理模块用例图。

（6）我的模块：我的模块涵盖了用户独有的功能，包括管理基本信息、收货地址、收藏、订单、购物车、我的优惠券、在线客服、意见反馈和订单配送。这些功能将为用户提供全面的个人管理和服务支持，提升用户体验和满意度。我的用例如下图3-9所示。

图3-9我的管理模块用例图

3.4 非功能性需求分析

 非功能性分析旨在评估网上点餐微信小程序的非功能需求和性能要求。通过对性能、可靠性、安全性、可用性和扩展性等方面进行评估，确保平台能够满足用户和系统运行的要求。具体如下3-1表格中：

表3-1网上点餐微信小程序非功能需求表

非功能性要求	说明
性能	评估响应时间、并发用户数、吞吐量等指标，以确保平台稳定高效地运行。
可靠性	评估系统的稳定性、容错能力和数据完整性，保障系统在故障情况下正常运行。
安全性	评估用户身份认证、数据加密和访问控制等，保护用户信息和交易的安全。
可用性	评估系统的稳定性、故障处理能力和用户界面友好性，提供良好的用户体验。
扩展性	评估系统的可扩展性和灵活性，以便根据需求进行功能扩展和升级。

3.5系统角色用例分析

3.5.1系统前台用户用例

基于JS的网上点餐微信小程序前台用户的主要功能包括对系统信息的查看、收藏、评论以及对菜品的购买。购买的过程中需要对收货地址进行设置，对购物车进行管理，以及查看自己的订单。这些功能将为用户提供便捷的点餐体验，同时也提升了用户对菜品和订单的管理和控制能力。前台普通用户用例图如图3-10所示。

图3-10 基于JS的网上点餐微信小程序前台普通用户用例图

在系统前台中主要实现的是对基于JS的网上点餐微信小程序中信息的浏览，用户对信息收藏、评论以及在菜品中心中对菜品信息购买几个功能。

（1）餐饮资讯功能，主要实现了是对餐饮资讯的查看，用户进行评论、收藏、点赞，用例说明如下表所示：

表3-1 餐饮资讯用例说明

用例名称	餐饮资讯
角色	用户
用例说明	该用例描述了用户在系统中对餐饮资讯进行浏览、搜索、评论和收藏的功能。
前置条件	用户已登录到系统中
后置条件	用户成功浏览、搜索、评论或收藏餐饮资讯
基本事件流	1. 用户登录系统 2. 进入餐饮资讯页面 3. 浏览或搜索餐饮资讯 4. 选择特定资讯进行查看 5. 对资讯进行评论或收藏
扩展流程	无
异常事件流	无

（2）菜品信息购买功能，本功能是系统的主要功能，主要是实现在线购买功能，用例说明如下标所示：

表3-2 菜品中心用例说明

用例名称	菜品中心
角色	用户、管理员
用例说明	该用例描述了用户浏览、搜索、购买菜品以及管理员对菜品信息进行管理的功能。
前置条件	用户已登录到系统中；管理员已登录到系统中
后置条件	用户成功浏览、搜索、购买菜品；管理员成功管理菜品信息
基本事件流	1. 用户登录系统 2. 进入菜品中心页面 3. 浏览或搜索菜品 4. 选择特定菜品进行查看 5. 购买菜品；1. 管理员登录系统 2. 进入菜品管理页面 3. 添加、编辑或删除菜品信息
扩展流程	无
异常事件流	无

3.5.2系统后端用例

后台管理员进入以后可以对系统用户、在线客服管理、意见反馈管理、系统管理、公告消息管理、资源管理、商城管理进行管理。

后台管理员用例图如图3-11所示。

图3-11基于JS的网上点餐微信小程序后台管理员用户用例图

后台管理员主要实现了是对用户的信息管理，对用户提交的咨询内容和反馈内容进行回复，同时对系统轮播图、公告消息和餐饮资讯信息的增删改查；还可以对商城管理的菜品中心、分类列表、订单列表、订单配送、优惠券进行管理。后台管理员的用例说明如下表所示：

表3-3 后台管理员用例说明

用例名称	后台管理员功能
角色	管理员
用例说明	该用例描述了管理员在后台管理系统中进行用户管理、菜品管理、订单管理等功能的操作。
前置条件	管理员已登录到后台管理系统中
后置条件	管理员成功进行用户管理、菜品管理、订单管理等操作
基本事件流	1. 管理员登录后台管理系统 2. 进行用户管理，包括增加、删除、修改用户信息 3. 进行菜品管理，包括增加、删除、修改菜品信息 4. 进行订单管理，包括查看、处理订单
扩展流程	无
异常事件流	无

4 系统概要设计

4.1系统架构设计

在系统架构设计中，我们将确定系统的整体结构和组件之间的关系。这包括选择适当的架构风格，划分系统的层次结构，并定义各个模块的职责和交互方式。架构图如下图4-1所示。

图4-1网上点餐微信小程序架构设计图

表现层（Presentation Layer）：负责与用户进行交互，将系统的功能和数据以易于理解和操作的方式展示给用户。通常包括用户界面、页面设计和用户输入验证等。

业务逻辑层（Business Logic Layer）：处理系统的核心业务逻辑，包括对用户请求的处理、业务规则的执行以及数据的处理和转换。它独立于表现层和数据层，实现了业务逻辑的封装和复用。

数据层（Data Layer）：负责数据的存储、访问和管理，包括数据库和持久化机制。数据层提供了对数据的增删改查操作，并与业务逻辑层进行交互，使系统能够有效地存储和检索数据。

这三个层次相互独立，通过明确的接口和协议进行通信，实现了系统的模块化和可扩展性。表现层负责将用户的请求传递给业务逻辑层，业务逻辑层处理请求并返回结果，最后数据层负责与数据库交互并提供数据支持。这种分层架构有助于实现系统的可维护性、灵活性和可测试性。

4.2系统功能结构设计

通过整体功能模块设计，我们将根据需求分析的结果，将系统的功能划分为不同的模块。每个模块负责实现特定的功能，并与其他模块进行协作。我们将详细定义每个模块的输入、输出、处理逻辑和相互依赖关系。具体的功能模块图如图4-2所示。

图4-2 系统功能结构图

4.3数据库概念结构设计

数据库概念结构设计主要涉及数据库的实体和实体之间的关系。通过实体-关系模型或者其他适当的模型，我们将定义系统中涉及的各个实体以及它们之间的联系。

下面是整个网上点餐微信小程序中主要的数据库表总E-R实体关系图。

图4-3 网上点餐微信小程序总E-R关系图

4.4数据库逻辑结构设计

通过上一小节中网上点餐微信小程序中总E-R关系图上得出一共需要创建很多个数据表。在此我主要罗列几个主要的数据库表结构设计。

表coupon (优惠券)

编号	名称	数据类型	长度	小数位	允许空值	主键	默认值	说明
1	coupon_id	int	10	0	N	Y		优惠券id
2	coupon_user_id	int	10	0	Y	N		优惠券用户id
3	coupon_user_auth	varchar	255	0	Y	N		优惠券用户
4	coupon_name	varchar	255	0	Y	N		优惠券名称
5	coupon_price	int	10	0	Y	N		优惠券价格
6	coupon_price1	int	10	0	Y	N		优惠券券后价格
7	coupon_time	varchar	255	0	Y	N		优惠券时间
8	coupon_type	varchar	255	0	Y	N		优惠券类型
9	create_time	timestamp	19	0	Y	N	CURRENT_TIMESTAMP
10	update_time	timestamp	19	0	Y	N	CURRENT_TIMESTAMP

表coupon_user (用户优惠券)

编号	名称	数据类型	长度	小数位	允许空值	主键	默认值	说明
1	id	int	10	0	N	Y		id
2	user_id	int	10	0	Y	N		用户id
3	coupon_id	int	10	0	Y	N		优惠券id
4	is_use	int	10	0	Y	N		是否使用
5	coupon_user_id	int	10	0	Y	N

表dish_center (菜品中心)

编号	名称	数据类型	长度	小数位	允许空值	主键	默认值	说明
1	dish_center_id	int	10	0	N	Y		菜品中心ID
2	purchase_notice	varchar	64	0	Y	N		购买须知
3	cart_title	varchar	125	0	Y	N		标题：[0,125]用于产品html的标签中
4	cart_img	text	65535	0	Y	N		封面图：用于显示于产品列表页
5	cart_description	varchar	255	0	Y	N		描述：[0,255]用于产品规格描述
6	cart_price_ago	double	8	2	N	N	0.00	原价：[1]
7	cart_price	double	8	2	N	N	0.00	卖价：[1]
8	cart_inventory	int	10	0	N	N	0	商品库存
9	cart_type	varchar	64	0	N	N	未分类	商品分类：
10	cart_content	longtext	2147483647	0	Y	N		正文：产品的主体内容
11	cart_img_1	text	65535	0	Y	N		主图1：
12	cart_img_2	text	65535	0	Y	N		主图2：
13	cart_img_3	text	65535	0	Y	N		主图3：
14	cart_img_4	text	65535	0	Y	N		主图4：
15	cart_img_5	text	65535	0	Y	N		主图5：
16	create_time	datetime	19	0	N	N	CURRENT_TIMESTAMP	创建时间
17	update_time	timestamp	19	0	N	N	CURRENT_TIMESTAMP	更新时间

表feedback (意见反馈)

编号	名称	数据类型	长度	小数位	允许空值	主键	默认值	说明
1	feedback_id	int	10	0	N	Y		意见反馈ID
2	regular_users	int	10	0	Y	N	0	普通用户
3	user_name	varchar	64	0	Y	N		用户姓名
4	feedback_time	datetime	19	0	Y	N		反馈时间
5	feedback_content	text	65535	0	Y	N		反馈内容
6	feedback_reply	text	65535	0	Y	N		反馈回复
7	create_time	datetime	19	0	N	N	CURRENT_TIMESTAMP	创建时间
8	update_time	timestamp	19	0	N	N	CURRENT_TIMESTAMP	更新时间

表goods (商品信息)

编号	名称	数据类型	长度	小数位	允许空值	主键	默认值	说明
1	goods_id	mediumint	8	0	N	Y		产品id：[0,8388607]
2	title	varchar	125	0	Y	N		标题：[0,125]用于产品和html的<title>标签中
3	img	text	65535	0	Y	N		封面图：用于显示于产品列表页
4	description	varchar	255	0	Y	N		描述：[0,255]用于产品规格描述
5	price_ago	double	8	2	N	N	0.00	原价：[1]
6	price	double	8	2	N	N	0.00	卖价：[1]
7	sales	int	10	0	N	N	0	销量：[0,1000000000]
8	inventory	int	10	0	N	N	0	商品库存
9	type	varchar	64	0	N	N		商品分类：
10	hits	int	10	0	N	N	0	点击量：[0,1000000000]访问这篇产品的人次
11	content	longtext	2147483647	0	Y	N		正文：产品的主体内容
12	img_1	text	65535	0	Y	N		主图1：
13	img_2	text	65535	0	Y	N		主图2：
14	img_3	text	65535	0	Y	N		主图3：
15	img_4	text	65535	0	Y	N		主图4：
16	img_5	text	65535	0	Y	N		主图5：
17	create_time	timestamp	19	0	N	N	CURRENT_TIMESTAMP	创建时间：
18	update_time	timestamp	19	0	N	N	CURRENT_TIMESTAMP	更新时间：
19	customize_field	text	65535	0	Y	N		自定义字段
20	source_table	varchar	255	0	Y	N		来源表：
21	source_field	varchar	255	0	Y	N		来源字段：
22	source_id	int	10	0	N	N	0	来源ID：
23	user_id	int	10	0	Y	N	0	添加人

表goods_type (商品类型)

编号	名称	数据类型	长度	小数位	允许空值	主键	默认值	说明
1	type_id	int	10	0	N	Y		商品分类ID：
2	father_id	smallint	5	0	N	N	0	上级分类ID：[0,32767]
3	name	varchar	255	0	Y	N		商品名称：
4	desc	varchar	255	0	Y	N		描述：
5	icon	varchar	255	0	Y	N		图标：
6	source_table	varchar	255	0	Y	N		来源表：
7	source_field	varchar	255	0	Y	N		来源字段：
8	create_time	timestamp	19	0	N	N	CURRENT_TIMESTAMP	创建时间：
9	update_time	timestamp	19	0	N	N	CURRENT_TIMESTAMP	更新时间：

表logistics_delivery (物流配送)

编号	名称	数据类型	长度	小数位	允许空值	主键	默认值	说明
1	logistics_delivery_id	int	10	0	N	Y		物流配送ID
2	order_number	varchar	64	0	Y	N		订单号
3	product_name	varchar	64	0	Y	N		商品名称
4	purchase_quantity	varchar	64	0	Y	N		购买数量
5	total_transaction_amount	double	11	2	Y	N	0.00	交易总额
6	the_date_of_issuance	date	10	0	Y	N		发货日期
7	delivery_number	varchar	30	0	Y	N		配送订单
8	ordinary_users	int	10	0	Y	N	0	普通用户
9	shipping_address	varchar	64	0	Y	N		收货地址
10	delivery_status	varchar	64	0	Y	N		配送状态
11	signing_status	varchar	64	0	Y	N		签收状态
12	recommend	int	10	0	N	N	0	智能推荐
13	contact_name	varchar	255	0	Y	N		联系人名字
14	merchant_id	int	10	0	Y	N		商家id
15	create_time	datetime	19	0	N	N	CURRENT_TIMESTAMP	创建时间
16	update_time	timestamp	19	0	N	N	CURRENT_TIMESTAMP	更新时间

表online_service (在线客服)

编号	名称	数据类型	长度	小数位	允许空值	主键	默认值	说明
1	online_service_id	int	10	0	N	Y		在线客服ID
2	regular_users	int	10	0	Y	N	0	普通用户
3	user_name	varchar	64	0	Y	N		用户姓名
4	consultation_time	datetime	19	0	Y	N		咨询时间
5	consultation_content	text	65535	0	Y	N		咨询内容
6	reply_content	text	65535	0	Y	N		回复内容
7	create_time	datetime	19	0	N	N	CURRENT_TIMESTAMP	创建时间
8	update_time	timestamp	19	0	N	N	CURRENT_TIMESTAMP	更新时间

表order (订单)

编号	名称	数据类型	长度	小数位	允许空值	主键	默认值	说明
1	order_id	int	10	0	N	Y		订单ID：
2	order_number	varchar	64	0	Y	N		订单号：
3	goods_id	mediumint	8	0	N	N		商品id：[0,8388607]
4	title	varchar	32	0	Y	N		商品标题：
5	img	varchar	255	0	Y	N		商品图片：
6	price	double	10	2	N	N	0.00	价格：
7	price_ago	double	10	2	N	N	0.00	原价：
8	num	int	10	0	N	N	1	数量：
9	price_count	double	8	2	N	N	0.00	总价：
10	norms	varchar	255	0	Y	N		规格：
11	type	varchar	64	0	N	N	未分类	商品分类：
12	contact_name	varchar	32	0	Y	N		联系人姓名：
13	contact_email	varchar	125	0	Y	N		联系人邮箱：
14	contact_phone	varchar	11	0	Y	N		联系人手机：
15	contact_address	varchar	255	0	Y	N		收件地址：
16	postal_code	varchar	9	0	Y	N		邮政编码：
17	user_id	int	10	0	N	N	0	买家ID：
18	merchant_id	mediumint	8	0	N	N	0	商家ID：
19	create_time	timestamp	19	0	N	N	CURRENT_TIMESTAMP	创建时间：
20	update_time	timestamp	19	0	N	N	CURRENT_TIMESTAMP	更新时间：
21	description	varchar	255	0	Y	N		描述：[0,255]用于产品规格描述
22	state	varchar	16	0	N	N	待付款	订单状态：待付款，待发货，待签收，已签收，待退款，已退款，已拒绝，已完成
23	remark	text	65535	0	Y	N		订单备注
24	delivery_state	varchar	16	0	Y	N	未配送	发货状态：未配送，已配送
25	vip_discount	double	11	2	Y	N	0.00	折扣

5 系统的实现

5.1前台用户功能模块

5.1.1 前台首页界面

前台首页界面是用户访问系统的入口页面，它应该展示平台的主要功能和特色，并提供导航链接以便用户浏览和搜索。首页界面的设计注重页面的美观性和用户体验，同时也需要考虑页面的加载速度和响应性能。界面如下图所示。其主界面展示如下图5-1所示。

图5-1 前台首页界面图

5.1.2注册界面

用户注册界面用于新用户进行账号注册，用户需要填写必要的个人信息并选择合适的用户名和密码。注册界面应该进行输入验证和数据格式检查，确保用户提供有效的信息。界面如下图所示。注册流程图如图5-2所示，注册界面展示如下图5-3所示。

图5-2注册流程图

图5-3 前台注册界面图

注册关键代码如下所示：

5.1.3登录界面

用户登录界面用于已注册用户进行账号登录，用户需要输入正确的用户名和密码才能成功登录系统。登录界面应对用户的输入进行验证，并提供密码找回或重新注册的选项。界面如下图所示。用户登录流程如图5-4所示，登录界面如下图5-5所示。

图5-4 登录流程图

图5-5普通用户登录界面图

登录的逻辑代码如下所示：

5.1.4 餐饮资讯界面

餐饮资讯：提供餐饮行业相关的知识、建议和文章，涵盖美食做法、餐厅推荐等方面，帮助用户便捷查看最新餐饮相关资讯。餐饮资讯列表界面如下图5-6所示。

图5-6网上点餐微信小程序餐饮资讯列表界面图

5.1.5 菜品中心详情界面

当用户点击“菜品中心”菜单按钮时，他们将能够在界面上浏览管理员在后台发布的所有菜品信息。该界面支持通过关键词搜索来筛选和查找适合自己的菜品中心。用户可以选择感兴趣的菜品信息，并点击以进入详细介绍界面。此外，用户还可以进行加购、立即购买、点赞、收藏和评论等操作。这样的菜品中心详情界面为用户提供了便捷的方式来浏览、筛选和选择合适的菜品信息，并与之进行交易。菜品中心详情展示页面如图5-7所示。

图5-7 菜品中心产品详情界面图

在菜品中心详情页面还可以领取优惠券，优惠券详情如图5-8所示。

图5-8 优惠券详情界面图

5.1.6购物车管理界面

当用户点击“购物车”按钮则会显示自己加入购物车的菜品信息，然后对其进行购买管理，购买流程图如图5-9所示，购物车界面如下图5-10所示。

图5-9购买流程图

图5-10 购物车管理界面图

5.1.7订单管理界面

在我的模块点击“订单”后，会显示自己提交的所有的订单，可以按照订单状态等进行查看，我的订单界面如下图5-11所示。

图5-11 我的订单界面图

5.2后台功能模块

5.2.1 系统用户界面

后台管理人员是可以对前台注册的普通用户进行管理。系统用户管理界面如下图5-12所示。

图5-12系统用户管理界面图

5.2.2 在线客服管理界面

管理人员点击“在线客服管理”可以对用户提交的咨询内容进行回复。在线客服回复界面如下图5-13所示。

图5-13在线客服回复界面图

5.2.3 系统管理界面

管理人员在“系统管理”这一菜单下是可以对网上点餐微信小程序内展示的轮播图进行添加修改的。系统管理界面如下图5-14所示。

图5-14系统管理界面图

5.2.4 资源管理界面

后台管理人员是可以对餐饮资讯以及资讯分类的分类进行增删改查操作。餐饮资讯界面如下图5-15所示。

图5-15餐饮资讯管理界面图

5.2.5 菜品中心管理界面

后台管理人员对网上点餐微信小程序内的不同菜品分类下的菜品菜品中心进行维护和管理的，也可以对用户提交的关于菜品的评论信息进行管控。菜品中心管理界面如下图5-16所示。

图5-16菜品中心管理界面图

5.2.6 分类列表界面

后台管理人员是可以对网上点餐微信小程序内的菜品信息的类别进行管控。分类列表界面如下图5-17所示。

图5-17分类列表界面图

6系统的测试

6.1 测试的目的

测试目的是为了验证系统的功能、性能和稳定性，以确保系统在实际应用中能够达到预期的要求。通过测试，可以发现潜在的问题和缺陷，并及时进行修复和改进。测试还可以评估系统的可靠性、安全性和用户体验，以提供一个高质量和可信赖的产品。此外，测试也有助于验证系统是否满足用户需求和预期，是否符合相应的标准和规范。总之，测试的目的是为了确保系统的质量和可靠性，从而为用户提供良好的使用体验和价值。

6.2 系统部分测试

表6-1用户注册测试用例

测试编号	测试内容	预期结果
TC-001	输入有效信息	注册成功，跳转到登录页面
TC-002	输入已存在账号	显示账号已存在的提示信息
TC-003	输入无效信息	显示注册失败的提示信息，要求重新输入有效信息

表6-2用户登录测试用例

测试编号	测试内容	预期结果
TC-004	输入正确的账号密码	登录成功，跳转到个人主页
TC-005	输入错误的账号密码	显示登录失败的提示信息，要求重新输入正确的账号密码

表6-3 修改密码测试用例

测试编号	测试内容	预期结果
TC-006	输入有效密码	密码修改成功，显示修改成功的提示信息
TC-007	输入无效密码	显示密码无效的提示信息，要求重新输入有效密码
TC-008	输入错误原密码	显示原密码错误的提示信息，要求重新输入正确原密码

表6-4 意见反馈测试用例

测试编号	测试内容	预期结果
TC-009	输入有效的意见反馈信息	意见反馈成功，显示记录成功的提示信息
TC-010	输入无效的意见反馈信息	显示记录失败的提示信息，要求重新输入有效信息

表6-5 查看餐饮资讯测试用例

测试编号	测试内容	预期结果
TC-014	点击查看餐饮资讯	显示餐饮资讯页面，展示相关的文章、新闻等内容
TC-015	选择其他分类	显示所选分类下的相关文章、新闻等内容
TC-016	无可用餐饮资讯信息	显示暂无餐饮资讯的提示信息，提醒用户重新选择分类

6.3 系统测试结果

综上所述，网上点餐微信小程序在功能测试中表现良好，通过了所有测试用例。系统提供的用户注册、登录、修改密码、意见反馈、查看餐饮资讯等主要功能都能正常运行，并能够给出预期的提示信息和结果。然而，为了确保系统的全面稳定性和质量，仍建议进行更多的综合性测试，包括性能测试、安全性测试和用户体验测试等，以进一步验证和改进系统的功能和性能。

结论

本研究设计并实现了基于JS的网上点餐微信小程序。通过对系统进行功能测试和评估，得出以下结论：该系统在功能上经过验证，用户注册、登录、菜品中心购买、意见反馈和餐饮资讯管理等功能都能正常运行；技术上具备稳定性和可扩展性，小程序提供跨平台应用，Spring Boot框架简化开发，MySQL数据库支持数据存储与查询；从经济角度看，小程序开发成本低，Spring Boot和MySQL均为免费且开源；操作上易用性好，小程序界面简洁明了，Spring Boot的自动化部署与MySQL的管理工具提供便捷操作。

综上所述，网上点餐微信小程序在功能、技术、经济和操作上均具有优势。该系统在提高用户订餐便捷性的同时，也为餐厅提供了一种在线销售的渠道，促进了餐饮行业的发展。未来可以进一步扩展功能和优化性能，以满足用户需求并提供更好的用户体验。

参考文献

[1]李玉.基于JavaScript技术在Web页面实现放大镜效果[J].电脑编程技巧与维护,2024,(02):143-145.DOI:10.16184/j.cnki.comprg.2024.02.006.

[2]Svendsen A J ,Beck M A ,Frederiksen S K A , et al.Development of an electronic food ordering system and a la carte menu: Enhancing patient involvement in nutritional care[J].Clinical Nutrition ESPEN,2024,6086-94.

[3]Xiao J ,Zhou H ,Lei Q , et al.Attention-Mechanism-Based Face Feature Extraction Model for WeChat Applet on Mobile Devices[J].Electronics,2024,13(1):

[4]王馗,吴勇灵.基于微信小程序的点餐系统设计与实现[J].现代信息科技,2023,7(22):30-35+39.DOI:10.19850/j.cnki.2096-4706.2023.22.007.

[5]高晓宇,吴春祥,任利敬.高职院校JavaScript课程教学改革探索[J].电脑知识与技术,2023,19(31):148-150.DOI:10.14004/j.cnki.ckt.2023.1624.

[6]戴婧婧,董书剑.JavaScript本地调用的方法探讨[J].电脑编程技巧与维护,2023,(10):33-34+43.DOI:10.16184/j.cnki.comprg.2023.10.048.

[7]A new ordering system means EE can serve customers better[J].M2 Presswire,2023,

[8]张娅妮,刘霞.微信扫码点餐小程序的设计与实现[J].电脑与信息技术,2023,31(04):62-66.DOI:10.19414/j.cnki.1005-1228.2023.04.011.

[9]李军茹.JavaScript教学方法浅析[J].现代农村科技,2023,(07):101.

[10]Wayne C ,Erica H ,Cassi U , et al.PTFS09-07-23 Online Grocery Ordering System for Experimental Human Nutrition Research With High Participant Dietary Adherence[J].Current Developments in Nutrition,2023,7(S1):

[11]曾爽.隐私披露视角下餐饮类微信小程序使用意愿影响因素研究[D].南京财经大学,2023.DOI:10.27705/d.cnki.gnjcj.2023.000364.

[12]王志亮,纪松波.基于SpringBoot的Web前端与数据库的接口设计[J].工业控制计算机,2023,36(03):51-53.

[13]王侠,汪进敏,师瑜,等.“快吃”微信点餐小程序的设计与运营构想[J].中国质量万里行,2023,(02):62-65.

[14]种倩倩,孙丽英,陈滨,等.基于微信小程序的点餐系统的设计与开发[J].电脑知识与技术,2022,18(19):66-69+73.DOI:10.14004/j.cnki.ckt.2022.1307.

[15]陈帅.微信点餐系统小程序的设计与实现[J].电子技术与软件工程,2021,(24):30-31.

[16]喻佳,吴丹新.基于SpringBoot的Web快速开发框架[J].电脑编程技巧与维护,2021,(09):31-33.DOI:10.16184/j.cnki.comprg.2021.09.013.

[17]李昊.基于微信小程序的智能推荐点餐系统的设计与实现[D].南京邮电大学,2020.DOI:10.27251/d.cnki.gnjdc.2020.000283.

[18]孙瑜霞,王泽元,刘硕洲,等.关于高职“校园一点通”微信点餐系统的构建研究[J].数码世界,2020,(09):33-34.

[19]傅凤.基于饮食安全的餐饮外卖系统的设计与创新[D].青岛大学,2020.DOI:10.27262/d.cnki.gqdau.2020.001477.

[20]孙晨熙.基于微信公众平台的餐饮管理系统的设计与实现[D].山东大学,2020.DOI:10.27272/d.cnki.gshdu.2020.000686.