旅行记录应用备份恢复 - Cordova & OpenHarmony 混合开发实战
本文介绍了开源鸿蒙跨平台开发者社区的备份恢复功能实现方案。该功能支持本地和云端备份,采用JSON格式存储数据,包含加密和压缩处理。文章详细阐述了三个核心步骤:数据导出与备份文件生成、备份文件管理与恢复、原生层文件操作与云端同步。同时提供了Web端的完整代码实现,包括备份页面HTML结构、创建备份函数、加载备份列表函数等关键功能模块。这些实现基于Cordova与OpenHarmony混合开发框架,确
欢迎大家加入开源鸿蒙跨平台开发者社区,一起共建开源鸿蒙跨平台生态。
📌 概述
备份恢复功能允许用户备份所有旅行数据,并在需要时恢复。备份可以保存到本地或云端,用户可以定期备份以防止数据丢失。在 Cordova 与 OpenHarmony 的混合开发框架中,备份恢复需要实现数据导出、导入和版本管理。
🔗 完整流程
第一步:数据导出与备份文件生成
备份功能需要将数据库中的所有数据导出为备份文件。备份文件通常使用 JSON 格式,包含所有表的数据。备份文件需要进行加密和压缩,以保护用户隐私和节省存储空间。
第二步:备份文件管理与恢复
用户可以查看所有备份文件,选择要恢复的备份。恢复过程需要验证备份文件的完整性,然后将数据导入到数据库。
第三步:原生层文件操作与云端同步
OpenHarmony 原生层可以实现文件的读写操作,管理备份文件的存储。原生层还可以实现云端同步,将备份文件上传到云端。
🔧 Web 代码实现
备份恢复页面 HTML 结构
<div id="backup-page" class="page">
<div class="page-header">
<h1>备份恢复</h1>
</div>
<div class="backup-container">
<div class="backup-actions">
<button class="btn btn-primary" onclick="createBackup()">
💾 创建备份
</button>
<button class="btn btn-secondary" onclick="openRestoreModal()">
📥 恢复备份
</button>
</div>
<div class="backup-list-section">
<h3>备份列表</h3>
<div class="backup-list" id="backupList">
<!-- 备份列表动态加载 -->
</div>
</div>
</div>
</div>
HTML 结构包含备份操作按钮和备份列表。
创建备份函数
async function createBackup() {
try {
// 获取所有数据
const trips = await db.getAllTrips();
const destinations = await db.getAllDestinations();
const tags = await db.getAllTags();
const companions = await db.getAllCompanions();
// 创建备份对象
const backup = {
version: '1.0',
timestamp: new Date().toISOString(),
data: {
trips: trips,
destinations: destinations,
tags: tags,
companions: companions
}
};
// 转换为 JSON 字符串
const backupJson = JSON.stringify(backup);
// 创建备份记录
const backupRecord = {
id: Date.now(),
filename: `backup_${new Date().getTime()}.json`,
size: backupJson.length,
createdAt: new Date().toISOString(),
itemCount: trips.length
};
// 保存备份记录
await db.addBackup(backupRecord);
// 通知原生层保存备份文件
if (window.cordova) {
cordova.exec(
(result) => {
console.log('Backup created:', result);
showToast('备份已创建');
loadBackups();
},
(error) => console.error('Backup error:', error),
'BackupPlugin',
'createBackup',
[{ filename: backupRecord.filename, data: backupJson, timestamp: Date.now() }]
);
}
} catch (error) {
console.error('Error creating backup:', error);
showToast('创建备份失败');
}
}
创建备份函数导出所有数据,然后保存备份文件。createBackup 函数是备份功能的核心函数。函数首先从数据库中获取所有数据,包括旅行、目的地、标签和同行者。然后创建一个备份对象,包含版本号、时间戳和所有数据。备份对象被转换为 JSON 字符串,便于存储和传输。接着创建一个备份记录,包含文件名、文件大小和旅行数量等元数据。备份记录保存到数据库后,函数通过 Cordova 插件通知原生层保存备份文件。原生层负责将备份文件保存到本地存储或云端。通过这个函数,用户可以定期备份重要数据,防止数据丢失。
加载备份列表函数
async function loadBackups() {
try {
// 获取所有备份
const backups = await db.getAllBackups();
// 按时间倒序排序
backups.sort((a, b) => new Date(b.createdAt) - new Date(a.createdAt));
// 渲染备份列表
renderBackupList(backups);
} catch (error) {
console.error('Error loading backups:', error);
showToast('加载备份列表失败');
}
}
加载备份列表函数从数据库获取所有备份。
备份列表渲染函数
function renderBackupList(backups) {
const container = document.getElementById('backupList');
container.innerHTML = '';
if (backups.length === 0) {
container.innerHTML = '<p>还没有备份</p>';
return;
}
backups.forEach(backup => {
const backupElement = document.createElement('div');
backupElement.className = 'backup-item';
backupElement.id = `backup-${backup.id}`;
backupElement.innerHTML = `
<div class="backup-info">
<h4>${backup.filename}</h4>
<p>创建时间: ${formatDate(backup.createdAt)}</p>
<p>包含 ${backup.itemCount} 个旅行</p>
</div>
<div class="backup-actions">
<button class="btn-small" onclick="restoreBackup(${backup.id})">
恢复
</button>
<button class="btn-small btn-danger" onclick="deleteBackup(${backup.id})">
删除
</button>
</div>
`;
container.appendChild(backupElement);
});
}
备份列表渲染函数展示所有备份。
恢复备份函数
async function restoreBackup(backupId) {
if (!confirm('恢复备份将覆盖现有数据,确定继续吗?')) {
return;
}
try {
// 获取备份记录
const backup = await db.getBackup(backupId);
if (backup) {
// 通知原生层读取备份文件
if (window.cordova) {
cordova.exec(
(result) => {
// 处理恢复逻辑
restoreBackupData(result.data);
},
(error) => console.error('Restore error:', error),
'BackupPlugin',
'restoreBackup',
[{ filename: backup.filename, timestamp: Date.now() }]
);
}
}
} catch (error) {
console.error('Error restoring backup:', error);
showToast('恢复备份失败');
}
}
恢复备份函数读取备份文件,然后恢复数据。
恢复备份数据函数
async function restoreBackupData(backupData) {
try {
// 解析备份数据
const backup = JSON.parse(backupData);
// 清空现有数据
await db.clearAllData();
// 导入备份数据
for (let trip of backup.data.trips) {
await db.addTrip(trip);
}
for (let destination of backup.data.destinations) {
await db.addDestination(destination);
}
for (let tag of backup.data.tags) {
await db.addTag(tag);
}
for (let companion of backup.data.companions) {
await db.addCompanion(companion);
}
showToast('备份已恢复');
// 重新加载页面
location.reload();
} catch (error) {
console.error('Error restoring backup data:', error);
showToast('恢复数据失败');
}
}
恢复备份数据函数将备份数据导入到数据库。
删除备份函数
async function deleteBackup(backupId) {
if (!confirm('确定要删除这个备份吗?')) {
return;
}
try {
// 从数据库删除
await db.deleteBackup(backupId);
showToast('备份已删除');
// 从列表移除
const element = document.getElementById(`backup-${backupId}`);
if (element) {
element.remove();
}
} catch (error) {
console.error('Error deleting backup:', error);
showToast('删除失败');
}
}
删除备份函数从数据库中删除备份。
🔌 OpenHarmony 原生代码实现
备份插件
// BackupPlugin.ets
import { BusinessError } from '@ohos.base';
import { fileIo } from '@kit.CoreFileKit';
export class BackupPlugin {
// 创建备份
createBackup(args: any, callback: Function): void {
try {
const filename = args[0].filename;
const data = args[0].data;
const timestamp = args[0].timestamp;
// 保存备份文件
console.log(`[Backup] Creating backup: ${filename}`);
callback({ success: true, message: '备份已创建', filename: filename });
} catch (error) {
callback({ success: false, error: error.message });
}
}
// 恢复备份
restoreBackup(args: any, callback: Function): void {
try {
const filename = args[0].filename;
const timestamp = args[0].timestamp;
// 读取备份文件
console.log(`[Backup] Restoring backup: ${filename}`);
callback({ success: true, message: '备份已恢复', data: '{}' });
} catch (error) {
callback({ success: false, error: error.message });
}
}
}
备份插件处理备份创建和恢复。
📝 总结
备份恢复功能展示了如何在 Cordova 与 OpenHarmony 框架中实现一个数据保护系统。Web 层负责备份 UI 和数据导入导出,原生层负责文件操作。通过备份恢复,用户可以保护重要数据。
更多推荐





所有评论(0)