在计算机视觉与 Web 开发结合的实战场景中，智能吸烟检测系统兼具技术综合性与落地价值。本文将从技术栈选型、架构设计、核心功能实现三个维度，详细拆解一套企业级吸烟检测系统，为相关开发需求提供参考。​

一、技术栈选型：兼顾性能与开发效率​

系统采用全栈技术组合，前端聚焦交互体验与可视化呈现，后端侧重接口稳定性与实时通信，AI 层专注目标检测精度，各技术模块协同保障系统功能落地。​

1. 前端技术栈：高效构建交互界面​

• 主框架：Vue 3 + TypeScript​

选用 Vue 3 的 Composition API 提升代码复用性，结合 TypeScript 实现强类型约束，减少开发阶段类型错误，同时适配大型项目的代码维护需求。​

• UI 与样式：Ant Design Vue + Tailwind CSS + DaisyUI​

Ant Design Vue 提供丰富的企业级 UI 组件（如表格、表单、弹窗），缩短界面开发周期；Tailwind CSS 通过原子化 CSS 类实现灵活样式定制，搭配 DaisyUI 的预设组件，进一步提升样式开发效率。​

• 数据交互与可视化：Axios + ECharts​

Axios 封装 HTTP 请求拦截器，统一处理请求头、错误响应；ECharts 实现检测数据可视化（如检测次数趋势图、告警类型统计饼图），直观呈现系统运行数据。​

• 实时通信与视频处理：Socket.io + FFmpeg​

Socket.io 实现前端与后端的 WebSocket 通信，支撑实时检测结果推送、告警通知等功能；FFmpeg 处理视频解码与帧提取，为离线视频检测提供前端预处理能力。​

2. 后端技术栈：稳定支撑业务逻辑​

• Web 框架：Django 5.2.6 + DRF 3.14.0​

Django 的 ORM 机制简化数据库操作，Admin 后台可快速实现数据管理功能；DRF（Django REST Framework）提供序列化、权限控制、分页等组件，高效构建 RESTful API。​

• 实时通信：Channels 4.0.0​

基于 Django 的异步扩展框架 Channels，实现 WebSocket 协议支持，与前端 Socket.io 配合，完成实时检测流传输、告警信息推送等场景的通信需求。​

• 数据库：SQLite + Redis​

SQLite 作为轻量级关系型数据库，适用于中小型项目的结构化数据存储（如用户信息、检测记录）；Redis 作为缓存数据库，缓存高频访问数据（如用户权限、实时检测状态），降低数据库查询压力，提升系统响应速度。​

3. AI/ML 模块：精准识别吸烟行为​

• 核心模型：YOLO11​

选用最新的 YOLO11 目标检测模型，相比 YOLOv8，在相同精度下推理速度提升 20%，同时支持小目标检测优化，可精准识别监控画面中 “人 + 香烟” 的组合特征，降低误检率。​

• 图像处理：OpenCV + NumPy​

OpenCV 实现视频帧读取、图像灰度化、边缘检测等预处理操作；NumPy 提供高效的数值计算能力，支撑图像像素矩阵运算，为 YOLO 模型输入提供数据格式转换。​

二、架构设计：高可扩展与松耦合​

系统采用 “模块化 + 前后端分离” 架构，确保各模块独立开发、部署，同时支持后续功能扩展。​

1. 模块化设计​

将系统拆分为用户管理、目标检测、智能告警、数据管理、系统管理五大核心模块，各模块通过接口通信，模块内部高内聚、模块之间低耦合。例如：​

• 目标检测模块可独立替换模型（如后续升级为 YOLO12），无需修改其他模块代码；​

• 智能告警模块可扩展告警渠道（如短信告警、邮件告警），仅需新增告警适配器即可。​

2. 前后端分离架构​

前端与后端通过 API 接口交互，前端专注界面渲染与用户交互，后端专注业务逻辑处理，二者可分别部署在不同服务器：​

• 前端通过 Nginx 部署静态资源，提升页面加载速度；​

• 后端通过 Gunicorn 作为 WSGI 服务器，搭配 Nginx 反向代理，支撑高并发请求。​

3. 实时通信架构​

基于 WebSocket 的实时通信链路如下：​

1. 前端通过 Socket.io 发起 WebSocket 连接请求，携带 JWT 令牌进行身份认证；​

1. 后端 Channels 接收连接请求，验证令牌通过后建立长连接；​

1. 实时检测场景中，后端将 YOLO 模型的检测结果通过 WebSocket 推送到前端；​

1. 前端接收数据后，通过 ECharts 或视频流组件实时展示检测结果。​

三、核心功能模块实现：技术与业务结合​

1. 用户管理系统​

• 基于 JWT 实现用户登录认证，登录成功后返回 Token，前端存储在 LocalStorage 中，后续请求通过 Axios 拦截器自动添加 Token 到请求头；​

• 采用 RBAC 模型，在 DRF 的权限类中定义角色权限（如 IsAdmin、IsNormalUser），控制用户对接口的访问权限（如管理员可调用 “禁烟区添加” 接口，普通用户无权限）。​

2. YOLO 目标检测模块​

• 离线检测：用户上传视频文件，前端通过 FFmpeg 提取视频帧并上传至后端，后端调用 YOLO11 模型逐帧检测，检测完成后返回结果（如吸烟帧时间戳、目标坐标），前端展示检测报告；​

• 实时检测：后端通过 OpenCV 读取监控摄像头流，逐帧输入 YOLO 模型检测，检测到吸烟行为时，通过 Channels 推送到前端，同时触发告警机制。​

3. 智能告警系统​

• 定义三级告警等级（一级：吸烟行为持续 10 秒以上；二级：吸烟行为持续 5-10 秒；三级：单次检测到吸烟行为），不同等级对应不同处理策略（如一级告警触发短信通知）；​

• 告警信息通过 WebSocket 实时推送到前端，同时存储到数据库，用户可在 “告警记录” 模块查看历史告警详情。​

4. 数据管理模块​

• 检测记录存储在 SQLite 中，支持按时间范围、检测类型（实时 / 离线）筛选查询，DRF 实现分页功能，避免大量数据一次性加载导致前端卡顿；​

• 提供 Excel 数据导出功能，后端通过 xlwt 库生成 Excel 文件，前端通过 Axios 下载文件流，满足用户数据备份需求。​

5. 系统管理模块​

• 验证码功能：基于 Django-simple-captcha 生成图形验证码，防止恶意注册与登录；​

• 日志管理：使用 Django 的 logging 模块记录系统操作日志（如用户登录、检测任务启动），支持按日志级别、时间查询；​

• 监控功能：通过 Redis 存储系统实时运行状态（如在线用户数、当前检测任务数），前端定时请求接口展示监控数据。​

四、总结与扩展方向​

本系统通过 Vue3、Django5、YOLO11 等技术的组合，实现了吸烟检测场景的全流程覆盖，兼具技术综合性与业务落地性。后续可从以下方向扩展：​

1. 模型优化：引入模型量化技术（如 TensorRT），提升 YOLO11 在边缘设备的推理速度；​

1. 多场景适配：扩展人脸检测功能，关联吸烟人员身份信息；​

1. 告警渠道扩展：集成短信网关、邮件服务，实现多渠道告警通知。​

对于 Web 开发与计算机视觉结合的学习者，本系统的技术栈选型与架构设计具有较高的参考价值，可作为实战项目进一步深入研究各技术模块的底层原理。​

赫兹威客官方交流群

赫兹威客官方交流群

赫兹威客官方交流群

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