Skip to content

项目目录与代码说明 (Vue + Flask)

CPD_Deploy 采用了 Vue 作为前端框架，Flask 作为后端 API 引擎。整个架构通过 Docker Compose 进行容器化编排，实现了前端静态托管与后端逻辑处理的解耦。

模块化目录树

项目结构分为前端工程、后端工程以及系统级配置三大部分：

docker-compose.yml # 编排 Vue 和 Flask 容器的核心文件
.env # 存储数据库连接、Flask Secret Key 等敏感信息
DirectoryFrontend/
- Directorypublic/ # 静态资源目录
  - …
- Directorysrc/ # 前端源码核心目录
  - Directoryassets/ # 静态资源（样式、图片等）
    …
  - Directorycomponents/ # 公共组件库
    …
  - Directorydocs/ # 项目相关文档说明
    …
  - Directorylayouts/ # 页面布局组件
    …
  - Directoryrouter/ # 路由配置
    …
  - App.vue # 根组件
  - env.d.ts # TypeScript 环境声明文件
  - main.ts # 项目入口文件
  - types.ts # 全局类型定义
- Dockerfile # 前端镜像构建脚本
- nginx.conf # 前端 Nginx 服务器配置
- vite.config.ts # Vite 构建工具配置
DirectoryBackend/
- Directoryapp/
  - Directoryapi/ # API 接口层（路由处理）
    …
  - Directorydatabase/ # 数据库连接与模型定义
    …
  - Directoryservice/ # 核心业务逻辑层
    …
  - Directorytasks/ # 异步任务或定时任务
    …
  - Directoryutils/ # 后端通用工具类
    …
- DirectoryCalculate_module/ # 独立算法模块
  - …
- config.py # 后端全局配置文件
- Dockerfile # 后端镜像构建脚本
- init_db.py # 数据库初始化脚本
- requirements.txt # Python 依赖清单
- run.py # 后端程序启动入口

前后端协作流程

在实验室环境下，前后端的通信逻辑如下：

1. 前端：Vue 驱动 (`/frontend`)

构建逻辑：在 Docker 构建阶段，Vue 会执行 npm run build 生成静态文件。
托管方式：容器内使用 Nginx 托管这些静态文件。
代理配置：所有以 /api 开头的请求都会被前端 Nginx 转发到后端 Flask 容器。

2. 后端：Flask API (`/backend`)

职责：处理前端发来的数据请求，操作数据库并返回 JSON 数据。
开发注意：Flask 默认运行在容器内部（如 5000 端口），并不直接对外网开放，只能通过 Docker 网络被前端访问。

3. 连接：Docker Compose

服务名通信：Vue 容器通过后端服务名（例如 http://backend:5000）连接 Flask。
最终入口：用户通过浏览器访问宿主机的 4431 端口即可看到 Vue 界面。

协作指南

接口变更
Section titled “接口变更”

如果修改了 backend/app/api 中的接口地址，请务必更新前端调用处的 axios 或 fetch 路径。
依赖更新
Section titled “依赖更新”
- Vue: 修改 package.json 后需重新构建前端镜像。
- Flask: 在 requirements.txt 中新增库后，请执行 docker compose build backend。
环境参数
Section titled “环境参数”

前端所需的 API 地址和后端所需的 Flask 密钥均统一在根目录的 .env 中配置。