简介本资源是一个基于SpringBootFlaskVueYOLOv5实现的前后端分离式目标检测系统面向计算机视觉初学者、深度学习实践者及Web全栈开发者解决图像/视频流中实时目标识别与结果可视化的核心问题适用于安防监控、农业病虫害识别如预览中的玉米病虫害检测、智能巡检等实际场景。压缩包共60个文件含28个Python脚本YOLOv5模型调用、Flask接口逻辑、24个YAML配置文件模型参数、训练超参、部署环境定义、4个pyc缓存文件及2个说明文档整体82.63MB结构清晰划分为flask端模型推理服务、web端Vue交互界面和springboot端业务中台便于模块化学习与二次开发。已有425人学习下载提供完整可运行工程、跨框架通信方案、YOLOv5轻量化部署实践及前后端联调关键配置助读者深入理解AI模型工程化落地全流程。1. 这不是又一个“YOLOv5 Vue”玩具Demo它真能接进产线当检测服务用且前后端完全解耦、模型热加载不重启上周帮某高校实验室调试一个图像检测系统他们原用的单体 Flask 服务在并发 8 路摄像头推流时 CPU 瞬间打满日志里全是OSError: [Errno 24] Too many open files。换上这个 SpringBoot Flask Vue YOLOv5 的分离式架构后实测稳定支撑 16 路 720p 视频流每路 5fps模型切换从「改代码 → 重启服务」压缩到「上传 .pt 文件 → 前端点一下刷新按钮」——整个过程不到 3 秒后端无任何进程重启。这不是概念验证是跑在树莓派 4B NVIDIA Jetson Nano 双平台验证过的工程方案。它把深度学习推理Flask、业务调度与权限SpringBoot、交互体验Vue彻底切开每个模块可独立部署、灰度升级、横向扩容。适合需要快速接入工业相机、IPC 流、或已有 Java 生态但想无缝集成 YOLO 检测能力的团队。如果你正被「模型更新要停服」「前端卡在 Flask 模板里改不动」「Java 后端硬塞 PyTorch 导致 GC 频繁」这些问题反复折磨这份源码就是你该立刻 clone 下来跑通的第一份真实可用的分离式目标检测工程模板。2. 架构拆解三层解耦不是口号是每个请求都走过的明确链路这个项目最值得细看的不是 YOLOv5 推理本身而是三层之间怎么「不粘连」地协作。SpringBoot 不碰一张图片、不加载一个模型Flask 不管用户登录态、不处理 HTTP 状态码逻辑Vue 不写一行 Python 或 Java。它们靠三类契约通信HTTP APISpringBoot ↔ Flask、WebSocketVue ↔ Flask、RESTful 资源路径Vue ↔ SpringBoot。下面按请求生命周期展开。2.1 SpringBoot 层业务中枢只管「谁在什么时候要什么结果」SpringBoot 在这里不做推理只做四件事统一认证与权限JWT RBAC支持角色粒度控制「查看检测列表」「上传新模型」「导出标注数据」检测任务调度接收 Vue 发来的检测请求生成唯一 task_id异步调用 Flask 接口轮询状态结果持久化将 Flask 返回的 JSON 检测结果 原图 URL 时间戳存入 MySQL含 spatial index 支持按地理围栏查模型元数据管理记录模型名称、版本、输入尺寸、置信度阈值、NMS IOU、是否启用 TTA全部存数据库供前端下拉选择核心配置在application.yml中定义 Flask 服务地址# application.yml detection: flask-host: http://127.0.0.1:5000 flask-timeout: 60000 # 必须设长因视频帧推理可能耗时关键逻辑在DetectionTaskService.java的submitTask()方法中// DetectionTaskService.java public TaskResult submitTask(DetectionTaskRequest request) { String taskId UUID.randomUUID().toString(); // 1. 先存任务到DB状态为 PENDING detectionTaskMapper.insert(TaskEntity.builder() .taskId(taskId) .userId(SecurityContext.getUserId()) .imageUrl(request.getImageUrl()) .modelVersion(request.getModelVersion()) .build()); // 2. 异步调用 Flask 推理接口使用 RestTemplate 自定义重试 CompletableFuture.supplyAsync(() - { try { return restTemplate.postForObject( flaskHost /api/v1/detect, new HttpEntity(request, headers), DetectionResponse.class ); } catch (Exception e) { throw new RuntimeException(Flask inference failed, e); } }).thenAccept(response - { // 3. 成功后更新DB状态为 SUCCESS并存结果 detectionTaskMapper.updateStatus(taskId, SUCCESS, response.getResults()); }).exceptionally(ex - { // 4. 失败则更新为 FAILED detectionTaskMapper.updateStatus(taskId, FAILED, ex.getMessage()); return null; }); return TaskResult.builder().taskId(taskId).status(PENDING).build(); }提示RestTemplate默认不支持异步回调这里用CompletableFuture包一层是常见做法。若你用 Spring Boot 3.x建议换成WebClient天然响应式。2.2 Flask 层纯推理引擎启动即服务零业务逻辑Flask 服务被打包成独立可执行模块app.py只做三件事加载模型、暴露/api/v1/detect接口、通过 WebSocket 推送实时进度。它不连接数据库、不校验 token、不处理分页——所有这些由 SpringBoot 完成。模型加载采用懒加载 单例模式避免启动慢# app.py from flask import Flask, request, jsonify from werkzeug.utils import secure_filename import torch from models.common import DetectMultiBackend from utils.general import non_max_suppression, scale_boxes import threading app Flask(__name__) _model_cache {} # {model_version: model_instance} _model_lock threading.Lock() def get_model(model_version: str): 线程安全的模型获取首次调用加载后续直接返回缓存 if model_version not in _model_cache: with _model_lock: if model_version not in _model_cache: weights fmodels/{model_version}.pt device torch.device(cuda if torch.cuda.is_available() else cpu) model DetectMultiBackend(weights, devicedevice, dnnFalse, datadata/coco128.yaml, fp16False) model.warmup(imgsz(1, 3, 640, 640)) # 首次推理前 warmup _model_cache[model_version] model return _model_cache[model_version]推理接口/api/v1/detect严格遵循 REST 规范只接收 JSON只返回 JSON# app.py app.route(/api/v1/detect, methods[POST]) def detect(): data request.get_json() image_url data.get(image_url) model_version data.get(model_version, yolov5s) conf_thres float(data.get(conf_thres, 0.25)) iou_thres float(data.get(iou_thres, 0.45)) # 1. 下载图片支持 http/https/file:// img download_image(image_url) # 实现见 utils/image_utils.py if img is None: return jsonify({error: Failed to load image}), 400 # 2. 预处理resize normalize add batch dim img_tensor preprocess_image(img) # shape: [1, 3, 640, 640] # 3. 推理 model get_model(model_version) pred model(img_tensor) # [1, num_anchors, 85] pred non_max_suppression(pred, conf_thres, iou_thres) # 4. 后处理转回原图坐标格式化为 JSON results [] for det in pred[0]: # det: [x1,y1,x2,y2,conf,cls] x1, y1, x2, y2, conf, cls det.tolist() results.append({ bbox: [int(x1), int(y1), int(x2), int(y2)], confidence: round(conf, 3), class_id: int(cls), class_name: model.names[int(cls)] }) return jsonify({ task_id: data.get(task_id, ), results: results, inference_time_ms: int((time.time() - start_time) * 1000) })注意download_image()函数必须支持file:///协议用于本地测试也支持http://用于 SpringBoot 传来的 OSS URL。这是工程落地的关键细节——很多 Demo 只支持 base64一上线就崩。2.3 Vue 层状态驱动 UI所有「动」都来自 API 响应Vue 项目结构清晰隔离views/Detection.vue是主页面api/detection.js封装所有调用store/modules/detection.js管理任务状态。它不关心模型在哪跑、用什么显卡只关心「我发了什么、收到了什么、下一步该显示什么」。核心逻辑在Detection.vue的startDetection()方法!-- Detection.vue -- script setup import { ref, onMounted } from vue import { useDetectionStore } from /store/modules/detection import { startDetection, getTaskResult } from /api/detection const detectionStore useDetectionStore() const imageUrl ref() const modelVersion ref(yolov5s) const taskStatus ref(IDLE) // IDLE / SUBMITTING / RUNNING / SUCCESS / FAILED const detectionResults ref([]) const startDetection async () { taskStatus.value SUBMITTING try { const res await startDetection({ imageUrl: imageUrl.value, modelVersion: modelVersion.value }) detectionStore.setTaskId(res.taskId) taskStatus.value RUNNING // 轮询结果实际项目建议改用 WebSocket此处为简化 const interval setInterval(async () { try { const result await getTaskResult(detectionStore.taskId) if (result.status SUCCESS) { clearInterval(interval) taskStatus.value SUCCESS detectionResults.value result.results } else if (result.status FAILED) { clearInterval(interval) taskStatus.value FAILED } } catch (e) { clearInterval(interval) taskStatus.value FAILED } }, 1000) } catch (e) { taskStatus.value FAILED } } /script提示生产环境务必把轮询换成 WebSocket。本项目flask_socketio已预留/socket.io/接口Vue 端只需引入socket.io-client并监听detection_result事件即可比轮询省 90% 请求量。3. 运行实操从零开始 10 分钟跑通全流程含树莓派适配要点别被四技术栈吓住——这个项目做了大量脚手架封装真正需要你手动敲的命令不超过 10 行。以下步骤在 Ubuntu 22.04 / macOS 13 / Windows WSL2 上均验证通过。重点标出树莓派 4BARM64的特殊处理项。3.1 环境准备分清「必须装」和「按需装」组件是否必须说明树莓派注意JDK 17✅SpringBoot 3.x 强制要求sudo apt install openjdk-17-jdkPython 3.9✅YOLOv5 官方推荐版本sudo apt install python3.9 python3.9-venvNode.js 18✅Vue 3.3 最低要求curl -fsSL https://deb.nodesource.com/setup_lts.xCUDA Toolkit❌仅 GPU 加速需要树莓派无 CUDA跳过Jetson Nano 用sudo apt install cuda-toolkit-11-4OpenCV-Python⚠️图片下载/预处理依赖pip3 install opencv-python-headless树莓派必须加-headless提示树莓派内存小pip3 install torch会失败。必须用官方 ARM wheelpip3 install https://github.com/KumaTea/pytorch-arm/releases/download/v1.12.1%2Bcpu/torch-1.12.1%2Bcpu-cp39-cp39-linux_armv7l.whl3.2 启动顺序严格按依赖链错一步全崩第一步启动 Flask 推理服务必须最先进入flask-inference/目录# 创建并激活虚拟环境防止污染系统Python python3.9 -m venv venv source venv/bin/activate # Linux/macOS # venv\Scripts\activate # Windows # 安装依赖注意requirements.txt 已剔除 torch/torchvision由你按硬件选装 pip install -r requirements.txt # 下载预训练模型yolov5s.pt约14MB wget https://github.com/ultralytics/yolov5/releases/download/v6.2/yolov5s.pt -P models/ # 启动服务默认端口5000如被占可改 app.py 中 app.run(port5001) python app.py✅ 验证浏览器访问http://localhost:5000/health应返回{status:ok}第二步启动 SpringBoot 服务进入springboot-backend/目录# 使用 Maven 打包无需安装全局Maven项目自带 mvnw ./mvnw clean package -DskipTests # 启动自动读取 application.yml java -jar target/springboot-backend-0.0.1-SNAPSHOT.jar✅ 验证访问http://localhost:8080/actuator/health返回{status:UP}且日志出现Flask service health check passed第三步启动 Vue 前端进入vue-frontend/目录npm install npm run dev✅ 验证浏览器打开http://localhost:5173看到检测页面上传一张图如test.jpg点击检测控制台应无报错Network 面板可见POST /api/v1/tasks和GET /api/v1/tasks/{id}请求成功。3.3 关键配置文件位置与修改指南Flask 模型路径flask-inference/models/—— 把你的.pt文件放这里model_version参数即文件名不含.ptSpringBoot 数据库springboot-backend/src/main/resources/application.yml—— 修改spring.datasource.url为你自己的 MySQL 地址Vue API 地址vue-frontend/vite.config.ts——server.proxy[/api]指向 SpringBoot 地址开发时反向代理生产环境由 Nginx 配置图片存储路径springboot-backend/src/main/resources/application.yml中file.upload-dir—— 默认./uploads确保有写权限注意树莓派上file.upload-dir务必设为绝对路径如/home/pi/uploads相对路径易因工作目录变化导致 404。4. 避坑指南这 4 个坑我替你踩过了血泪经验请收好项目跑通只是起点真正在产线用起来下面这些坑会反复让你怀疑人生。以下是我在树莓派 4B、Jetson Nano、以及 x86 服务器上实测总结的高频问题按「现象 → 原因 → 解决」给出可立即执行的方案。4.1 现象Flask 启动时报OSError: [Errno 99] Cannot assign requested address原因app.py中app.run(host0.0.0.0)在某些内网环境尤其 Docker 或树莓派 WiFi 热点无法绑定到所有接口。解决临时方案改app.run(host127.0.0.1)然后 SpringBoot 的flask-host改为http://127.0.0.1:5000长期方案用 Gunicorn 替代 Flask 内置 serverpip install gunicorn启动命令改为gunicorn --bind 0.0.0.0:5000 --workers 2 --timeout 300 app:app4.2 现象Vue 页面上传图片后SpringBoot 日志报org.springframework.web.multipart.MultipartException: Failed to parse multipart servlet request原因Vite 开发服务器默认不支持multipart/form-data而upload-dir配置未生效导致文件无法写入。解决确保springboot-backend/src/main/resources/application.yml中已配置spring: servlet: context-path: /api web: resources: static-locations: classpath:/static/,file:${file.upload-dir}/ file: upload-dir: /tmp/uploads # 必须是绝对路径且目录存在、有写权限手动创建目录并赋权mkdir -p /tmp/uploads chmod 777 /tmp/uploads4.3 现象YOLOv5 推理结果 bbox 坐标全为负数或远超图片尺寸原因preprocess_image()函数中 resize 逻辑错误未保持宽高比导致坐标映射失真。原始代码用cv2.resize(img, (640,640))是暴力拉伸必须改用 letterbox。解决替换utils/image_utils.py中的preprocess_imagedef preprocess_image(img): # 使用 YOLOv5 官方 letterbox保持宽高比 from utils.augmentations import letterbox img_resized letterbox(img, (640, 640), stride32, autoTrue)[0] img_normalized img_resized.transpose((2, 0, 1))[::-1] # BGR to RGB, HWC to CHW img_tensor torch.from_numpy(np.ascontiguousarray(img_normalized)).float() / 255.0 return img_tensor.unsqueeze(0) # 添加 batch 维度提示letterbox函数在utils/augmentations.py中若不存在请从 ultralytics/yolov5 仓库复制。4.4 现象树莓派上运行几小时后 Flask 进程内存暴涨至 2GB最终 OOM 被 kill原因PyTorch 在 ARM 设备上存在内存泄漏torch.no_grad()未包裹推理代码且模型未显式释放。解决在app.py的detect()函数中强制清理app.route(/api/v1/detect, methods[POST]) def detect(): # ... 前面代码不变 ... with torch.no_grad(): # 关键禁用梯度计算 pred model(img_tensor) pred non_max_suppression(pred, conf_thres, iou_thres) # 推理结束后立即释放 GPU 内存即使 CPU 模式也建议加 if torch.cuda.is_available(): torch.cuda.empty_cache() # ... 后续代码不变 ...5. 二次开发实战如何 30 分钟接入自定义模型 新增检测类型字段现在你已经跑通了基础流程接下来是最关键的一步把它变成你自己的系统。下面以「接入一个自定义的 PCB 缺陷检测模型classes: [short, open, misalign]并新增defect_type字段到结果 JSON」为例展示从模型准备到前端展示的完整改造链。5.1 模型侧不只是放个 .pt 文件还要告诉系统「你是谁」YOLOv5 模型不是黑匣子它依赖data.yaml描述类别。你的pcb_defect.pt必须配套一个pcb_defect.yaml# models/pcb_defect.yaml train: ../datasets/pcb/train/images val: ../datasets/pcb/val/images nc: 3 names: [short, open, misalign]然后修改flask-inference/app.py中的模型加载逻辑让get_model()能识别新模型# app.py def get_model(model_version: str): if model_version pcb_defect: # 指定 custom yaml data_yaml models/pcb_defect.yaml weights models/pcb_defect.pt model DetectMultiBackend(weights, devicedevice, dnnFalse, datadata_yaml, fp16False) else: # 原有 yolov5s/yolov5m 等逻辑 weights fmodels/{model_version}.pt model DetectMultiBackend(weights, devicedevice, dnnFalse, datadata/coco128.yaml, fp16False) # ... 后续 warmup 和 cache 逻辑不变5.2 SpringBoot 侧扩展数据库字段让新模型结果可存可查在springboot-backend/src/main/java/com/example/entity/TaskResult.java中新增字段public class TaskResult { private String taskId; private String status; private ListDetectionItem results; private String defectType; // 新增缺陷类型用于筛选 // getter/setter... } public class DetectionItem { private ListInteger bbox; private Double confidence; private Integer classId; private String className; private String defectType; // 新增每个检测框的缺陷类型 // getter/setter... }同步修改 MySQL 表结构假设表名为detection_resultALTER TABLE detection_result ADD COLUMN defect_type VARCHAR(32) DEFAULT NULL, ADD COLUMN class_name VARCHAR(64) DEFAULT NULL;5.3 Vue 侧前端展示新字段并支持按缺陷类型筛选在vue-frontend/src/views/Detection.vue的template中为结果表格新增一列el-table-column propdefectType label缺陷类型 width120 /并在detectionResults的数据处理中确保defectType被正确赋值// api/detection.js export function getTaskResult(taskId) { return request({ url: /tasks/${taskId}, method: get }).then(res { // 将后端返回的 results 映射为前端所需格式 res.data.results res.data.results.map(item ({ ...item, defectType: item.class_name // 直接用 class_name 作为 defectType也可根据业务规则映射 })) return res.data }) }最后在Detection.vue的搜索框下方加一个缺陷类型筛选器el-select v-modelfilterDefectType placeholder按缺陷类型筛选 clearable el-option label短路 valueshort / el-option label断路 valueopen / el-option label偏移 valuemisalign / /el-select !-- 在 el-table 上加 filter -- el-table :datafilteredResults !-- ... -- /el-table// script setup const filterDefectType ref() const filteredResults computed(() { if (!filterDefectType.value) return detectionResults.value return detectionResults.value.filter(item item.defectType filterDefectType.value) })5.4 验证闭环用一条命令触发端到端测试写一个test_pcb.sh脚本模拟真实场景#!/bin/bash # test_pcb.sh curl -X POST http://localhost:8080/api/v1/tasks \ -H Content-Type: application/json \ -d { image_url: https://example.com/pcb_test.jpg, model_version: pcb_defect, conf_thres: 0.3 } | jq .taskId /tmp/task_id.txt TASK_ID$(cat /tmp/task_id.txt | tr -d ) echo Submitted task: $TASK_ID sleep 5 curl http://localhost:8080/api/v1/tasks/$TASK_ID | jq .results[] | select(.defectType ! null)运行bash test_pcb.sh若输出包含short/open/misalign说明整条链路已打通。从那以后我每次接入新模型都强制走一遍「模型文件 yaml Flask 加载逻辑 DB 字段 Vue 展示」这四步 checklist再加一个test_xxx.sh脚本。不是为了炫技是避免某天凌晨三点被报警电话叫醒发现新模型上线后前端炸了却找不到哪一环漏了。希望帮到你。本文还有配套的精品资源点击获取