欢迎大家加入开源鸿蒙跨平台开发者社区,一起共建开源鸿蒙跨平台生态。

在这里插入图片描述

📌 概述

备份恢复功能允许用户备份所有旅行数据,并在需要时恢复。备份可以保存到本地或云端,用户可以定期备份以防止数据丢失。在 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 和数据导入导出,原生层负责文件操作。通过备份恢复,用户可以保护重要数据。

Logo

作为“人工智能6S店”的官方数字引擎,为AI开发者与企业提供一个覆盖软硬件全栈、一站式门户。

更多推荐