需求与项目结构

前面 20 篇把 Python 语言、前端、后端的基础都打好了。从这篇开始，把所有东西合到一个真实项目里——一个运维管理平台（ops-console），管理服务器资产、执行任务、记录事件、做权限控制。

一、做什么

ops-console 的核心功能：

模块	做什么	涉及的基础知识
资产管理	记录服务器 IP、主机名、角色、环境	CRUD 接口 + 数据库模型
任务管理	对资产执行操作（检查端口、重启服务）	后台任务 + 任务状态
事件记录	谁在什么时间对什么做了什么	审计日志
用户认证	登录、Token、权限控制	JWT + 依赖注入
前端界面	登录页、资产列表、任务详情、事件日志	Vue 组件 + 路由 + API 调用

不追求功能多——核心是把这些模块串成完整链路，展示一个全栈项目从前端到后端到部署的完整流程。每个模块用到的知识都在前面 20 篇里覆盖过，这里是把它们组装起来。

二、技术选型

层	技术	为什么选它
后端框架	FastAPI	前面基础篇一直在用，类型提示 + 自动文档
数据库	SQLite（开发）/ PostgreSQL（生产）	开发用 SQLite 省事，生产用 PostgreSQL
ORM	SQLAlchemy	Python 最主流的 ORM
前端框架	Vue 3	前端基础篇学的，组件化 + 数据驱动
前端构建	Vite	开发服务器 + 打包
HTTP 请求	fetch	前端 06 篇封装的 request 函数
认证	JWT	后端 14 篇的方案
部署	Docker + Nginx	27-28 篇详细讲

三、项目目录结构

前后端在同一个代码仓库里，各自独立目录：

text

ops-console/
├── backend/                 # 后端
│   ├── app/
│   │   ├── main.py          # FastAPI 应用入口
│   │   ├── config.py        # 配置（pydantic-settings）
│   │   ├── database.py      # 数据库引擎和会话
│   │   ├── models.py        # SQLAlchemy 模型
│   │   ├── schemas.py       # Pydantic 请求/响应模型
│   │   ├── auth.py          # 认证（JWT、密码哈希）
│   │   └── routers/         # 路由分模块
│   │       ├── assets.py    # 资产接口
│   │       ├── tasks.py     # 任务接口
│   │       ├── events.py    # 事件接口
│   │       └── users.py     # 用户接口（登录、注册）
│   ├── alembic/             # 数据库迁移
│   ├── tests/               # 测试
│   ├── pyproject.toml
│   └── .env                 # 配置（不进 Git）
├── frontend/                # 前端
│   ├── src/
│   │   ├── api/             # API 封装（request 函数 + 各模块）
│   │   ├── components/      # 通用组件
│   │   ├── views/           # 页面组件
│   │   ├── router/          # Vue Router 配置
│   │   └── App.vue          # 根组件
│   ├── package.json
│   └── vite.config.js
├── docker-compose.yml       # 开发环境编排
└── README.md

后端按职责分文件：models.py 管数据库模型，schemas.py 管 API 数据格式，auth.py 管认证，routers/ 按业务模块分路由。前端按功能分目录：api/ 管请求封装，views/ 管页面，router/ 管路由。

四、后端入口骨架

先搭一个能跑的骨架——FastAPI 应用 + CORS + 路由注册：

新增文件：backend/app/main.py

python

from fastapi import FastAPI
from fastapi.middleware.cors import CORSMiddleware

app = FastAPI(title="ops-console", version="1.0.0")

# CORS：允许前端跨域（开发时前端在 5173，后端在 8000）
app.add_middleware(
    CORSMiddleware,
    allow_origins=["http://localhost:5173"],
    allow_credentials=True,
    allow_methods=["*"],
    allow_headers=["*"],
)


@app.get("/health")
def health_check():
    """健康检查接口，部署后用于探活。"""
    return {"status": "ok"}

/health 是部署时探活用的——Nginx 或容器编排定期访问它，返回 200 说明服务正常。后面加路由时，在 main.py 里注册：

python

from routers import assets, tasks, events, users

app.include_router(assets.router, prefix="/api/assets", tags=["资产"])
app.include_router(tasks.router, prefix="/api/tasks", tags=["任务"])
app.include_router(events.router, prefix="/api/events", tags=["事件"])
app.include_router(users.router, prefix="/api/users", tags=["用户"])

每个路由模块的接口统一加 /api 前缀——前端 request 函数的 BASE_URL 是 http://localhost:8000/api，拼起来就是 http://localhost:8000/api/assets。

五、开发环境启动

后端：

bash

cd backend
uv sync                        # 安装依赖
uv run uvicorn app.main:app --reload --port 8000

前端（用 Vite 创建）：

bash

npm create vite@latest frontend -- --template vue
cd frontend
npm install
npm run dev                    # 启动开发服务器，默认 5173

两个进程分别跑在 8000 和 5173，前端通过 fetch 调后端 API。开发阶段靠 CORS 中间件打通跨域，生产部署用 Nginx 反代，跨域问题自然消失（27-28 篇讲）。

需求与项目结构 ​

一、做什么 ​

二、技术选型 ​

三、项目目录结构 ​