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

基于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 = temp
        this.feelsLike = feelsLike
        this.description = description
        this.humidity = humidity
        this.pressure = pressure
        this.windSpeed = windSpeed
        this.windDeg = windDeg
        this.visibility = visibility
        this.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_event
    stop_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 = 0
    detection_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_event
    cap = cv2.VideoCapture(0)  # 打开默认摄像头
    
    while cap.isOpened() and not stop_event.is_set():
        ret, frame = cap.read()
        if not ret:
            break
            
        results = 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_historySerializer
    pagination_class = CustomPageNumberPagination
    
    def 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 = CustomPageNumberPagination
    serializer_class = Yolo_detect_historySerializer
    
    def 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-pagination
        v-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.results
    pagination.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作为核心检测算法：

算法优势：

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

模型架构：

输入层 (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 = box
        if 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. 服务启动顺序

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

系统配置详解

Django后端配置

# Backend/Backend/settings.py
import os
from pathlib import Path

BASE_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-slim

WORKDIR /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/media
    environment:
      - DEBUG=False
      - ALLOWED_HOSTS=localhost,127.0.0.1,your-domain.com
    
  nginx:
    image: nginx:alpine
    ports:
      - "80:80"
    volumes:
      - ./nginx.conf:/etc/nginx/nginx.conf
      - ./static:/var/www/static
      - ./media:/var/www/media
    depends_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. 智能化用户体验

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

📊 系统性能指标

🛠️ 技术架构优势

前端技术栈

// 现代化前端技术栈
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

🌟 应用场景

科研机构

• 气象数据分析和可视化
• AI模型训练和验证
• 学术研究数据支撑

政府部门

• 气象监测和预警
• 灾害评估和应急响应
• 公共服务数据展示

商业应用

• 海洋工程风险评估
• 农业气象服务
• 交通运输气象支持

教育培训

• 气象学教学演示
• 人工智能技术培训
• 地理信息系统教学

📈 未来发展规划

短期目标（3-6个月）

• 增加更多AI检测模型（分割、分类等）
• 优化检测精度和处理速度
• 增加移动端适配
• 完善API文档和开发者工具

中期目标（6-12个月）

• 集成更多气象数据源
• 支持实时数据流处理
• 增加预警预报功能
• 开发插件化架构

长期目标（1-2年）

• 云原生部署架构
• 微服务完全解耦
• 支持分布式计算
• 商业化产品发布

总结

本系统成功将现代Web技术与人工智能算法相结合，构建了一个功能完善、性能优异的智能气象检测平台。通过Django+Vue3的前后端分离架构，结合YOLOv8深度学习算法，实现了从用户管理到智能检测的全流程功能覆盖。

🎯 系统核心价值

1. 技术先进性: 采用最新的Web开发框架和AI算法，技术栈现代化程度高
2. 功能完整性: 涵盖用户管理、数据展示、智能检测、历史管理等全方位功能
3. 用户友好性: 现代化UI设计，操作简单直观，用户体验优秀
4. 扩展性强: 模块化架构设计，便于功能扩展和二次开发
5. 性能优异: 前后端分离架构，支持高并发访问和大数据处理
6. 专业性强: 针对气象领域的专业需求，提供精确的数据分析和可视化

🚀 技术创新亮点

• 多服务集成: 创新性地将多个独立服务通过iframe无缝集成
• AI算法应用: 将YOLO目标检测算法成功应用于气象数据分析
• 实时处理能力: 支持图片、视频、实时流的多模态AI检测
• 专业数据可视化: 提供海洋、大气等多维度气象数据的专业展示
• 现代化架构: 采用前后端分离、微服务化的现代架构设计

该系统为气象监测领域提供了一个高效、智能、专业的技术解决方案，不仅具有很好的实用价值和推广前景，更为相关领域的技术发展提供了有价值的参考和借鉴。