[发明专利]基于json数据构建双向绑定的web页面前端展示方法和系统

说明书

本发明公开了一种基于json数据构建双向绑定的web页面前端展示方法和系统，该方法包括：获取web页面各个业务模块的json数据；将json数据处理为键/值形式的数据：根据业务需求确定键/值形式的数据所对应的键的getter和setter方法；根据预设字段类型的属性信息确定所要渲染的键的类型；对json数据进行遍历，根据键的类型确定所要渲染的DOM节点；将DOM节点进行渲染组成DOM树；根据DOM树组成WEB页面；获取DOM节点的点击事件；通过点击事件对应的json键触发对应的setter方法，改变点击事件所对应的json数据，得到更新的json数据，对web页面进行更新。该方法把页面划分成多个业务模块，通过配置JSON数据控制WEB页面DOM的动态渲染，根据模块进行用户交互操作的双向绑定，实现了页面动态更新。

技术领域

本发明涉及互联网数据处理领域，具体涉及到一种基于json数据构建双向绑定的web页面前端展示方法、系统、电子设备及存储介质。

背景技术

随着WEB技术的发展，前端不局限于还原UI页面，由于业务的需求越来越复杂，时常需要考虑页面的动态变化。

现有技术中通常是先通过执行asp,php,jsp,.net等程序生成客户端网页代码的网页，然后通过js函数返回不同DOM节点追加到指定的节点上，重新生成网页代码，使得web页面前端展示的灵活性较差。

发明内容

有鉴于此，本发明实施例提供了一种基于json数据构建双向绑定的web页面前端展示方法、系统、电子设备及存储介质，以解决现有技术web页面前端展示的灵活性差的问题。

为此，本发明实施例提供了如下技术方案：

根据第一方面，本发明实施例提供了一种基于json数据构建双向绑定的web页面前端展示方法，包括：获取web页面各个业务模块的json数据；将每一个业务模块的json数据处理为键/值形式的数据：根据业务需求确定键/值形式的数据所对应的键的getter和setter方法；根据预设字段类型的属性信息确定所要渲染的键的类型；对json数据进行遍历，根据所要渲染的键的类型确定所要渲染的DOM节点；将所要渲染的DOM节点进行渲染，组成DOM树；根据DOM树组成web页面；获取web页面上DOM节点的点击事件；通过所述点击事件所对应的json键触发对应的setter方法，改变点击事件所对应的json数据，得到更新的json数据；根据更新的json数据对web页面进行更新。

可选地，获取web页面各个业务模块的json数据的步骤中，包括：获取业务需求；根据业务需求将web页面划分为不同的业务模块；根据每一个业务模块得到每一个业务模块所对应的json数据。

可选地，将每一个业务模块的json数据处理为键/值形式的数据的步骤中，包括：根据业务场景复杂度确定循环次数；根据循环次数对每一个业务模块的json数据进行循环处理得到每一个json数据所对应的键/值。

可选地，根据业务需求确定键/值形式的数据所对应的键的getter和setter方法的步骤中，包括：根据业务需求确定键/值形式的数据中对象的属性；若所述对象的属性为可读可写属性，则将对象所对应的键进行getter方法和setter方法的定义；若所述对象的属性为可读不可写属性，则将对象所对应的键进行getter方法的定义。

可选地，根据更新的json数据对web页面进行更新的步骤之后，还包括：将更新的json数据进行存储。

可选地，将更新的json数据进行存储的步骤中，包括：根据更新的json数据确定更新的json数据所对应的业务模块；根据更新的json数据所对应的业务模块确定更新的json数据所对应的来源标识；将更新的json数据按照来源标识存储至后台数据库中。