【开源】基于Vue.js的生活废品回收系统的设计和实现

本文主要是介绍【开源】基于Vue.js的生活废品回收系统的设计和实现，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

在这里插入图片描述

一、摘要

1.1 项目介绍

生活废品回收系统是可持续发展的解决方案，旨在鼓励人们分离和回收生活垃圾，减少环境污染和资源浪费，生活废品回收系统涵盖了城市居民的日常生活，包括收集、分类、处理和收集废物的完整过程。

本文提出了一种基于Vue技术的生活废品回收系统，该系统可以通过垃圾的收集和销售来支持回收记录、回收组织等的功能。通过实验测试，生活废品回收系统让废品回收的效率显著提高，让用户的参与率也有所提高，与此同时废物的回收率也有所提高。本文将为生活废品回收系统的推广和实施提供切实可行的解决方案和技术支持，有望在未来实现更广泛的应用。

前端：Vue 2.7.10
后端：Spring Boot 3.1.10
数据库：MySQL 8.0.31

1.2 项目详细录屏

https://www.bilibili.com/video/BV1g14y1Q7kk

二、研究内容

本系统的设计目标是开发一个生活废品回收系统，系统分资源求购者、资源出售者、系统客服、系统管理员权限，各角色权限如下：

资源求购者：能够查询他人发布的资源，进行求购、交易操作，能够查询自己的历史购买记录，能对系统客服进行留言式咨询。
资源出售者：能够发布闲置生活废品，对买家的求购进行二次确认操作，能够查询自己的历史出售记录，能对系统客服进行留言式咨询。
客服：能对资源求购者、出售者的咨询进行回复操作。
系统管理员：拥有生活废品管理系统的所有权限，包括用户管理、客服配置、角色管理、日志管理等。

生活废品回收系统的功能模块如下所示。

资源类型模块：用于维护生活废品的类型数据，支持新增、删除、修改、查询、导出生活废品的类型数据。
资源品类模块：用于维护生活废品的品类数据，支持新增、删除、修改、查询、导出生活废品的档案数据。
回收机构模块：用于维护回收机构数据，支持新增、删除、修改、查询、导出回收机构的数据。
资源求购单模块：用于维护求购者发布的求购单数据，支持发布、撤销、修改、查询、导出资源求购单的数据。
资源销售单模块：用于维护销售者发布的销售单数据，支持发布、撤销、修改、查询、导出资源销售单的数据。
资源交易单模块：用于维护交易单数据，支持从求购单或销售单生成资源交易单数据。
资源客服模块：资源求购者和销售者可以通过该模块，对系统客服发起留言式咨询操作，客服可以进行回复。
系统基础模块：包括用户档案模块、角色管理模块、日志管理模块

根据项目要求，前端采用Vue.js实现，系统后端要求采用springBoot实现，采用mybatisPlus读写数据库，数据库采用MySQL，采用Redis中间件作为数据缓存，最终实现生活废品回收系统的设计、开发和测试。

在这里插入图片描述

资源品类模块

资源有着不同的品类信息，有些是可回收，有些是不可回收，不同类型的资源需要分门别类的进行管理，生活废品回收系统之所以需要资源品类模块，是为了对该模块收集的垃圾进行分类和区分，便于统计和管理，通过识别垃圾类型，生活废品回收系统可以自动将垃圾分类到合适的垃圾箱中，实现垃圾的分离和收集。通过记录和统计不同类型废物的数量和重量等数据信息，生活废品回收系统可以实时监测和分析回收状态，以评估回收效果。同时，这些数据信息可以为各级政府部门提供有价值的垃圾收集数据，并指导相关政策的制定和调整，通过对不同类型的废物进行分离和分离，可以通过提供回收可回收废物等清晰高效的手段来实现废物的回收。如上所述，资源品类模块不仅实现了生活垃圾回收的便利性和效率，还促进了用户的参与和积极性，有助于实现废弃资源的再利用。

回收机构模块

资源收集起来之后，需要统一交给回收机构，由回收机构进行进一步处理，生活废品回收系统中回收机构模块是必要的，因为它可以提供一个平台来管理和协调每个环节，以实现废物的高效规范回收。回收组织可以根据城市产生的垃圾数量和类型，制定回收计划，按照计划对垃圾进行组织管理，确保回收工作有序开展，根据垃圾收集计划，回收机构可以建造和布置回收点，例如安装智能垃圾箱和标志牌。定期检查和维护回收点，以确保回收设施的高效运行，回收机构可以对回收人员进行培训和管理，提高工作水平和服务意识，为用户提供回收服务，通过物联网技术和云计算技术，回收机构可以实时分析回收数据，了解回收情况和问题，并进行适当的调整和优化，如上所述，回收机构模块为生活垃圾回收系统提供了一个统一的管理和协调平台，可以实现垃圾的高效、规范回收，促进社会资源节约和环境保护的发展。

资源订单模块

有了资源品类数据和资源交易数据之后，用户就可以在系统上交易资源了，资源订单模块是用于维护生活废品的交易订单，生活废品回收系统需要资源订单模块，主要是鼓励用户参与垃圾收集，资源交易方法用于回收废物并使其价值最大化。具体而言，资源订单模块可以将废物收集转变为可持续的商业模式，促进废物收集的有效推广和应用，该模块允许用户通过奖励等方式参与回收活动，例如如果用户收集了一定数量的废物，他们可以获得一定数量的奖励。这些奖励可以用于交换家庭用品、礼品卡等，资源订单模块也可以用于以资源交易市场的形式交易回收的废物，例如可以通过再制造和拆解旧部件来生产具有高附加值的新产品和部件，从而提高废旧电器的回收价值。因此，资源订单模块不仅可以鼓励用户参与垃圾收集活动，还可以促进垃圾的再利用和价值最大化，这对生活废品回收系统的实际应用和普及具有重要意义。

客服咨询模块

在生活废品回收系统中，客服咨询模块可以提供在线客服，让用户在使用生活废品回收系统时可以轻松咨询和解决问题。在生活废品回收系统的过程中，用户可能会面临各种问题，如操作不当和收集规则不明确。客户咨询模块为用户提供即时问题和支持，客服咨询模块可以提高用户满意度，通过在线咨询服务，生活废品回收系统可以提高用户的兴趣和服务质量，提高用户对系统的信心和满意度。客服咨询模块可以提供反馈渠道，客户咨询模块可以向用户提供反馈渠道，这样用户可以解决问题并向系统管理员提出建议、反映问题，可以改进和生活废品回收系统。客服咨询模块可以支持数据分析，记录用户的咨询状态和反馈内容，为生活废品回收系统运行提供数据分析和支持，并提供用户的需求和反馈。如上所述，客服咨询模块是垃圾收集系统中非常重要的功能模块，可以为用户提供在线客户服务，解决用户的问题，提高用户的满意度，生活垃圾收集系统的客服咨询模块可以为用户提供更好的服务，不断优化和提高其功能和服务质量。

三、界面展示

3.1 登录注册

在这里插入图片描述

3.2 资源类型&资源品类模块

在这里插入图片描述

@RequestMapping(value = "/getByPage", method = RequestMethod.GET)
@ApiOperation(value = "查询资源类型")
public Result<IPage<ResourceType>> getByPage(@ModelAttribute ResourceType resourceType ,@ModelAttribute PageVo page){QueryWrapper<ResourceType> qw = new QueryWrapper<>();if(!ZwzNullUtils.isNull(resourceType.getTitle())) {qw.like("title",resourceType.getTitle());}IPage<ResourceType> data = iResourceTypeService.page(PageUtil.initMpPage(page),qw);return new ResultUtil<IPage<ResourceType>>().setData(data);
}

在这里插入图片描述

@RequestMapping(value = "/insert", method = RequestMethod.POST)
@ApiOperation(value = "新增资源类型")
public Result<ResourceType> insert(ResourceType resourceType){iResourceTypeService.saveOrUpdate(resourceType);return new ResultUtil<ResourceType>().setData(resourceType);
}@RequestMapping(value = "/update", method = RequestMethod.POST)
@ApiOperation(value = "编辑资源类型")
public Result<ResourceType> update(ResourceType resourceType){iResourceTypeService.saveOrUpdate(resourceType);return new ResultUtil<ResourceType>().setData(resourceType);
}

在这里插入图片描述

3.3 回收机构模块

在这里插入图片描述

@RequestMapping(value = "/getByPage", method = RequestMethod.GET)
@ApiOperation(value = "查询资源回收机构")
public Result<IPage<ResourceOrganization>> getByPage(@ModelAttribute ResourceOrganization resourceOrganization ,@ModelAttribute PageVo page){QueryWrapper<ResourceOrganization> qw = new QueryWrapper<>();if(!ZwzNullUtils.isNull(resourceOrganization.getTitle())) {qw.like("title",resourceOrganization.getTitle());}if(!ZwzNullUtils.isNull(resourceOrganization.getAddress())) {qw.like("address",resourceOrganization.getAddress());}IPage<ResourceOrganization> data = iResourceOrganizationService.page(PageUtil.initMpPage(page),qw);return new ResultUtil<IPage<ResourceOrganization>>().setData(data);
}

在这里插入图片描述

@RequestMapping(value = "/insert", method = RequestMethod.POST)
@ApiOperation(value = "新增资源回收机构")
public Result<ResourceOrganization> insert(ResourceOrganization resourceOrganization){iResourceOrganizationService.saveOrUpdate(resourceOrganization);return new ResultUtil<ResourceOrganization>().setData(resourceOrganization);
}@RequestMapping(value = "/update", method = RequestMethod.POST)
@ApiOperation(value = "编辑资源回收机构")
public Result<ResourceOrganization> update(ResourceOrganization resourceOrganization){iResourceOrganizationService.saveOrUpdate(resourceOrganization);return new ResultUtil<ResourceOrganization>().setData(resourceOrganization);
}