Word Memory Assistant 系统介绍
1. 项目概述
Word Memory Assistant（单词记忆助手）是一个专为用户提供单词记忆功能的 Web 应用系统。该系统采用前后端分离架构，后端使用 Django 框架提供 RESTful API，前端使用 Vue 3 构建用户界面，帮助用户更高效地记忆和管理单词。
1.1 项目目标
-
提供直观易用的单词记忆界面
-
支持用户个性化学习计划
-
实现单词的添加、编辑、删除和查询功能
-
提供单词记忆效果的统计和分析
-
确保系统的安全性和稳定性
2. 技术栈
2.1 后端技术
| 技术/框架 | 版本 | 用途 |
|---------|------|------|
| Python | 3.x | 后端开发语言 |
| Django | 6.0.1 | Web 框架 |
| Django REST Framework | - | RESTful API 开发 |
| MySQL | - | 关系型数据库 |
| djangorestframework-simplejwt | - | JWT 身份认证 |
| django-cors-headers | - | CORS 配置 |
2.2 前端技术
| 技术/框架 | 版本 | 用途 |
|---------|------|------|
| Vue | 3.5.24 | 前端框架 |
| Vite | 7.2.4 | 构建工具 |
| Vue Router | 4.6.4 | 前端路由 |
| Axios | 1.13.2 | HTTP 请求库 |
| Tailwind CSS | 3.4 | 样式框架 |
| Font Awesome | 7.1.0 | 图标库 |
3. 系统架构
3.1 架构图
```
┌─────────────────┐ ┌─────────────────┐ ┌─────────────────┐
│ 前端应用 │ │ 后端 API │ │ 数据库 │
│ (Vue 3) │─────>│ (Django REST) │─────>│ (MySQL) │
└─────────────────┘ └─────────────────┘ └─────────────────┘
```
3.2 核心流程
- **用户认证流程**：
-
用户通过前端登录界面提交用户名和密码
-
后端验证用户身份并生成 JWT token
-
前端存储 token 并在后续请求中携带
- **单词管理流程**：
-
用户通过前端界面进行单词的增删改查操作
-
前端通过 Axios 向后端 API 发送请求
-
后端处理请求并与数据库交互
-
后端返回处理结果给前端
-
前端更新界面显示
4. 目录结构
4.1 后端目录结构
```
caterpillar_one_backend/
├── manage.py # Django 管理脚本
├── caterpillar_one_backend/ # 项目配置目录
│ ├── settings.py # 项目配置文件
│ ├── urls.py # URL 路由配置
│ └── wsgi.py # WSGI 入口
├── api/ # API 应用目录
│ ├── migrations/ # 数据库迁移文件
│ ├── models.py # 数据模型
│ ├── serializers.py # 数据序列化
│ ├── views.py # 视图函数
│ └── urls.py # API 路由配置
└── media/ # 媒体文件目录
```
4.2 前端目录结构
```
caterpillar_one_frontend/
├── index.html # HTML 入口文件
├── package.json # 项目配置文件
├── vite.config.js # Vite 配置文件
├── src/ # 源代码目录
│ ├── main.js # 应用入口
│ ├── App.vue # 根组件
│ ├── components/ # 组件目录
│ ├── router/ # 路由配置
│ ├── views/ # 页面视图
│ ├── api/ # API 调用封装
│ └── assets/ # 静态资源
└── public/ # 公共资源目录
```
5. 核心功能
5.1 用户管理
-
用户注册
-
用户登录
-
密码修改
-
用户信息管理
5.2 单词管理
-
单词添加
-
单词编辑
-
单词删除
-
单词查询
-
单词分类
5.3 学习功能
-
单词记忆练习
-
学习进度统计
-
记忆效果分析
-
个性化学习计划
5.4 系统功能
-
数据导出
-
系统设置
-
日志管理
6. 数据库设计
6.1 数据库连接配置
```python
settings.py
DATABASES = {
'default': {
'ENGINE': 'django.db.backends.mysql',
'NAME': 'word memory assistant',
'USER': 'root',
'PASSWORD': 'root',
'HOST': 'localhost',
'PORT': '3306',
'OPTIONS': {
'charset': 'utf8mb4',
'sql_mode': 'traditional',
},
}
}
```
6.2 核心数据模型
-
**User**：用户信息表（使用 Django 默认用户模型）
-
**Word**：单词表，存储单词基本信息
-
**WordCategory**：单词分类表
-
**LearningRecord**：学习记录表，记录用户学习单词的情况
-
**LearningPlan**：学习计划表，存储用户的学习计划
7. API 接口
7.1 认证接口
-
`POST /api/token/`：获取访问令牌
-
`POST /api/token/refresh/`：刷新访问令牌
-
`POST /api/token/verify/`：验证访问令牌
7.2 用户接口
-
`GET /api/users/`：获取用户列表
-
`GET /api/users/{id}/`：获取单个用户信息
-
`POST /api/users/`：创建用户
-
`PUT /api/users/{id}/`：更新用户信息
-
`DELETE /api/users/{id}/`：删除用户
7.3 单词接口
-
`GET /api/words/`：获取单词列表
-
`GET /api/words/{id}/`：获取单个单词信息
-
`POST /api/words/`：添加单词
-
`PUT /api/words/{id}/`：更新单词信息
-
`DELETE /api/words/{id}/`：删除单词
7.4 学习记录接口
-
`GET /api/learning_records/`：获取学习记录列表
-
`POST /api/learning_records/`：添加学习记录
-
`PUT /api/learning_records/{id}/`：更新学习记录
8. 安全性
8.1 身份认证
-
使用 JWT（JSON Web Token）进行身份认证
-
访问令牌有效期：1天
-
刷新令牌有效期：7天
-
支持令牌旋转和黑名单
8.2 权限控制
-
使用 Django REST Framework 的权限系统
-
默认需要认证才能访问 API
-
支持基于角色的权限控制
8.3 CORS 配置
```python
CORS配置
CORS_ALLOW_ALL_ORIGINS = True # 允许所有来源的请求（开发环境下使用）
CORS_ALLOW_CREDENTIALS = True # 允许凭证
CORS_ALLOW_METHODS = ['DELETE', 'GET', 'OPTIONS', 'PATCH', 'POST', 'PUT']
CORS_ALLOW_HEADERS = [
'accept',
'accept-encoding',
'authorization',
'content-type',
'dnt',
'origin',
'user-agent',
'x-csrftoken',
'x-requested-with',
]
```
9. 部署与运行
9.1 开发环境配置
9.1.1 后端环境
- **创建虚拟环境**：
```bash
python -m venv .venv
```
- **激活虚拟环境**：
```bash
Windows
.venv\Scripts\activate
Linux/Mac
source .venv/bin/activate
```
- **安装依赖**：
```bash
pip install django djangorestframework djangorestframework-simplejwt django-cors-headers mysqlclient
```
- **数据库迁移**：
```bash
python manage.py makemigrations
python manage.py migrate
```
- **创建超级用户**：
```bash
python manage.py createsuperuser
```
- **启动开发服务器**：
```bash
python manage.py runserver
```
9.1.2 前端环境
- **安装依赖**：
```bash
npm install
```
- **启动开发服务器**：
```bash
npm run dev
```
9.2 生产环境部署
9.2.1 后端部署
- **配置生产环境设置**：
-
修改 `settings.py` 中的 DEBUG 为 False
-
配置 ALLOWED_HOSTS
-
配置数据库连接
- **使用 Gunicorn 作为 WSGI 服务器**：
```bash
pip install gunicorn
gunicorn caterpillar_one_backend.wsgi:application
```
- **配置 Nginx 作为反向代理**：
```nginx
server {
listen 80;
server_name example.com;
location / {
proxy_pass http://localhost:8000;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}
}
```
9.2.2 前端部署
- **构建生产版本**：
```bash
npm run build
```
- **部署到静态文件服务器**：
- 将 `dist` 目录下的文件部署到 Nginx 或其他静态文件服务器
10. 系统配置
10.1 后端配置
**关键配置文件**：`caterpillar_one_backend/settings.py`
-
**数据库配置**：MySQL 连接信息
-
**JWT 配置**：令牌有效期和刷新策略
-
**CORS 配置**：跨域请求设置
-
**REST Framework 配置**：认证、权限和分页设置
10.2 前端配置
**关键配置文件**：
-
`package.json`：项目依赖和脚本
-
`vite.config.js`：Vite 构建配置
-
`src/router/index.js`：路由配置
-
`src/api/index.js`：API 调用配置
11. 开发规范
11.1 后端开发规范
-
使用 PEP 8 编码规范
-
视图函数使用装饰器标记权限要求
-
数据序列化使用 Django REST Framework 的 Serializer
-
数据库操作使用 ORM，避免直接执行 SQL
11.2 前端开发规范
-
使用 ES6+ 语法
-
组件命名使用 PascalCase
-
变量和函数命名使用 camelCase
-
代码风格保持一致，使用 ESLint 进行检查
12. 故障排查
12.1 常见问题
- **数据库连接失败**：
-
检查 MySQL 服务是否启动
-
检查数据库连接信息是否正确
-
检查数据库用户权限
- **API 访问失败**：
-
检查 JWT token 是否有效
-
检查 CORS 配置是否正确
-
检查后端服务是否运行
- **前端页面空白**：
-
检查浏览器控制台是否有错误
-
检查 API 调用是否成功
-
检查路由配置是否正确
12.2 日志查看
-
**后端日志**：Django 开发服务器控制台输出
-
**前端日志**：浏览器开发者工具控制台
13. 未来规划
13.1 功能扩展
-
添加单词发音功能
-
实现单词记忆游戏
-
支持多语言翻译
-
添加学习社区功能
13.2 性能优化
-
数据库查询优化
-
前端页面加载速度优化
-
API 响应速度优化
13.3 技术升级
-
引入缓存机制
-
支持容器化部署
-
实现 CI/CD 流程
14. 总结
Word Memory Assistant 系统是一个功能完善、架构合理的单词记忆应用。通过采用现代 Web 技术栈，实现了前后端分离架构，为用户提供了良好的学习体验。系统具有良好的可扩展性和可维护性，能够满足用户的单词记忆需求，并为未来的功能扩展和技术升级做好了准备。
