183 lines
5.1 KiB
Markdown
183 lines
5.1 KiB
Markdown
|
# ALIGNMENT - 前端 UI 项目需求对齐
|
|||
|
|
|
|||
|
|
## 📋 原始需求
|
|||
|
|
在项目根目录下创建前端ui项目，为此项目做一个简易ui页面。不需要登录注册。直接能访问得管理页面即可。技术选型使用Vue3。
|
|||
|
|
|
|||
|
|
## 🏗️ 项目上下文分析
|
|||
|
|
|
|||
|
|
### 现有项目架构
|
|||
|
|
- **项目类型**: FastAPI 后端 API 项目
|
|||
|
|
- **技术栈**: Python + FastAPI + SQLAlchemy + MySQL
|
|||
|
|
- **架构模式**: 分层架构 + 应用工厂模式
|
|||
|
|
- **API 版本**: v1 (`/api/v1/`)
|
|||
|
|
- **主要实体**: Users、Products
|
|||
|
|
- **数据库**: MySQL (开发环境支持 SQLite)
|
|||
|
|
- **CORS 配置**: 已启用，允许跨域访问
|
|||
|
|
|
|||
|
|
### 现有 API 端点
|
|||
|
|
1. **用户管理 API** (`/api/v1/users/`)
|
|||
|
|
- GET `/` - 获取用户列表
|
|||
|
|
- GET `/{user_id}` - 获取单个用户
|
|||
|
|
- POST `/` - 创建新用户
|
|||
|
|
- PUT `/{user_id}` - 更新用户
|
|||
|
|
- DELETE `/{user_id}` - 删除用户
|
|||
|
|
|
|||
|
|
2. **产品管理 API** (`/api/v1/products/`)
|
|||
|
|
- GET `/` - 获取产品列表
|
|||
|
|
- GET `/{product_id}` - 获取单个产品
|
|||
|
|
- POST `/` - 创建新产品
|
|||
|
|
- PUT `/{product_id}` - 更新产品
|
|||
|
|
- DELETE `/{product_id}` - 删除产品
|
|||
|
|
|
|||
|
|
### 数据模型
|
|||
|
|
1. **用户 (User)**
|
|||
|
|
- id: int (主键)
|
|||
|
|
- username: str (用户名)
|
|||
|
|
- email: EmailStr (邮箱)
|
|||
|
|
- full_name: str? (全名)
|
|||
|
|
- is_active: bool (激活状态)
|
|||
|
|
|
|||
|
|
2. **产品 (Product)**
|
|||
|
|
- id: int (主键)
|
|||
|
|
- name: str (产品名)
|
|||
|
|
- description: str? (描述)
|
|||
|
|
- price: float (价格)
|
|||
|
|
- stock: int (库存)
|
|||
|
|
- is_available: bool (可用状态)
|
|||
|
|
|
|||
|
|
## 🎯 需求理解确认
|
|||
|
|
|
|||
|
|
### 功能需求
|
|||
|
|
1. **前端项目结构**
|
|||
|
|
- 在项目根目录创建独立的前端项目
|
|||
|
|
- 使用 Vue 3 技术栈
|
|||
|
|
- 简易的管理界面设计
|
|||
|
|
|
|||
|
|
2. **用户体验**
|
|||
|
|
- 无需登录认证机制
|
|||
|
|
- 直接访问管理页面
|
|||
|
|
- 简洁易用的界面
|
|||
|
|
|
|||
|
|
3. **功能范围**
|
|||
|
|
- 用户管理功能 (CRUD)
|
|||
|
|
- 产品管理功能 (CRUD)
|
|||
|
|
- 数据展示和操作界面
|
|||
|
|
|
|||
|
|
### 技术需求
|
|||
|
|
1. **前端技术栈**
|
|||
|
|
- Vue 3 (Composition API)
|
|||
|
|
- 现代前端工具链 (Vite)
|
|||
|
|
- UI 框架选择 (需确认)
|
|||
|
|
- HTTP 客户端 (Axios)
|
|||
|
|
|
|||
|
|
2. **项目集成**
|
|||
|
|
- 与现有 FastAPI 后端 API 集成
|
|||
|
|
- 跨域请求处理
|
|||
|
|
- 开发环境配置
|
|||
|
|
|
|||
|
|
## ❓ 疑问澄清
|
|||
|
|
|
|||
|
|
### 1. UI 框架选择
|
|||
|
|
**问题**: 选择哪个 Vue UI 组件库？
|
|||
|
|
**建议选项**:
|
|||
|
|
- Element Plus (成熟稳定，管理界面友好)
|
|||
|
|
- Ant Design Vue (企业级组件)
|
|||
|
|
- Naive UI (轻量现代)
|
|||
|
|
- Quasar (功能丰富)
|
|||
|
|
|
|||
|
|
**推荐**: Element Plus - 最适合快速构建管理界面
|
|||
|
|
|
|||
|
|
### 2. 项目目录结构
|
|||
|
|
**问题**: 前端项目放置位置？
|
|||
|
|
**选项**:
|
|||
|
|
- `frontend/` (推荐 - 独立前端项目)
|
|||
|
|
- `web/` (简洁命名)
|
|||
|
|
- `ui/` (简短命名)
|
|||
|
|
|
|||
|
|
**推荐**: `frontend/` - 语义明确
|
|||
|
|
|
|||
|
|
### 3. 开发服务器配置
|
|||
|
|
**问题**: 前端开发服务器端口？
|
|||
|
|
**建议**:
|
|||
|
|
- 前端: `http://localhost:3000`
|
|||
|
|
- 后端: `http://localhost:8000` (已确定)
|
|||
|
|
- 避免端口冲突
|
|||
|
|
|
|||
|
|
### 4. 功能复杂度
|
|||
|
|
**问题**: 管理界面功能深度？
|
|||
|
|
**基础功能** (推荐):
|
|||
|
|
- 数据列表展示 (表格)
|
|||
|
|
- 增删改查操作
|
|||
|
|
- 表单验证
|
|||
|
|
- 操作反馈 (成功/错误提示)
|
|||
|
|
|
|||
|
|
**扩展功能** (可选):
|
|||
|
|
- 数据搜索过滤
|
|||
|
|
- 分页处理
|
|||
|
|
- 批量操作
|
|||
|
|
- 数据导出
|
|||
|
|
|
|||
|
|
## 🎯 边界确认
|
|||
|
|
|
|||
|
|
### 包含范围
|
|||
|
|
✅ Vue 3 + Vite 前端项目搭建
|
|||
|
|
✅ Element Plus UI 框架集成
|
|||
|
|
✅ 用户管理 CRUD 界面
|
|||
|
|
✅ 产品管理 CRUD 界面
|
|||
|
|
✅ 响应式布局设计
|
|||
|
|
✅ API 集成和错误处理
|
|||
|
|
✅ 基础表单验证
|
|||
|
|
|
|||
|
|
### 不包含范围
|
|||
|
|
❌ 用户认证登录系统
|
|||
|
|
❌ 权限管理和角色控制
|
|||
|
|
❌ 复杂的数据可视化
|
|||
|
|
❌ 文件上传功能
|
|||
|
|
❌ 实时数据更新 (WebSocket)
|
|||
|
|
❌ 移动端适配优化
|
|||
|
|
❌ 国际化多语言支持
|
|||
|
|
|
|||
|
|
## 💡 技术决策建议
|
|||
|
|
|
|||
|
|
### 1. 技术栈选择 (基于分析)
|
|||
|
|
- **Vue 3** + **Composition API**: 现代化开发体验
|
|||
|
|
- **Vite**: 快速构建工具，开发体验优秀
|
|||
|
|
- **Element Plus**: 成熟的 Vue 3 UI 组件库，适合管理界面
|
|||
|
|
- **Axios**: HTTP 客户端，API 交互
|
|||
|
|
- **Vue Router**: 路由管理 (SPA)
|
|||
|
|
- **Pinia**: 状态管理 (可选，简单项目可不用)
|
|||
|
|
|
|||
|
|
### 2. 项目结构建议
|
|||
|
|
```
|
|||
|
|
frontend/
|
|||
|
|
├── src/
|
|||
|
|
│ ├── components/ # 通用组件
|
|||
|
|
│ ├── views/ # 页面组件
|
|||
|
|
│ ├── api/ # API 接口
|
|||
|
|
│ ├── utils/ # 工具函数
|
|||
|
|
│ ├── router/ # 路由配置
|
|||
|
|
│ └── main.js # 入口文件
|
|||
|
|
├── public/ # 静态资源
|
|||
|
|
├── package.json # 依赖配置
|
|||
|
|
└── vite.config.js # 构建配置
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 3. 页面结构设计
|
|||
|
|
- **首页/仪表板**: 概览信息
|
|||
|
|
- **用户管理页**: 用户列表 + CRUD 操作
|
|||
|
|
- **产品管理页**: 产品列表 + CRUD 操作
|
|||
|
|
|
|||
|
|
## 🚨 关键假设
|
|||
|
|
1. 假设后端 API 已正常运行在 8000 端口
|
|||
|
|
2. 假设 CORS 已正确配置允许前端访问
|
|||
|
|
3. 假设用户具备基本的 Vue 3 开发环境
|
|||
|
|
4. 假设项目以简单实用为主，不需要复杂功能
|
|||
|
|
|
|||
|
|
## ✅ 验收标准
|
|||
|
|
1. 成功创建 Vue 3 前端项目
|
|||
|
|
2. 能够正常访问管理界面
|
|||
|
|
3. 用户管理功能完整可用 (列表、增删改查)
|
|||
|
|
4. 产品管理功能完整可用 (列表、增删改查)
|
|||
|
|
5. 界面美观易用，响应式布局
|
|||
|
|
6. 与后端 API 正常交互
|
|||
|
|
7. 基础的错误处理和用户反馈
|