107 lines
2.8 KiB
Markdown
107 lines
2.8 KiB
Markdown
|
# 导入功能持久化说明
|
||
|
|
|
||
|
|
## ✅ 导入数据会持久化
|
||
|
|
|
||
|
|
**是的，导入数据后会持久化到服务器！**
|
||
|
|
|
||
|
|
## 🔄 导入流程
|
||
|
|
|
||
|
|
1. **选择文件**: 用户选择 JSON 文件
|
||
|
|
2. **解析数据**: 读取并解析 JSON 文件
|
||
|
|
3. **确认导入**: 用户确认覆盖当前数据
|
||
|
|
4. **更新内存**: 将导入的数据加载到内存
|
||
|
|
5. **保存到服务器**: 调用 `saveData()` 方法，数据会：
|
||
|
|
- ✅ 优先保存到服务器 (`/api/urls` POST 请求)
|
||
|
|
- ✅ 保存到服务器文件 (`/app/data/urls.json`)
|
||
|
|
- ✅ 同时保存到 localStorage 作为备份
|
||
|
|
6. **渲染界面**: 更新页面显示
|
||
|
|
7. **提示成功**: 显示"数据导入成功并已保存到服务器！"
|
||
|
|
|
||
|
|
## 📋 代码实现
|
||
|
|
|
||
|
|
```javascript
|
||
|
|
handleFileImport(file) {
|
||
|
|
reader.onload = async (e) => {
|
||
|
|
const data = JSON.parse(e.target.result);
|
||
|
|
if (confirm('导入数据将覆盖当前的所有数据，确定要继续吗？')) {
|
||
|
|
// 更新数据
|
||
|
|
if (data.urls) this.urls = data.urls;
|
||
|
|
if (data.categories) this.categories = data.categories;
|
||
|
|
|
||
|
|
// 等待保存到服务器（关键步骤）
|
||
|
|
await this.saveData();
|
||
|
|
|
||
|
|
this.render();
|
||
|
|
alert('数据导入成功并已保存到服务器！');
|
||
|
|
}
|
||
|
|
};
|
||
|
|
}
|
||
|
|
```
|
||
|
|
|
||
|
|
## ✅ 验证方法
|
||
|
|
|
||
|
|
### 方法 1: 检查服务器文件
|
||
|
|
|
||
|
|
```bash
|
||
|
|
# 导入数据后，检查服务器文件
|
||
|
|
cat /home/renjianbo/devops/workdizhi/workdizhi/data/urls.json
|
||
|
|
```
|
||
|
|
|
||
|
|
### 方法 2: 检查 API
|
||
|
|
|
||
|
|
```bash
|
||
|
|
# 导入数据后，通过 API 获取数据
|
||
|
|
curl http://localhost:3006/api/urls
|
||
|
|
```
|
||
|
|
|
||
|
|
### 方法 3: 重启容器测试
|
||
|
|
|
||
|
|
```bash
|
||
|
|
# 导入数据后，重启容器
|
||
|
|
docker restart workdizhi-web
|
||
|
|
|
||
|
|
# 访问网站，数据应该还在
|
||
|
|
```
|
||
|
|
|
||
|
|
## 🔍 数据流向
|
||
|
|
|
||
|
|
```
|
||
|
|
导入 JSON 文件
|
||
|
|
↓
|
||
|
|
解析数据
|
||
|
|
↓
|
||
|
|
更新内存 (this.urls, this.categories)
|
||
|
|
↓
|
||
|
|
调用 saveData()
|
||
|
|
↓
|
||
|
|
POST /api/urls (保存到服务器)
|
||
|
|
↓
|
||
|
|
写入 /app/data/urls.json (持久化)
|
||
|
|
↓
|
||
|
|
同时保存到 localStorage (备份)
|
||
|
|
↓
|
||
|
|
✅ 数据已持久化
|
||
|
|
```
|
||
|
|
|
||
|
|
## ⚠️ 注意事项
|
||
|
|
|
||
|
|
1. **异步操作**: `saveData()` 是异步方法，导入时会等待保存完成
|
||
|
|
2. **数据覆盖**: 导入会覆盖当前所有数据，请先备份
|
||
|
|
3. **文件格式**: 必须是有效的 JSON 格式
|
||
|
|
4. **网络问题**: 如果服务器保存失败，会降级到 localStorage
|
||
|
|
|
||
|
|
## 🎯 总结
|
||
|
|
|
||
|
|
- ✅ **导入数据会持久化**: 数据会保存到服务器文件
|
||
|
|
- ✅ **自动保存**: 导入后自动调用 `saveData()`
|
||
|
|
- ✅ **多级备份**: 服务器文件 + localStorage
|
||
|
|
- ✅ **跨设备同步**: 所有设备访问同一服务器，数据同步
|
||
|
|
|
||
|
|
## 📝 使用建议
|
||
|
|
|
||
|
|
1. **定期导出**: 建议定期导出数据作为备份
|
||
|
|
2. **导入前备份**: 导入前先导出当前数据
|
||
|
|
3. **验证导入**: 导入后检查数据是否正确
|
||
|
|
4. **重启测试**: 重启容器验证数据是否持久化
|
||
|
|
|