基于YOLOv8/YOLOv10/YOLOv11/YOLOv12与SpringBoot的无人机检测系统（车辆行人）（DeepSeek智能分析+web交互界面+前后端分离+YOLO数据
随着无人机技术的普及和应用领域的不断拓展，其在城市管理、交通监控、应急救援等方面发挥着日益重要的作用。然而，随之而来的隐私安全、空中交通管理等问题也愈发突出，对高效、精准的无人机载视觉目标检测系统提出了迫切需求。本项目设计并实现了一个集成了前沿深度学习目标检测模型与现代化Web技术的智能无人机监控系统。系统的核心在于构建了一个多模型兼容的YOLO目标检测引擎，无缝集成了YOLOv8、YOLOv10
摘要
随着无人机技术的普及和应用领域的不断拓展，其在城市管理、交通监控、应急救援等方面发挥着日益重要的作用。然而，随之而来的隐私安全、空中交通管理等问题也愈发突出，对高效、精准的无人机载视觉目标检测系统提出了迫切需求。本项目设计并实现了一个集成了前沿深度学习目标检测模型与现代化Web技术的智能无人机监控系统。
系统的核心在于构建了一个多模型兼容的YOLO目标检测引擎，无缝集成了YOLOv8、YOLOv10、YOLOv11及YOLOv12四种先进的单阶段检测算法，使用户能根据实时场景对速度与精度的不同需求灵活切换模型。检测目标聚焦于城市低空环境中常见的四类对象：车辆（Car）、行人（Person）、其他交通工具（OtherVehicle）以及背景/忽略区域（DontCare）。系统基于一个包含超过万张图像的自建数据集进行训练与验证（训练集10128张，验证集715张，测试集355张），确保了模型在实际场景中的鲁棒性与泛化能力。
后端采用SpringBoot框架构建，遵循前后端分离的架构思想，保证了系统的高内聚、低耦合与良好的可维护性。前端提供直观的Web交互界面，实现了完整的用户体系（包括登录注册、个人中心信息修改等），并通过MySQL数据库进行用户信息与检测记录的高效持久化管理。系统功能全面，支持图像上传检测、视频文件分析与摄像头实时流检测三种模式，所有检测结果（包括目标类别、置信度、位置及时间戳）均自动保存至数据库，便于后续追溯与统计分析。
此外，本项目创新性地集成了DeepSeek大型语言模型的智能分析功能，可对检测结果进行上下文理解与语义化描述，生成更丰富、更人性化的分析报告，极大地提升了系统的智能交互水平。系统还配备了完善的管理模块，包括对检测记录（图片、视频、实时流）的集中管理，以及管理员对平台用户的增删改查权限管理。
综上所述，本系统不仅是一个高性能的目标检测工具，更是一个集AI视觉分析、智能交互、数据管理与可视化于一体的综合性解决方案，为无人机在智慧城市、安防监控等领域的规范化、智能化应用提供了有力的技术支撑。
详细功能展示视频
基于深度学习和千问大模型的无人机检测系统（车辆行人）（web界面+YOLOv8/YOLOv10/YOLOv11/YOLOv12+前后端分离+python）_哔哩哔哩_bilibili
基于深度学习和千问大模型的无人机检测系统（车辆行人）（web界面+YOLOv8/YOLOv10/YOLOv11/YOLOv12+前后端分离+python）_哔哩哔哩_bilibili
https://www.bilibili.com/video/BV1SccxzrE3q/?spm_id_from=333.999.0.0&vd_source=549d0b4e2b8999929a61a037fcce3b0fhttps://www.bilibili.com/video/BV1SccxzrE3q/
目录
一、引言
1. 研究背景与意义
在智慧城市和数字化社会建设的大潮中，无人机凭借其灵活机动、视角独特、成本可控的优势，已广泛应用于测绘勘探、物流配送、农业植保、新闻采编以及公共安全等多个领域。无人机搭载的视觉传感器成为获取地面信息的重要窗口。通过对无人机回传的实时视频流或图像进行自动化目标检测与识别，可以实现对地面车辆、行人检测，具有极高的实用价值。
然而，当前许多无人机检测应用仍面临诸多挑战：首先，算法模型单一，难以适应不同光照、天气、复杂度场景下的检测需求，在速度与精度之间难以取得最佳平衡。其次，系统集成度低，往往只提供算法API，缺乏一个完整的、用户友好的业务应用平台，不利于非技术人员的操作与管理。再次，检测结果多为简单的框选与标签，缺乏深度的信息整合与语义理解，数据价值未能充分挖掘。最后，系统在用户管理、历史数据追溯、可视化分析等方面的功能普遍薄弱。
因此，开发一个能够集成最新目标检测算法、具备友好人机交互界面、支持全流程数据管理并能提供智能分析的综合型无人机监控系统，对于推动相关技术的落地应用、提升无人机作业的智能化水平具有重要的理论意义和现实价值。
2. 项目主要内容与目标
本项目旨在构建一个“基于多版本YOLO与SpringBoot的智能无人机检测系统”，其核心目标与内容包括：
-
构建一个强大且灵活的目标检测核心：集成YOLOv8至YOLOv12系列中最具代表性的四个版本模型，形成一个可插拔的模型池。通过在同一份自定义四类目标数据集（Car， DontCare, OtherVehicle, Person）上的充分训练与调优，确保每个模型均能达到最优性能，为用户提供多样化的模型选择。
-
开发一个健壮且可扩展的业务后端：采用SpringBoot技术栈，设计RESTful API，实现用户认证与授权、检测任务调度、数据持久化（MySQL）、模型服务化封装等核心业务逻辑。系统架构采用前后端分离模式，确保后端服务的高性能与高可用性。
-
打造一个直观且功能全面的Web交互界面：提供流畅的用户体验，涵盖从用户登录注册、个人信息管理，到选择模型、上传图片/视频、开启实时摄像头检测、查看可视化结果（标注框、类别、置信度）等完整操作流程。
-
实现深度的数据管理与智能分析：将所有检测任务的结果结构化存储，并设计专门的管理模块供用户查询、筛选和历史记录。引入DeepSeek大模型接口，对检测画面进行高层语义分析与描述，将冰冷的检测框转化为易于理解的文本报告，增强系统的“智慧”属性。
-
提供完备的系统管理功能：为管理员设计独立的管理后台，实现对普通用户账户、所有类型检测记录的集中管控，保障系统的有序运行与数据安全。
二、 系统核心特性概述
功能模块
✅ 用户登录注册：支持密码检测，保存到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 class="login-container">
<!-- 左侧检测科技背景区域 -->
<div class="infrared-background">
<!-- 热力图效果 -->
<div class="heat-map">
<div class="heat-circle" v-for="n in 12" :key="`heat-${n}`" :style="getHeatStyle(n)"></div>
</div>
<!-- 扫描网格 -->
<div class="infrared-grid"></div>
<!-- 动态检测点 -->
<div class="detection-points">
<div class="point" v-for="n in 20" :key="`point-${n}`" :style="getPointStyle(n)">
<div class="pulse-ring"></div>
</div>
</div>
<!-- 扫描线 -->
<div class="infrared-scan"></div>
<!-- 检测目标（车辆、行人） -->
<div class="detection-targets">
<div class="target vehicle" :style="getTargetStyle('vehicle')">
<div class="target-icon">🚗</div>
<div class="target-label">车辆检测</div>
</div>
<div class="target pedestrian" :style="getTargetStyle('pedestrian')">
<div class="target-icon">🚶</div>
<div class="target-label">行人检测</div>
</div>
<div class="target drone" :style="getTargetStyle('drone')">
<div class="target-icon">✈️</div>
<div class="target-label">无人机视角</div>
</div>
</div>
<!-- 热成像色阶 -->
<div class="thermal-gradient">
<div class="gradient-bar">
<div class="gradient-segment" style="background: #0000ff"></div>
<div class="gradient-segment" style="background: #00ffff"></div>
<div class="gradient-segment" style="background: #00ff00"></div>
<div class="gradient-segment" style="background: #ffff00"></div>
<div class="gradient-segment" style="background: #ff0000"></div>
<div class="gradient-segment" style="background: #ff00ff"></div>
</div>
<div class="gradient-labels">
<span>低温</span>
<span>高温</span>
</div>
</div>
<!-- 系统标题 -->
<div class="system-title">
<h1>YOLO无人机检测系统</h1>
<p> YOLOv8/v10/v11/v12 智能识别</p>
<p>车辆、行人多目标实时检测与追踪</p>
<div class="tech-features">
<div class="feature">
<div class="feature-icon thermal"></div>
<span>热成像分析</span>
</div>
<div class="feature">
<div class="feature-icon multi-target"></div>
<span>多目标识别</span>
</div>
<div class="feature">
<div class="feature-icon night-vision"></div>
<span>夜间模式</span>
</div>
<div class="feature">
<div class="feature-icon realtime"></div>
<span>实时追踪</span>
</div>
</div>
</div>
</div>
<!-- 右侧登录区域 -->
<div class="login-section">
<div class="login-box">
<!-- 系统Logo和标题 -->
<div class="system-header">
<div class="logo">
<div class="logo-icon">
<div class="thermal-logo">
<div class="thermal-lens"></div>
<div class="thermal-waves"></div>
</div>
</div>
</div>
<div class="title">
<h2>系统登录</h2>
<p>YOLO无人机检测系统（车辆行人）</p>
</div>
</div>
<!-- 登录表单 -->
<div class="form-container">
<el-form :model="ruleForm" :rules="registerRules" ref="ruleFormRef">
<el-form-item prop="username">
<el-input
v-model="ruleForm.username"
placeholder="请输入用户名"
prefix-icon="User"
class="custom-input"
size="large"
/>
</el-form-item>
<el-form-item prop="password">
<el-input
v-model="ruleForm.password"
type="password"
placeholder="请输入密码"
prefix-icon="Lock"
show-password
class="custom-input"
size="large"
/>
</el-form-item>
<el-form-item>
<el-button type="primary" class="login-btn" @click="submitForm(ruleFormRef)">
<span class="btn-text">登录系统</span>
<div class="btn-flare"></div>
</el-button>
</el-form-item>
</el-form>
<div class="options">
<router-link to="/register" class="register-link">
<span>注册新账号</span>
<div class="link-underline"></div>
</router-link>
</div>
</div>
<!-- 底部信息 -->
<div class="footer">
<div class="security-badge">
<div class="shield-icon"></div>
<span>多目标检测加密</span>
</div>
<p class="system-version">系统版本：v2.5.1 | 最后更新：2026-01-05</p>
</div>
</div>
</div>
</div>
</template>
<script lang="ts" setup>
import { reactive, computed, ref } 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>();
/*
* 定义全局变量，等价Vue2中的data() return。
*/
const ruleForm = reactive({
username: '',
password: '',
});
/*
* 校验规则。
*/
const registerRules = reactive<FormRules>({
username: [
{ required: true, message: '请输入账号', trigger: 'blur' },
{ min: 3, max: 15, message: '长度在3-15个字符', trigger: 'blur' },
],
password: [
{ required: true, message: '请输入密码', trigger: 'blur' },
{ min: 3, max: 15, message: '长度在3-15个字符', trigger: 'blur' },
],
});
// 热力图样式
const getHeatStyle = (index: number) => {
const left = Math.random() * 100;
const top = Math.random() * 100;
const size = 150 + Math.random() * 200;
const hue = 0 + Math.random() * 60; // 红色到黄色的色调
return {
left: `${left}%`,
top: `${top}%`,
width: `${size}px`,
height: `${size}px`,
background: `radial-gradient(circle, hsla(${hue}, 100%, 50%, 0.2) 0%, transparent 70%)`,
animationDuration: `${8 + Math.random() * 8}s`,
animationDelay: `${index * 0.5}s`
};
};
// 检测点样式
const getPointStyle = (index: number) => {
const left = Math.random() * 100;
const top = Math.random() * 100;
const temperature = 0.3 + Math.random() * 0.7; // 模拟温度值
return {
left: `${left}%`,
top: `${top}%`,
backgroundColor: `hsl(${temperature * 60}, 100%, 50%)`,
boxShadow: `0 0 20px hsl(${temperature * 60}, 100%, 50%)`
};
};
// 目标样式
const getTargetStyle = (type: string) => {
const animations = {
vehicle: { left: '15%', top: '60%', animationDelay: '0s' },
pedestrian: { left: '50%', top: '40%', animationDelay: '1.5s' },
drone: { left: '80%', top: '70%', animationDelay: '3s' }
};
return animations[type as keyof typeof animations];
};
/*
* 提交后的方法。
*/
// 时间获取
const currentTime = computed(() => {
return formatAxis(new Date());
});
// 登录
const onSignIn = async () => {
// 存储 token 到浏览器缓存
Session.set('token', Math.random().toString(36).substr(0));
// 模拟数据，对接接口时，记得删除多余代码及对应依赖的引入。用于 `/src/stores/userInfo.ts` 中不同用户登录判断（模拟数据）
Cookies.set('userName', ruleForm.username);
if (!themeConfig.value.isRequestRoutes) {
// 前端控制路由，2、请注意执行顺序
const isNoPower = await initFrontEndControlRoutes();
signInSuccess(isNoPower);
} else {
// 模拟后端控制路由，isRequestRoutes 为 true，则开启后端控制路由
// 添加完动态路由，再进行 router 跳转，否则可能报错 No match found for location with path "/"
const isNoPower = await initBackEndControlRoutes();
// 执行完 initBackEndControlRoutes，再执行 signInSuccess
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}`);
// 添加 loading，防止第一次进入界面时出现短暂空白
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;
}
});
};
</script>
<style scoped>
.login-container {
min-height: 100vh;
display: flex;
background: linear-gradient(135deg, #000000 0%, #1a0a0a 50%, #220000 100%);
font-family: 'Microsoft YaHei', sans-serif;
overflow: hidden;
}
后端代码展示
详细功能展示视频
基于深度学习和千问大模型的无人机检测系统（车辆行人）（web界面+YOLOv8/YOLOv10/YOLOv11/YOLOv12+前后端分离+python）_哔哩哔哩_bilibili
基于深度学习和千问大模型的无人机检测系统（车辆行人）（web界面+YOLOv8/YOLOv10/YOLOv11/YOLOv12+前后端分离+python）_哔哩哔哩_bilibilihttps://www.bilibili.com/video/BV1SccxzrE3q/?spm_id_from=333.999.0.0&vd_source=549d0b4e2b8999929a61a037fcce3b0fhttps://www.bilibili.com/video/BV1SccxzrE3q/
腾讯云面向开发者汇聚海量精品云计算使用和开发经验，营造开放的云计算技术生态圈。
更多推荐
13
0- 0
已为社区贡献373条内容
所有评论(0)