简介这是一份面向高校课程设计与毕业设计的垃圾分类完整项目源码适合计算机、数学、电子信息等专业学生参考借鉴。项目采用前后端分离架构小程序端基于SpringBootuniapp实现集成文字识别、语音识别、图片识别功能后台管理系统由vue-element-admin搭建页面SpringBootDubbo提供后端服务可作为学习微服务架构、AI识别接口集成与前后端协作的实战范例。整套资源共1289个文件压缩包约101.53MB以352个Java源码、159个Vue组件、133个JS脚本为主体辅以png/jpg等界面图片、SQL数据库脚本及项目说明文档目录结构清晰便于按模块查阅与二次开发。目前已有136人学习使用读者可将其用于课题演练、功能扩展或答辩讲解从中理解完整业务闭环与工程化组织方式。1. 一个垃圾分类源码包最怕的不是代码而是跑不起来“垃圾分类源码项目说明小程序端后台管理系统后端服务.zip”这个压缩包解压之后大概率是四个目录加一个 Markdown 文件。目录名叫miniapp或weapp、admin、server项目说明里写着“环境要求JDK 1.8 / Node 14 / MySQL 5.7”。真正劝退大多数人的不是分类算法而是三端怎么启动、端口怎么配、数据库脚本往哪儿导、小程序又怎么指向本地后端——这些步骤那几页项目说明通常写得含含糊糊。这类项目的本质是一个分层架构小程序端负责 C 端交互搜索、拍照、分类浏览后端服务提供 REST API 和业务逻辑后台管理系统面向管理员维护垃圾分类数据。想从压缩包变成能演示的成品关键路径只有一条先后端、再小程序、最后后台顺序反了就会陷入“小程序报错找不到接口、后台登不进去”的连环坑。下面按这个顺序讲所有命令和参数都照着能直接敲的状态写。2. 后端服务先让 MySQL 和 Spring Boot 的 API 跑通后端起不来小程序端和后台管理系统都是空壳。拿到压缩包后先从项目说明里确认后端技术栈——这类项目最常见的组合是 Spring Boot 2.x MyBatis Plus MySQL Redis缓存可选。如果你的包是 Node.js 版操作路径完全一样只是启动命令和配置文件名不同排查思路通用。2.1 从项目说明里找出数据库和 JDK 版本要求项目说明一般会写明“JDK 1.8、MySQL 5.7、Redis 6.0如需要”。不要直接双击启动先看三处pom.xmlMaven 项目或build.gradle确认 Spring Boot 版本2.x 对应 JDK 83.x 对应 JDK 17。application.yml或application.properties这是后端与数据库、Redis 对接的唯一配置文件。sql/或db/目录通常会放garbage.sql或init.sql这是数据初始化的关键文件。常见做法是先把数据库脚本导入 MySQL再改 YAML 里的连接串最后启动。如果你连 MySQL 都还没装那么用 Docker 是最省事的方案# 启动 MySQL 5.7root 密码设为 123456端口映射到宿主机 3306 docker run -d --name garbage-mysql \ -p 3306:3306 \ -e MYSQL_ROOT_PASSWORD123456 \ -e MYSQL_CHARACTER_SET_SERVERutf8mb4 \ -e MYSQL_COLLATION_SERVERutf8mb4_unicode_ci \ mysql:5.7这段命令做了三件事固定容器名garbage-mysql方便后续管理把容器内 3306 映射到宿主机设置 utf8mb4 字符集避免垃圾分类名称中文乱码。字符集这一步经常被忽略MySQL 默认latin1会导致查询“厨余垃圾”返回空结果不是代码问题是编码问题。2.2 建库、导 SQL、改 application.yml 的连接串进入 MySQL 建库再导入项目说明里带的 SQL 文件# 进入容器内的 MySQL 交互终端 docker exec -it garbage-mysql mysql -uroot -p123456 # 在 MySQL 终端里执行 CREATE DATABASE IF NOT EXISTS garbage DEFAULT CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci; USE garbage; SOURCE /path/to/your/sql/garbage.sql; # 本机路径注意用绝对路径如果项目说明里只有一个压缩包、没有独立 SQL 文件那 SQL 可能在后端resources目录下以schema.sql和data.sql形式存在Spring Boot 启动时可通过配置自动执行。无论如何核心目标是让garbage库里出现类似garbage_item、garbage_category、admin_user这三张表。接着改application.yml。多数模板项目的默认配置是server: port: 8080 spring: datasource: url: jdbc:mysql://localhost:3306/garbage?useUnicodetruecharacterEncodingutf8useSSLfalseserverTimezoneAsia/Shanghai username: root password: 123456 driver-class-name: com.mysql.cj.jdbc.Driver redis: host: localhost port: 6379这里重点看两个参数serverTimezoneAsia/Shanghai不加会报时区异常useSSLfalse是本地连接常见配置生产环境才需要证书。如果你的项目是 MySQL 5.x 且用旧驱动driver-class-name写成com.mysql.jdbc.Driver也能跑但新驱动类名是带cj的项目说明里大概率已经写好改了才有问题。2.3 垃圾分类 API 的三个核心接口和启动命令垃圾分类后端做的最核心的事不是分类算法而是“按名称查类别”和“按类别查列表”。业务上通常对应三个接口接口路径请求方式作用典型参数/api/garbage/searchGET按垃圾名称搜索分类结果name香蕉皮/api/garbage/category/{id}GET查询某个分类下的垃圾列表id1可回收物/api/garbage/delete/{id}DELETE删除错误录入的垃圾数据id42启动命令分两种。Maven 项目用mvn spring-boot:run打包后运行用java -jarcd server # Maven 方式启动首次会自动下载依赖较慢 mvn spring-boot:run # 或者先打包再启动 mvn clean package -DskipTests java -jar target/garbage-server-1.0.0.jar启动日志里看到Tomcat started on port(s): 8080之后用 curl 验证接口是否通curl http://localhost:8080/api/garbage/search?name香蕉皮正常返回 JSON 里应包含分类名称和投放建议。如果返回 404先看控制台有没有No mapping found说明控制器路径和前端请求路径不一致去代码里全局搜RequestMapping看前缀是/api还是没写。如果直接 Connection refused检查 8080 是否被占用macOS/Linux 用lsof -i :8080Windows 用netstat -ano | findstr 8080。提示项目说明里如果写了 Redis 配置但你没装 RedisSpring Boot 启动不会失败但登录接口可能报连接超时。可以先注释掉 Redis 相关依赖和配置把登录逻辑降级为 MySQL 校验能跑通演示再补基础组件。3. 小程序端修改域名校验、把 request 指向本机接口后端接口通了的标志是 curl 能拿到 JSON接下来打开微信开发者工具。小程序端目录特征很明显—里面有app.json、pages/、utils/。这个环节最容易卡住的是两个问题导入项目时 AppID 怎么填wx.request请求本地接口为什么报url not in domain list。3.1 微信开发者工具导入项目别急着填 AppID打开微信开发者工具选择“导入项目”目录选miniapp所在文件夹。AppID 一栏个人开发者可以在项目说明里找有没有注册好的 AppID没有就用测试号。测试号可以直接体验接口调用但部分能力受限比如不能发布。不使用 AppID 而选择“游客模式”是跑不起来的因为小程序框架要求合法 AppID 才能正常编译。导入之后不要急着点编译。先确认两处配置// project.config.json检查 appid 字段是否有值 { appid: wx1234567890abcdef, projectname: garbage-miniapp, setting: { urlCheck: false } }urlCheck: false是让小程序在本地开发时跳过域名合法性校验。没有这一步wx.request请求http://localhost:8080会被拦截报错信息长这样URL 不是合法域名请在 mp 后台配置 request 合法域名。如果你在开发者工具右上角“详情-本地设置”里勾选了“不校验合法域名、web-view业务域名、TLS 版本以及 HTTPS 证书”效果等同但project.config.json里的配置能保证团队里其他人克隆项目后不用手动勾选。3.2 全局搜索 baseURL小程序端连着本地后端的唯一入口小程序请求后端接口的方式一般分两种wx.request直接写完整 URL或封装在utils/request.js里统一管理。拿到源码后在miniapp目录下全局搜索http://或https://把每个出现的域名都换成http://localhost:8080真机调试时改成你电脑的局域网 IP比如http://192.168.1.100:8080。常见封装是这样// utils/request.js const BASE_URL http://localhost:8080; function request(path, method GET, data {}) { return new Promise((resolve, reject) { wx.request({ url: ${BASE_URL}${path}, method: method, data: data, header: { Content-Type: application/json, Authorization: wx.getStorageSync(token) || }, success: (res) { // 业务状态码 200 才走成功分支 if (res.data.code 200) { resolve(res.data); } else { wx.showToast({ title: res.data.message, icon: none }); reject(res.data); } }, fail: (err) { wx.showToast({ title: 网络请求失败, icon: none }); reject(err); } }); }); } module.exports { request, BASE_URL };这里的关键参数是url和header。BASE_URL变量决定了整个小程序面向的服务端地址注意真机预览时不能写 localhost——真机的 localhost 是手机自己。开发时可以用开发者工具的“真机调试”配合“不校验域名”选项局域网请求也能通。Authorization头存登录后的 token后端的拦截器通过这个字段识别用户身份如果小程序登录接口没对接上后续一切带鉴权的请求都会 401。3.3 搜索、分类和误投递修正对应后端的哪个接口垃圾分类小程序的页面结构翻开源码通常能对应到如下接口调用页面关键接口参数说明首页搜索GET /api/garbage/searchname鸡蛋壳关键词包含匹配分类页GET /api/garbage/category/list无返回所有分类分类详情GET /api/garbage/category/{id}id2返回某分类下垃圾列表拍照识别若有POST /api/garbage/imagefileFile图片上传并返回识别结果搜索接口是最常踩坑的。后端一般用 SQL 的LIKE % #{name} %做模糊查询这会导致“香蕉”“香蕉皮”“香蕉树”都能搜到但“香蕉皮”搜不到“香蕉”的别名。别担心这是接口语义设计问题不是你的责任。要验证小程序和后端是否连通在首页搜索框输入“剩饭”能返回“厨余垃圾”链路就是通的。如果返回空去后端控制台看 SQL 日志确认传进去的参数有没有 URL 编码问题中文乱码在 GET 请求里高频出现。提示开发者工具里 Network 面板可以看到每个请求的耗时和响应体排查请求参数错误比看后端日志更直观。小程序端的抓包原理和 Charles、Burp Suite 抓电脑端微信小程序一致本质是给 HTTP 层加代理后面第五章会细讲。4. 后台管理系统Vue3 前端与后端数据看板的联调后台管理系统目录一般叫admin或admin-web技术栈从近几年源码包的分布看Vue3 Element Plus 或 Vue2 Element UI 二选一。这类系统做的事情很明确管理员登录然后对垃圾分类条目做增删改查——因为垃圾分类标准会随城市政策变化比如某些城市把大棒骨归为其他垃圾而不是厨余垃圾后台需要能改数据而不是改代码。4.1 安装依赖先过三关node版本、registry、proxy进入admin目录后首先执行npm install经常遇到的问题集中在这三个# 第一关确认 Node 版本Vue3 项目要求 Node 14.18 / 16 node -v # 第二关npm 换国内镜像装依赖速度差异极大 npm config set registry https://registry.npmmirror.com # 第三关重新安装依赖 npm install如果node_modules装完但npm run dev报Error: error:0308010C:digital envelope routines::unsupported那是 Node 17 与旧版 Webpack 的哈希算法冲突。项目说明里如果写了 Webpack 4最省事的解法是设置环境变量# macOS / Linux export NODE_OPTIONS--openssl-legacy-provider # Windows PowerShell $env:NODE_OPTIONS--openssl-legacy-provider启动成功后控制台会显示Local: http://localhost:9528/Vue2 模板常用 9528Vue3 的 Vite 模板常用 5173端口号去vite.config.js或vue.config.js里看。4.2 登录态怎么往下传token 和拦截器打开页面第一眼是登录表单默认账号密码在项目说明里通常写明了常见组合是admin / admin123也有把密码 MD5 后塞进 seed 数据的。跨过登录这关之后所有数据请求都要带 token后台管理系统的实现思路和小程序完全一致只是从wx.request换成了 axios。// src/utils/request.jsaxios 拦截器的标准写法 import axios from axios; import { ElMessage } from element-plus; import router from /router; const service axios.create({ baseURL: /api, // 走 vite 代理而不是硬编码 timeout: 10000 }); // 请求拦截器统一注入 token service.interceptors.request.use(config { const token localStorage.getItem(admin_token); if (token) { config.headers[Authorization] Bearer ${token}; } return config; }, error Promise.reject(error)); // 响应拦截器401 跳登录业务码非 200 弹错误 service.interceptors.response.use( response { const res response.data; if (res.code ! 200) { ElMessage.error(res.message || 请求失败); if (res.code 401) { router.push(/login); } return Promise.reject(new Error(res.message)); } return res; }, error { ElMessage.error(error.message); return Promise.reject(error); } );有个细节值得注意baseURL: /api配合开发服务器的代理能完美绕开跨域问题。你不需要去后端加CrossOrigin只需要在vite.config.js里配一段// vite.config.js export default defineConfig({ server: { port: 9528, proxy: { /api: { target: http://localhost:8080, // 后端服务地址 changeOrigin: true, // 如果后端接口本身没有 /api 前缀这里做一次重写 // rewrite: path path.replace(/^\/api/, ) } } } });changeOrigin: true会伪装请求来源避免后端校验 Origin 时报跨域错。这里最容易踩的坑是路径前缀后端如果用的是/garbage而不是/api/garbage那你需要在rewrite里做一次替换而不是改 axios 的baseURL。在浏览器的 Network 面板里看请求路径如果出现 404 但请求前缀看着不对八成是这个代理配置没配对。4.3 表结构、数据管理页与后端 CRUD 的对应关系垃圾分类后台管理页面的核心表是garbage表对应页面里的“垃圾管理”菜单。它的字段设计在项目说明中通常有一节但也经常被人忽略这里抓一份常见结构供对照字段名类型说明idint主键自增namevarchar(100)垃圾名称如“香蕉皮”category_idint外键关联分类表descriptionvarchar(255)投放说明或处理流程keywordvarchar(255)搜索引擎快速匹配用关键词statustinyint1 上架 / 0 下架create_timedatetime创建时间新增一条垃圾数据的请求链路是后台表单 →/api/garbage/add→ Service 层查重 → Mapper 层insert→ 返回新记录 ID。你在后台页面点击“新增”后报 500去后端日志看有没有Duplicate entry关键字有就是填了重复名称。这种错误几乎每个用这套模板的人都遇过不是代码 bug而是设计上就打算让你先搜索再确认是否已存在。5. 三端联调抓包与常见报错的排查路径三端各自都通之后最终要演示的效果是小程序搜索“电池”返回“有害垃圾”后台管理系统里能看到搜索记录或修改数据后小程序同步变化。联调用的核心工具是 Charles它能同时看到小程序端和后台管理系统发出的 HTTP 请求是定位“前端参数没传对”还是“后端逻辑有错”的分水岭。5.1 小程序 request 报错的三张速查表联调阶段最常见的三类报错可以直接照表排查报错提示原因处理request:fail后端服务没启动 / 网络不通先 curl 后端接口确认 8080 有响应url not in domain list域名合法性校验未关闭勾选“不校验合法域名”或配置urlCheck: falseerrno: 600001请求超时检查后端日志多半是数据库慢查询或接口逻辑阻塞5.2 用 Charles 看小程序请求有没有到后端Charles 抓取电脑端微信小程序的步骤很固定电脑和手机连同一局域网Charles 开启 SSL Proxying手机 Wi-Fi 代理指向电脑 IP 的 8888 端口再安装 Charles 根证书。实际操作时在开发者工具里直接点“真机调试”也能看到 Network 请求但 Charles 能看到请求头和响应体的完整细节还能做断点改包。举例小程序搜索“塑料瓶”返回空列表你在 Charles 里看到的请求是GET /api/garbage/search?name%E5%A1%91%E6%96%99%E7%93%B6先确认 URL 中文是否正常编码。如果参数没编码字符传到后端会被截断或变形。另一种情况是响应里code: 500那就直接定位到后端日志不需要在小程序端猜。后台管理系统的联调同理浏览器里按 F12 打开开发者工具“网络”标签页里过滤 XHR/Fetch 请求看响应体的message字段。后端接口在 Controller 里通常会做全局异常捕获返回{code: 500, message: 数据库查询失败}这一条信息量足够你直接去 Service 层打断点。5.3 把数据库脚本整理成可回放的种子数据最后一个值得养成的习惯是不管源码包里有没有garbage.sql跑通之后自己导出一份干净的种子数据脚本这是项目说明里最容易缺失的环节。# 导出垃圾分类库的全部数据包含建表语句 mysqldump -uroot -p123456 \ --default-character-setutf8mb4 \ --databases garbage \ garbage_seed.sql然后在新环境验证一次回放docker exec -i garbage-mysql mysql -uroot -p123456 garbage_seed.sql。这个操作的价值在于无论你把项目发给同事还是换一台电脑五分钟内就能把数据库恢复到和当前一致的状态不被项目说明里那句“数据库文件过大请自行导入”卡住。如果你的包本身有完整 SQL 文件这一步可以跳过但用--databases参数导出的脚本自带CREATE DATABASE语句能少敲一次建库命令。垃圾分类项目最核心的数据资产就是分类表和垃圾名称表的完整性——你新增的词条越多搜索命中率越高演示时用户随便输入一个垃圾名都返回正确结果这个项目就成功了一大半。数据整理的优先级永远高于调接口和改页面样式。本文还有配套的精品资源点击获取