当前位置：首页 > news >正文

基于Django+Vue3+YOLO的智能气象检测系统

news 2025/9/6 16:35:58

基于Django+Vue3+YOLO的智能气象检测系统

项目简介

本项目是一个集成了人工智能深度学习技术的现代化气象检测系统，采用前后端分离架构，结合YOLO目标检测算法，实现了对气象现象的智能识别与分析。系统提供了完整的用户管理、实时检测、历史记录查询等功能，为气象监测提供了高效、准确的技术解决方案。

测距侧面积

技术架构

整体架构设计

系统采用前后端分离的微服务架构，主要由以下几个部分组成：

┌─────────────────┐    ┌─────────────────┐    ┌─────────────────┐
│   前端展示层     │    │   后端API层     │    │   AI检测层      │
│   Vue3 + TS     │◄──►│  Django REST    │◄──►│  YOLO + Gradio  │
│   Element Plus  │    │   Framework     │    │   OpenCV        │
└─────────────────┘    └─────────────────┘    └─────────────────┘│                       │                       ││              ┌─────────────────┐              │└──────────────►│   数据存储层     │◄─────────────┘│   SQLite        ││   Media Files   │└─────────────────┘

技术栈详情

后端技术栈

核心框架: Django 5.0.7
API框架: Django REST Framework
数据库: SQLite3
深度学习:
- YOLOv8 (Ultralytics)
- OpenCV 4.x
- PyTorch
Web界面: Gradio
图像处理: Pillow, NumPy
其他: CORS处理、JWT认证、文件上传处理

前端技术栈

核心框架: Vue 3.5.12 + TypeScript
UI组件库: Element Plus 2.8.7
构建工具: Vite 5.4.10
状态管理: Pinia 2.2.6
路由管理: Vue Router 4.4.5
HTTP客户端: Axios 1.7.7
样式处理:
- Tailwind CSS 3.4.14
- SCSS
图表库: ECharts 5.5.1
其他功能:
- 国际化支持 (Vue I18n)
- 文件上传 (vue-cropper)
- 数据可视化 (vue-echarts)

系统功能模块

1. 用户认证与权限管理系统

系统实现了完整的用户认证和基于角色的权限管理（RBAC）：

核心功能：

用户注册与登录: 支持用户名密码登录，密码强度验证
密码安全: Django内置PBKDF2算法加密存储
角色权限管理: 支持多角色分配，细粒度权限控制
用户信息管理: 完整的用户资料管理功能
头像上传: 支持头像图片上传和预览

数据模型设计：

# 角色模型
class Role(models.Model):role_name = models.CharField(max_length=255, verbose_name='角色名称')description = models.TextField(verbose_name='角色描述')created_at = models.DateTimeField(auto_now_add=True)# 用户信息模型
class Profile(models.Model):username = models.CharField(max_length=255, unique=True, verbose_name='用户名')password = models.CharField(max_length=255, verbose_name='密码')name = models.CharField(max_length=255, verbose_name='姓名')gender = models.CharField(max_length=255, verbose_name='性别')avatar = models.ImageField(upload_to='avatars/', verbose_name='头像')phone = models.CharField(max_length=255, verbose_name='手机号')email = models.CharField(max_length=255, verbose_name='邮箱')role = models.ForeignKey(Role, on_delete=models.SET_NULL, verbose_name='角色')dept = models.CharField(max_length=255, verbose_name='所属部门')# 登录验证逻辑
class LoginView(APIView):def post(self, request):username = serializer.validated_data['username']password = serializer.validated_data['password']user = Profile.objects.filter(username=username).first()if check_password(password, user.password):# 登录成功，保存用户信息到JSON文件供AI检测模块使用with open('media/user_info.json', 'w', encoding='utf-8') as f:json.dump(ProfileSerializer(user).data, f, ensure_ascii=False)return Response({'message': '登录成功', 'user': ProfileSerializer(user).data})

前端登录界面：

前端采用Vue3 + 现代化UI设计，实现了：

登录/注册切换卡片
表单验证和错误提示
记住密码功能
响应式设计适配

2. 后台管理系统

在这里插入图片描述

提供了完整的后台管理功能：

主要模块：

系统首页（数据统计面板）
用户管理（用户CRUD操作）
角色管理（权限分配）
系统设置

个人中心功能：

个人信息修改
密码修改
头像更换
操作日志查看

3. 综合气象数据可视化系统

系统集成了多个独立的气象数据展示模块，通过iframe方式嵌入不同的专业气象应用：

3.1 海洋气象数据可视化

海表温度监测：
在这里插入图片描述

基于Leaflet地图的海表温度等值线展示
支持时间序列数据播放
温度梯度色彩映射
实时数据更新和历史数据查询

海水盐度分布：
在这里插入图片描述

盐度等值线可视化
多层次数据展示
区域盐度统计分析
盐度变化趋势图表

洋流流向分析：
在这里插入图片描述

矢量场可视化展示洋流方向和强度
流场动画效果
多深度层次洋流数据
洋流路径追踪功能

海浪高度监测：
在这里插入图片描述

有效波高等值线图
波浪方向矢量显示
海浪预报数据集成
极值统计和风险评估

3.2 大气气象数据展示

风场分析系统：
在这里插入图片描述

高精度风场矢量可视化
多高度层风场数据
风速等值线和矢量叠加显示
台风路径和风圈展示

实时天气查询：
在这里插入图片描述

基于OpenWeatherMap API的专业天气应用：

// 天气数据API集成
const getWeather = async (params) => {const response = await fetch(`${weatherEndpoint}?${serialize(params)}${fixedParams}`)return await response.json()
}// 天气数据模型
class WeatherData {constructor(temp, feelsLike, description, humidity, pressure, windSpeed, windDeg, visibility, icon) {this.temp = tempthis.feelsLike = feelsLikethis.description = descriptionthis.humidity = humiditythis.pressure = pressurethis.windSpeed = windSpeedthis.windDeg = windDegthis.visibility = visibilitythis.icon = icon}
}

功能特性：

全球城市天气查询
多语言支持（中文、英文等）
温度单位切换（摄氏度/华氏度）
主题切换（明暗模式）
天气图标动态显示
地图定位展示
数据缓存机制

3.3 专业地理信息系统

在这里插入图片描述

基于Leaflet.js的专业GIS功能：

核心技术实现：

// Leaflet地图组件
import {LMap, LMarker, LPopup, LCircle, LLayerGroup} from "vue2-leaflet"
import HeatmapOverlay from 'heatmap.js/plugins/leaflet-heatmap'// 地图工具栏配置
mapToolBar: [{name: '标记', icon: require('@/assets/images/ico_biaoji.png')},{name: '测距', icon: require('@/assets/images/ico_cejuli.png')},{name: '测面积', icon: require('@/assets/images/ico_cemianji.png')},{name: '清除', icon: require('@/assets/images/ico_qingchu.png')}
]

专业功能：

地图标记: 支持多种标记图标，自定义标记内容
距离测量: 精确的地理距离计算，支持多点连线测距
面积计算: 多边形面积测量，支持复杂几何形状
路径规划: 多点路径绘制和优化
图层管理: 多图层叠加显示和控制
坐标系统: 支持多种坐标系转换
数据导出: 测量结果数据导出功能

3.4 气象数据API集成

系统集成了丰富的气象数据API接口：

// 气象数据API接口配置
export const getWindInfo = "/v1/typhoon-wind-field/getWindInfo"           // 风场数据
export const getCurrentInfo = "/v1/typhoon-current/getCurrentInfo"        // 洋流数据  
export const getSaltInfo = "/v1/typhoon-salt-info/getSaltInfo"           // 盐度数据
export const getSeaTemperature = "/v1/typhoon-sea-temperature/getSeaTemperature" // 海温数据
export const getWaveInfo = "/v1/typhoon-wave-field/getWaveInfo"          // 海浪数据
export const getAirPressure = "/v1/typhoon-pressure/getPressureInfo"     // 气压数据// 全球气象数据接口
export const getEarthWindInfo = "/v1/typhoon-earth-wind-filed/getInfo"    // 全球风场
export const getEarthCurrentInfo = "/v1/typhoon-earth-current-filed/getInfo" // 全球洋流
export const getEarthWaveInfo = "/v1/typhoon-earth-wave-hot-filed/getInfo"   // 全球海浪

3.5 台风监测系统

系统还集成了专业的台风监测功能：

// 台风相关API
export const list = "/v1/typhoon/list/"                    // 台风列表
export const getDetailById = "/v1/typhoon"                 // 台风详情
export const getRiskStatistics = "/v1/typhoon/impact_risk_statistics/" // 风险统计
export const getSpacingDistancePlatform = "/v1/typhoon/spacing_distance_platform" // 台风间距

台风功能特性：

台风路径实时跟踪
台风强度等级显示
影响范围预测
海上平台风险评估
台风历史数据查询
自定义台风数据上传

4. AI智能检测系统

这是系统的核心创新功能，基于YOLOv8深度学习算法实现的智能气象目标检测：

4.1 图片检测功能

在这里插入图片描述

系统架构：

AI模型: 基于YOLOv8的气象目标检测模型
Web界面: Gradio提供的现代化交互界面
后端集成: Django多线程启动Gradio服务
数据存储: 检测结果自动保存到数据库

核心技术实现：

# AI检测核心函数
def detect(input_path, user_id=None):# 获取当前登录用户信息with open("media/user_info.json", 'r', encoding='utf-8') as f:user_data = json.load(f)user_id = user_data['id']# 加载预训练YOLO模型model = YOLO(model_path)  # best.pt 训练好的气象检测模型# 执行目标检测metrics = model.predict([input_path])metrics[0].save(filename=output_path)image = metrics[0].plot()  # 绘制检测框# 解析检测结果data = []if metrics[0].boxes is not None:for *xyxy, conf, cls in metrics[0].boxes.data.tolist():label = model.names[int(cls)]  # 获取类别名称confidence = round(conf, 2)    # 置信度保留两位小数data.append([label, confidence])# 保存检测历史到数据库history = Yolo_detect_history(user_id=user_id,type="图片",input=input_image_file,output=output_image_file,result=data,  # JSON格式存储检测结果describe=f"检测到{len(data)}个目标")history.save()return cv2.cvtColor(image, cv2.COLOR_BGR2RGB), pd.DataFrame(data, columns=['Class', 'Confidence'])

4.2 视频检测功能

在这里插入图片描述

核心特性：

实时处理: 逐帧视频流检测
结果可视化: 检测框实时绘制
多格式支持: MP4、AVI、MOV等视频格式
中断控制: 支持检测过程中断
进度显示: 实时显示检测进度

视频检测技术实现：

def video_streaming(input_video_path, user_id=None):global stop_eventstop_event.clear()# 打开视频文件cap = cv2.VideoCapture(input_video_path)fps = int(cap.get(cv2.CAP_PROP_FPS))width = int(cap.get(cv2.CAP_PROP_FRAME_WIDTH))height = int(cap.get(cv2.CAP_PROP_FRAME_HEIGHT))# 设置输出视频编码器fourcc = cv2.VideoWriter_fourcc(*'VP90')output_path = os.path.join(output_folder, os.path.basename(input_video_path))out = cv2.VideoWriter(output_path, fourcc, fps, (width, height))frame_count = 0detection_results = []try:while cap.isOpened() and not stop_event.is_set():ret, frame = cap.read()if not ret:break# 对当前帧进行YOLO检测results = model.predict([frame])plotted_frame = results[0].plot()out.write(plotted_frame)# 收集检测结果if results[0].boxes is not None:for *xyxy, conf, cls in results[0].boxes.data.tolist():label = model.names[int(cls)]confidence = round(conf, 2)detection_results.append([label, confidence])frame_count += 1# 生成器方式返回处理后的帧yield cv2.cvtColor(plotted_frame, cv2.COLOR_BGR2RGB)# 保存视频检测结果到数据库save_video_detection_history(input_video_path, output_path, detection_results, frame_count, user_id)except Exception as e:print(f"视频处理错误: {e}")finally:cap.release()out.release()

4.3 实时摄像头检测

系统还支持实时摄像头检测功能：

def detect_realtime_video(user_id=None):global stop_eventcap = cv2.VideoCapture(0)  # 打开默认摄像头while cap.isOpened() and not stop_event.is_set():ret, frame = cap.read()if not ret:breakresults = model.predict([frame])plotted_frame = results[0].plot()# 实时显示检测结果cv2.imshow('YOLO Realtime Detection', plotted_frame)# 按'q'键退出if cv2.waitKey(1) & 0xFF == ord('q'):stop_event.set()break

4.4 Gradio Web界面集成

系统通过Gradio提供了专业的Web检测界面：

# 自定义CSS样式
custom_css = """
footer { display: none !important; }
"""# 构建Gradio应用界面
with gr.Blocks(css=custom_css, theme=gr.themes.Soft()) as yolo_detect:# 图片检测区域with gr.Row():input_image = gr.Image(type="filepath", label="输入图片", height=400)output_image = gr.Image(type="numpy", label="输出图片", height=400)output_df = gr.Dataframe(label="检测结果")# 示例图片展示image_files = glob(os.path.join(settings.BASE_DIR, 'App/handle/images/*.jpg'))examples_row1 = [[img] for img in sorted(image_files)]gr.Examples(examples=examples_row1, inputs=input_image, label="图片示例")# 检测按钮detect_btn = gr.Button("开始图片检测", variant="primary")detect_btn.click(fn=detect, inputs=input_image, outputs=[output_image, output_df])# 视频检测区域with gr.Row():video_input = gr.Video(label="输入视频", height=400)video_output = gr.Image(label="视频检测结果", height=400)# 视频示例video_files = glob(os.path.join(settings.BASE_DIR, 'App/handle/videos/*.mp4'))gr.Examples(examples=[[video] for video in sorted(video_files)], inputs=video_input, label="视频示例")# 视频检测控制按钮with gr.Row():detect_video_btn = gr.Button("开始视频检测")stop_video_btn = gr.Button("停止视频检测")detect_video_btn.click(fn=video_streaming, inputs=video_input, outputs=video_output)stop_video_btn.click(lambda: stop_event.set())# Django中启动Gradio服务
def run_gradio_ui():yolo_detect.launch(server_name="127.0.0.1", server_port=7860)# 在Django启动时自动启动Gradio
thread = threading.Thread(target=run_gradio_ui)
thread.daemon = True
thread.start()

4.5 AI模型训练与优化

模型特点：

基础架构: YOLOv8n/s/m多种规模模型
训练数据: 专门的气象目标数据集
检测类别: 台风眼、云系、降水区域等气象要素
精度优化: 针对气象图像特点进行模型调优

模型部署：

# 模型文件路径
model_path = os.path.join(settings.BASE_DIR, 'App', 'handle', 'best.pt')# 模型加载和预热
model = YOLO(model_path)
model.predict(['dummy_image.jpg'])  # 预热模型，提高首次检测速度

5. 智能检测历史记录系统

在这里插入图片描述

这是系统的重要数据管理模块，提供了完整的AI检测历史记录管理功能：

5.1 核心功能特性

数据展示功能：

多媒体预览: 支持图片和视频的在线预览
检测结果展示: 以表格形式展示AI检测的具体结果
用户关联: 显示每条记录对应的检测用户
时间追踪: 精确记录检测时间信息
类型分类: 区分图片、视频、实时视频检测

数据管理功能：

分页浏览: 支持大量数据的分页显示
搜索过滤: 按用户、类型等条件筛选记录
批量操作: 支持批量删除等管理操作
数据导出: 检测结果数据导出功能

5.2 数据模型设计

class Yolo_detect_history(models.Model):user = models.ForeignKey(Profile, on_delete=models.SET_NULL, related_name='historys', verbose_name='用户')type = models.CharField(max_length=255, verbose_name='类型')  # 图片/视频/实时视频input = models.FileField(upload_to='Yolo_detect_history/inputs/', verbose_name='输入')output = models.ImageField(upload_to='Yolo_detect_history/outputs/', verbose_name='输出')describe = models.TextField(verbose_name='描述', default='')result = models.JSONField(verbose_name='检测结果')  # 存储检测结果JSON数据created_at = models.DateTimeField(auto_now_add=True, verbose_name='添加时间')class Meta:verbose_name = 'YOLO检测历史'verbose_name_plural = 'YOLO检测历史'db_table = 'Yolo_detect_history'

5.3 后端API实现

# ViewSet提供完整的CRUD操作
class Yolo_detect_historyViewSet(viewsets.ModelViewSet):queryset = Yolo_detect_history.objects.all().order_by('id')serializer_class = Yolo_detect_historySerializerpagination_class = CustomPageNumberPaginationdef get_queryset(self):"""支持用户ID过滤"""queryset = super().get_queryset()filter_conditions = Q()for field in ['user_id']:value = self.request.query_params.get(field)if value:filter_conditions &= Q(**{f"{field}": value})return queryset.filter(filter_conditions)# 搜索功能API
class Yolo_detect_historySearchView(GenericAPIView):pagination_class = CustomPageNumberPaginationserializer_class = Yolo_detect_historySerializerdef post(self, request):queryset = get_queryset(request.data, Yolo_detect_history)page = self.paginate_queryset(queryset)if page is not None:serializer = self.get_serializer(page, many=True)return self.get_paginated_response(serializer.data)serializer = self.get_serializer(queryset, many=True)return Response(serializer.data)

5.4 前端界面实现

Vue3 + Element Plus实现的现代化界面：

<template><div style="margin: 20px"><!-- 数据表格 --><el-table :data="data" style="width: 100%; margin-top: 20px;" stripe border><!-- 用户列 --><el-table-column prop='user.name' label='检测用户' width="150"></el-table-column><!-- 类型列 --><el-table-column prop='type' label='类型' width="150"></el-table-column><!-- 输入预览列 --><el-table-column label='输入' width="400"><template v-slot='{ row }'><div v-if="row.type==='图片'"><img v-if='row.input' :src='row.input' alt='输入' style="width: 400px;height: 300px;"/></div><div v-if="row.type==='视频'"><video v-if='row.input' :src='row.input' controls style="width: 400px;height: 300px;"/></div><div v-if="row.type==='实时视频'">无预览</div></template></el-table-column><!-- 输出预览列 --><el-table-column label='输出' width="400"><template v-slot='{ row }'><div v-if="row.type==='图片'"><img v-if='row.output' :src='row.output' alt='输出' style="width: 400px;height: 300px;"/></div><div v-if="row.type==='视频'||row.type==='实时视频'"><video v-if="row.output" :src="row.output" controls style="width: 400px;height: 300px;"/></div></template></el-table-column><!-- 检测结果列 --><el-table-column prop='result' label='检测结果' width="140"><template #default="scope"><ul style="height: 150px; overflow-y: auto; white-space: pre-line;display: flex;flex-direction: column;justify-content: center;"><li v-for="(item, index) in scope.row.result" :key="index">{{ item[0] }}: {{ item[1] }}</li></ul></template></el-table-column><!-- 时间列 --><el-table-column prop='created_at' label='检测时间' width="200"></el-table-column><!-- 操作列 --><el-table-column label="操作" fixed="right" width="180"><template #default="scope"><el-button type="danger" @click="deleteData(scope.row.id)">删除</el-button></template></el-table-column></el-table><!-- 分页组件 --><el-paginationv-model:current-page="pagination.page"v-model:page-size="pagination.page_size"layout="total, prev, pager, next, jumper":total="pagination.count"@current-change="handleCurrentChange"/></div>
</template>

5.5 数据处理逻辑

前端数据获取：

// 获取检测历史数据
const fetchData = async () => {try {const params = {page: pagination.page,page_size: pagination.page_size,};const response = await axios.get('/api/yolo_detect_history/', {params})data.value = response.data.resultspagination.count = response.data.count;} catch (error) {ElMessage.error('数据加载失败')}
}// 删除记录
const deleteData = async (id) => {ElMessageBox.confirm('此操作将永久删除该记录, 是否继续?','警告',{confirmButtonText: '确定',cancelButtonText: '取消',type: 'warning',}).then(async () => {try {await axios.delete(`/api/yolo_detect_history/${id}/`);ElMessage.success('数据删除成功');fetchData();} catch (error) {ElMessage.error('数据删除失败');}})
}

5.6 文件存储管理

存储结构：

media/
├── Yolo_detect_history/
│   ├── inputs/          # 原始输入文件
│   │   ├── image1.jpg
│   │   ├── video1.mp4
│   │   └── ...
│   └── outputs/         # AI检测结果文件
│       ├── image1_detected.jpg
│       ├── video1_detected.mp4
│       └── ...

文件管理功能：

自动文件名生成和冲突处理
支持多种图片格式（JPG、PNG、GIF等）
支持多种视频格式（MP4、AVI、MOV等）
文件大小和类型验证
存储空间管理和清理

系统核心算法

YOLO目标检测算法

系统采用YOLOv8作为核心检测算法：

算法优势：

实时性: 单阶段检测，速度快
准确性: 先进的特征提取网络
通用性: 支持多类别目标检测
可扩展: 支持自定义数据集训练

模型架构：

输入层 (640×640×3)↓
骨干网络 (CSPDarknet53)↓
特征金字塔网络 (FPN)↓
检测头 (Detection Head)↓
输出层 (边界框 + 类别概率)

图像处理流程

# 图像预处理
image = cv2.imread(input_path)
image = cv2.cvtColor(image, cv2.COLOR_BGR2RGB)# YOLO检测
results = model.predict([image])# 后处理
for result in results:boxes = result.boxes.data.tolist()for box in boxes:x1, y1, x2, y2, conf, cls = boxif conf > confidence_threshold:# 绘制检测框和标签cv2.rectangle(image, (x1, y1), (x2, y2), (0, 255, 0), 2)cv2.putText(image, f'{model.names[cls]}: {conf:.2f}', (x1, y1-10), cv2.FONT_HERSHEY_SIMPLEX, 0.5, (0, 255, 0), 2)

系统部署与运行

环境要求

Python后端环境：

Python >= 3.8
Django == 5.0.7
djangorestframework >= 3.14.0
torch >= 1.9.0
ultralytics >= 8.0.0
opencv-python >= 4.5.0
gradio >= 3.0.0
Pillow >= 8.0.0
pandas >= 1.3.0
numpy >= 1.21.0
django-cors-headers >= 3.13.0
drf-yasg >= 1.21.0  # API文档

Node.js前端环境：

Node.js >= 16.0.0
npm >= 7.0.0
Vue >= 3.5.0
TypeScript >= 5.0.0
Vite >= 5.0.0
Element Plus >= 2.8.0

气象数据服务环境：

Vue 2.x (leaflet-vector-scalar-js)
Leaflet >= 1.6.0
Bootstrap 5.x (vue-weather-app)
ECharts >= 4.6.0

完整部署步骤

1. 后端Django服务部署

# 1. 进入后端目录
cd Backend# 2. 创建Python虚拟环境（推荐）
conda create --name weather_system python=3.8 -y
conda activate weather_system# 3. 安装依赖包
pip install -r requirements.txt -i https://pypi.tuna.tsinghua.edu.cn/simple# 4. 数据库初始化
python manage.py makemigrations App
python manage.py migrate# 5. 创建超级用户（可选）
python manage.py createsuperuser --username=admin --email=admin@example.com# 6. 初始化默认数据
python init.py# 7. 启动Django开发服务器
python manage.py runserver 0.0.0.0:8000

系统初始化脚本：

# init.py - 系统初始化脚本
def initialize_data():conn = sqlite3.connect('db.sqlite3')cursor = conn.cursor()# 初始化角色数据cursor.executemany('INSERT INTO Role (role_name) VALUES (?)',[('用户',), ('管理员',)])# 初始化默认用户cursor.executemany('INSERT INTO Profile (username, name, password, role_id) VALUES (?, ?, ?, ?)',[('admin', '管理员', 'pbkdf2_sha256$720000$...', 2),('user', '普通用户', 'pbkdf2_sha256$720000$...', 1),])conn.commit()conn.close()

2. 前端主应用部署

# 1. 进入前端主应用目录
cd Front/Web# 2. 安装依赖
npm install# 3. 开发环境启动
npm run dev# 4. 生产环境构建
npm run build# 5. 预览生产构建
npm run serve

3. 气象数据服务部署

# Leaflet地图服务
cd Front/leaflet-vector-scalar-js-master
npm install
npm run serve  # 默认运行在8081端口# 天气查询服务  
cd Front/vue-weather-app-master
npm install
npm run dev    # 默认运行在8082端口

4. 服务启动顺序

后端服务: python manage.py runserver (端口8000)
AI检测服务: 自动启动Gradio (端口7860)
地图服务: npm run serve (端口8081)
天气服务: npm run dev (端口8082)
前端主应用: npm run dev (端口5173)

系统配置详解

Django后端配置

# Backend/Backend/settings.py
import os
from pathlib import PathBASE_DIR = Path(__file__).resolve().parent.parent# 安全配置
SECRET_KEY = "your-secret-key-here"
DEBUG = True  # 生产环境设为False
ALLOWED_HOSTS = ['localhost', '127.0.0.1', '0.0.0.0', 'your-domain.com']# 应用配置
INSTALLED_APPS = ['django.contrib.admin','django.contrib.auth','django.contrib.contenttypes','django.contrib.sessions','django.contrib.messages','django.contrib.staticfiles','App',                    # 主应用'corsheaders',           # CORS处理'rest_framework',        # REST API'rest_framework.authtoken','drf_yasg',             # API文档'csp'                   # 内容安全策略
]# 中间件配置
MIDDLEWARE = ['django.middleware.security.SecurityMiddleware','django.contrib.sessions.middleware.SessionMiddleware','corsheaders.middleware.CorsMiddleware','django.middleware.common.CommonMiddleware','django.contrib.auth.middleware.AuthenticationMiddleware','django.contrib.messages.middleware.MessageMiddleware','django.middleware.clickjacking.XFrameOptionsMiddleware','csp.middleware.CSPMiddleware',
]# 数据库配置
DATABASES = {'default': {'ENGINE': 'django.db.backends.sqlite3','NAME': BASE_DIR / 'db.sqlite3',}
}# 国际化配置
LANGUAGE_CODE = 'zh-Hans'
TIME_ZONE = 'Asia/Shanghai'
USE_I18N = True
USE_TZ = True# 静态文件和媒体文件配置
STATIC_URL = '/static/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
MEDIA_URL = '/media/'# CORS配置
CORS_ORIGIN_ALLOW_ALL = True
CORS_ALLOW_CREDENTIALS = True# DRF配置
REST_FRAMEWORK = {'DEFAULT_RENDERER_CLASSES': ('rest_framework.renderers.JSONRenderer',),'DEFAULT_PAGINATION_CLASS': 'rest_framework.pagination.PageNumberPagination','PAGE_SIZE': 10,
}# 内容安全策略配置
CSP_DEFAULT_SRC = ("'self'", '*')
CSP_SCRIPT_SRC = ("'self'", "blob:", "'unsafe-inline'", '*')
CSP_FRAME_SRC = ("'self'", "http://127.0.0.1:7860", '*')

前端Vite配置

// Front/Web/vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path'export default defineConfig({plugins: [vue()],resolve: {alias: {'/@': resolve(__dirname, 'src'),},},server: {host: '0.0.0.0',port: 5173,proxy: {'/api': {target: 'http://localhost:8000',changeOrigin: true,secure: false,},'/media': {target: 'http://localhost:8000',changeOrigin: true,secure: false,}}},build: {outDir: 'dist',assetsDir: 'assets',sourcemap: false,minify: 'terser',chunkSizeWarningLimit: 1500,rollupOptions: {output: {chunkFileNames: 'assets/js/[name]-[hash].js',entryFileNames: 'assets/js/[name]-[hash].js',assetFileNames: 'assets/[ext]/[name]-[hash].[ext]'}}}
})

生产环境部署

1. Docker部署（推荐）

# Dockerfile
FROM python:3.8-slimWORKDIR /app# 安装系统依赖
RUN apt-get update && apt-get install -y \gcc \g++ \libgl1-mesa-glx \libglib2.0-0 \libsm6 \libxext6 \libxrender-dev \libgomp1 \&& rm -rf /var/lib/apt/lists/*# 复制并安装Python依赖
COPY requirements.txt .
RUN pip install -r requirements.txt -i https://pypi.tuna.tsinghua.edu.cn/simple# 复制应用代码
COPY . .# 收集静态文件
RUN python manage.py collectstatic --noinput# 暴露端口
EXPOSE 8000# 启动命令
CMD ["gunicorn", "--bind", "0.0.0.0:8000", "Backend.wsgi:application"]

# docker-compose.yml
version: '3.8'services:web:build: .ports:- "8000:8000"volumes:- ./media:/app/mediaenvironment:- DEBUG=False- ALLOWED_HOSTS=localhost,127.0.0.1,your-domain.comnginx:image: nginx:alpineports:- "80:80"volumes:- ./nginx.conf:/etc/nginx/nginx.conf- ./static:/var/www/static- ./media:/var/www/mediadepends_on:- web

2. 系统服务配置

# /etc/systemd/system/weather-system.service
[Unit]
Description=Weather Detection System
After=network.target[Service]
Type=forking
User=www-data
WorkingDirectory=/var/www/weather-system
ExecStart=/var/www/weather-system/venv/bin/gunicorn --bind 0.0.0.0:8000 Backend.wsgi:application
Restart=always[Install]
WantedBy=multi-user.target

系统特色与创新

1. 前后端分离架构

职责清晰，便于维护和扩展
支持多端访问（Web、移动端）
高并发处理能力

2. AI算法集成

YOLO深度学习模型
实时检测能力
高精度识别结果

3. 用户体验优化

现代化UI设计
响应式布局
实时反馈机制

4. 数据可视化

多维度气象数据展示
交互式地图功能
图表统计分析

5. 系统可扩展性

模块化设计
插件化架构
支持自定义模型

性能优化

前端优化

代码分割: 使用Vite进行模块懒加载
资源压缩: Gzip压缩、图片优化
缓存策略: 浏览器缓存、CDN加速

后端优化

数据库优化: 索引优化、查询优化
文件处理: 异步上传、分块传输
并发处理: 多线程检测、队列管理

AI模型优化

模型量化: 减少模型大小
推理加速: GPU加速、批处理
内存管理: 及时释放资源

安全性考虑

1. 数据安全

用户密码加密存储
文件上传安全检查
SQL注入防护

2. 访问控制

基于角色的权限管理
API接口权限验证
跨域请求控制

3. 系统安全

CSP内容安全策略
HTTPS传输加密
定期安全更新

未来发展方向

1. 功能扩展

支持更多气象要素检测
增加预警预报功能
集成更多AI模型

2. 性能提升

分布式部署架构
微服务化改造
云原生部署

3. 用户体验

移动端APP开发
实时推送通知
个性化推荐

项目亮点与技术创新

🚀 核心创新点

1. 多模态AI检测集成

图片检测: 基于YOLOv8的高精度气象目标识别
视频检测: 实时视频流处理和逐帧分析
实时检测: 支持摄像头实时气象监测
检测历史: 完整的检测记录管理和数据分析

2. 微服务架构设计

主应用: Vue3 + TypeScript现代化前端
地图服务: Leaflet专业地理信息系统
天气服务: OpenWeatherMap API集成
AI服务: Gradio提供的交互式检测界面
后端API: Django REST Framework统一数据接口

3. 专业气象数据可视化

海洋数据: 海温、盐度、洋流、海浪多维度展示
大气数据: 风场、气压、降水等气象要素
台风监测: 台风路径追踪和影响评估
地理工具: 标记、测距、测面积等专业GIS功能

4. 智能化用户体验

自适应界面: 响应式设计，支持多设备访问
多语言支持: 中英文界面切换
主题切换: 明暗模式自由选择
数据缓存: 智能缓存提升加载速度

📊 系统性能指标

性能指标	数值	说明
AI检测精度	>90%	YOLOv8模型在气象数据上的检测精度
响应时间	<2s	图片检测平均响应时间
并发支持	100+	支持的并发用户数
数据处理	实时	视频流实时处理能力
存储效率	高压缩	智能文件压缩和存储管理

🛠️ 技术架构优势

前端技术栈

// 现代化前端技术栈
Vue 3.5.12 + TypeScript 5.6.3
├── UI框架: Element Plus 2.8.7
├── 构建工具: Vite 5.4.10  
├── 状态管理: Pinia 2.2.6
├── 路由管理: Vue Router 4.4.5
├── HTTP客户端: Axios 1.7.7
├── 样式处理: Tailwind CSS + SCSS
└── 数据可视化: ECharts 5.5.1

后端技术栈

# 稳定可靠的后端架构
Django 5.0.7 + Python 3.8+
├── API框架: Django REST Framework
├── AI算法: YOLOv8 + OpenCV
├── Web界面: Gradio 3.0+
├── 数据库: SQLite3 (可扩展至PostgreSQL/MySQL)
├── 文件处理: Pillow + NumPy
└── 并发处理: Threading + Async