如何在Web应用中实现离线填报功能

客户在野外工作，网络环境不稳定，如何实现数据填报？

客户的车间内严格断网，如何做数据填报？

对于编码开发的Web应用来讲，为了应对网络不稳定或临时断网的场景，通常需要做很多逻辑，将数据加载、数据暂存等从操作服务器调整为操作本地数据缓存。最终实现的效果是在用户不关闭浏览器或导航到企业页面的前提下，实现离线的数据填报，等待网络恢复后，再将暂存在本地数据缓存中填报数据一次性提交到服务器端。这种做法在使用活字格开发时也是可以继续沿用的。

流程设计
支持离线填报功能的页面与通常的页面设计方式不同，复杂度较高。


（离线填报的用户交互流程）

• 页面加载阶段：从服务器获取用户操作所需的全部数据（如主数据、字典数据、当前操作的业务单据等），将其存储到本地数据缓存
• 用户操作阶段：使用本地数据缓存中的数据填充到界面，而不是通过数据绑定的形式，从服务器实时获取
• 数据提交阶段：支持数据暂存功能，将用户操作的数据存储到本地数据缓存，等网络恢复后，再一次性提交到服务器
  

其中涉及到的本地缓存操作，需要用到【前端缓存插件】；使用【对象与集合操作插件】和【JSON数据源插件】操作数据。这个方案通常意味着“前后端分离”的开发模式，而不能使用数据绑定等功能。

示例工程
在示例工程中，将业务实体、主数据和字典存储到缓存的逻辑位于“在线创建”页面（这个页面不支持离线）中创建按钮的命令；使用本地缓存而不是数据绑定的方式加载下拉框选项、填充各输入框默认值的逻辑位于“离线填报“页面（这个页面支持离线操作）的页面加载命令。
离线填报Demo-v9.fgcc (1.85 MB, 下载次数: 182)

2023-4-28 17:37 上传

点击文件名下载附件