网站空间试用云商网络综合服务

网站空间试用,云商网络综合服务,mvc 门户网站开发框架,网站后台可以备份吗欢迎大家加入开源鸿蒙跨平台开发者社区#xff0c;一起共建开源鸿蒙跨平台生态。 本文对应模块#xff1a;pages.js 中“财务目标”页面的 HTML 模板与 UI 结构#xff0c;以及与 db.js 中 goals 表的配合#xff1b;同时会补充一段鸿蒙 ArkTS 代码#xff0c;说明目标数据…欢迎大家加入开源鸿蒙跨平台开发者社区一起共建开源鸿蒙跨平台生态。本文对应模块pages.js中“财务目标”页面的 HTML 模板与 UI 结构以及与db.js中 goals 表的配合同时会补充一段鸿蒙 ArkTS 代码说明目标数据如何通过 FileManager 插件参与导出与导入。1. 模块定位从“记账”到“有目标地记账”前面的模块更多关注日常收支、账户和预算本模块要解决的是另一个问题不只是记录历史而是给未来定一个可以量化的目标并在页面中清楚地看到当前达成进度。典型的财务目标示例存 5 万元作为应急金在一年内攒够首付在半年内还清某笔贷款。在 UI 层面我们需要一个页面列出所有目标展示当前进度进度条或百分比提供新增/编辑目标的入口。2. 页面整体结构目标列表 进度概览在pages.js中“财务目标”页面的结构可以设计为// 财务目标页面 goals:()div classpc-page-container div classpc-page-header h2 财务目标/h2 p制定和跟踪你的长期财务目标/p /div div classpc-card div classpc-card-header h3目标列表/h3 button idgoal-add-btn classpc-button pc-button-primary新增目标/button /div div classpc-card-body div idgoals-list classpc-goals-list !-- JS 动态渲染每个目标及其进度条 -- /div /div /div /div,这里沿用了熟悉的 PC 布局骨架pc-page-containerpc-page-header作为页面的统一头部用一张pc-card承载“目标列表”goal-add-btn是新增目标的主入口goals-list容器承载每一个目标项的 UI 结构。3. 单个目标项的 UI 结构一个目标项至少需要展示目标名称目标金额当前已完成金额进度条和百分比操作按钮编辑 / 删除。示例结构functionrenderGoalItem(goal){constratiogoal.targetAmount0?Math.min(goal.currentAmount/goal.targetAmount,1):0;constpercentMath.round(ratio*100);returndiv classpc-goal-item>${goal.id} div classpc-goal-main div classpc-goal-title${goal.name}/div div classpc-goal-amounts span目标¥${goal.targetAmount.toFixed(2)}/span span当前¥${goal.currentAmount.toFixed(2)}/span /div div classpc-goal-progress div classpc-goal-progress-bar div classpc-goal-progress-inner stylewidth:${percent}%; /div /div span classpc-goal-progress-text${percent}%/span /div /div div classpc-goal-actions button classpc-button pc-button-sm>;}通过pc-goal-progress-inner的宽度控制进度条长度配合百分比文本使用户一眼就能看到目标完成度。4. 从数据库加载目标并渲染在db.js中我们可以有一个goals表结构类似// 目标表if(!db.objectStoreNames.contains(goals)){constgoalStoredb.createObjectStore(goals,{keyPath:id});goalStore.createIndex(createdAt,createdAt,{unique:false});}asyncgetGoals(){returnthis.getAll(goals);}在pages.js中加载并渲染asyncloadGoalsPage(){constcontainerdocument.getElementById(goals-list);if(!container)return;constgoalsawaitwindow.financeDB.getGoals();if(!goals||goals.length0){container.innerHTMLp classpc-text-muted暂时还没有任何财务目标可以点击右上角“新增目标”创建一个。/p;return;}consthtmlgoals.map(grenderGoalItem(g)).join();container.innerHTMLhtml;}这段逻辑与前面交易列表、账户列表的加载方式是同一种思路从 IndexedDB 取出所有目标映射成 HTML 片段写入页面容器。5. 新增和编辑目标表单与保存逻辑新增目标可以通过一个模态框或右侧表单来完成这里展示一个简化的保存逻辑asyncsaveGoal(){constnameInputdocument.getElementById(goal-name);consttargetInputdocument.getElementById(goal-target);constcurrentInputdocument.getElementById(goal-current);constnamenameInput?.value.trim();consttargetAmountparseFloat(targetInput?.value||0);constcurrentAmountparseFloat(currentInput?.value||0);if(!name){Toast.error(请输入目标名称);return;}if(!targetAmount||targetAmount0){Toast.error(请输入合理的目标金额);return;}if(currentAmount0){Toast.error(当前金额不能为负数);return;}constgoal{name,targetAmount,currentAmount,};awaitwindow.financeDB.addGoal(goal);Toast.success(目标已保存);this.loadGoalsPage();}对应的数据库操作示例asyncaddGoal(goal){goal.idthis.generateId();goal.createdAtnewDate().toISOString();returnthis.add(goals,goal);}编辑目标则是在 UI 中找出对应data-id从goals表读取后填充表单再通过updateGoal保存修改即可。6. ArkTS 侧财务目标数据的导出与导入财务目标作为goals表的一部分同样需要在导出/导入时被保留下来。导出调用链和前面预算模块类似Web 层调用financeDB.exportData()返回包含goals在内的完整数据对象JS 使用JSON.stringify序列化通过cordova.exec(FileManager, exportData, [json])把字符串交给 ArkTS 插件ArkTS 插件使用fileIo将其写入备份文件。下面是FileManagerPlugin.ets中的鸿蒙 ArkTS 片段与前文保持一致风格import{CordovaPlugin,CallbackContext}frommagongshou/harmony-cordova/Index;import{PluginResult,MessageStatus}frommagongshou/harmony-cordova/Index;import{common}fromkit.AbilityKit;import{fileIo}fromkit.CoreFileKit;exportclassFileManagerPluginextendsCordovaPlugin{asyncexportData(callbackContext:CallbackContext,args:string[]):Promisevoid{try{constjsonargs[0];// 其中包含 goals 表以及其他所有表的数据constcontextgetContext()ascommon.UIAbilityContext;constcacheDir:stringcontext.cacheDir;constfilePath:string${cacheDir}/finance-backup.json;constfileawaitfileIo.open(filePath,fileIo.OpenMode.WRITE_ONLY|fileIo.OpenMode.CREATE);awaitfileIo.write(file.fd,json);awaitfileIo.close(file.fd);constresultPluginResult.createByString(MessageStatus.OK,filePath);callbackContext.sendPluginResult(result);}catch(error){constresultPluginResult.createByString(MessageStatus.ERROR,(errorasError).message);callbackContext.sendPluginResult(result);}}}从目标模块视角看Web 层专注于目标的创建、进度计算和展示ArkTS 插件专注于“把包含目标在内的全部数据安全写入文件”当在新设备上导入备份后只要goals表被正确恢复目标页面 UI 就能重新渲染出所有目标及其进度。7. 小结财务目标页面 UI 的关键设计点统一 PC 布局与组件风格继续复用pc-page-container、pc-card等组件让目标页面在整体视觉上与其他模块保持一致进度条直观表达完成度通过pc-goal-progress-inner的宽度和百分比文本让用户一眼看懂“目标完成了多少”与 goals 表结构紧密结合目标名称、目标金额、当前金额在 UI 与数据库之间一一映射便于后续做统计或报表新增/编辑操作与列表展示解耦使用独立的表单负责新增/编辑列表只负责展示和触发操作事件代码结构更清晰与 ArkTS FileManager 插件协同目标数据作为整体数据库快照的一部分由 ArkTS 插件负责导出/导入保证在多设备之间迁移时不会丢失通过本模块你的应用从“记录历史 管理当前”进一步扩展到了“规划未来”用户不仅能看到资产现状还能在目标页面上持续跟踪自己距离目标的差距和进展这也是一个财务管理工具真正开始“有温度”的地方。