旅行记录应用版本历史 - Cordova OpenHarmony 混合开发实战-育师

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

📌 概述

版本历史功能允许用户查看旅行记录的修改历史。用户可以查看每个版本的内容，也可以恢复到之前的版本。版本历史提供了数据的可追溯性和恢复能力。在 Cordova 与 OpenHarmony 的混合开发框架中，版本历史需要实现版本管理和数据恢复。

🔗 完整流程

第一步：版本记录与存储

每次编辑旅行时，需要保存一个版本记录。版本记录包括编辑前后的数据、编辑人、编辑时间等信息。版本记录需要与旅行关联。

第二步：版本列表展示与比较

版本历史页面需要展示所有版本的列表。用户可以查看版本的详细信息，也可以比较两个版本的差异。

第三步：原生层版本管理与存储优化

OpenHarmony 原生层可以实现版本的压缩存储，节省存储空间。原生层还可以实现版本的快速查询和恢复。

🔧 Web 代码实现

版本历史页面 HTML 结构

<divid="version-history-page"class="page"><divclass="page-header"><h1>版本历史</h1></div><divclass="version-history-container"><divclass="version-list"id="versionList"><!-- 版本列表动态加载 --></div><divclass="version-detail"id="versionDetail"><!-- 版本详情动态加载 --></div></div></div>

HTML 结构包含版本列表和版本详情。

加载版本历史函数

asyncfunctionloadVersionHistory(tripId){try{// 获取所有版本constversions=awaitdb.getVersions(tripId);// 按时间倒序排序versions.sort((a,b)=>newDate(b.timestamp)-newDate(a.timestamp));// 渲染版本列表renderVersionList(versions);}catch(error){console.error('Error loading version history:',error);showToast('加载版本历史失败');}}

加载版本历史函数从数据库获取所有版本。

版本列表渲染函数

functionrenderVersionList(versions){constcontainer=document.getElementById('versionList');container.innerHTML='';versions.forEach((version,index)=>{constversionElement=document.createElement('div');versionElement.className='version-item';versionElement.id=`version-${version.id}`;versionElement.innerHTML=`<div class="version-header"> <h4>版本${versions.length-index}</h4> <span class="version-time">${formatDate(version.timestamp)}</span> </div> <div class="version-body"> <p>编辑者:${version.editor||'未知'}</p> <p>修改:${version.changes?version.changes.length:0}项</p> </div> <div class="version-actions"> <button class="btn-small" onclick="viewVersion(${version.id})"> 查看 </button> <button class="btn-small" onclick="restoreVersion(${version.id})"> 恢复 </button> </div>`;container.appendChild(versionElement);});}

版本列表渲染函数展示所有版本。

查看版本函数

asyncfunctionviewVersion(versionId){try{// 获取版本数据constversion=awaitdb.getVersion(versionId);if(version){// 显示版本详情constdetailContainer=document.getElementById('versionDetail');detailContainer.innerHTML=`<div class="version-detail-content"> <h3>版本详情</h3> <div class="detail-item"> <span>编辑时间:</span> <span>${formatDate(version.timestamp)}</span> </div> <div class="detail-item"> <span>编辑者:</span> <span>${version.editor||'未知'}</span> </div> <div class="detail-item"> <span>修改内容:</span> <ul>${version.changes?version.changes.map(change=>`<li>${change}</li>`).join(''):'<li>无修改</li>'}</ul> </div> <div class="detail-item"> <span>数据:</span> <pre>${JSON.stringify(version.data,null,2)}</pre> </div> </div>`;}}catch(error){console.error('Error viewing version:',error);showToast('查看版本失败');}}

查看版本函数显示版本的详细信息。

恢复版本函数

asyncfunctionrestoreVersion(versionId){if(!confirm('确定要恢复到这个版本吗？')){return;}try{// 获取版本数据constversion=awaitdb.getVersion(versionId);if(version){// 获取当前旅行consttrip=awaitdb.getTrip(version.tripId);// 恢复数据trip.destination=version.data.destination;trip.description=version.data.description;trip.startDate=version.data.startDate;trip.endDate=version.data.endDate;trip.expense=version.data.expense;trip.updatedAt=newDate().toISOString();// 保存到数据库awaitdb.updateTrip(trip);showToast('版本已恢复');// 重新加载版本历史loadVersionHistory(trip.id);}}catch(error){console.error('Error restoring version:',error);showToast('恢复版本失败');}}

恢复版本函数将旅行恢复到指定版本。

🔌 OpenHarmony 原生代码实现

版本历史插件

// VersionPlugin.etsimport{BusinessError}from'@ohos.base';exportclassVersionPlugin{// 处理版本保存事件onVersionSaved(args:any,callback:Function):void{try{constversionId=args[0].versionId;consttripId=args[0].tripId;console.log(`[Version] Saved:${versionId}for trip${tripId}`);callback({success:true,message:'版本已保存'});}catch(error){callback({success:false,error:error.message});}}// 处理版本恢复事件onVersionRestored(args:any,callback:Function):void{try{constversionId=args[0].versionId;console.log(`[Version] Restored:${versionId}`);callback({success:true,message:'版本已恢复'});}catch(error){callback({success:false,error:error.message});}}}