基于YOLOv8/YOLOv10/YOLOv11/YOLOv12与SpringBoot的行人车辆检测系统（DeepSeek智能分析+web交互界面+前后端分离+YOLO数据

Ne0inhk

21 Mar 2026 — 29 min read

一、摘要

摘要： 随着城市化进程的加速和智能交通系统的普及，高效、准确的行人与车辆目标检测成为智慧城市、自动驾驶及公共安全等领域的关键技术。传统视频监控方法依赖于人工筛查，存在实时性差、易漏检和成本高昂等问题。本研究设计并实现了一个基于深度学习与Web技术的实时行人车辆检测与分析系统。系统核心集成当前最前沿的YOLOv8、YOLOv10、YOLOv11及YOLOv12四种目标检测算法，构建了一套可灵活切换、性能优异的检测引擎，专门针对“行人”和“车辆”两类目标进行精准识别与定位。系统采用前后端分离架构，后端基于SpringBoot框架构建，提供了RESTful API接口；前端提供直观的交互界面，实现了用户管理、多模态检测（图像、视频、实时摄像头）与全流程数据追溯。创新性地集成DeepSeek大型语言模型，可为检测场景提供智能语义分析与报告生成，提升了系统的决策支持能力。系统将全部检测记录与用户数据持久化存储于MySQL数据库，并通过可视化图表展示检测统计结果。经测试，系统在5607张图像数据集上表现稳定，实现了从算法应用到业务管理的完整闭环，为相关领域提供了可部署、易扩展的一体化解决方案。

关键词： 目标检测；YOLO系列；行人车辆检测；SpringBoot；DeepSeek；前后端分离；智能交通

二、引言

1. 研究背景与意义

在当今社会，交通管理与公共安全面临着日益严峻的挑战。实时、精准地感知道路环境中的行人及车辆，是实现智能交通信号控制、自动驾驶辅助系统、智能安防监控及人流车流统计分析等高级应用的基础。然而，传统的人工监控方式已无法满足7x24小时不间断、大范围、高精度的监控需求。随着深度学习技术的迅猛发展，尤其是以YOLO（You Only Look Once）系列为代表的单阶段目标检测算法，因其在速度和精度上的卓越平衡，已成为解决实时视觉检测任务的首选方案。将这类先进的算法封装为稳定、易用的Web服务，赋能一线管理人员，具有重要的现实意义和应用价值。

2. 国内外研究现状

近年来，目标检测领域成果丰硕。从YOLOv1到最新的YOLOv12，算法通过引入更高效的网络骨干（如CSPNet、RepVGG）、改进的特征金字塔（如PANet、BiFPN）以及更优的损失函数（如CIoU、DFL），不断刷新着检测精度与速度的极限。这些进展为构建高性能的实时检测系统提供了坚实的技术基础。与此同时，企业级应用开发趋势趋向于前后端分离的微服务架构，SpringBoot以其快速构建、配置简便和生态繁荣的特点，成为后端服务开发的主流框架。将深度学习模型服务化，并与业务系统深度集成，已成为AI落地的重要模式。此外，多模态大模型（如DeepSeek）在图像理解与文本生成方面的强大能力，为增强传统视觉系统的“认知”和“解释”能力开辟了新的路径，使系统不仅能“看到”，更能“理解”和“描述”场景。

3. 本文研究内容与贡献

针对现有行人车辆检测系统在模型多样性、系统集成度和智能交互性方面的不足，本文研发了一个集“前沿算法集成、多模态智能分析、精细化业务管理”于一体的综合性Web检测平台。本文的主要贡献如下：

构建了专用的行人车辆检测数据集： 收集并精细标注了包含“行人(person)”和“车辆(car)”两类目标的图像共计5607张，划分为训练集（4485张）和验证集（1122张），为模型的训练与性能评估提供了可靠的数据支持。
实现了多版本YOLO模型的统一集成与便捷切换： 系统同时集成了YOLOv8、YOLOv10、YOLOv11及YOLOv12模型。用户可根据实际场景对实时性及准确性的不同需求，在前端界面一键切换模型，实现了算法性能的横向对比与按需应用。
创新性地引入DeepSeek模型进行场景智能分析： 在完成基础的视觉检测后，系统可调用DeepSeek API，对检测结果进行深入的文本分析，生成包含场景描述、潜在风险提示或统计分析的自然语言报告，极大地提升了系统的可解释性和交互智能。
开发了功能完备、高可用的全栈Web应用系统： 采用前后端分离架构，基于SpringBoot+MySQL+Vue.js（示例）技术栈，实现了从用户认证授权、多源数据检测（图片上传、视频解析、摄像头实时流）、检测记录全生命周期管理、数据可视化看板到系统管理员后台的完整业务流程。系统设计注重鲁棒性、安全性和可扩展性。

详细功能展示视频

基于深度学习的行人车辆检测系统（DeepSeek智能分析+YOLOv8/YOLOv10/YOLOv11/YOLOv12+最新web界面 +前后端分离）_哔哩哔哩_bilibili

基于深度学习的行人车辆检测系统（DeepSeek智能分析+YOLOv8/YOLOv10/YOLOv11/YOLOv12+最新web界面 +前后端分离）_哔哩哔哩_bilibilihttps://www.bilibili.com/video/BV1n1kpBuEYk/?spm_id_from=333.999.0.0&vd_source=549d0b4e2b8999929a61a037fcce3b0f

https://www.bilibili.com/video/BV1n1kpBuEYk/

三、系统核心特性概述

功能模块

✅ 用户登录注册：支持密码检测，保存到MySQL数据库。

✅ 支持四种YOLO模型切换，YOLOv8、YOLOv10、YOLOv11、YOLOv12。

✅ 信息可视化，数据可视化。

✅ 图片检测支持AI分析功能，deepseek

✅ 支持图像检测、视频检测和摄像头实时检测，检测结果保存到MySQL数据库。

✅ 图片识别记录管理、视频识别记录管理和摄像头识别记录管理。

✅ 用户管理模块，管理员可以对用户进行增删改查。

✅ 个人中心，可以修改自己的信息，密码姓名头像等等。

登录注册模块

可视化模块

图像检测模块

YOLO模型集成 (v8/v10/v11/v12)
DeepSeek多模态分析
支持格式：JPG/PNG/MP4/RTSP

视频检测模块

实时检测模块

图片识别记录管理

视频识别记录管理

摄像头识别记录管理

用户管理模块

数据管理模块（MySQL表设计）

users - 用户信息表

imgrecords- 图片检测记录表

videorecords- 视频检测记录表

camerarecords- 摄像头检测记录表

模型训练结果

#coding:utf-8 #根据实际情况更换模型 # yolon.yaml (nano)：轻量化模型，适合嵌入式设备，速度快但精度略低。 # yolos.yaml (small)：小模型，适合实时任务。 # yolom.yaml (medium)：中等大小模型，兼顾速度和精度。 # yolob.yaml (base)：基本版模型，适合大部分应用场景。 # yolol.yaml (large)：大型模型，适合对精度要求高的任务。 from ultralytics import YOLO model_path = 'pt/yolo12s.pt' data_path = 'data.yaml' if __name__ == '__main__': model = YOLO(model_path) results = model.train(data=data_path, epochs=500, batch=64, device='0', workers=0, project='runs', name='exp', )

YOLO概述

YOLOv8

YOLOv8 由 Ultralytics 于 2023 年 1 月 10 日发布，在准确性和速度方面提供了尖端性能。基于先前 YOLO 版本的进步，YOLOv8 引入了新功能和优化，使其成为各种应用中目标检测任务的理想选择。

YOLOv8 的主要特性

高级骨干和颈部架构： YOLOv8 采用最先进的骨干和颈部架构，从而改进了特征提取和目标检测性能。
无锚点分离式 Ultralytics Head： YOLOv8 采用无锚点分离式 Ultralytics head，与基于锚点的方法相比，这有助于提高准确性并提高检测效率。
优化的准确性-速度权衡： YOLOv8 专注于在准确性和速度之间保持最佳平衡，适用于各种应用领域中的实时对象检测任务。
丰富的预训练模型: YOLOv8提供了一系列预训练模型，以满足各种任务和性能要求，使您更容易为特定用例找到合适的模型。

YOLOv10

YOLOv10 由清华大学研究人员基于 Ultralytics Python构建，引入了一种新的实时目标检测方法，解决了先前 YOLO 版本中存在的后处理和模型架构缺陷。通过消除非极大值抑制 (NMS) 并优化各种模型组件，YOLOv10 以显著降低的计算开销实现了最先进的性能。大量实验表明，它在多个模型尺度上都具有卓越的精度-延迟权衡。

概述

实时目标检测旨在以低延迟准确预测图像中的对象类别和位置。YOLO 系列因其在性能和效率之间的平衡而一直处于这项研究的前沿。然而，对 NMS 的依赖和架构效率低下阻碍了最佳性能。YOLOv10 通过引入用于无 NMS 训练的一致双重分配和整体效率-准确性驱动的模型设计策略来解决这些问题。

架构

YOLOv10 的架构建立在之前 YOLO 模型优势的基础上，同时引入了几项关键创新。该模型架构由以下组件组成：

骨干网络：负责特征提取，YOLOv10 中的骨干网络使用增强版的 CSPNet (Cross Stage Partial Network)，以改善梯度流并减少计算冗余。
Neck：Neck 的设计目的是聚合来自不同尺度的特征，并将它们传递到 Head。它包括 PAN（路径聚合网络）层，用于有效的多尺度特征融合。
One-to-Many Head：在训练期间为每个对象生成多个预测，以提供丰富的监督信号并提高学习准确性。
一对一头部：在推理时为每个对象生成一个最佳预测，以消除对NMS的需求，从而降低延迟并提高效率。

主要功能

免NMS训练：利用一致的双重分配来消除对NMS的需求，从而降低推理延迟。
整体模型设计：从效率和准确性的角度对各种组件进行全面优化，包括轻量级分类 Head、空间通道解耦下采样和秩引导块设计。
增强的模型功能: 结合了大内核卷积和部分自注意力模块，以提高性能，而无需显着的计算成本。

YOLOv11

YOLO11 是 Ultralytics YOLO 系列实时目标检测器的最新迭代版本，它以前沿的精度、速度和效率重新定义了可能性。YOLO11 在之前 YOLO 版本的显著进步基础上，在架构和训练方法上进行了重大改进，使其成为各种计算机视觉任务的多功能选择。

主要功能

增强的特征提取: YOLO11 采用改进的 backbone 和 neck 架构，从而增强了特征提取能力，以实现更精确的目标检测和复杂的任务性能。
优化效率和速度： YOLO11 引入了改进的架构设计和优化的训练流程，从而提供更快的处理速度，并在精度和性能之间保持最佳平衡。
更高精度，更少参数： 随着模型设计的进步，YOLO11m 在 COCO 数据集上实现了更高的平均精度均值(mAP)，同时比 YOLOv8m 少用 22% 的参数，在不牺牲精度的情况下提高了计算效率。
跨环境的适应性： YOLO11 可以无缝部署在各种环境中，包括边缘设备、云平台和支持 NVIDIA GPU 的系统，从而确保最大的灵活性。
广泛支持的任务范围： 无论是目标检测、实例分割、图像分类、姿势估计还是旋转框检测 (OBB)，YOLO11 都旨在满足各种计算机视觉挑战。

Ultralytics YOLO11 在其前代产品的基础上进行了多项重大改进。主要改进包括：

增强的特征提取： YOLO11 采用了改进的骨干网络和颈部架构，增强了特征提取能力，从而实现更精确的目标检测。
优化的效率和速度： 改进的架构设计和优化的训练流程提供了更快的处理速度，同时保持了准确性和性能之间的平衡。
更高精度，更少参数： YOLO11m 在 COCO 数据集上实现了更高的平均精度均值 (mAP)，同时比 YOLOv8m 少用 22% 的参数，在不牺牲精度的情况下提高了计算效率。
跨环境的适应性： YOLO11 可以部署在各种环境中，包括边缘设备、云平台和支持 NVIDIA GPU 的系统。
广泛支持的任务范围： YOLO11 支持各种计算机视觉任务，例如目标检测、实例分割、图像分类、姿势估计和旋转框检测 (OBB)。

YOLOv12

YOLO12引入了一种以注意力为中心的架构，它不同于之前YOLO模型中使用的传统基于CNN的方法，但仍保持了许多应用所需的实时推理速度。该模型通过在注意力机制和整体网络架构方面的新颖方法创新，实现了最先进的目标检测精度，同时保持了实时性能。尽管有这些优势，YOLO12仍然是一个社区驱动的版本，由于其沉重的注意力模块，可能表现出训练不稳定、内存消耗增加和CPU吞吐量较慢的问题，因此Ultralytics仍然建议将YOLO11用于大多数生产工作负载。

主要功能

区域注意力机制: 一种新的自注意力方法，可以有效地处理大型感受野。它将特征图分成 l 个大小相等的区域（默认为 4 个），水平或垂直，避免复杂的运算并保持较大的有效感受野。与标准自注意力相比，这大大降低了计算成本。
残差高效层聚合网络（R-ELAN）：一种基于 ELAN 的改进的特征聚合模块，旨在解决优化挑战，尤其是在更大规模的以注意力为中心的模型中。R-ELAN 引入：
- 具有缩放的块级残差连接（类似于层缩放）。
- 一种重新设计的特征聚合方法，创建了一个类似瓶颈的结构。
优化的注意力机制架构：YOLO12 精简了标准注意力机制，以提高效率并与 YOLO 框架兼容。这包括：
- 使用 FlashAttention 来最大限度地减少内存访问开销。
- 移除位置编码，以获得更简洁、更快速的模型。
- 调整 MLP 比率（从典型的 4 调整到 1.2 或 2），以更好地平衡注意力和前馈层之间的计算。
- 减少堆叠块的深度以改进优化。
- 利用卷积运算（在适当的情况下）以提高其计算效率。
- 在注意力机制中添加一个7x7可分离卷积（“位置感知器”），以隐式地编码位置信息。
全面的任务支持: YOLO12 支持一系列核心计算机视觉任务：目标检测、实例分割、图像分类、姿势估计和旋转框检测 (OBB)。
增强的效率: 与许多先前的模型相比，以更少的参数实现了更高的准确率，从而证明了速度和准确率之间更好的平衡。
灵活部署: 专为跨各种平台部署而设计，从边缘设备到云基础设施。

主要改进

增强的特征提取:
- 区域注意力: 有效处理大型感受野，降低计算成本。
- 优化平衡： 改进了注意力和前馈网络计算之间的平衡。
- R-ELAN：使用 R-ELAN 架构增强特征聚合。
优化创新：
- 残差连接：引入具有缩放的残差连接以稳定训练，尤其是在较大的模型中。
- 改进的特征集成：在 R-ELAN 中实现了一种改进的特征集成方法。
- FlashAttention: 整合 FlashAttention 以减少内存访问开销。
架构效率:
- 减少参数：与之前的许多模型相比，在保持或提高准确性的同时，实现了更低的参数计数。
- 简化的注意力机制：使用简化的注意力实现，避免了位置编码。
- 优化的 MLP 比率：调整 MLP 比率以更有效地分配计算资源。

前端代码展示

登录界面部分代码展示

<template> <div> <!-- 交通粒子背景 --> <div> <!-- 交通粒子 --> <div> <div v-for="n in 30" :key="`particle-${n}`" :style="getParticleStyle(n)"> <div></div> </div> </div> <!-- 扫描波纹 --> <div> <div v-for="n in 8" :key="`ripple-${n}`" :style="getRippleStyle(n)"></div> </div> <!-- 检测点网格 --> <div> <div v-for="n in 25" :key="`node-${n}`" :style="getNodeStyle(n)"> <div></div> </div> </div> <!-- 交通符号云 --> <div> <div v-for="n in 12" :key="`icon-${n}`" :style="getIconStyle(n)"> {{ getRandomIcon() }} </div> </div> <!-- 激光扫描线 --> <div> <div v-for="n in 6" :key="`laser-${n}`" :style="getLaserStyle(n)"> <div></div> </div> </div> </div> <!-- 登录主容器 --> <div> <!-- 检测界面容器 --> <div> <div> <div></div> <div></div> </div> <!-- 系统标志 --> <div> <div> <div> <div> <div></div> <div></div> <div></div> <div></div> </div> <div></div> </div> <div></div> </div> <div> <h1> <span>Traffic</span> <span>Detection</span> </h1> <p>智能交通检测分析系统</p> <p>智慧城市 · 交通智能实验室</p> </div> </div> <!-- 登录面板 --> <div> <div> <div></div> <h2>系统访问</h2> <div></div> </div> <div> <el-form :model="ruleForm" :rules="registerRules" ref="ruleFormRef"> <!-- 用户名输入 --> <el-form-item prop="username"> <div> <div> <div></div> </div> <el-input v-model="ruleForm.username" placeholder="请输入系统访问ID" size="large" @focus="onInputFocus" @blur="onInputBlur" /> <div></div> </div> <div>交通检测员身份验证</div> </el-form-item> <!-- 密码输入 --> <el-form-item prop="password"> <div> <div> <div></div> </div> <el-input v-model="ruleForm.password" type="password" placeholder="请输入访问密钥" show-password size="large" @focus="onInputFocus" @blur="onInputBlur" /> <div></div> </div> <div>用户密码验证...</div> </el-form-item> <!-- 登录按钮 --> <el-form-item> <div> <el-button type="primary" @click="submitForm(ruleFormRef)" @mouseenter="onBtnHover" @mouseleave="onBtnLeave" > <div> <div> <span>启动交通检测</span> <span>SYSTEM SCAN</span> </div> <div> <div></div> <div></div> <div></div> </div> </div> <div></div> <div> <div v-for="n in 3" :key="`btn-particle-${n}`"></div> </div> </el-button> <div> <div> <div></div> <span>检测系统就绪</span> </div> <div> <span>v3.5.0 • 深度学习检测模式</span> </div> </div> </div> </el-form-item> </el-form> <!-- 辅助选项 --> <div> <router-link to="/register"> <div> <div></div> </div> <span>注册新账户</span> <div></div> </router-link> </div> </div> </div> <!-- 系统信息 --> <div> <div> <div> <div></div> <div> <span></span> <span></span> </div> </div> <div> <div></div> <div> <span>检测速度</span> <span>5ms</span> </div> </div> <div> <div></div> <div> <span>目标类别</span> <span>2类</span> </div> </div> </div> </div> </div> </div> <!-- 背景装饰元素 --> <div> <!-- 交通数据流 --> <div> <div v-for="n in 8" :key="`flow-${n}`" :style="getStreamStyle(n)"> <span v-for="i in 15" :key="`data-${n}-${i}`"> {{ ['🚗','🚕','🚌','🚲','🚶','🚦','📷','🎯'][Math.floor(Math.random() * 8)] }} </span> </div> </div> <!-- 浮动检测标签 --> <div> <div v-for="n in 10" :key="`label-${n}`" :style="getLabelStyle(n)"> {{ ['车辆','行人','自行车','公交车','红绿灯','摄像头','检测区','报警区'][Math.floor(Math.random() * 8)] }} </div> </div> </div> </div> </template> <script lang="ts" setup> import { reactive, ref, computed, onMounted } from 'vue'; import { useRoute, useRouter } from 'vue-router'; import { ElMessage } from 'element-plus'; import { useI18n } from 'vue-i18n'; import Cookies from 'js-cookie'; import { storeToRefs } from 'pinia'; import { useThemeConfig } from '/@/stores/themeConfig'; import { initFrontEndControlRoutes } from '/@/router/frontEnd'; import { initBackEndControlRoutes } from '/@/router/backEnd'; import { Session } from '/@/utils/storage'; import { formatAxis } from '/@/utils/formatTime'; import { NextLoading } from '/@/utils/loading'; import type { FormInstance, FormRules } from 'element-plus'; import request from '/@/utils/request'; // 定义变量内容 const { t } = useI18n(); const storesThemeConfig = useThemeConfig(); const { themeConfig } = storeToRefs(storesThemeConfig); const route = useRoute(); const router = useRouter(); const formSize = ref('default'); const ruleFormRef = ref<FormInstance>(); // 定义表单数据 const ruleForm = reactive({ username: '', password: '', }); // 校验规则 const registerRules = reactive<FormRules>({ username: [ { required: true, message: '请输入系统访问ID', trigger: 'blur' }, { min: 3, max: 20, message: '长度在3-20个字符', trigger: 'blur' }, ], password: [ { required: true, message: '请输入访问密钥', trigger: 'blur' }, { min: 5, max: 30, message: '长度在5-30个字符', trigger: 'blur' }, ], }); // 粒子样式 - 交通主题颜色 const getParticleStyle = (index: number) => { const left = Math.random() * 100; const top = Math.random() * 100; const size = 4 + Math.random() * 8; const duration = 3 + Math.random() * 4; const delay = Math.random() * 2; const colorIndex = Math.floor(Math.random() * 3); const colors = ['#00B4D8', '#0077B6', '#90E0EF']; // 蓝色系 return { left: `${left}%`, top: `${top}%`, width: `${size}px`, height: `${size}px`, backgroundColor: colors[colorIndex], animationDuration: `${duration}s`, animationDelay: `${delay}s` }; }; // 波纹样式 const getRippleStyle = (index: number) => { const left = Math.random() * 100; const top = Math.random() * 100; const size = 100 + Math.random() * 300; const duration = 4 + Math.random() * 6; const delay = Math.random() * 3; return { left: `${left}%`, top: `${top}%`, width: `${size}px`, height: `${size}px`, animationDuration: `${duration}s`, animationDelay: `${delay}s` }; }; // 节点样式 const getNodeStyle = (index: number) => { const left = Math.random() * 100; const top = Math.random() * 100; const size = 6 + Math.random() * 12; const duration = 2 + Math.random() * 3; const delay = Math.random() * 2; return { left: `${left}%`, top: `${top}%`, width: `${size}px`, height: `${size}px`, animationDuration: `${duration}s`, animationDelay: `${delay}s` }; }; // 交通图标样式 const getIconStyle = (index: number) => { const left = Math.random() * 100; const top = Math.random() * 100; const size = 24 + Math.random() * 36; const duration = 15 + Math.random() * 20; const delay = Math.random() * 5; const rotation = Math.random() * 360; return { left: `${left}%`, top: `${top}%`, fontSize: `${size}px`, animationDuration: `${duration}s`, animationDelay: `${delay}s`, transform: `rotate(${rotation}deg)` }; }; // 获取随机交通图标 const getRandomIcon = () => { const icons = ['🚗', '🚕', '🚌', '🚲', '🚶', '🚦', '📷', '🎯', '🚨', '🛣️']; return icons[Math.floor(Math.random() * icons.length)]; }; // 激光样式 const getLaserStyle = (index: number) => { const left = Math.random() * 100; const height = 200 + Math.random() * 400; const duration = 3 + Math.random() * 5; const delay = Math.random() * 2; return { left: `${left}%`, height: `${height}px`, animationDuration: `${duration}s`, animationDelay: `${delay}s` }; }; // 数据流样式 const getStreamStyle = (index: number) => { const left = Math.random() * 100; const duration = 8 + Math.random() * 12; const delay = Math.random() * 5; return { left: `${left}%`, animationDuration: `${duration}s`, animationDelay: `${delay}s` }; }; // 标签样式 const getLabelStyle = (index: number) => { const left = Math.random() * 100; const top = Math.random() * 100; const duration = 10 + Math.random() * 15; const delay = Math.random() * 4; const opacity = 0.1 + Math.random() * 0.3; return { left: `${left}%`, top: `${top}%`, animationDuration: `${duration}s`, animationDelay: `${delay}s`, opacity: opacity }; }; // 事件处理 const onInputFocus = (event: Event) => { const target = event.target as HTMLElement; target.parentElement?.classList.add('focused'); }; const onInputBlur = (event: Event) => { const target = event.target as HTMLElement; target.parentElement?.classList.remove('focused'); }; const onBtnHover = (event: Event) => { const btn = event.currentTarget as HTMLElement; btn.classList.add('hover'); }; const onBtnLeave = (event: Event) => { const btn = event.currentTarget as HTMLElement; btn.classList.remove('hover'); }; // 原有的登录逻辑保持不变 const currentTime = computed(() => { return formatAxis(new Date()); }); const onSignIn = async () => { Session.set('token', Math.random().toString(36).substr(0)); Cookies.set('userName', ruleForm.username); if (!themeConfig.value.isRequestRoutes) { const isNoPower = await initFrontEndControlRoutes(); signInSuccess(isNoPower); } else { const isNoPower = await initBackEndControlRoutes(); signInSuccess(isNoPower); } }; const signInSuccess = (isNoPower: boolean | undefined) => { if (isNoPower) { ElMessage.warning('抱歉，您没有登录权限'); Session.clear(); } else { let currentTimeInfo = currentTime.value; if (route.query?.redirect) { router.push({ path: <string>route.query?.redirect, query: Object.keys(<string>route.query?.params).length > 0 ? JSON.parse(<string>route.query?.params) : '', }); } else { router.push('/'); } const signInText = t('message.signInText'); ElMessage.success(`${currentTimeInfo}，${signInText}`); NextLoading.start(); } }; const submitForm = (formEl: FormInstance | undefined) => { if (!formEl) return; formEl.validate((valid) => { if (valid) { request.post('/api/user/login', ruleForm).then((res) => { console.log(res); if (res.code == 0) { Cookies.set('role', res.data.role); onSignIn(); } else { ElMessage({ type: 'error', message: res.msg, }); } }); } else { console.log('error submit!'); return false; } }); }; // 初始化 onMounted(() => { // 可以在这里添加初始化代码 }); </script> <style scoped> .login-container { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #0a1929 0%, #112240 30%, #0d2847 70%, #0a1929 100%); padding: 20px; position: relative; overflow: hidden; font-family: 'Inter', 'Segoe UI', system-ui, sans-serif; } /* 交通粒子背景 */ .traffic-background { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; overflow: hidden; } /* 交通粒子 */ .traffic-particles { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .particle { position: absolute; border-radius: 50%; animation: particleFloat ease-in-out infinite alternate; opacity: 0.6; } .particle-glow { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 200%; height: 200%; border-radius: 50%; background: inherit; filter: blur(8px); opacity: 0.3; } @keyframes particleFloat { 0% { transform: translateY(0) rotate(0deg); } 100% { transform: translateY(-20px) rotate(180deg); } } /* 扫描波纹 */ .scan-ripples { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .ripple { position: absolute; border-radius: 50%; border: 1px solid rgba(0, 180, 216, 0.3); animation: rippleExpand linear infinite; transform: translate(-50%, -50%); } @keyframes rippleExpand { 0% { transform: translate(-50%, -50%) scale(0.1); opacity: 0.8; } 100% { transform: translate(-50%, -50%) scale(2); opacity: 0; } } /* 检测点网格 */ .detection-grid { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .grid-node { position: absolute; border-radius: 50%; background: rgba(0, 119, 182, 0.4); animation: nodePulse ease-in-out infinite alternate; } .node-pulse { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; border-radius: 50%; background: inherit; animation: pulseWave 2s ease-in-out infinite; } @keyframes nodePulse { 0% { opacity: 0.3; transform: scale(1); } 100% { opacity: 0.8; transform: scale(1.2); } } @keyframes pulseWave { 0%, 100% { opacity: 0.5; transform: translate(-50%, -50%) scale(1); } 50% { opacity: 0.2; transform: translate(-50%, -50%) scale(2); } } /* 交通符号云 */ .traffic-cloud { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; } .traffic-icon { position: absolute; animation: iconFloat ease-in-out infinite alternate; opacity: 0.2; } @keyframes iconFloat { 0% { transform: translateY(0) rotate(0deg); } 100% { transform: translateY(-40px) rotate(10deg); } } /* 激光扫描线 */ .laser-scan { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .laser-line { position: absolute; width: 100%; height: 200px; animation: laserScan linear infinite; opacity: 0.1; } .laser-path { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(180deg, transparent, rgba(0, 180, 216, 0.6), transparent ); clip-path: polygon(0% 100%, 25% 50%, 50% 75%, 75% 25%, 100% 50%, 100% 100%); } @keyframes laserScan { 0% { top: -200px; opacity: 0; } 10% { opacity: 0.1; } 90% { opacity: 0.1; } 100% { top: 100%; opacity: 0; } } /* 主登录容器 */ .login-main { position: relative; z-index: 2; width: 100%; max-width: 480px; margin: 0 auto; } /* 检测界面容器 */ .detection-container { position: relative; background: rgba(10, 25, 41, 0.8); border-radius: 24px; padding: 40px; backdrop-filter: blur(20px); border: 1px solid rgba(0, 180, 216, 0.3); box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5), 0 0 100px rgba(0, 180, 216, 0.2), inset 0 0 20px rgba(0, 180, 216, 0.1); animation: detectionAppear 1s ease-out; overflow: hidden; } @keyframes detectionAppear { from { opacity: 0; transform: translateY(40px) scale(0.95); } to { opacity: 1; transform: translateY(0) scale(1); } } .detection-effect { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; } .scan-pulse { position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(0, 180, 216, 0.1), transparent ); animation: scanSweep 6s linear infinite; } @keyframes scanSweep { 0% { left: -100%; } 100% { left: 100%; } } .detection-connections { position: absolute; top: 0; left: 0; width: 100%; height: 2px; background: linear-gradient(90deg, transparent, rgba(0, 119, 182, 0.5), transparent ); box-shadow: 0 0 10px rgba(0, 119, 182, 0.3); animation: detectionScan 3s linear infinite; } @keyframes detectionScan { 0% { top: 0; opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { top: 100%; opacity: 0; } } /* 系统品牌 */ .system-brand { text-align: center; margin-bottom: 40px; }

后端代码展示

详细功能展示视频

基于深度学习的行人车辆检测系统（DeepSeek智能分析+YOLOv8/YOLOv10/YOLOv11/YOLOv12+最新web界面 +前后端分离）_哔哩哔哩_bilibili

https://www.bilibili.com/video/BV1n1kpBuEYk/

项目安装教程

https://www.bilibili.com/video/BV1YLsXzJE2X/?spm_id_from=333.1387.homepage.video_card.click

基于YOLOv8/YOLOv10/YOLOv11/YOLOv12与SpringBoot的行人车辆检测系统（DeepSeek智能分析+web交互界面+前后端分离+YOLO数据

Ne0inhk

一、摘要