引言
随着智慧城市和智能交通的发展，实时、精准地感知道路环境中的行人与车辆变得至关重要。传统的人工监控方式难以满足 7x24 小时不间断的高精度需求。利用深度学习技术，尤其是 YOLO（You Only Look Once）系列算法，可以在速度与精度之间取得良好平衡，成为解决此类视觉检测任务的首选方案。
本文将分享一个集前沿算法集成、多模态智能分析、精细化业务管理于一体的综合性 Web 检测平台。系统后端采用 SpringBoot 构建 RESTful API，前端使用 Vue.js 实现前后端分离架构，核心集成了 YOLOv8、YOLOv10、YOLOv11 及 YOLOv12 四种目标检测模型，并创新性地引入 DeepSeek 大模型进行场景语义分析。
系统核心特性
本系统主要包含以下几个关键模块，旨在提供从数据录入到结果可视化的完整闭环：
- 用户认证与管理：支持安全的登录注册，权限控制完善。
- 多模态检测：支持图片上传、视频解析以及摄像头实时流的检测。
- 模型灵活切换：用户可根据实际场景对实时性及准确性的不同需求，在前端一键切换 YOLO 模型版本。
- 智能语义分析：调用 DeepSeek API 对检测结果进行文本描述生成，提升系统的可解释性。
- 数据可视化：通过图表展示检测统计结果，记录持久化存储于 MySQL。
功能模块概览
系统涵盖了从基础的用户管理到核心的检测业务。管理员可以查看用户信息，普通用户则专注于检测任务。所有检测结果（图片、视频、摄像头流）均会保存至数据库，方便后续追溯与分析。
模型选型与对比
在算法层面，我们对比了当前主流的 YOLO 版本，以便在实际部署中做出最优选择。
YOLOv8
YOLOv8 由 Ultralytics 发布，引入了无锚点（Anchor-free）的解耦头设计，在准确性和速度上提供了优异的性能。它适合大多数通用场景，预训练模型丰富，易于上手。
YOLOv10
YOLOv10 解决了 NMS（非极大值抑制）依赖问题，通过一致的双重分配策略实现了免 NMS 训练。这显著降低了推理延迟，特别适合对实时性要求极高的边缘设备。
YOLOv11
作为 Ultralytics 的最新迭代，YOLOv11 在特征提取和效率上进行了优化。它在 COCO 数据集上实现了更高的 mAP，同时参数比 v8m 减少了约 22%，计算效率更高。
YOLOv12
YOLOv12 引入了以注意力为中心的架构，不同于传统的 CNN 方法。虽然精度表现不错，但目前社区反馈显示其可能存在训练不稳定或内存消耗较大的问题。Ultralytics 建议在生产环境中优先使用 YOLOv11。
核心代码实现
前端交互逻辑
前端部分采用了 Vue 3 + TypeScript，配合 Element Plus 组件库。为了增强用户体验，我们在登录界面加入了一些动态视觉效果，但核心在于表单验证与路由跳转的逻辑处理。
<template>
<div class="login-container">
<!-- 背景装饰元素 -->
<div class="traffic-background">
<!-- 粒子动画等视觉效果代码略 -->
</div>
<!-- 登录主容器 -->
<div class="login-main">
<div class="detection-container">
<h2>系统访问</h2>
<el-form :model="ruleForm" ref="ruleFormRef">
<el-form-item prop="username">
<el-input v-model="ruleForm.username" placeholder="请输入系统访问 ID" />
</el-form-item>
<el-form-item prop="password">
<el-input v-model="ruleForm.password" type="password" show-password />
</el-form-item>
<el-button @click="submitForm(ruleFormRef)">启动交通检测</el-button>
</el-form>
</div>
</div>
</div>
</template>
<script lang="ts" setup>
import { reactive, ref } from 'vue';
import { ElMessage } from 'element-plus';
import request from '/@/utils/request';
const ruleForm = reactive({ username: '', password: '' });
const ruleFormRef = ref();
// 校验规则
const registerRules = {
username: [{ required: true, message: '请输入系统访问 ID', trigger: 'blur' }],
password: [{ required: true, message: '请输入访问密钥', trigger: 'blur' }]
};
const submitForm = (formEl) => {
if (!formEl) return;
formEl.validate((valid) => {
if (valid) {
// 发送登录请求
request.post('/api/user/login', ruleForm).then((res) => {
if (res.code == 0) {
// 登录成功，设置 Token 并跳转
console.log('Login success');
window.location.href = '/';
} else {
ElMessage.error(res.msg);
}
});
}
});
};
</script>
