免费网站建设网站想找人做网站和app

免费网站建设网站,想找人做网站和app,wordpress自定义链接导航,企业seo自助建站系统欢迎大家加入开源鸿蒙跨平台开发者社区#xff0c;一起共建开源鸿蒙跨平台生态。 本文对应模块#xff1a;pages.js 中账户相关的增删改 UI 交互逻辑#xff0c;以及 db.js 中账户表 (accounts) 的增删改查与余额字段维护方式。 1. 模块目标#xff1a;保证“每个账户的余额…欢迎大家加入开源鸿蒙跨平台开发者社区一起共建开源鸿蒙跨平台生态。本文对应模块pages.js中账户相关的增删改 UI 交互逻辑以及db.js中账户表 (accounts) 的增删改查与余额字段维护方式。1. 模块目标保证“每个账户的余额都说得清楚”在账户管理页面模块14中我们已经有了一个清晰的账户列表 UI用表格列出了账户名称、类型、余额、创建时间等信息。本模块要回答的是这些账户是如何被创建、修改和删除的余额字段是如何在记账、转账、导入导出等操作中被正确维护的首页仪表板和其他模块如何依赖这些余额做统计。2. 数据结构回顾accounts 表在db.js中账户表的 schema 定义如下节选// 账户表if(!db.objectStoreNames.contains(accounts)){constaccountStoredb.createObjectStore(accounts,{keyPath:id});accountStore.createIndex(type,type,{unique:false});accountStore.createIndex(createdAt,createdAt,{unique:false});}对应的高层操作方法包括// 获取所有账户asyncgetAccounts(){returnthis.getAll(accounts);}// 添加账户asyncaddAccount(account){account.idthis.generateId();account.createdAtnewDate().toISOString();returnthis.add(accounts,account);}// 更新账户asyncupdateAccount(account){account.updatedAtnewDate().toISOString();returnthis.update(accounts,account);}// 删除账户asyncdeleteAccount(accountId){returnthis.delete(accounts,accountId);}可以看到账户的核心字段包括id唯一主键由数据库层统一生成name账户名称由 UI 表单提供type账户类型银行卡、现金、电子钱包等balance当前余额初始由表单设置后续由记账/转账逻辑维护createdAt/updatedAt时间戳字段方便排序和追踪变更。3. 新增账户从按钮到数据库的一条链路在账户管理页面模块14中我们在卡片头部放置了一个“新增账户”按钮buttonidadd-accountclasspc-button pc-button-primary新增账户/button在PageManager的事件绑定中一般会这样处理bindPageEvents(pageName){if(pageNameaccounts){constaddBtndocument.getElementById(add-account);if(addBtn){addBtn.onclick()this._showAddAccountDialog();}this.loadAccountsPage();}}_showAddAccountDialog()的典型流程是弹出一个模态框包含账户名称、类型、初始余额等字段用户填写完成后点击“保存”JS 收集表单数据构造一个account对象调用window.financeDB.addAccount(account)写入数据库关闭对话框并刷新列表调用loadAccountsPage()。伪代码示例async_handleSaveAccount(formValues){constaccount{name:formValues.name,type:formValues.type,balance:Number(formValues.balance||0),};awaitwindow.financeDB.addAccount(account);Toast.success(账户已创建);this.loadAccountsPage();}这里的关键是id、createdAt不由 UI 层负责而是交由数据库层在addAccount中统一补齐balance的初始值由用户指定后续通过记账和转账逻辑进行调整。4. 编辑账户更新名称、类型或余额编辑账户的入口一般在账户列表的“操作”列中tdbuttonclasspc-linkdata-actionedit编辑/buttonbuttonclasspc-link pc-dangerdata-actiondelete删除/button/td通过事件委托可以在 JS 中捕获这些点击_bindAccountActions(){consttbodydocument.querySelector(#accounts-table tbody);if(!tbody)return;tbody.onclickasync(event){consttargetevent.target;if(!(targetinstanceofHTMLElement))return;constrowtarget.closest(tr);if(!row)return;constidrow.getAttribute(data-id);if(!id)return;constactiontarget.getAttribute(data-action);if(actionedit){this._showEditAccountDialog(id);}if(actiondelete){this._confirmDeleteAccount(id);}};}_showEditAccountDialog(id)的典型逻辑是根据id从本地缓存或通过getAccounts()查找对应账户对象把账户信息填充到模态框表单中用户修改后点击“保存”触发_handleUpdateAccount调用window.financeDB.updateAccount(updatedAccount)刷新账户列表。示例async_handleUpdateAccount(id,formValues){constaccountsawaitwindow.financeDB.getAccounts();constaccountaccounts.find(accacc.idid);if(!account){Toast.error(账户不存在);return;}account.nameformValues.name;account.typeformValues.type;account.balanceNumber(formValues.balance||0);awaitwindow.financeDB.updateAccount(account);Toast.success(账户信息已更新);this.loadAccountsPage();}5. 删除账户安全性与数据一致性删除账户需要格外谨慎该账户是否还有未清理的交易记录删除后是否会影响统计报表的一致性在 UI 层面一般的策略是弹出确认对话框提示“删除账户不会删除历史交易记录但这些交易将无法再归属到具体账户”等信息具体行为根据你的业务设定只有在用户明确确认后才调用deleteAccount。示意代码async_confirmDeleteAccount(id){constconfirmedawaitconfirmDialog(确定要删除这个账户吗删除后可能影响历史报表展示。,删除账户);if(!confirmed)return;awaitwindow.financeDB.deleteAccount(id);Toast.success(账户已删除);this.loadAccountsPage();}在数据库层面deleteAccount本身只是删除accounts表中的记录并不会自动清理transactions表中的历史交易。这是一个有意识的设计选择保留历史交易有利于长期统计和回溯即使账户被删掉历史报表仍然可以通过交易记录来恢复一部分信息。6. 余额统计与首页仪表板和报表模块的关系在首页仪表板中总资产通常通过以下方式计算constaccountsawaitwindow.financeDB.getAccounts();consttotalaccounts.reduce((sum,acc)sumacc.balance,0);因此账户的balance字段由谁维护、如何维护就变得非常关键新增账户时balance等于用户设定的初始余额记收入时对对应账户的balance进行加法记支出时对对应账户的balance进行减法转账时一个账户减、另一个账户加模块11已详细说明。这种做法相当于在accounts表中缓存了每个账户的当前余额而不是每次都通过聚合历史交易来计算优点查询速度快首页和账户管理页加载时只需要一次getAccounts()调用缺点需要小心保证每次记账/转账时都正确更新余额否则可能出现“账不平”的情况。在目前项目的设计中两者可以并存对实时界面展示使用缓存的balance在某些需要严格对账的场景例如调试、校验时也可以从transactions表重算一次余额做比对。7. ArkTS 视角账户数据与导入/导出在数据导入/导出模块中账户数据是整个快照的一部分导出时JS 调用financeDB.exportData()其中会包含accounts表的所有记录ArkTS FileManager 插件只负责把这份 JSON 写入文件不解读字段含义导入时ArkTS 插件从文件中读回 JSON交给 JSJS 调用financeDB.importData()其中会使用update(accounts, record)把账户数据写回。这意味着只要前端在日常使用中正确维护了balance导出/导入时就能完整保留所有账户信息ArkTS 不需要理解“余额”的具体含义只负责搬运数据降低了跨层耦合度。8. 小结账户增删改查与余额统计的实践经验综合来看本模块的设计有几个值得在实际项目中借鉴的点把 ID 和时间戳生成逻辑集中到数据库层减少 UI 和业务层的重复代码保证所有表的主键和时间字段风格统一账户增删改通过统一的 UI 入口和事件委托实现列表操作列 模态框的组合足够灵活也易于维护在账户对象中缓存余额字段结合记账、转账逻辑及时更新使首页和账户页加载更快删除账户时保留历史交易通过清晰的用户提示和谨慎的删除逻辑兼顾数据完整性与用户控制感与 ArkTS 的边界清晰ArkTS 只负责导入/导出层面的数据搬运不参与账户增删改 UI 和逻辑掌握了本模块后你基本可以独立扩展账户系统增加新的账户属性例如币种、信用额度增加更复杂的余额规则例如信用卡账单日、还款日逻辑都可以在现有的增删改查和余额维护框架上自然演进。ArkTS 侧与账户数据备份账户增删改查与余额统计主要发生在 Web IndexedDB 层但在做整库备份时ArkTS FileManager 插件会把accounts表与其他表一起写入备份文件。导出入口示例exportclassFileManagerPluginextendsCordovaPlugin{asyncexportData(callbackContext:CallbackContext,args:string[]):Promisevoid{try{// json 字符串中包含 accounts、transactions、categories、budgets、goals、tags 等所有表的数据constjsonargs[0];// 省略 fileIo 写文件的细节见前文各模块示例}catch(error){// 错误处理略}}}这样Web 层维护好的账户余额和其他属性会作为数据库的一部分被序列化ArkTS 负责把这份序列化结果安全写入文件在新设备或重装应用后通过导入备份文件即可恢复所有账户及其余额状态账户管理页面和首页仪表板不需要额外适配。