172 lines
3.7 KiB
Markdown
172 lines
3.7 KiB
Markdown
# 在线阅读功能部署说明
|
||
|
||
## 后端部署步骤
|
||
|
||
### 1. 数据库迁移
|
||
|
||
在线阅读功能添加了以下数据库变更：
|
||
|
||
**CrudBookModel 模型新增字段：**
|
||
- `file`: 电子书文件字段（FileField）
|
||
- `file_type`: 文件类型字段（CharField）
|
||
|
||
**新增 ReadingProgress 模型：**
|
||
- `user`: 用户外键
|
||
- `book`: 图书外键
|
||
- `location`: 阅读位置（CFI格式）
|
||
- `progress`: 阅读进度百分比
|
||
|
||
**执行迁移命令：**
|
||
|
||
```bash
|
||
cd django-vue3-admin-backend
|
||
|
||
# 创建迁移文件
|
||
python manage.py makemigrations crud_book
|
||
|
||
# 执行迁移
|
||
python manage.py migrate crud_book
|
||
```
|
||
|
||
### 2. 新增API接口
|
||
|
||
**图书文件接口：**
|
||
- `GET /api/CrudBookModelViewSet/{id}/file/` - 获取图书文件信息
|
||
|
||
**阅读进度接口：**
|
||
- `POST /api/reading-progress/` - 保存/更新阅读进度
|
||
- `GET /api/reading-progress/by_book/?book_id={id}` - 获取指定图书的阅读进度
|
||
- `GET /api/reading-progress/` - 获取当前用户所有阅读进度
|
||
|
||
### 3. 配置检查
|
||
|
||
确保 `settings.py` 中已配置：
|
||
|
||
```python
|
||
# 媒体文件配置
|
||
MEDIA_URL = '/media/'
|
||
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
|
||
```
|
||
|
||
确保主 `urls.py` 中已配置静态文件服务：
|
||
|
||
```python
|
||
from django.conf import settings
|
||
from django.conf.urls.static import static
|
||
|
||
urlpatterns = [
|
||
# ... 其他路由
|
||
] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
|
||
```
|
||
|
||
## 前端部署步骤
|
||
|
||
### 1. 安装依赖
|
||
|
||
```bash
|
||
cd django-vue3-admin-web
|
||
|
||
# 使用yarn安装（推荐）
|
||
yarn install
|
||
|
||
# 或使用npm
|
||
npm install --legacy-peer-deps
|
||
```
|
||
|
||
### 2. 配置检查
|
||
|
||
已添加的文件：
|
||
- `src/views/book/reader/index.vue` - 阅读器组件
|
||
- `src/api/book/reader.ts` - API接口定义
|
||
- `src/router/route.ts` - 路由配置（已添加 /book/reader）
|
||
|
||
已修改的文件：
|
||
- `src/views/crud_book/CrudBookModelViewSet/crud.tsx` - 添加"在线阅读"按钮
|
||
|
||
### 3. 启动开发服务器
|
||
|
||
```bash
|
||
yarn dev
|
||
# 或
|
||
npm run dev
|
||
```
|
||
|
||
## 测试步骤
|
||
|
||
### 1. 上传测试文件
|
||
|
||
1. 准备一个EPUB格式的电子书文件
|
||
2. 在图书管理页面，编辑或新增图书
|
||
3. 上传EPUB文件到"电子书文件"字段
|
||
4. 保存图书信息
|
||
|
||
### 2. 测试在线阅读
|
||
|
||
1. 在图书列表中找到已上传文件的图书
|
||
2. 点击"在线阅读"按钮
|
||
3. 验证阅读器是否正常加载
|
||
4. 测试功能：
|
||
- 翻页（上一页/下一页）
|
||
- 目录导航
|
||
- 字体大小调整
|
||
- 阅读进度保存
|
||
|
||
### 3. 测试阅读进度
|
||
|
||
1. 阅读几页后关闭阅读器
|
||
2. 重新打开同一本书
|
||
3. 验证是否自动跳转到上次阅读位置
|
||
|
||
## 常见问题
|
||
|
||
### Q: 阅读器无法加载图书？
|
||
|
||
**检查项：**
|
||
1. 确认EPUB文件已正确上传
|
||
2. 检查后端MEDIA配置是否正确
|
||
3. 查看浏览器控制台错误信息
|
||
4. 确认API接口返回正确的文件URL
|
||
|
||
### Q: 阅读进度无法保存？
|
||
|
||
**检查项：**
|
||
1. 确认用户已登录
|
||
2. 检查数据库迁移是否执行成功
|
||
3. 查看后端日志是否有错误
|
||
4. 确认ReadingProgress模型已创建
|
||
|
||
### Q: 前端启动失败？
|
||
|
||
**解决方案：**
|
||
1. 删除 `node_modules` 和 `package-lock.json`
|
||
2. 使用 `yarn install` 重新安装依赖
|
||
3. 如果使用npm，添加 `--legacy-peer-deps` 参数
|
||
|
||
## 功能特性
|
||
|
||
✅ **已实现：**
|
||
- EPUB格式在线阅读
|
||
- 目录导航
|
||
- 阅读进度记录和恢复
|
||
- 字体大小调整
|
||
- 翻页控制
|
||
- 进度条显示
|
||
|
||
🚧 **待实现：**
|
||
- 翻译功能（需集成翻译API）
|
||
- 书签功能
|
||
- 笔记和高亮
|
||
- 夜间模式
|
||
- PDF格式支持
|
||
|
||
## 更新日志
|
||
|
||
### 2025-10-22
|
||
- ✅ 添加图书文件字段（file, file_type）
|
||
- ✅ 创建阅读进度模型（ReadingProgress）
|
||
- ✅ 实现文件获取API
|
||
- ✅ 实现阅读进度保存/获取API
|
||
- ✅ 前端添加阅读器路由
|
||
- ✅ 图书列表添加"在线阅读"按钮
|
||
- ✅ 完成前后端集成
|