基于Web的校园网上订餐系统的设计与实现

前言1.1选题背景进入21世纪以来，信息高度互联互通，数字技术和互联网技术得到了前所未有的高速发展。随着个人电脑和智能手机的普及，移动支付、线上购物等“互联网+”技术进入到了我们的方方面面，成为我们日常生活不可或缺的一部分。与此同时，人们生活节奏的逐渐加快，消费观念也有所转变，越来越多的人开始追求快捷、便利的生活方式。网上订餐服务能够满足消费者在家或办公室就能享受各种美食的需求，节省了外出就餐的时间和精力。网上订餐可以给消费者更多更优惠的菜品选择，也让许多中小型餐馆得到了曝光的机会，扩大了销售的渠道。因此，越来越多餐饮企业从传统的门店经营转变为线上+线下模式，选择入驻美团等主流外卖平台或者推出自己的线上订餐系统。由于外卖方便快捷、种类多、价格实惠，很多大学生也养成了外卖点餐的习惯（蒋兆峰，2021）。此外，2020年新冠肺炎疫情爆发，为了防止疫情扩散，人们外出活动受到限制，餐饮企业也不得不停止堂食服务。这对我国餐饮业造成了极大影响，大量的餐饮企业加大对互联网平台的应用（石云逸等，2021）。因为许多人“宅家”的时候，选择通过网上订餐平台下单餐品，通过无接触配送的方式解决一日三餐，线上订餐的需求大幅增加，更多人开始接受和选择这种方便快捷的餐饮方式。随着疫情的逐渐得到控制，线上订餐市场依旧继续保持增长的势头（李超等，2020）。1.2选题的目的和研究的意义1.2.1选题目的中国持续高速高质量发展的经济发展需要更多的高素质人才，高校招生规模逐年扩大，但是许多高校配套资源却没有跟上，尤其是高校食堂，在中午放学和下午放学的高峰用餐时间，几乎每一个打餐窗口都是人满为患，即使取餐后也要花费大量的时间去找座位就餐。学生们的生活节奏普遍较快，如果一日三餐都要如此大费周章，宝贵的学习和科研时间浪费在排队等待的过程中，将有可能对学生的学术研究有所影响。因此，方便快捷，无需排队等待的网上订餐得到了不少学生的青睐。其次，校园饭堂通常提供的菜品款式相对固定，可供选择的种类较少，长时间不更换菜单，导致学生在长时间内反复吃相同的菜品，缺乏新鲜感。而且这些饭菜大多放在加热台上，经过长时间的加热，口感和味道难免变差，难以满足所有学生的饮食需求。而且多数食堂都只在固定时间营业，部分学生如果因为专注于科研实验或者参加活动错过了食堂的营业时间可能只能吃残羹冷炙，甚至没饭吃，只能通过自备干粮来避免饿着肚子熬过漫漫长夜。将网上订餐系统引入校园能够有效解决上述的不足，一方面可以弥补食堂菜品款式长期不更新的问题，无论是水果沙拉，还是美味烧烤，学生多元化的饮食需求都可以得到满足，另一方面为那些时间紧迫无法到食堂就餐或者因为各种原因错过食堂营业时间的同学提供了新的选择，节省了前往食堂的时间，使他们能够在忙碌的间隙中享受美食。1.2.2研究意义与目前市面主流的网上订餐系统不同，校园订餐主要面向高校这一类相对封闭的场景，消费群体主要是学生。因为校园环境的特殊性，外卖配送人员混杂，校园安全难以得到保障（祝坤艳等，2020）。出于对师生人身安全和财产安全考虑，许多高校并不允许美团和饿了么等平台的骑手进入校园，学生只能去校门口或外卖柜领取自己下单的菜品，一来一回又消耗了宝贵的时间。而校园网上订餐系统则填补了这部分的空白，一方面，可以带动校园餐饮的经济增长，形成有益的市场竞争，学校可以作为管理方，对于入驻商家的资质进行审查，最大程度保障校内的食品安全。另一方面，校园网上订餐系统为那些希望在课余时间勤工俭学的学生提供了一个平台，他们在获得健康证后，可以在系统上注册为骑手，相比于校外的骑手，学生对于校园的路况更加熟悉，既提高了菜品的配送效率，又有效避免了外来陌生人员频繁进出校园带来的安全问题。同时，校园网上订餐系统可以与高校达成合作，借助人工智能和自动化等技术，实现高度个性化和智能化。网上订餐系统在在日常运行中产生了大量的用户订餐的信息，这些信息中隐含了大量的用户消费习惯信息、用户用餐习惯信息等传统餐饮很难收集而又很需要的数据信息（FangSJ，2012）。利用大数据分析这些信息，对用户需求进行更加精确的预测与推荐。利用无人驾驶车和无人家智能配送，为订餐系统提供新的服务模式和发展思路，推动行业的创新和发展。1.3研究现状O2O（OnlineToOffline），即“线上到线下”，最早由美国提出。自从2011引入中国后，越来越多的行业开始加入O2O行列（唐义杰，2023）。尤其是在餐饮行业，我国巨大的餐饮消费市场，成为了当时互联网企业的必争之地。2013年前后，美团网推出美团外卖，BAT（百度，阿里巴巴，腾讯）等互联网巨头也纷纷入场，大量资本涌入互联网订餐市场，各大平台用户数量和消费单量飞速增长，行业进入高速增长期。2016年，随着德国的外卖超人暂时退出中国市场，美团外卖、饿了么和百度外卖占领了大部分市场份额。如今，美团和饿了么凭借巨大的市场份额成为了行业的领导者。经过十年的发展，我国的网上外卖用户规模达5.21亿，占网民整体的48.8%，餐饮外卖市场规模从2011年的21.68亿人民币，增长到2022年的1.1万亿人民币，占领了全球外卖市场的半壁江山，覆盖全国大部分社区、写字楼和购物中心等。外卖行业市场规模持续扩大，外卖平台拓展多项业务，帮助商家提升运营效率，进而推动餐饮行业数字化转型（中国互联网络信息中心，2023）。但是，美团外卖等大型平台也存在难以覆盖的角落，例如高校、科技园区等。因此，许多小型外卖平台不断涌现，通过差异化竞争策略，在市场中获得一席之地。这些平台专注于特定的地区或用户，以满足不同消费者的需求（王倩，2017）。1.4论文组织结构本文将通过七个章节介绍基于Web的校园网上订餐系统的设计与实现过程，各章节的主要内容安排如下：第一章是前言，交代课题背景，选题目的和研究意义，分析了目前国内研究现状。第二章是开发技术，说明了本系统的架构、开发工具和开发环境，然后介绍开发的语言和数据库，以及使用的相关框架。第三章是需求分析，结合实际情况，对系统的功能、业务以及可行性进行分析。第四章是系统设计，根据需求分析，设计系统各个模块和数据库，包括数据库表和表中的主键和外键，以及E-R图等。第五章是系统实现，介绍前台用户页面和后台管理页面，详细描述各个功能模块如何实现。第六章是系统测试与运行，主要从用户，商家，骑士和管理员四个角色分别对整个系统进行功能测试。第七章是总结与展望，对系统的开发过程进行总结，并提出可以改进的地方。

2开发技术2.1开发架构本系统结合实际情况，使用B/S架构，在这种架构下,用户界面完全通过浏览器实现,主要事务逻辑在服务器端实现（吴大刚等，2003）。B/S架构图如图1所示。现在几乎所有的网上订餐平台也都有自己的B/S架构系统（XueJW，2014）。图1B/S架构体系2.2开发工具本系统前后端均使用IntelliJIDEA2020.1.3x64工具开发（下称IDEA）。IDEA是一款功能强大的Java集成开发环境，广受Java开发者的欢迎。在IDEA编译器中，开发者只需输入前几个字母即可利用智能代码补全功能，快速地完成语句的编写，显著地提升了编码效率，实时的错误检查和纠错建议则可以帮助开发者及时发现漏洞。数据库管理则使用了NavicatPremium15。这是一款功能全面的数据库管理工具，支持多种数据库系统。它具有强大的数据编辑和查询功能，支持直接编辑表数据，在后期进行系统测试时发挥了重要作用。2.3前端技术介绍2.3.1前端技术本系统前端使用了目前主流的HTML，CSS和JavaScript前端技术。HTML，即超文本标记，是一种用于创建网页的标准标记语言。自1990年以来一直被用作万维网的标准编程语言，是Web页面的基础。HTML的基本结构简单，由head标签和body标签组成。HTML元素包括起始、内容和结束标签，用于显示内容并形成层次结构。通过合理的安排层次，我们可以将文本和图片等内容在浏览器中正确地显示出来，构成了整个页面的基本结构。CSS，即层叠样式表，主要用来描述HTML文档样式。CSS的主要作用是对界面进行美化和控制页面布局。CSS不仅可以通过设置标签的方式改变文字大小、背景颜色等样式，还可以控制元素的位置是否居中、调整四周的边距等属性，从而达到对网页元素的精确控制。CSS具有三大特性：继承性，层叠性和优先级。层叠性，当多个样式定义对同一元素产生影响时，根据“就近原则”，决定哪个样式对元素产生作用。这使得我们可以灵活地组合和覆盖样式，实现复杂的页面效果。继承性，是指子标签会继承父标签的某些样式，如文本颜色和字号，从而简化了样式定义，提高了代码重用性。优先级，则是用来解决当多个样式规则同时作用于一个元素的规则，若选择器相同，则按照层叠性执行；若选择器不同，则根据选择器权重执行。JavaScript，简称“JS”，是一种轻量级的编程语言。JavaScript通过监听用户的点击、滚动等行为，进行实时地响应，实现Web页面的交互逻辑。例如，当用户点击“修改”按钮，就触发对应的update事件，改变页面的内容。JJavaScript在动态内容的创建和刷新方面得到了广泛应用。通过Ajax等技术，它能够在不重新加载整个网页的情况下，从服务器拉取更新数据，并仅对网页的特定部分进行刷新。这种能力使得Web应用能够更加迅速地响应用户的请求，提升了用户体验。2.3.2前端框架本系统前端使用了Vue.js框架，是一个轻量级的JavaScript框架。Vue.js是一个渐进式框架。该框架旨在更好地组织和简化Web开发（Harper，2015）。渐进式框架的核心理念是渐进式开发，即不需要在开发初期就构建整个框架，而是可以从简单的视图层开始，根据项目需求慢慢引入其他所需功能，例如状态管理、路由跳转等。相比于传统框架的整体复杂性和高昂的学习成本，渐进式框架划分的模块更有利于开发者理解和掌握，同时也避免引入不必要的额外资源消耗。Vue.js充分利用了HTML的模板语法，使得开发者能够用更为简洁的方式描述视图的状态。在Vue中，HTML模板与JavaScript逻辑紧密结合，通过Vue的指令系统，我们可以直接在模板中嵌入JavaScript表达式，实现数据的动态绑定和事件的监听。这种方式不仅使得代码更加直观易懂，也大大提高了开发效率。Vue.js的另一个特点是组件化开发。Vue.js采用独立的、可复用组件来构建复杂的用户界面，组件是Vue的基本构建块，每个组件整合了HTML模板、JavaScript逻辑和CSS样式。这种方式提高了代码的可维护性和重用性，开发者能够更加高效地组织和管理代码。此外，Vue还提供了强大的组件通信机制，包括props、events等，组件之间进行数据传递和交互变得更加灵活。Vue.js还提供了丰富的指令，它们是Vue.js中最常用的特性。指令是以v-开头的特殊属性，用于在DOM元素上应用特殊的行为。指令在编译过程中会被解析成JS代码。通过合理地使用指令，开发者可以在不直接操作DOM的情况下，对DOM元素进行高效的更新和操作。例如v-for指令，用于遍历数组或对象，并为数组或对象的每一个元素重复渲染一个模板，在本系统中，首页的轮播图正是使用了该指令进行渲染。通过使用v-for，开发者可以简化渲染重复元素的代码，提高应用的性能。2.4后端技术介绍2.4.1后端语言本系统后端使用了Java语言，Java凭借其强大的跨平台性、稳定性和丰富的生态系统和框架，被广泛应用于各大网站后台，在后端开发领域一直占据着重要地位。Java具有跨平台性，这得益于其自带的虚拟机。Java源代码经编译器处理后，生成平台无关的字节码，这些字节码由Java虚拟机识别并执行。因此，只要有Java虚拟机，Java程序就能在任何硬件和操作系统上运行。Java是面向对象的编程语言，支持类和对象的概念。开发者能够赋予对象特定的属性，并通过这些对象来构建复杂的应用程序。此外，Java还具备丰富的库和框架，用于构建各种类型的应用程序，这些库和框架经过了大量的实践检验和优化，，开发过程中可以直接利用这些现成的组件，提高了开发效率，缩短了开发周期。2.4.2后端框架本系统后端使用了SSM框架，SSM框架是指Spring+SpringMVC+MyBatis的组合，是JavaWeb项目开发的两大主流框架Spring和MyBatis的整合。Spring是一个被广泛使用的开源框架，以其功能强大、灵活的架构和高效的性能而著称，是SSM框架的核心。Spring作为一个轻量级容器，管理对象的创建、配置和生命周期，核心在于控制反转（IoC），通过依赖注入减少组件耦合。这免去了开发者手动创建和组装对象的必要，由Spring容器代劳，从而简化了代码。其次，Spring框架提供了大量功能组件，在数据处理方面，Spring整合了多种数据访问技术，它提供了一组统一的数据访问模板和抽象层，同时支持多种数据库连接方式，开发人员可以更轻松地进行数据库操作，减少了与数据库交互的复杂性。Spring框架具有良好的可扩展性和集成性，允许开发人员根据自己的需求选择使用哪些组件，可以与其他框架和库集成，使得Spring能够灵活地适应各种复杂的场景和技术需求。SpringMVC是Spring框架的一个重要组成部分，它是基于MVC（Model-View-Controller）模式的轻量级Web开发框架。MVC模式是指将应用程序的逻辑分离成三个独立的组件，模型（Model），视图（View）和控制器（Controller），其大致工作流程如图2所示。图2MVC大致工作流程SpringMVC的核心思想是将系统分为三层，分别是视图层、控制层以及模型层（邱紫韵，2017）。Controller（控制层）是协调者，接受来自用户的请求，调用View和Model的相关方法处理业务逻辑以便完成用户的需求（张屹峰，2021）。Model（模型层）用于处理应用程序数据逻辑的部分，直接访问和操作数据，而View（视图层）则负责接收并显示Model提供的数据以及接收用户的输入,并且响应事件,Model更新后及时将更新反馈给用户（于春娜，2014）。用户通过视图进行交互，发送请求到服务器，在服务器中请求被控制器接收，控制器根据请求选择对应的模型进行处理，控制器再根据模型的处理结果找到相应的视图，让用户从视图层中获得系统产生的结果（XieZ，2014）。SpringMVC提供了一个核心组件，前端控制器DispatcherServlet（下称Servlet），所有的用户请求都会被Servlet拦截，根据请求的不同，将请求发送到相应的控制器进行处理。这种机制使开发者可以灵活地配置请求映射，根据不同的请求参数或URL调用不同的Controller方法。SpringMVC还提供了丰富的配置选项，开发人员可以通过XML或注解的方式，灵活地自定义控制器、拦截器等组件，以满足特定的业务需求，为开发人员提供了极大的便利。Mybatis是一个轻量级的半自动化持久层框架，因其出色的性能和较低的学习门槛，在JavaWeb开发中广受欢迎。MyBatis具有极高的灵活性。它支持多种配置方式，允许开发者根据需求自定义SQL语句、参数类型以及返回类型。Mybatis内部封装了JDBC，使用JDBC提供的原生SQL接口，没有封装过多的抽象层，同时采用缓存机制和二级映射机制，提高了查询性能，减少了对数据库的访问次数，即使处理大量数据时也能够保持较高的性能。开发人员可以通过XML文件来配置Java对象与数据库表之间的映射关系。因此，只需在Mapper.XML中编写SQL语句。MyBatis会根据配置信息自动生成SQL执行代码，以操作数据库。此外，MyBatis支持动态SQL拼接，可根据不同条件生成相应SQL语句，提升了代码的灵活性和可重用性。此外，MyBatis还支持多种数据库，包括Oracle、MySQL、PostgreSQL等主流数据库，满足不同项目的需求。然而，MyBatis也有一些需要注意的缺点，MyBatis需要手动编写SQL语句，尤其当字段多、关联表多时，SQL语句较复杂，编写工作量较大。这时候我们可以使用一些辅助工具，例如MyBatis-Plus，它为开发者提供了代码生成器CodeGenerator，只需修改部分自定义内容即可根据数据库表自动生成Entity、Mapper和Service层的代码。在生成代码的过程中，MyBatis-Plus会自动注入基本的CURD（Create、Update、Read、Delete），减轻了开发者手动编写代码的工作量，开发效率大幅提升。

3系统需求分析3.1现状分析在中午和下午放学的用餐高峰，饭堂里那长得一眼望不到边的队伍和取餐后找不到座位用餐的窘迫，成了不少大学生每天都要面对的难题。一个不需要排队就能取餐，不需要四处寻找座位就能用餐的方式成为了大多数人的迫切需求。校园网上订餐系统的开发，为解决用餐难题提供了新的解决方式。一方面，计算机在高校的普及程度极高，基本是学生完成大学学业不可或缺的工具，另一方面，网上订餐系统凭借灵活、便捷、选择多样等传统食堂难以比拟的优势，更能满足当代学生的饮食需求。学生只需在宿舍打开电脑，登录订餐系统下单，就可以等待餐品配送到宿舍，节省了不少时间和精力，可以更加专注于自己手头的工作。同时，校园网上订餐系统可以为勤工俭学的同学提供兼职的机会，学校方面也能对入驻的商家和骑手进行监管，保障校内食品安全和师生的人生财产安全。3.2业务需求3.2.1前台业务功能前台业务主要是为用户提供服务，本系统的前台包含以下功能。（1）菜品推荐。在前台首页，一些商家的特色菜品、热销菜品或者限时优惠的菜品会以轮播图的形式呈现在用户面前。菜品推荐一方面为一些“选择困难症”的用户提供了选择，精打细算的用户也能快速得知菜品的优惠信息，另一方面也能为商家的新菜品或者特色菜品提高了曝光率，促进商家销售。（2）商家搜索。用户只需输入商家的名称或者部分关键词就能从入驻商家中，快速找到目标商家。商家搜索功能可以帮助用户根据自己的饮食偏好快速找到特定的商家，比如喜欢吃辣的可以搜索“川菜”，少数民族用户可以搜索“清真”等。（3）菜品搜索。用户只需输入想要菜品的关键词就能从平台上所有上架的菜品中，找到自己希望下单的菜品。用户得到搜索结果后，可以货比三家，选择自己认为最合适的菜品进行下单。（4）待付款订单。用户下单菜品后不需要立刻支付，待付款订单功能允许用户暂时离开支付界面，在订单详情界面，检查下单菜品的价格，填写的配送地址是否准确无误，再支付订单。（5）个人中心。用户在个人中心页面可以修改自己的个人信息，查看自己的订单，包括当前订单的状态以及历史订单记录，以及对下单菜品进行评价和反馈，同时可以查看商家对评价的回复内容。3.2.2后台业务功能后台业务主要是为商家、骑手和管理员提供服务，本系统的后台包含以下功能。（1）商家、骑手和用户管理。商家管理主要用于对入驻的商家进行监管，确保校园订餐系统上商家的信誉和经营状态，对于违规违法的商家及时进行清退。骑手管理是对配送的骑手的进行管理，主要是审核注册为骑手的人员，对于一些已经退出平台的骑手账号进行删除，以防被有心之人利用。（2）菜品分类和菜品信息管理。菜品分类管理可以对菜品分类进行增删改查，用户通过菜品分类可以更快地筛选符合自己口味偏好的菜品，提高了点餐的效率。菜品信息管理则可以让商家修改菜品信息、调整菜品上架与否等，管理员也可以将不符合规定的菜品进行删除处理。（3）订单管理。订单管理功能是整个订餐系统的核心，用户和商家可以实时查看订单的状态，商家在订单管理页面进行接单，查看顾客下单的菜品和备注需求，完成菜品制作后，商家选择骑手进行配送，骑手将配送的餐品送达后可以在订单管理页面将订单设置为“已送达”状态，用户看到餐品已送达即可出门取餐。管理员可以查看所有订单的详细信息，以便管理员及时发现异常订单并进行处理。（4）菜品评价和评价回复管理。用户可以对下单的菜品进行打星和评价，菜品详情页面将展示用户对所下单菜品的评分和评价，给所有希望下单该菜品的用户提供参考。商家也可以通过用户给出的评价对菜品进行针对性的改良。对于用户和商家之间的误会，商家可以使用评价回复进行及时的澄清和解释。对于一些刷屏的低质量评价、恶意差评和态度恶劣的评价回复，管理员有权删除这些造成不良影响的评价和评价回复，提高评价的质量，维护系统平台的秩序。（5）美食推荐管理。管理员可以根据不同商家的要求，将商家提供的广告图或者菜品宣传图投放到首页的美食推荐轮播图处，所有进入首页的游客和普通用户都能看到轮播图的内容。通过美食推荐管理功能，商家可以提高曝光度和点击率，吸引潜在顾客或者希望尝鲜的顾客，促进先关菜品的销售。3.3功能需求3.3.1游客功能需求游客用户是指尚未注册账号登录的用户，虽然他们的功能有所限制，但系统仍然会为他们提供一些较为基础的功能，以确保良好的用户体验和吸引潜在用户。他们可以直接进入校园网上订餐系统的前台，可以看到首页的菜品推荐，搜索和浏览各个餐厅和菜品信息，也可以看到不同菜品的评价，但是由于游客没有登录，不能进行下单操作，因此也不能进行菜品评价。游客功能需求用例图4如图所示。图4游客功能需求用例图3.3.2用户功能需求用户是校园网上订餐系统的核心群体，他们在系统里都要有独一无二的识别码，因此用户必须经过注册登录才能拥有所有前台功能的权限。用户完成注册后，可以前往个人中心，添加或修改自己的配送地址和联系方式。用户登录后，除了可以和游客用户一样浏览菜品推荐、查看了和搜索餐厅和菜品信息外，还能下单自己想要的菜品。用户进入菜品详情页面后，可以选择下单数量，选择支付类型，如果用户有特殊的需求，如口味偏好或者不要餐具等，可以在备注说明。下单后，用户不必立刻支付订单，可以前台首页的右上角，点击“待付款订单”，在待支付订单里查看订单信息，检查地址和联系方式是否准确再支付订单。用户品尝所点菜品后，有权对其评分和撰写评价。这些评价内容可供商家及其他用户查看，用户也能看到商家对评价的回应。此外，用户可在订单查询功能中，查阅当前订单的状态及历史订单详情。用户功能需求用例图5如图所示。图5用户功能需求用例图3.3.3骑手功能需求骑手是校园网上订餐系统的重要角色，是连接用户和商家的桥梁。骑手负责将菜品从餐厅安全、准时地送达用户手上或者指定的位置。骑手可以查看自己配送的订单信息，在取餐时核对商家的餐品款式和数量是否与订单一致，检查无误后开始进行配送。骑手将菜品送达后，骑手可以点击“已送达”按钮，用户看到餐品送达即可前往取餐。骑手功能需求用例图6如图所示。图6骑手功能需求用例图3.3.4商家功能需求商家是校园网上订餐系统的重要角色，负责根据订单制作美味的菜肴以及将订单分配给骑手。商家可以对自家的菜品进行管理，增加一些新推出的菜品，修改现有的菜品信息，如调整菜品所在的分类、修改单价等，也可以将一些时令菜品上架或者下架。商家可以查看用户提交的订单，并根据订单制作对应款式和数量的菜品，制作完成后，点击“配送”按钮即可选择骑手配送菜品。商家还能查看用户对菜品的评分和评价，这些评价将有助于商家改进菜品，对于用户的疑问或者不满，商家可以通过回复评价的方式解释缘由，减少商家和用户之间不必要的误会。商家功能需求用例图7如图所示。图7商家功能需求用例图3.3.5管理员功能需求管理员在校园网上订餐系统中扮演者至关重要的角色，负责整个系统的平稳运行和综合管理。管理员拥有整个系统的最高权限，能够查看和修改用户及骑手的信息，以保证信息的准确性。管理员还需要对商家进行管理，对于信息填写不完整或者有误的商家，管理员可以修改相关信息。管理员有权审核商家的评价回复，对于一些态度恶劣、不愿解决问题的商家，以及资质不全或者违纪违法商家，管理员有权将其清出平台并删除商家账号。管理员不仅可以更换首页的菜品推荐图，还需要对菜品分类进行适当的调整和补充、删除不符合规定的菜品等，让用户更加便捷、放心地使用订餐系统。同时，管理员可以查看所有菜品订单，如果发现一些不符合常理的异常订单，管理员需要及时介入处理，保障平台各方权益，维护系统正常运行。管理员功能需求用例图8如图所示。图8管理员功能需求用例图3.4系统可行性3.4.1技术可行性本系统的开发基于HTML、JavaScript和Java技术，目前主流的Web开发也是基于这些技术。本系统前端选择的Vue.js框架和后端选择的SSM框架，也是经过数年的发展最终得到大多数企业和开发者认可和使用的目前备受欢迎的框架技术，如今这些框架已经有着庞大的用户群体和生态系统。数据库方面选择MySQL数据库系统，该系统的连接、配置等操作较为简单，学习成本较低，可以满足本系统对数据库的要求。3.4.2经济可行性本系统使用的前后端语言，如Java、HTML等均为免费的开源语言，数据库MySQL同样也是开源免费的数据库系统，所有人都可以免费的下载使用MySql数据库系统进行使用（MysqlAB.，2006）。IDE使用的IDEA有免费版本提供，足以满足本系统的开发需求。因此系统开发的成本较低，从经济角度考量，是可行的。3.4.3社会可行性本系统的运行环境为一般浏览器，Java的跨平台性使本系统可以无视计算机硬件和操作系统的差异，学生只需使用自己的计算机，使用任意一个浏览器打开校园网上订餐系统，即可完成下单操作。系统用户的个人信息一般存储在数据库中，只有自己和超级管理员可见，可以有效保护使用者的隐私。同时，学校可以对入驻平台的商家和骑手进行监管，在提升学生餐饮体验的同时保障学生的食品安全。因此该系统具有社会可行性。

4系统设计4.1系统结构设计4.1.1系统架构设计本系统使用前后端分离的架构，后端负责数据和业务处理，前端负责展示和用户交互。前后端分离的架构，不仅避免了传统开发中，前后端紧密耦合导致“牵一发而动全身”的问题，而且使得开发过程中的测试更加方便。在实践过程中，前后端分离架构常常与分层架构结合使用，两者结合可以让系统的耦合度降低，模块化程度更高，可扩展性更强。本系统采用基于MVC设计模式的SpringMVC框架，形成模型层、视图层和控制层的三层架构。模型层处理数据和业务逻辑，包括数据访问层（DAO）和服务层（Service）。控制层接收浏览器请求并调用模型层处理，而视图层则负责将数据展示给用户。本系统的分层架构图如图9所示。图9系统分层架构图4.1.2系统功能模块设计本系统根据校园网上订餐系统的实际需求，分为前台和后台两大部分，前台主要是为普通用户提供商家搜索、菜品浏览和下单支付等服务。为了让用户可以快速上手本系统，前台的功能设计较为简洁。前台的功能模块设计如图10所示。图10前台功能模块设计图后台主要是为骑手、商家和管理员提供服务和管理功能。根据身份的不同，可以进行的操作也不一样。骑手只能修改配送订单的状态，商家可以修改菜品的信息、对顾客的评价回复和选择骑手配送菜品。管理员则可以对系统其他用户进行管理，还能修改菜品分类，以及变更前台首页的菜品推荐图。后台的功能模块设计如图11所示。图11后台功能模块设计图4.2数据库结构设计4.2.1系统E-R图数据库是系统的基石，系统的正常运行离不开数据库的支持，校园网上订餐系统的大部分操作都涉及到数据库。本系统的数据以订单为核心，围绕着用户、骑手、商家和管理员四个角色构建。其中，管理员主要对其他四个实体进行管理。商家、骑手、用户和订单构成网上订餐系统的主体部分，四个实体之间存在错综复杂的联系，因此，我们需要E-R图来直观地展示数据模型的结构和关系。本系统的主体E-R图如图12所示。图12系统的主体E-R图4.2.2数据库表设计根据系统的总体设计思路，我们可以依照每个模块的功能，设计出与之匹配的数据库表，实现数据的有效管理。以下是本系统的核心数据表。（1）用户信息表。用于记录普通用户的账号信息，包括利用系统自动生成的唯一编号，以及账号密码和地址等。主要在注册、登录和修改个人信息时使用，具体表结构如表1所示。表1用户信息表字段字段类型字段长度中文说明备注idint11用户编号主键login_namevarchar255账号passwordvarchar255密码real_namevarchar255姓名cel_phonevarchar255联系电话addressvarchar255地址（2）骑手信息表。用于记录骑手的账号信息，包括利用系统自动生成的唯一编号，以及账号密码、姓名和联系电话等。主要在注册、登录和修改个人信息时使用，具体表结构如表2所示。表2骑手信息表字段字段类型字段长度中文说明备注idint11骑手编号主键login_namevarchar255账号passwordvarchar255密码real_namevarchar255姓名cel_phonevarchar255联系电话（3）商家信息表。用于记录商家的账号信息，包括利用系统自动生成的唯一编号，以及商家名、门店照片和门店地址等。其中，门店照片的图片文件存储在服务器的项目目录下，并配置了虚拟路径指向该图片，商家信息表中的门店照片字段存储的是图片的虚拟路径，在需要获取图片文件资源时，再从数据库表中访问虚拟路径，结合相对URL来找到图片资源。主要在注册、登录和修改商家信息时使用，具体表结构如表3所示。表3商家信息表字段字段类型字段长度中文说明备注idint11商家编号主键login_namevarchar255商家名passwordvarchar255密码shop_imgvarchar255门店照片real_namevarchar255联系人cel_phonevarchar255联系电话addressvarchar255门店地址（4）管理员信息表。用于记录管理员的账号信息，包括利用系统自动生成的唯一编号，以及账号密码。主要在登录和修改个人信息时使用，具体表结构如表4所示。表4管理员信息表字段字段类型字段长度中文说明备注idint11管理员编号主键login_namevarchar255账号passwordvarchar255密码（5）菜品分类信息表。用于记录菜品分类的信息，包括利用系统自动生成的唯一编号，以及分类名称。主要在增改菜品分类和菜品信息增改时使用，具体表结构如表5所示。表5菜品分类信息表字段字段类型字段长度中文说明备注idint11分类编号主键type_namevarchar11菜品分类名（6）菜品信息表。用于记录菜品的详细信息，包括利用系统自动生成的唯一编号，以及菜品名称、菜品图片、菜品简介和价格。其中，fid字段外联菜品分类信息表，saler_id字段外联商家信息表。主要在菜品搜索和菜品详情展示时使用，具体表结构如表6所示。表6菜品信息表字段字段类型字段长度中文说明备注idint11菜品编号主键food_namevarchar255菜品名food_imgvarchar200菜品图fidint11菜品分类外键food_pricedouble(10,2)价格food_introvarchar255菜品简介food_detailvarchar600菜品详情图sale_numint11销量is_upint11是否上架saler_idint11商家编号外键（7）收货地址信息表。用于记录收货地址的信息，包括利用系统自动生成的唯一编号，以及收货联系人、联系电话和收货地址。其中，uid字段外联用户信息表。主要在菜品下单和查询订单时使用，具体表结构如表7所示。表7收货地址信息表字段字段类型字段长度中文说明备注idint11地址编号主键real_namevarchar255姓名cel_phonevarchar255联系电话addressvarchar255地址uidint11用户编号外键（8）订单信息表。用于记录收货地址的信息，包括利用系统自动生成的唯一编码，以及订单编号、收货人、总金额、支付类型和订单状态等信息。其中，food_mid外联菜品信息表，address_id字段外联地址信息表，saler_id外联商家信息表，qs_id外联骑手信息表，uid外联用户信息表。该表是本系统最核心的数据表，主要在菜品下单、订单支付、订单配送、查询订单时使用，具体表结构如表8所示。表8订单信息表字段字段类型字段长度中文说明备注idint11唯一编码主键order_novarchar255订单编号address_idint11地址编号外键real_namevarchar255收货人cel_phonevarchar255联系电话addressvarchar255地址uidint11用户编号外键food_midint11菜品编号外键food_mfood_pricedouble(10,2)菜品价格order_numint11数量total_amountdouble(10,2)总金额pay_typeint11支付类型user_remarkvarchar255用户备注order_statusint11订单状态saler_remarkvarchar255商家备注create_timevarchar255创建时间ps_timevarchar255配送时间sd_timevarchar255送达时间sc_timevarchar255确认收餐时间saler_idint11商家编号外键qs_idint11骑手编号外键（9）菜品评价信息表。用于记录用户对菜品的评价信息，包括利用系统自动生成的唯一编号，以及评价星级、评价内容和订单编号。其中，uid字段外联用户信息表，food_id外联菜品信息表，saler_id外联商家信息表，order_id外联订单信息表。主要在用户进行菜品评价和菜品详情展示时使用，具体表结构如表9所示。表9菜品评价信息表字段字段类型字段长度中文说明备注idint11评价编号主键eval_starint11评价星级eval_contentvarchar255评价内容order_idint11订单编号外键food_idint11菜品编号外键saler_idint11商家编号外键create_timevarchar255创建时间uidint11用户编号外键（10）评价回复信息表。用于商家对评价的回复信息，包括利用系统自动生成的唯一编号，以及回复内容等。其中，saler_id字段外联商家信息表，eval_id外联评价信息表。主要在评价回复和菜品详情展示时使用，具体表结构如表10所示。表10评价回复信息表字段字段类型字段长度中文说明备注idint11回复编号主键reply_contentvarchar255回复内容eval_idint11评价编号外键saler_idint11商家编号外键

5系统实现5.1系统登录界面用户在首页点击右上角的登录按钮，将跳转至登录界面。在此，用户需输入自己的登录名和密码，并选择相应的身份以登录系统。新用户可通过点击注册按钮转向注册页面，填写必要个人信息以完成注册过程。用户登录系统的整个过程中，系统会把用户输入的登录名、密码和角色选择等数据通过POST请求发送到服务器，由服务器检查登录名对应的密码以及角色身份是否准确，如果数据准确，则按照不同角色身份跳转到不同的页面，如果信息有误，则弹出报错。登录功能的实现流程如图13所示。图13登录功能实现的流程5.2系统前台5.2.1菜品推荐功能菜品推荐功能是通过轮播图来实现。首先在页面初始化时，从服务器响应的result对象中获取需要轮播的图片，并存储在数组中。在渲染时，使用Vue.js的v-for指令遍历数组里的对象，轮到某张图片时，其对应的div会被设置为display:block，使其可见。当用户点击图片时，会触发一个跳转事件，会跳转到图片对应的菜品详情页面。同时，在轮播图的右侧有一个箭头，用户点击后会触发播放下一张图片的方法。如果用户没有点击，系统的计时器会每隔5秒执行一次方法，播放下一张图片。菜品推荐功能的实现流程如图14所示。图14菜品推荐功能实现的流程5.2.2商家搜索和菜品搜索功能商家搜索和菜品搜索实现方式大致相同，此处以菜品搜索功能为例，描述系统如何实现菜品搜索功能。在搜索界面，用户输入菜品名称或关键字后点击“查询”按钮，这会触发菜品查询方法，并向服务器发送一个GET请求。服务器在接收到请求后，会将关键字嵌入到查询语句中，在菜品信息表进行模糊查询，并将查询结果返回。收到服务器返回的结果后，页面根据数据内容重新加载菜品信息，如果返回结果数量为0，则显示“暂无菜品数据”。菜品搜索功能的实现流程如图15所示。图15菜品搜索功能实现的流程5.2.3菜品下单功能菜品下单功能是前台的核心功能，主要由菜品详情页面和待支付订单页面组成。用户在菜品详情页面看到心仪的菜品后，可以根据自己的需求选择下单数量和支付的类型，如果在口味上有特殊要求或者有其他需求的可以输入备注的文本框中。当用户点击“提交订单”按钮后，会触发submitOrder方法，向服务器发送一个GET方法，服务器收到请求后，检查数据，若数据无误后会创建一个新的订单，并返回相应的数据，若数据有误则返回报错信息。页面收到响应的数据后，跳转到待付款页面。用户在该页面选择收货地址信息，确认订单菜品和价格后，用户点击“提交订单”按钮，触发submitData方法，该方法会检查用户是否填写所有应填信息，如果是，则跳转到支付页面。在支付页面进行扫码付款，点击“已支付”，系统会显示“支付成功”，这时候收货地址和联系方式也会在订单中更新，这时商家可以开始制作菜品。菜品下单功能的实现流程如图16所示。图16菜品下单功能实现的流程5.3系统后台5.3.1个人信息修改功能用户进入个人信息页面时，系统会向服务器发送GET请求，服务器接收请求后返回用户的信息。如果信息有误需要更改，可以点击左下方的修改按钮，系统将跳转至个人信息修改页面。用户完成信息修改并点击“提交”按钮后，系统将向服务器发送POST请求。服务器在接收该请求后，会修改相应的字段内容，从而实现个人信息的修改。在商家信息修改功能中，商家可以修改门店照片，这里使用了开源的Dropzone.js库实现了图片拖拽上传功能和图片预览功能。个人信息修改功能的实现流程如图17所示。图17个人信息修改功能实现的流程5.3.2菜品管理功能菜品管理页面会先向服务器发送GET请求，服务器根据用户身份不同返回不同的数据，最终菜品信息会以表格的形式展示在菜品管理页面。商家可以新增、修改和删除菜品，管理员只能删除菜品。点击“删除”会触发delete事件，系统向服务器发送GET请求，服务器接收到请求后，先在数据库中执行删除操作，再返回修改后的数据到系统。点击“修改”会触发update事件，系统跳转到菜品修改页面，在修改页面提交修改内容后，系统会向服务器发送POST请求，服务器接收到请求后，会修改相应的字段内容，从而实现菜品信息的修改。点击“新增”则会触发add事件，系统跳转到菜品新增页面，该页面与修改页面类似，但是所有文本框和图片框均为空，提交新增菜品后，服务器会在菜品信息表新增菜品信息。菜品管理功能的实现流程如图18所示图18菜品管理功能实现的流程5.3.3菜品评价和评价回复功能用户取餐后，可以对自己下单的菜品进行评分和评价。其中，评分功能添加了鼠标hover（悬停）事件，用户可以将鼠标悬停在不同的星星上预览不同的星级状态，当用户移开鼠标则会恢复初始状态，只有用户点击对应的星星，才真正为菜品完成了打分。在打分的下方还有一个文本框，用于输入菜品评价的内容。当用户点击“提交”后，系统会向服务器发送POST请求，服务器收到请求后，在菜品评价信息表中添加新的数据，并返回评价成功信息。商家看到用户的菜品评价后，可以在后台点击“回复评价”按钮，系统跳转至回复页面，输入回复内容，点击“提交”，即可像评价一样完成评价回复，评价回复也将会在菜品详情页展示。菜品评价和评价回复功能的实现流程如图19所示。图19菜品评价和评价回复功能实现流程5.3.4用户管理功能管理员需要对商家、骑手和普通用户进行管理，管理员可以进行新增、修改和删除操作。点击“修改”会触发update事件，系统跳转到用户信息修改页面。点击“新增”或也会触发类似的事件。用户管理功能的具体实现逻辑与菜品管理类似，为避免赘述，此处不再展开。

6系统测试6.1测试环境系统测试的环境如表11所示。表11系统测试环境名称环境参数CPUAMDRyzen94900H运行内存16.00GB操作系统Windows10家庭中文版浏览器Firefox浏览器6.1登录测试登录功能可通过前台首页右上角的“登录”按钮访问，点击后系统将跳转至登录页面。无论是管理员、商家、骑手还是普通用户，都需根据页面的指示输入登录名和密码，选择适当的角色，然后点击“登录”。如果输入错误的登录名或者密码会出现如图20所示的报错信息。忘记选择登录身份则会出现如图21所示的报错信息。图20登录密码错误测试图图21登录未选角色测试图6.2菜品搜索测试用户可以在菜品搜索框里输入自己希望下单的菜品或者关键字，点击查询，即可查询到相关的菜品信息。用户也可以在菜品分类中选择自己感兴趣的菜品种类，如麻辣川菜等。大量的菜品通过搜索和分类后，只剩符合条件的菜品，使用户可以更快做出选择。菜品搜索功能如图22所示图22菜品搜索测试图6.3提交订单测试在菜品详情页面，用户可选择购买数量，并选择微信或支付宝作为支付方式。用户还可根据个人喜好填写备注信息，然后点击“提交订单”按钮。系统将随即弹出一个确认窗口，询问用户是否确实要提交订单，如图23所示。点击确定，系统会跳转到订单支付页面。如果此时用户不小心离开了支付页面，可以系统前台的右上角点击“待付款订单”按钮重新进入支付页面。进入支付页面，用户需要先选择收货地址和联系方式，如图24所示，并检查订单信息是否有误，若信息有误，则点击删除订单。若信息无误，用户可以点击支付，系统会弹出支付窗口。用户完成支付后，系统提示支付成功，如图25所示，至此，用户下单完成。图23提交订单图24选择收货地址图25订单支付成功6.4配送测试商家根据订单制作完成后，可以在订单管理页面点击“配送”，系统会跳转到配送页面，商家只需输入商家备注，选择配送骑手，点击提交按钮，如图26所示，即可等待骑手前来取餐。系统会将订单交给对应的骑手。骑手接单后，从餐厅取餐，根据用户的地址和联系方式将菜品送到指定位置，点击“送达”按钮，如图27所示。用户看到订单送达后，前往取餐地址取餐，确认餐品与订单无误后，点击“收餐”，如图28所示，菜品配送到此完成。图26商家选择骑手配送菜品图27骑手送达菜品图28用户收餐6.5菜品评价测试用户品尝菜品后，可以对自己下单的菜品进行评价，从订单管理页面，点击评价，进入菜品评价页面。选择评价的星级（1-5星），输入评价内容，点击提交即可，如图29所示。提交的评价会在菜品详情页面向所有人展示，如图30所示。图29用户进行评价图30菜品评价展示6.6系统管理功能测试系统的管理功能实现逻辑大同小异，因此这里以管理员管理系统其他用户为例进行测试。如图31所示，在管理页面，管理员可以选择管理用户、骑手或商家。假设我们选择“商家管理”，系统将跳转商家管理页面，如图32所示，在这里可以查看所有商家的信息。若需修改某商家的信息，点击“修改”按钮，系统将打开商家信息修改页面，如图33所示，管理员在此可编辑商家的信息。修改完成后，点击“提交”按钮，系统将更新数据，并弹窗显示“修改成功”的提示。随后，管理员可以看到商家名是刚刚修改后的名称，如图34所示。图31选择管理对象图32选择需要管理的对象图33修改商家信息图34修改完成

7总结与展望7.1总结本课题使用了目前主流的Vue.js前端技术、后端框架SSM以及MySQL数据库，设计并实现了一个校园网上订餐系统。系统基本实现了用户注册、网上订餐，骑手送餐、评分和评价以及订单管理等功能。系统为学生提供了一个便捷高效的网上订餐平台，有效地解决了当前高校