垃圾分类管理系统+SpringBoot + Vue (前后端分离)

大家好，今天给大家带来一个超级简单的 垃圾分类管理系统。大家可用学习下系统的设计和源码风格。

 

视频演示

https://githubs.xyz/show/a0d3ccc6-5e0c-4be8-b56e-8a425df48755.mp4

 

图片演示

 

 

 

 

 

 

 

 

技术栈

后端

技术框架：JDK8+SpringBoot2 + Mybatis

数据库：Mysql8

 

前端

- Vue.js 2.6.11 - 主要的前端框架，采用渐进式开发模式
- Vue Router 3.1.5 - 官方路由管理器，实现单页应用的路由功能
- Vuex 3.1.2 - 状态管理模式，集中式存储管理应用的所有组件状态

UI 组件库

Element UI 2.4.5 - 基于Vue 2.0的桌面端组件库，提供丰富的UI组件
- 使用了按需引入方式，包含Form、Button、Table、Dialog、Menu等多种组件
- 通过 vue-cli-plugin-element 插件集成

HTTP请求处理
- Axios 0.19.2 - Promise based HTTP库，用于发送异步HTTP请求
- Vue-Axios 2.1.5 - Axios的Vue.js插件版本
- qs 6.9.1 - 查询字符串解析和序列化库

地图功能
- vue-baidu-map 0.21.22 - 百度地图Vue组件库
- 集成了百度地图API，提供地图展示和本地搜索功能
- 使用百度地图AK密钥进行身份验证



完整源码+sql我已经整理清楚，移步：

githubs点xyz/product/664

 

系统功能概述

整个系统分为 管理员， 回收人员， 用户 三大角色，每个角色有着不同的功能。

管理员账号信息：  byc / 123456

回收人员账号信息：   fyk / 123456

用户账号信息： hyy / 123456

 

管理员角色

 

垃圾展示

根据垃圾所属的分类查询垃圾列表， 垃圾的分类有：“湿垃圾”，”干垃圾“，”有害垃圾“，”可回收垃圾“。垃圾的属性有”垃圾名称“，”垃圾图片“，”垃圾描述“。

垃圾管理

管理员可以新增垃圾，新增完垃圾后，需要再图片管理里面给垃圾添加图片。还可以批量删除垃圾，编辑垃圾属性。

 订单管理

管理员可以查看平台内所有用户发起的垃圾回收订单。

 

 

用户角色

垃圾展示

根据垃圾所属的分类查询垃圾列表， 垃圾的分类有：“湿垃圾”，”干垃圾“，”有害垃圾“，”可回收垃圾“。垃圾的属性有”垃圾名称“，”垃圾图片“，”垃圾描述“。 

垃圾回收

用户可以对可回收分类的垃圾进行发起回收，等待回收人员进行接单处理。回收时，支持批量选中垃圾，必须填垃圾数量，然后添加到购物车，就发起了回收。

回收订单

用户可以查看自己发起过的回收订单，订单显示垃圾名称，价格，订单状态（等待接单，已接单状态）。

当前位置

用户可以查看自己所在的位置，调用了百度地图API。

回收站搜索

用户可以查看百度地图内搜索的 ”废品回收“显示到页面上。

 

 

回收员角色

 订单接单

回收人员可以查看平台所有用户发起的垃圾回收单，然后根据请求进行接单，订单上面会显示垃圾信息，还有用户的信息（手机，地址等），回收人员可以根据信息联系到用户，然后上门回收垃圾。

接单后，其它回收人员无法看到此垃圾订单。

历史订单

回收人员可以查看自己历史接到的垃圾订单。

 

系统部署

 

执行sql


用户需要自己安装好mysql数据库，注意，必须是mysql8 ，否则代码运行会出错。


然后用navicate等连接工具，连接到mysql服务，然后新建一个 hadluo-gc 数据库， 然后执行 “hadluo-gc.sql” 里面的表创建和数据导入。

 

前端部署

vue项目部署

前端的项目必须没有中文，否则启动会报错！！

安装node ， 版本：v13.14.0 ， 安装完成后。 进入到项目 hadluo-vue 目录下，这个项目是vue的前端， 右键，运行cmd，运行下面命令：

 

npm run serve

 

由于我已经跟你npm install好了，所以你无需执行，直接run就可以了！！

到此前端项目部署完成。

 

启动后端项目


将maven设置的settings.xml改成你自己的配置。

 

 

然后刷新maven，等待项目下载依赖包完成。。。。。

然后部署后端 ， 打开idea， 导入maven工程 hadluo-server。


打开resources目录， 修改 application.yml 配置文件，主要修改下面几个信息：


数据库信息（注意改成你的地址）

spring.datasource.username=root
spring.datasource.password=qq123456
spring.datasource.url=jdbc:mysql://localhost:3306/hadluo-gc?useUnicode=true&zeroDateTimeBehavior=convertToNull&autoReconnect=true&characterEncoding=utf-8&serverTimezone=GMT%2B8

 

redis信息 （注意改成你的地址）

spring.redis.database=0
spring.redis.port=6379
spring.redis.host=localhost

 

图片存储信息（可以不用动）

# 文件上传路径配置
file.upload.path=D:/ftp/wxhadluo-gc
file.upload.url-prefix=http://127.0.0.1:${server.port}/file/get

 

然后启动 main 启动类 ：ApplicationContextUtil.class


浏览器访问


 http://localhost:8080

 

管理员账号信息：  byc / 123456

回收人员账号信息：   fyk / 123456

用户账号信息： hyy / 123456

 

注意每个账号需要不同的浏览器打开（或者你浏览器开无恒模式），否则会串token数据。

posted @ 2025-06-13 20:25  qq3993387644  阅读(53)  评论(0)    收藏  举报