AngleRecite 单词学习系统

概述

• 前端：React+TypeScript+Vite（frontend/）
• 后端：Django+DRF+JWT（backend/）
• LLM：豆包（火山方舟 Ark API）集成，自动回填释义与例句

本地运行

• 后端
  • python -m venv backend\.venv
  • backend\.venv\Scripts\python -m pip install -r backend\requirements.txt
  • backend\.venv\Scripts\python backend\manage.py migrate
  • 创建用户：backend\.venv\Scripts\python backend\manage.py createsuperuser 或运行一次登录测试后使用测试用户（示例：demo/demo123）
  • 运行：backend\.venv\Scripts\python backend\manage.py runserver 0.0.0.0:8000
• 前端
  • cd frontend
  • npm install
  • 开发：npm run dev（默认 http://localhost:5173/，后端默认 http://localhost:8000/api）

环境变量

• 后端 .env 示例：
  • DJANGO_SECRET_KEY=your-secret
  • DJANGO_DEBUG=1
  • CORS_ALLOWED_ORIGINS=http://localhost:5173
  • ARK_BASE_URL=https://ark.cn-beijing.volces.com/api/v3
  • ARK_MODEL=ep-xxxxxxxxxxxx（控制台接入点）
  • ARK_API_KEY=your-token

API

• 认证
  • POST /api/token/、POST /api/token/refresh/
• 词条
  • POST /api/words/（创建并触发豆包调用）
  • GET /api/words/?search=&scene=&ordering=&page=
  • GET /api/words/{id}/
• 文档
  • GET /api/schema/、GET /api/docs/

测试

• 后端：backend\.venv\Scripts\python backend\manage.py test -v 2
• 前端：cd frontend && npm run test

部署建议

• 后端：
  • DEBUG=0，使用 Gunicorn/Uvicorn + Nginx 与 PostgreSQL
  • 配置 CORS_ALLOWED_ORIGINS 精确来源；密钥注入使用系统环境/密钥管理
  • 访问控制：所有词条接口需授权；合理 timeout/retry 与调用限流
• 前端：
  • npm run build，将 dist/ 通过 Nginx/静态托管上线；开启压缩与缓存

性能优化

• 数据库：为 text、scene 建索引；分页查询只取必要字段
• 缓存：热门词条与列表结果短期缓存；LLM 结果持久化避免重复调用
• 前端：列表虚拟化与代码分割；请求去抖与缓存策略（React Query）

参考

• 豆包 Ark API（https://ark.cn-beijing.volces.com/api/v3 与接入点 ep-...），示例与指南可参考公开教程与文档（如 CSDN 指南与文档教程）