bluish/ai

Fork 0

Files

liangweihao aa2416c5d6 first commit

2025-07-08 00:52:10 +08:00

3.5 KiB

Raw Permalink Blame History

Pandora 前后端集成说明

🚀 快速启动

1. 启动后端服务

cd backend
npm install
npm run dev

后端服务将在 http://localhost:3001 启动

2. 启动前端服务

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 中：

const API_BASE_URL = import.meta.env.VITE_API_BASE_URL || 'http://localhost:3001/api'

🧪 测试集成

1. API 测试页面

访问 http://localhost:3000/test 可以测试各种 API 功能：

获取路径列表
用户注册
用户登录
获取用户信息

2. 功能测试

用户注册: 访问首页，切换到注册模式，填写信息并注册
用户登录: 使用注册的邮箱和密码登录
路径权限: 登录后查看仪表板中的路径权限
账号管理: 查看分配的网站账号

📋 已实现的功能

后端 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 通知
✅ 响应式设计

🔐 认证流程

注册: 用户填写信息 → 后端创建用户 → 发送验证邮件
登录: 用户输入邮箱密码 → 后端验证 → 返回 JWT Token
权限验证: 前端请求携带 Token → 后端验证权限 → 返回数据
路径选择: 用户选择登录路径 → 验证路径权限 → 进入系统

🛠️ 开发工具

后端开发

# 数据库迁移
npm run db:migrate

# 生成 Prisma 客户端
npm run db:generate

# 查看数据库
npm run db:studio

前端开发

# 代码检查
npm run lint

# 类型检查
npm run type-check

# 构建生产版本
npm run build

🐛 常见问题

1. CORS 错误

确保后端 CORS 配置正确，允许前端域名访问。

2. 数据库连接错误

检查 SQLite 数据库文件是否存在，确保有写入权限。

3. API 请求失败

检查后端服务是否正常运行，API 地址是否正确。

4. 认证失败

检查 JWT Token 是否正确传递，Token 是否过期。

📝 下一步开发

完善管理后台: 实现用户管理、权限管理、账号管理界面
添加更多安全功能: API 限流、IP 白名单、审计日志
优化用户体验: 添加加载状态、错误处理、表单验证
性能优化: 数据库查询优化、前端代码分割、缓存策略
测试覆盖: 单元测试、集成测试、端到端测试

3.5 KiB Raw Permalink Blame History Unescape Escape