摘要：在城镇化进程不断加速的背景下，城市居民区生活垃圾量正以惊人的速度攀升。面对日益严峻的环境压力，推行垃圾分类与资源化处理已成为城市生态文明建设的关键环节。针对当前垃圾分类实践中存在的识别准确率低、回收效率不高等现实问题，本研究提出开发一个基于Vue框架的智能垃圾分类管理平台。该系统创新性地整合了垃圾分类智能识别、在线预约回收、社区环保互动、绿色积分激励等多元化功能模块，不仅能够有效提升垃圾资源化利用率，还能通过正向激励机制培养居民的环保行为习惯。在技术实现上，前端采用Vue.js框架确保交互体验的流畅性，后端则通过RESTful API接口实现居民端、回收员端和管理端三大功能模块的无缝衔接。实际应用表明，该系统的投入使用显著优化了垃圾分类全流程的管理效能，为构建智慧化、可持续的城市垃圾治理体系提供了切实可行的解决方案。

关键词：垃圾分类回收；Vue；SpringBoot

3 系统需求分析

3.2 系统功能需求分析

在评估系统性能时，需要综合考虑多个关键指标。系统的响应速度是最基础的要求，必须保证在大量用户同时访问时，页面加载时间不超过3秒。界面设计要符合大多数用户的操作习惯，采用清晰明了的布局和简单直接的操作方式，确保新用户能够快速上手使用。

我们开发的垃圾分类回收平台基于Vue技术构建，主要针对传统回收方式存在的效率低下、操作繁琐等问题进行优化。通过重新设计业务流程和简化操作步骤，该系统能够显著提升回收效率，同时为用户提供更加便捷的使用体验。这一创新实践不仅验证了前端技术在环保领域的应用价值，也为行业的数字化转型提供了重要参考。

系统采用三级权限管理模式，包括管理员、注册用户和回收员。管理员拥有最高权限，可以管理用户账号、分配回收任务以及调整系统参数。注册用户能够查询附近的回收站点、在线预约回收服务并实时追踪订单状态。回收员则负责接收系统分配的回收任务，并在完成工作后及时更新订单信息。这种精细化的权限管理机制既确保了系统的安全性，又能满足不同角色的使用需求。

1. 管理员

在垃圾分类回收网站的管理员端，管理员不仅需要管理个人信息，还需要管理用户、回收人员、社区资讯、预约回收、订单信息等。此外，还有权根据需要删改查数据等。管理员用例图如图3-1所示。

图3-1 管理员用例图

（2）用户

在实际生活中，垃圾分类回收网站主要功能是实现用户线上查看社区资讯、在线预发布约回收订单。除此之外，在用户端，该系统还提供了其他使用功能，例如允许用户查询个人信息、搜索积分商品，查看社区公告等。用户用例图如图3-2所示。

图3-2 用户用例图

（3）回收人员

在垃圾分类回收网站的回收人员端，回收人员不仅需要管理个人信息，还需要管理回收分配任务、回收记录等。此外，还需要查看数据等。回收人员用例图如图3-3所示。

图3-3 回收人员用例图

4 系统设计

4.1 系统功能模块设计

系统整体功能如下图所示：

图4-1 总体功能模块图

4.2 数据库设计

4.2.1 概念模型设计

概念模型设计是将现实世界中的客观事物及其联系抽象为信息结构的过程，可以准确地描述现实世界中事物及其之间的关系，完整地获取用户的需求，包括数据、功能和业务规则等方面，确保模型能够成为后续设计和开发的坚实基础。在数据库的设计中，实体是现实世界中的具体对象或概念的抽象表示，它们通过属性来描述特征。这种实体间的相关性，是构建高效、准确和有用的信息系统的关键。

垃圾分类回收网站使用的是开放源码的MySQL数据库。在整个垃圾分类回收网站中，数据库设计是至关重要的一环。在对用户需求和管理员需求、回收人员需求展开全面分析的基础上，将其抽象出了多个实体，并对这些实体进行了简化处理。

（1）用户实体主要包含以下属性：用户ID、真实姓名、性别、联系电话、个人头像以及积分值等核心信息，其具体数据结构详见图4-2所示。

图4-2 用户实体图

1. 管理员实体包含以下关键属性：管理员ID、登录账号、关联表名称、权限角色、登录密码以及创建时间等核心字段，具体数据结构详见图4-3的实体关系图示。

图4-3 管理员实体图

1. 回收人员实体主要包含以下属性：工号、姓名、性别、联系电话、个人照片、当前任务状态（空闲/忙碌）以及在线状态等关键信息，其详细结构如图4-4所示。

图4-4 回收人员实体图

1. 订单信息实体主要包含以下字段：废弃物名称、分类类别、实物照片、预估重量、回收地点、预约时段、处理进度（待分配/已分配）、关联用户ID、联系人姓名、联系电话以及可获积分等核心数据，具体数据结构详见图4-5的实体模型图示。

图4-5 订单信息实体图

1. 回收记录实体，该实体属性包括垃圾名称、垃圾分类、垃圾图片、垃圾数量、回收地址、预约时间、用户账号、姓名、手机、分配时间、回收账号、回收姓名、回收时间。回收记录实体如图4-6所示。

图4-6 回收记录实体图

1. 预约回收实体，该实体属性包括创建时间、站点名称、站点规模、站点简介、站点地址、所需积分。预约回收实体如图4-7所示。

图4-7 预约回收实体图

1. 回收分配实体包含以下关键字段：任务分配时间、回收员工号、回收员姓名、任务创建时间、当前回收状态（待处理/已完成）、废弃物名称、分类类型、实物照片、具体重量、回收地点、预约时段、关联用户ID、联系人及联系电话等业务数据，其完整结构如图4-8的实体关系图所示。

图4-8 回收分配实体图

1. 积分商品实体主要包含以下属性：商品展示图、所需积分值、兑换条件说明、库存数量、商品描述、商品名称以及上架时间等关键信息，其详细数据结构如图4-9所示。

图4-9 积分商品实体图

1. 积分兑换实体主要包含以下字段：交易编号、兑换商品、商品数量、消耗积分值、所需总积分、配送地址、关联用户ID、收货人姓名、联系电话、账户当前积分、审核意见及处理状态（待审核/已通过/未通过）等核心业务数据，具体结构详见图4-10的实体模型示意图。

图4-10 积分兑换实体图

4.2.2 物理模型设计

垃圾分类回收网站的构建离不开后台数据库的坚实支撑，其中数据库表设计扮演着至关重要的角色。一个完善的数据库系统通常由多个数据表组成，这些表格共同协作，存储并管理着网站所需的各种信息。针对垃圾分类回收系统的数据库设计，我们需要对每个数据表的字段及其数据类型进行详尽的规划。这一环节不仅关乎数据的存储效率，更直接影响到数据的检索、更新及整个系统的运行流畅度。根据数据库概念模型设计，以下给出对应的数据库表表结构设计。

（1）用户信息表主要用于记录注册会员的个人资料，主要字段包含：用户ID、真实姓名、登录密码、性别、联系电话、头像URL以及可用积分等。该表采用自增ID作为主键标识，并自动生成注册时间（addtime字段，默认值为系统当前时间）。该数据表的设计目标是完善用户档案管理，为平台提供身份验证和用户联系的基础数据支撑。具体字段结构参见表4-1所示。

表4-1 用户表

字段名称	类型	长度	字段说明	主键	默认值
id	bigint		主键	主键
addtime	timestamp		创建时间		CURRENT_TIMESTAMP
yonghuzhanghao	varchar	200	用户账号
xingming	varchar	200	姓名
mima	varchar	200	密码
xingbie	varchar	200	性别
shouji	varchar	200	手机
touxiang	longtext		头像
jifen	int		积分

（2）管理员账户表是用于保存系统管理人员账户信息的数据表，主要包含以下字段：管理员ID、登录账号、登录密码、头像地址、权限角色等。该表采用自增ID作为主键，并自动记录账户创建时间（addtime字段，默认取值为系统当前时间戳）。该表的设计目的在于规范管理员身份认证流程，保障系统管理功能的安全稳定运行。详细字段定义请参阅表4-2。

表4-2 管理员表

字段名称	类型	长度	字段说明	主键	默认值
id	bigint		主键	主键

表4-2 管理员表（续表）

字段名称	类型	长度	字段说明	主键	默认值
username	varchar	100	用户名
password	varchar	100	密码
image	varchar	200	头像
role	varchar	100	角色		管理员
addtime	timestamp		新增时间		CURRENT_TIMESTAMP

（3）回收员信息表用于记录回收工作人员的基础数据，主要字段包含：工号、姓名、登录密码、性别、联系电话、头像地址、任务状态标识（空闲/忙碌）以及在线状态等。该表以自增ID为主键，并自动生成信息录入时间（addtime字段，默认采用系统时间戳）。该表的设计目标是为回收业务提供人员身份核验和实时状态管理功能，既保障回收流程的高效运转，又支持工作人员的智能调度。具体字段配置详见表4-3。

表4-3 回收人员表

字段名称	类型	长度	字段说明	主键	默认值
id	bigint		主键	主键
addtime	timestamp		创建时间		CURRENT_TIMESTAMP
huishouzhanghao	varchar	200	回收账号
huishouxingming	varchar	200	回收姓名
mima	varchar	200	密码
xingbie	varchar	200	性别
lianxifangshi	varchar	200	联系方式
touxiang	longtext	200	头像
shifoumangliu	varchar	200	是否忙碌
shifouzaixian	varchar	200	是否在线

（4）订单信息表是用于记录垃圾回收订单信息的数据库表，包括创建时间、垃圾名称、垃圾分类、垃圾图片、垃圾数量、回收地址、预约时间、分配状态、用户账号、姓名、手机、积分等。该表通过id字段作为主键，自动记录创建时间（addtime），便于追踪每一笔回收订单的具体信息，确保垃圾分类回收信息的准确性。订单信息表结构如表4-4所示。

表4-4 订单信息表

字段名称	类型	长度	字段说明	主键	默认值
id	bigint		主键	主键
addtime	timestamp		创建时间		CURRENT_TIMESTAMP
lajimingcheng	varchar	200	垃圾名称
lajifenlei	varchar	200	垃圾分类
lajitupian	longtext		垃圾图片
lajishuliang	varchar	200	垃圾数量
huishoudizhi	varchar	200	回收地址
yuyueshijian	datetime		预约时间
fenpeizhuangtai	varchar	200	分配状态
yonghuzhanghao	varchar	200	用户账号
xingming	varchar	200	姓名
shouji	varchar	200	手机
jifen	int		积分

（5）回收记录表是用于记录垃圾回收详情的数据库表，包括创建时间、垃圾名称、垃圾分类、垃圾图片、垃圾数量、回收地址、预约时间、用户账号、姓名、手机、分配时间、回收账号、回收姓名、回收记录和回收时间。该表通过id字段作为主键，自动记录创建时间（addtime），便于追踪每一笔回收记录的具体信息，确保垃圾分类回收流程的透明度和管理的便捷性。如表4-5所示。

表4-5 回收记录表

字段名称	类型	长度	字段说明	主键	默认值
id	bigint		主键	主键
addtime	timestamp		创建时间		CURRENT_TIMESTAMP
lajimingcheng	varchar	200	垃圾名称
lajifenlei	varchar	200	垃圾分类
lajitupian	longtext		垃圾图片
lajishuliang	varchar	200	垃圾数量
huishoudizhi	varchar	200	回收地址
yuyueshijian	varchar	200	预约时间

表4-5 回收记录表（续表）

字段名称	类型	长度	字段说明	主键	默认值
yonghuzhanghao	varchar	200	用户账号
xingming	varchar	200	姓名
Shouji	varchar	200	手机
fenpeishijian	varchar	200	分配时间
huishouzhanghao	varchar	200	回收账号
huishouxingming	Varchar	200	回收姓名
huishoujilu	longtext		回收记录
huishoushijian	datetime		回收时间

（6）预约回收表是一个数据库表，用于记录预约回收站点的详细信息，包括创建时间、站点名称、站点规模、站点简介、站点地址、站点图片等。该表以id作为主键，自动记录创建时间。预约回收表表结构如表4-6所示。

表4-6 预约回收表

字段名称	类型	长度	字段说明	主键	默认值
id	bigint		主键	主键
addtime	timestamp		创建时间		CURRENT_TIMESTAMP
zhandianmingcheng	varchar	200	站点名称
zhandianguimo	varchar	200	站点规模
zhandianjianjie	longtext		站点简介
zhandiandizhi	varchar	200	站点地址
zhandiantupian	longtext		站点图片

（7）回收分配表是用于记录垃圾回收订单分配详情的数据库表，包括创建时间、垃圾名称、垃圾分类、垃圾图片、垃圾数量、回收地址、用户账号、姓名、手机、分配时间、回收账号、回收姓名、回收状态。该表通过id字段作为主键，自动记录创建时间（addtime），便于追踪每一笔回收记录的具体信息，确保垃圾分类回收流程的透明度和管理的便捷性。如表4-7所示。

表4-7 回收分配表

字段名称	类型	长度	字段说明	主键	默认值
id	bigint		主键	主键
addtime	timestamp		创建时间		CURRENT_TIMESTAMP
lajimingcheng	varchar	200	垃圾名称

表4-7 回收分配表（续表）

字段名称	类型	长度	字段说明	主键	默认值
lajifenlei	varchar	200	垃圾分类
lajitupian	longtext		垃圾图片
lajishuliang	varchar	200	垃圾数量
huishoudizhi	varchar	200	回收地址
yuyueshijian	varchar	200	预约时间
yonghuzhanghao	varchar	200	用户账号
xingming	varchar	200	姓名
shouji	varchar	200	手机
fenpeishijian	datetime		分配时间
huishouzhanghao	varchar	200	回收账号
huishouxingming	varchar	200	回收姓名
huishouzhuangtai	varchar	200	回收状态

（8）积分商品信息表用于维护可兑换商品的数据记录，主要包含以下字段：商品ID、上架时间、商品名称、商品描述、库存数量、兑换条件说明、所需积分值以及商品图片路径等。该表以自增ID为主键，自动记录商品创建时间（addtime字段），有效保障商品信息的完整性和可追溯性。具体表结构详见表4-8。

表4-8 积分商品表

字段名称	类型	长度	字段说明	主键	默认值
id	bigint		主键	主键
addtime	timestamp		创建时间		CURRENT_TIMESTAMP
shangpinmingcheng	varchar	200	商品名称
shangpinjianjie	longtext		商品简介
shangpinshuliang	int	200	商品数量
duihuanguize	longtext		兑换规则
duihuanjifen	int		兑换积分
shangpintupian	longtext		商品图片

（9）积分兑换表是一个详细记录积分兑换订单的数据库表，包括兑换单号、商品名称、商品图片、兑换数量、兑换积分、所需积分、收货地址、用户账号、

姓名、手机、用户积分、是否审核、审核回复等。该表以id为主键，自动记录订单的创建时间（addtime），是否审核状态默认为“待审核”。这个表结构旨在方便跟踪和管理每一笔积分兑换订单。积分兑换表表结构如表4-9所示。

表4-9 积分兑换表

字段名称	类型	长度	字段说明	主键	默认值
id	bigint		主键	主键
addtime	timestamp		创建时间		CURRENT_TIMESTAMP
duihuandanhao	varchar	200	兑换单号
shangpinmingcheng	varchar	200	商品名称
shangpintupian	longtext		商品图片
shangpinshuliang	int		兑换数量
duihuanjifen	int		兑换积分
jifen	int		所需积分
shouhuodizhi	varchar	200	收货地址
yonghuzhanghao	varchar	200	用户账号
xingming	varchar	200	姓名
shouji	varchar	200	手机
yonghujifen	int		用户积分
sfsh	varchar	200	是否审核		待审核
shhf	longtext		审核回复

5 系统实现

5.1 前台用户功能模块

用户访问系统时首先呈现的是首页界面，该页面顶部设有导航栏，包含以下功能入口：系统主页、社区动态、回收预约、积分商城、公告栏以及用户登录入口。首页界面布局如图5-1所示。

图5-1 系统首页界面图

5.1.1用户登录注册

该模块主要用于新增用户，用户首次使用垃圾分类回收网站时需要先进行注册。用户可以通过填写相关信息完成在垃圾分类回收网站中的注册。具体的用户注册界面如图5-2所示。

图5-2 用户注册界面图

用户在注册界面输入个人信息并完成表单验证（包括密码一致性检查等基本校验）。当所有前端验证条件满足后，注册请求将被发送至SpringBoot后端服务。服务端首先会查询数据库确认该用户是否已存在，若为新用户则通过MyBatis持久层框架将注册数据写入数据库。在此过程中，MyBatis的XML映射文件会将Java对象转换为标准的INSERT语句执行数据持久化操作。待数据库事务提交成功后，服务层生成注册响应数据，经由控制层返回给前端界面，最终向用户展示注册成功提示信息。

该模块可以阻止非注册用户进入并使用系统。用户可以通过输入正确的账号和密码来登录系统，以便于访问垃圾分类回收网站提供的各项服务和功能。详细的用户登录界面如图5-3所示。

图5-3 用户登录界图

在用户成功登录垃圾分类回收网站后，通过个人中心页面，用户可以方便地管理自己的个人信息，用户也可以点击页面显示的修改密码、订单信息、回收分配、回收记录、积分兑换、我的收藏进行操作。个人中心界面如图5-4所示。

图5-4 个人中心界面图

5.1.2用户预约回收

用户登录成功后，可以查看系统首页、社区资讯、预约回收、积分商品、社区公告。用户预约回收界面，用户可以在登录后的站点名称的搜索框中，输入关键字进行搜索，来查看和选择适合自己的回收站点，也可根据站点规模进行限定搜索条件。详细用户预约回收界面如图5-5所示。

图5-5 用户预约回收界面图

用户选择适合自己的站点后，点击进入预约回收详情界面，在此界面可以看到站点的详细信息及在线预约按钮，如图5-6所示。

图5-6 用户预约回站点详情界面图

用户点击在线预约按钮，进入用户预约回收基本信息界面，用户需根据回收物品详情进行填写及选择对应字段信息，用户信息字段根据登录用户信息自动带出，并显示积分奖励数量，用户填写完整后可以选择“提交”或“取消”。用户预约回收物品界面如图5-7所示。

图5-7 用户预约回收物品界面图

点击预约回收右下方的提交按钮，会调用页面内onSubmit方法，使用Axios发起POST请求后端/huishoujilu/add接口，接口内部通过insert()方法保存预约信息，对huishoujilu表做插入操作，操作成功后方法将会返回一个map集合，集合内部将会放置code属性，成功后将放入0值返回给前端，前端在then方法体中取得code值判断说明是否保存成功。相关代码如图5-8所示。

图5-8 用户预约回收物品代码实现图

5.1.3积分商品兑换

用户登录成功后，可以查看积分商品，用户可以在登录后的页面上方的搜索框中，输入商品名称进行搜索，来查看相应的积分商品信息。积分商品的模糊查询调用的是getList方法，内部使用Axios发起get请求后端jifenduihuan/list接口，接口内通过queryPage()方法查询jifenduihuan表得到结果后通过集合返回给前端。

如图5-9所示。

图5-9 积分商品界面图

用户还可以进行兑换操作，选择想要换购的产品后，查看物品详情后可以点击兑换按钮进行兑换。点击提交按钮后将会调用onSubmit方法，内部使用Axios发起POST请求到后端jifenduihuan/add接口，接口内部通过insert()方法将会对jifenduihuan表做插入操作，操作成功后方法将会返回一个map集合，集合内部将会放置code属性，成功后将放入0值返回给前端，前端在then方法体中取得code值判断说明是否保存成功。如图5-10所示。

图5-10 积分商品兑换界面图

用户在积分兑换页面填写相关信息后，系统会进行数据校验（包括积分是否充足、兑换数量是否有效等）。验证通过后，前端将数据封装成HTTP请求发送至后端服务器。SpringBoot框架接收到请求后，根据路由规则调用对应的控制器方法。控制器随后调用服务层进行业务处理，服务层通过MyBatis的Mapper接口与数据库交互，执行积分扣除、库存更新等操作。若数据库操作成功，服务层返回成功响应，控制器将其封装成HTTP响应返回前端。前端收到成功响应后，会立即更新页面显示的积分余额和商品库存信息。

5.2 管理员功能模块

5.2.1管理员登录界面

管理员在垃圾分类回收网站后台网站的登录界面中，首先需要进行身份验证。详细的管理员登录界面如图5-11所示。

图5-11 管理员登录界面图

后台管理员主要分为多个模块，分别是用户中心、用户、回收人员、文章类型、社区资讯、预约回收、订单信息、回收分配、回收记录、垃圾分类、积分商品、积分兑换等。具体的管理员首页如下图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 预约回收管理

管理员可以在预约回收界面进行预约回收站点的管理，包括增删改查操作，可以根据站点名称、站点规模，搜索到相应的预约回收，并进行增删改查操作。预约回收界面的模糊查询调用的是search方法，内部使用Axios发起get请求后端yuyuehuishou/page接口，接口内通过queryPage()方法查询yuyueshuishou表得到结果后通过集合返回给前端。该模块实现的界面如图5-16所示。

图5-16 预约回收界面图

预约回收代码如图5-17所示，此段代码定义了一个预约回收信息查询接口，通过@RequestMapping("/page")映射。接收查询参数和YuyuehuishouEntity对象，使用EntityWrapper和MPUtil.likeOrEq方法构建查询条件，结合MPUtil工具类处理排序、站点名称筛选和模糊匹配。然后，通过yuyuehuishouService.queryPage方法查询并返回匹配的预约回收信息，最终以成功消息和数据形式响应客户端。

图5-17 预约回收代码实现图

5.2.6 订单信息管理

管理员可以在订单信息界面进行订单信息的管理，包括增删改查操作，可以根据垃圾分类、垃圾状态，搜索到相应的订单信息，并进行增删改查操作。该模块实现的界面如图5-18所示。

图5-18 订单信息管理界面图

管理员选择要分配的订单，点击分配按钮进入订单分配界面，选择分配回收人员的账号、姓名，并可更改订单的回收状态。管理员分配订单模块实现的界面如图5-19所示。

图5-19 订单分配管理界面图

订单信息查询代码如图5-20所示，此段代码通过@IgnoreAuth实现了一个无需身份验证的接口，用于获取订单信息列表。通过@RequestMapping("/list")定义访问路径，接收查询参数和DingdanxinxiEntity对象。它使用EntityWrapper构造查询条件，并结合MPUtil工具类处理排序、垃圾分配筛选和模糊匹配。dingdanxinxiService.queryPage方法根据这些条件分页查询回收订单信息，最后将分页结果封装在响应体中返回。

图5-20 订单信息查询代码

5.2.6 回收分配管理

管理员进入回收分配功能模块，可以根据垃圾分类及回收状态，搜索到需要处理的订单列表，并进行增删改查操作。管理员回收分配订单界面如图5-21所示。

图5-21 回收分配订单管理界面图

管理员可以选择未回收状态的订单，点击回收按钮进入订单回收详情管理界面，点击提交，订单状态变为已回收。管理员回收分配订单状态模块实现的界面如图5-22所示。

图5-22 管理员订单状态管理界面图

5.3 回收人员功能模块

5.3.1 回收人员登录

回收人员在垃圾分类回收网站后台网站的登录界面中，首先需要进行身份验证。详细的回收人员登录界面如图5-23所示。

图5-23 回收人员登录界面图

5.3.2 回收人员首页

后台回收人员主要分为多个模块，分别是用户中心、回收分配、回收记录、首页等。具体的回收人员首页如下图5-24所示。

图5-24 回收人员首页界面图

5.3.3 回收分配管理

回收人员在回收分配界面查看所有分配给自己的回收订单任务，可以根据垃圾分类、回收状态，搜索到所需的订单信息。回收人员上门回收物品后，点击回收按钮进行订单状态确认。回收订单的模糊查询调用的是search方法，内部使用Axios发起get请求后端huishoufenpei/page接口，接口内通过queryPage()方法查询huishoufenpei表得到结果后通过集合返回给前端。回收人员订单回收界面图如图5-25所示。

图5-25 回收人员首页界面图

回收人员提交回收分配信息，表单数据被封装成一个HTTP请求发送到后端服务器，SpringBoot服务端接收HTTP请求，根据请求的URL和HTTP方法映射到相应的处理方法上，控制器调用服务层的方法进行业务逻辑的处理。服务层通过MyBatis的Mapper接口与数据库进行交互。如果数据库操作成功，服务层会返回一个表示成功的响应给控制器，控制器将这个响应封装成一个HTTP响应，返回给前端，前端接收到成功的响应后，提示操作成功。关键代码如图5-26所示。

图5-26 回收分配代码实现图

6 系统功能测试

软件测试是一个至关重要的环节，旨在核实系统是否圆满达成了项目初期所规划的各项功能目标。本章内容聚焦于依据系统功能性需求，对用户端与管理员端两大核心界面展开详尽的测试活动。这一过程不仅要求全面覆盖系统设计的每一个功能点，还强调了对这些功能点的用例进行深入细致的分析。在用户端测试方面，着重检验了用户界面的友好性、交互逻辑的流畅性以及各项功能的实用性，确保用户能够轻松上手并高效利用系统完成各项操作。在测试实施过程中，我们采用了科学的方法论，对每个模块逐一进行测试，不放过任何一个可能的漏洞或缺陷。这一严谨的流程不仅帮助我们准确捕捉到了系统中存在的问题，还为我们提供了宝贵的定位信息，使得问题能够迅速被识别并得到有效解决。

此外，我们深知软件测试的价值不仅在于发现错误，更在于通过持续的优化和改进，不断提升系统的稳定性和用户体验。因此，在测试过程中，我们不仅致力于发现并修复问题，还积极收集用户反馈，以便更好地理解用户需求，为用户提供更加优质的服务。总之，本章的测试工作不仅是对系统功能的一次全面体检，更是我们不断追求卓越、致力于提升用户满意度的坚定承诺。

从垃圾分类回收网站的功能需求来看，本系统主要包括了用户、回收人员端和管理员端三部分。

6.1用户员端功能测试

表6-1 用户端测试用例及其测试过程表

测试内容	执行操作	预期结果	测试结果
用户注册	打开注册界面，按规则输入符合的用户信息，点击注册按钮。	注册成功，用户收到注册成功通知，并能使用新注册的账号和密码登录系统。	符合预期
登录	填写登录用户的信息，点击登录按钮。	包括登录成功进入权限对应的功能首页界面，或返回登录失败信息。	符合预期
用户预约回收功能	用户登录成功后，点击用户预约回收按钮，选择回收站点，点击在线预约按钮。	成功进入预约回收功能界面，界面显示待用户填写的回收物品基本信息。	符合预期
在线预约回收功能	用户进入用户预约回收基本信息界面，根据回收物品详情进行填写及选择对应字段信息，用户信息字段根据登录用户信息自动带出，并显示积分奖励数量，填写完整后可以选择“提交”。	回收订单成功生成，并能在回收订单列表中看到生成的“未回收”状态订单。	符合预期

表6-1 用户端测试用例及其测试过程表（续表）

测试内容	执行操作	预期结果	测试结果
积分兑换功能	用户登录成功后，可以查看积分商品，选择要兑换的商品后，点击兑换按钮进行兑换。	当用户兑换数量未填写，默认0时，系统提示“兑换数量不能为控”； 当用户积分数量小于待兑换商品所需积分数量时，系统提示“所需积分不足”。	符合预期

6.2管理员端功能测试

表6-2 管理员端测试用例及其测试过程表

测试内容	执行操作	预期结果	测试结果
管理员登录	填写登录管理员的信息，点击登录按钮。	包括登录成功进入权限对应的功能首页界面，或返回登录失败信息。	符合预期
用户管理	进入用户管理页面，选择要修改的用户，修改用户信息（如回收姓名、联系方式、密码等），提交修改后的用户信息。	用户信息修改成功，并能在用户列表中看到更新后的信息。	符合预期
回收人员管理	进入回收人员管理页面，选择要删除的回收人员，点击“删除”回收人员信息。	用户信息在用户列表中删除成功。	符合预期
预约回收管理	管理员可以在预约回收界面进行预约回收站点的管理，选择要需要修改的预约修改站点，修改站点信息（如站点规模、站点地址等），提交修改后的站点信息。	预约回收站点信息修改成功，并能在列表中看到更新后的信息。	符合预期
订单信息管理	管理员选择要分配的订单，点击分配按钮进入订单分配界面，选择分配回收人员的账号、姓名，点击“提交”。	回收订单分配成功，并能在订单列表中看到已分配未回收的订单。	符合预期
回收分配管理	管理员可以选择未回收状态的订单，点击回收按钮进入订单回收详情管理界面，点击提交，订单状态变为已回收。	订单状态更新成功，并能在订单列表中看到已分配已回收的订单。	符合预期

6.3回收人员端功能测试

表6-3 管理员端测试用例及其测试过程表

测试内容	执行操作	预期结果	测试结果
回收人员登录	填写登录回收人员的信息，点击登录按钮。	包括登录成功进入权限对应的功能首页界面，或返回登录失败信息。	符合预期
回收分配管理	回收人员在回收分配界面查看所有分配给自己的回收订单任务，选择实际回收时间，点击回收按钮进行确认。	订单状态更新成功，并能在订单列表中看到已回收的订单信息。	符合预期

本文仅列举了几个测试用例及其测试过程，通过执行这些测试用例，可以验证系统在不同场景下的功能正确性和稳定性，确保系统能够满足用户的需求并提供良好的用户体验。

参考文献

1. 国务院办公厅.生活垃圾分类制度实施方案[J].中华人民共和国国务院公报,2017(17):5-9.
2. 国家发展改革委,住房城乡建设部.“十四五”城镇生活垃圾分类和处理设施发展规划[J]. 中国资源综合利用, 2021,39(12):1-10.
3. 张华,陈丽.国外垃圾分类经验及其对中国的启示[J].环境与可持续发展,2020,45(03):89-93.
4. 李强,王芳.人工智能在垃圾分类中的应用研究[J].计算机科学,2021,48(11):22-26.
5. 徐頔,朱光华,贾瑶.基于Vue.Js的WEB前端开发研究[J].科技风,2020(07):69.
6. 张静:基于Node.js的自适应浏览器高性能web应用平台研究[D].杭州电子科技大学硕士论文.2021.20-28.
7. 陈月,秦福建.web前端开发技术以及优化方向探究[J].信息与电脑, 2021(4):34-35.
8. 杜艳美,黄晓芳,面向企业级web应用的前后端分离开发模式及实践[J].西南科技大学学报,2020,33(2):83-87.
9. 张鹏飞,王乾,胡晓冬,杨明浩,崔明旺.基于Node.js和JS的前后端分离实现[J].软件,2022,40(04):13.
10. 江涛,谢世芳.web前端开发技术HTML5与CSS3的融合及未来发展趋势[J].电脑编程技巧与维护,2022(04):170-172.
11. You, E. "Vue: The Progressive JavaScript Framework" [J]. Evan You, 2019.
12. Filipova, O. "Learning Vue 2: Learn how to build amazing and complex reactive web applications easily with Vue" [M]. Packt Publishing, 2022.
13. Qu Xiaona. Application of Java Technology in Dynamic Web Database Technology[J]. Journal of Physics: Conference Series,2021,1744(4).
14. Bouamrane Karim,Matallah Houcine,Belalem Ghalem. Comparative Study Between the MySQL Relational Database and the MongoDB NoSQL Database[J]. International Journal of Software Science and Computational Intelligence (IJSSCI),2021,13(3).
15. Gore, A. "Full-Stack Vue 2 and Laravel 5: Bring the frontend and backend together with Vue, Vuex, and Laravel" [M]. Packt Publishing, 2022.