152 lines
3.5 KiB
Markdown
152 lines
3.5 KiB
Markdown
# Pandora 前后端集成说明
|
||
|
||
## 🚀 快速启动
|
||
|
||
### 1. 启动后端服务
|
||
|
||
```bash
|
||
cd backend
|
||
npm install
|
||
npm run dev
|
||
```
|
||
|
||
后端服务将在 `http://localhost:3001` 启动
|
||
|
||
### 2. 启动前端服务
|
||
|
||
```bash
|
||
cd frontend
|
||
npm install
|
||
npm run dev
|
||
```
|
||
|
||
前端服务将在 `http://localhost:3000` 启动
|
||
|
||
## 🔧 配置说明
|
||
|
||
### 后端配置
|
||
|
||
后端使用 SQLite 数据库，无需额外配置。主要配置项在 `backend/.env` 文件中：
|
||
|
||
- `DATABASE_URL`: SQLite 数据库路径
|
||
- `JWT_SECRET`: JWT 密钥
|
||
- `PORT`: 服务端口 (默认 3001)
|
||
|
||
### 前端配置
|
||
|
||
前端 API 基础 URL 配置在 `frontend/src/utils/api.ts` 中：
|
||
|
||
```typescript
|
||
const API_BASE_URL = import.meta.env.VITE_API_BASE_URL || 'http://localhost:3001/api'
|
||
```
|
||
|
||
## 🧪 测试集成
|
||
|
||
### 1. API 测试页面
|
||
|
||
访问 `http://localhost:3000/test` 可以测试各种 API 功能：
|
||
|
||
- 获取路径列表
|
||
- 用户注册
|
||
- 用户登录
|
||
- 获取用户信息
|
||
|
||
### 2. 功能测试
|
||
|
||
1. **用户注册**: 访问首页，切换到注册模式，填写信息并注册
|
||
2. **用户登录**: 使用注册的邮箱和密码登录
|
||
3. **路径权限**: 登录后查看仪表板中的路径权限
|
||
4. **账号管理**: 查看分配的网站账号
|
||
|
||
## 📋 已实现的功能
|
||
|
||
### 后端 API
|
||
|
||
- ✅ 用户注册 (`POST /api/auth/register`)
|
||
- ✅ 用户登录 (`POST /api/auth/login`)
|
||
- ✅ 邮箱验证 (`POST /api/auth/verify-email`)
|
||
- ✅ 密码重置 (`POST /api/auth/forgot-password`, `POST /api/auth/reset-password`)
|
||
- ✅ TOTP 二步验证 (`POST /api/auth/verify-totp`)
|
||
- ✅ 用户信息管理 (`GET /api/auth/profile`, `PUT /api/auth/profile`)
|
||
- ✅ 路径权限管理 (`GET /api/paths`, `GET /api/paths/user`)
|
||
- ✅ 账号管理 (`GET /api/accounts/user`)
|
||
- ✅ 管理员功能 (`/api/admin/*`)
|
||
|
||
### 前端功能
|
||
|
||
- ✅ 用户认证状态管理 (Pinia Store)
|
||
- ✅ API 服务层 (Axios)
|
||
- ✅ 路由守卫
|
||
- ✅ 登录/注册界面
|
||
- ✅ 用户仪表板
|
||
- ✅ 路径权限显示
|
||
- ✅ 账号列表显示
|
||
- ✅ Toast 通知
|
||
- ✅ 响应式设计
|
||
|
||
## 🔐 认证流程
|
||
|
||
1. **注册**: 用户填写信息 → 后端创建用户 → 发送验证邮件
|
||
2. **登录**: 用户输入邮箱密码 → 后端验证 → 返回 JWT Token
|
||
3. **权限验证**: 前端请求携带 Token → 后端验证权限 → 返回数据
|
||
4. **路径选择**: 用户选择登录路径 → 验证路径权限 → 进入系统
|
||
|
||
## 🛠️ 开发工具
|
||
|
||
### 后端开发
|
||
|
||
```bash
|
||
# 数据库迁移
|
||
npm run db:migrate
|
||
|
||
# 生成 Prisma 客户端
|
||
npm run db:generate
|
||
|
||
# 查看数据库
|
||
npm run db:studio
|
||
```
|
||
|
||
### 前端开发
|
||
|
||
```bash
|
||
# 代码检查
|
||
npm run lint
|
||
|
||
# 类型检查
|
||
npm run type-check
|
||
|
||
# 构建生产版本
|
||
npm run build
|
||
```
|
||
|
||
## 🐛 常见问题
|
||
|
||
### 1. CORS 错误
|
||
|
||
确保后端 CORS 配置正确，允许前端域名访问。
|
||
|
||
### 2. 数据库连接错误
|
||
|
||
检查 SQLite 数据库文件是否存在，确保有写入权限。
|
||
|
||
### 3. API 请求失败
|
||
|
||
检查后端服务是否正常运行，API 地址是否正确。
|
||
|
||
### 4. 认证失败
|
||
|
||
检查 JWT Token 是否正确传递，Token 是否过期。
|
||
|
||
## 📝 下一步开发
|
||
|
||
1. **完善管理后台**: 实现用户管理、权限管理、账号管理界面
|
||
2. **添加更多安全功能**: API 限流、IP 白名单、审计日志
|
||
3. **优化用户体验**: 添加加载状态、错误处理、表单验证
|
||
4. **性能优化**: 数据库查询优化、前端代码分割、缓存策略
|
||
5. **测试覆盖**: 单元测试、集成测试、端到端测试
|
||
|
||
## 🔗 相关文档
|
||
|
||
- [后端 API 文档](./backend/README.md)
|
||
- [前端开发文档](./frontend/README.md)
|
||
- [数据库设计文档](./TODO.md) |