作为计算机专业学生或初入职场的开发者，一款兼顾技术深度与实际应用场景的项目，不仅能提升技术能力，更能成为简历中的亮眼亮点。

本文将聚焦水果检测系统的核心功能实现，结合实际操作演示解析技术落地逻辑，同时简要梳理系统技术栈，为大家提供可复用的开发参考。

一、系统技术栈精简概览

为实现 “前端交互流畅、后端支撑稳定、AI 检测精准” 的目标，系统选用企业级主流技术组合，核心栈如下：

• 前端：Vue 3+TypeScript（主框架）、Ant Design Vue（UI）、Tailwind CSS+DaisyUI（样式）、Vite（构建）、Pinia+Vue Router（状态与路由）、Axios（请求）、ECharts（可视化）

• 后端：Django 5.2.6+DRF 3.14.0（接口）、Channels 4.0.0（实时通信）、SQLite+Redis（数据存储与缓存）、JWT+RBAC（认证权限）

• AI/ML：YOLO11（目标检测）、OpenCV（图像处理）、NumPy（数值计算）

• 架构：前后端分离 + 模块化设计，支持插拔式扩展

二、系统核心功能演示与技术落地逻辑

结合用户端，以下从 “功能场景 + 技术实现” 双维度，解析各模块的核心逻辑，截图让技术细节自然融入：

首页：数据可视化概览（ECharts+Redis+Django ORM）

进入用户端后，首页通过ECharts渲染的图表，直观展示核心数据

从技术落地看，前端通过Axios调用后端统计接口时，会在请求头携带JWT Token（由 Pinia 全局管理），确保接口访问权限；后端接收请求后，优先从Redis读取近 24 小时缓存数据，若缓存失效，再通过Django ORM查询 SQLite 数据库，聚合检测记录后返回 JSON 格式结果，既减少数据库压力，又提升页面加载速度。

YOLO 检测模块：单图 / 多图检测（YOLO11+OpenCV+Django Celery+FormData）

作为系统核心功能，检测模块的技术落地逻辑直接决定用户体验，分两种场景解析：

• 单图检测：用户点击上传图片后，前端通过FormData格式封装文件（避免数据丢失），经Axios发送至后端；后端先调用OpenCV对图片做预处理 —— 缩放至 YOLO11 模型适配尺寸（640×640）、高斯降噪去除干扰像素，再加载 YOLO11 预训练模型进行推理，通过NumPy处理模型输出的张量数据，提取水果类别、置信度、bounding box 坐标；最后后端生成标注后的图片 URL，与检测结果一同返回前端，前端用Ant Design Vue的 Modal 组件弹窗展示结果，标注图通过 Vue 的 v-bind 指令动态渲染。

• 多图批量检测：为避免多图同时处理导致的接口阻塞，后端引入Django Celery实现异步任务调度 —— 用户上传多张图片后，前端通过Pinia记录上传进度，后端生成唯一任务 ID 返回；Celery worker 进程异步调用 YOLO11 模型批量检测，过程中通过Channels（WebSocket 协议）实时推送任务进度（如 “3/5 张检测完成”）；检测全部完成后，后端将结果汇总存入 SQLite，前端通过轮询或 WebSocket 获取最终结果，支持用Ant Design Vue的 Table 组件批量展示，且表格列可通过Vue Router的路由守卫控制 —— 普通用户仅看结果，管理员可查看模型推理耗时等详情（基于 RBAC 权限控制）。

检测历史：数据管理与导出（DRF 分页 + Pinia+openpyxl+Tailwind CSS）

点击 “检测历史” 模块，页面会展示用户所有过往记录，支持按 “时间、水果类别、检测结果” 筛选 —— 前端通过Pinia存储筛选条件（如 “近 7 天 + 苹果 + 异常”），每次筛选时触发Axios请求后端接口；后端基于DRF实现分页查询，通过 DRF 的 FilterSet 类处理筛选参数，从 SQLite 读取数据后，按 “每页 10 条” 返回，避免大数据量导致的前端渲染卡顿。

数据导出功能的技术逻辑更具体：用户点击 “导出 Excel” 后，前端传递当前筛选条件至后端，后端调用openpyxl库创建工作簿，将筛选后的检测记录（时间、图片名、类别、结果）写入工作表，生成 Excel 文件流；再通过 DRF 的 FileResponse 返回文件，前端接收后通过window.URL.createObjectURL创建下载链接，实现 “点击即下载”，且导出按钮用Tailwind CSS的 hover 样式优化交互，提升用户体验。

智能告警与通知中心（Channels+WebSocket+Pinia+RBAC）

当 YOLO11 检测到 “严重病虫害水果”（置信度＞0.8）时，系统会触发多级告警：后端在检测逻辑中加入判断，若满足告警条件，一方面通过Django ORM将告警记录存入数据库（含检测 ID、告警级别、时间），另一方面通过Channels创建的 WebSocket 连接，向当前在线的关联用户（如管理员、该检测任务创建者，基于 RBAC 角色判断）推送告警信息；前端通过WebSocket API监听消息，接收后用Pinia更新 “通知中心” 的未读数量，同时弹出Ant Design Vue的 Message 组件提示，确保用户即时感知 —— 比如管理员会收到 “【紧急】编号 20251203 的苹果检测到严重腐烂，需立即处理” 的实时通知。

知识库与系统监控（Markdown 渲染 + django-prometheus+ECharts）

• 知识库中心：页面存储 YOLO11 模型原理、水果检测标准等文档，采用 Markdown 格式编写 —— 前端通过vue-markdown-editor组件解析 Markdown 内容，自动渲染标题、代码块、图片等元素，比如在 “YOLO11 检测原理” 文档中，代码块会用语法高亮展示模型调用核心代码；文档分类用Ant Design Vue的 Menu 组件实现，点击分类时通过Vue Router跳转，且路由跳转前会通过守卫验证用户权限（普通用户可看操作指南，管理员可编辑文档）。

• 系统监控：管理员进入该模块后，能查看服务器 CPU、内存使用率，以及接口响应时间、数据库连接数等指标 —— 后端通过django-prometheus收集监控数据，将 CPU 使用率、接口耗时等指标封装成 DRF 接口；前端调用接口获取数据后，用ECharts的仪表盘展示 CPU / 内存占用率，用柱状图对比各接口响应时间，异常数据（如 CPU＞80%）会用Tailwind CSS的红色样式标注，帮助管理员快速定位性能瓶颈，比如发现 “/api/detect/batch” 接口耗时过长时，可优化 Redis 缓存策略或 Celery 任务并发数。

三、系统技术价值与总结

1. 技术价值

• 技术落地性强：所有技术均围绕 “解决实际功能问题” 展开，比如用 Channels 解决实时告警、用 Celery 处理多图异步检测，避免 “为技术而技术”，适合学生理解 “技术如何服务业务”。

• 复用性高：检测历史的 DRF 分页逻辑、JWT+RBAC 的权限控制、YOLO11 的封装调用等模块，可直接复用到农产品检测、工业缺陷识别等类似项目，降低开发成本。

• 贴合求职需求：系统覆盖前端、后端、AI 三大方向技术，且均为企业常用栈，作为毕设或项目经验写进简历，能体现全栈开发思维，提升求职竞争力。

2. 总结

本水果检测系统通过 “Vue3+Django5+YOLO11” 的技术组合，实现了从 “图片上传 - AI 检测 - 数据管理 - 智能告警” 的完整闭环，核心亮点在于 “技术与功能深度绑定”—— 没有孤立讲解技术，而是通过功能场景拆解技术落地逻辑，更易理解与复用。

若对某模块技术细节（如 YOLO11 封装代码、ChannelsWebSocket 配置）有疑问，欢迎在评论区留言，后续将针对重点模块展开拆解。

赫兹威客官方交流群

赫兹威客官方交流群

赫兹威客官方交流群

https://qm.qq.com/q/ToiE4c056Uhttps://qm.qq.com/q/ToiE4c056U