joke/docs/superpowers/plans/2026-05-21-joke-platform-implementation.md

笑话大全平台 - 实施计划

推荐执行方式: 使用 subagent-driven-development，按任务逐步实现

目标: 完成笑话大全平台一期建设（前台网站 + 后台管理 + 后端 API）

技术栈:

• 后端: Python FastAPI + SQLite + SQLAlchemy
• 前端: Vue3 + Vite + Element Plus + Axios
• 状态管理: Pinia
• 路由: Vue Router

---

阶段一：后端 API (api/)

Task 1: 项目初始化

• 创建: api/requirements.txt
• 创建: api/main.py - FastAPI 入口
• 创建: api/app/config.py - 配置管理
• 创建: api/app/database.py - SQLite 连接

# 依赖
fastapi==0.109.0
uvicorn[standard]==0.27.0
sqlalchemy==2.0.25
pydantic==2.5.3
python-jose[cryptography]==3.3.0
passlib[bcrypt]==1.7.4
python-multipart==0.0.6

Task 2: 数据库模型

• 创建: api/app/models/__init__.py
• 创建: api/app/models/joke.py - Joke 模型
• 创建: api/app/models/category.py - Type/Crowd 模型
• 创建: api/app/models/user.py - AdminUser 模型

Task 3: Pydantic Schemas

• 创建: api/app/schemas/__init__.py
• 创建: api/app/schemas/joke.py - Joke 请求/响应模型
• 创建: api/app/schemas/category.py - Category 模型
• 创建: api/app/schemas/auth.py - 登录/Token 模型

Task 4: 路由实现

• 创建: api/app/routers/__init__.py
• 创建: api/app/routers/jokes.py - 笑话 CRUD 路由
• 创建: api/app/routers/categories.py - 分类路由
• 创建: api/app/routers/auth.py - 认证路由
• 创建: api/app/routers/admin.py - 管理后台路由

Task 5: 数据库初始化与种子数据

• 创建: api/init_db.py - 初始化表和示例数据

---

阶段二：后台管理前端 (admin/)

Task 6: 项目初始化

• 创建: admin/package.json
• 创建: admin/vite.config.js
• 创建: admin/index.html
• 创建: admin/src/main.js
• 创建: admin/src/App.vue

Task 7: 路由和状态管理

• 创建: admin/src/router/index.js - 路由配置
• 创建: admin/src/stores/auth.js - 认证状态
• 创建: admin/src/stores/joke.js - 笑话状态

Task 8: API 封装

• 创建: admin/src/api/request.js - Axios 封装
• 创建: admin/src/api/joke.js - 笑话 API
• 创建: admin/src/api/category.js - 分类 API
• 创建: admin/src/api/auth.js - 认证 API

Task 9: 登录页

• 创建: admin/src/views/login/index.vue

Task 10: 布局和导航

• 创建: admin/src/layout/index.vue
• 创建: admin/src/layout/components/Sidebar.vue

Task 11: 仪表盘

• 创建: admin/src/views/dashboard/index.vue

Task 12: 笑话管理 - 列表

• 创建: admin/src/views/joke/List.vue - 列表 + 分页 + 筛选

Task 13: 笑话管理 - 编辑

• 创建: admin/src/views/joke/Edit.vue - 添加/编辑表单

Task 14: 分类管理

• 创建: admin/src/views/category/Type.vue - 类型管理
• 创建: admin/src/views/category/Crowd.vue - 人群管理

---

阶段三：前台展示前端 (web/)

Task 15: 项目初始化

• 创建: web/package.json
• 创建: web/vite.config.js
• 创建: web/index.html
• 创建: web/src/main.js
• 创建: web/src/App.vue

Task 16: 路由和状态管理

• 创建: web/src/router/index.js
• 创建: web/src/stores/joke.js

Task 17: API 封装

• 创建: web/src/api/request.js
• 创建: web/src/api/joke.js
• 创建: web/src/api/category.js

Task 18: 首页

• 创建: web/src/views/home/index.vue - 笑话列表
• 创建: web/src/views/home/components/JokeCard.vue - 卡片组件

Task 19: 分类筛选页

• 创建: web/src/views/category/index.vue

Task 20: 笑话详情页

• 创建: web/src/views/detail/index.vue

Task 21: 搜索页

• 创建: web/src/views/search/index.vue

Task 22: 通用组件

• 创建: web/src/components/Header.vue - 页头
• 创建: web/src/components/Footer.vue - 页脚

---

验证方式

1. 后端验证:

   cd api
   pip install -r requirements.txt
   python init_db.py
   uvicorn main:app --reload
   # 访问 http://localhost:8000/docs 测试 API
   

2. 后台管理验证:

   cd admin
   npm install
   npm run dev
   # 登录后测试各项管理功能
   

3. 前台验证:

   cd web
   npm install
   npm run dev
   # 浏览笑话列表、分类筛选、搜索等功能
   

---

文件清单汇总

后端 API (api/):

api/
├── requirements.txt
├── main.py
├── init_db.py
└── app/
    ├── __init__.py
    ├── config.py
    ├── database.py
    ├── models/
    │   ├── __init__.py
    │   ├── joke.py
    │   ├── category.py
    │   └── user.py
    ├── schemas/
    │   ├── __init__.py
    │   ├── joke.py
    │   ├── category.py
    │   └── auth.py
    └── routers/
        ├── __init__.py
        ├── jokes.py
        ├── categories.py
        ├── auth.py
        └── admin.py

后台管理 (admin/):

admin/
├── package.json
├── vite.config.js
├── index.html
└── src/
    ├── main.js
    ├── App.vue
    ├── api/
    ├── stores/
    ├── router/
    ├── layout/
    └── views/

前台展示 (web/):

web/
├── package.json
├── vite.config.js
├── index.html
└── src/
    ├── main.js
    ├── App.vue
    ├── api/
    ├── stores/
    ├── router/
    ├── components/
    └── views/
        ├── home/
        ├── category/
        ├── detail/
        └── search/