基于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页面前端展示方法和系统


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

技术介绍

[0002]随着WEB技术的发展，前端不局限于还原UI页面，由于业务的需求越来越复杂，时常需要考虑页面的动态变化。
[0003]现有技术中通常是先通过执行asp,php,jsp,.net等程序生成客户端网页代码的网页，然后通过js函数返回不同DOM节点追加到指定的节点上，重新生成网页代码，使得web页面前端展示的灵活性较差。

技术实现思路

[0004]有鉴于此，本专利技术实施例提供了一种基于json数据构建双向绑定的web页面前端展示方法、系统、电子设备及存储介质，以解决现有技术web页面前端展示的灵活性差的问题。
[0005]为此，本专利技术实施例提供了如下技术方案：
[0006]根据第一方面，本专利技术实施例提供了一种基于json数据构建双向绑定的web页面前端展示方法，包括：获取web页面各个业务模块的json数据；将每一个业务模块的json数据处理为键/值形式的数据：根据业务需求确定键/值形式的数据所对应的键的getter和setter方法；根据预设字段类型的属性信息确定所要渲染的键的类型；对json数据进行遍历，根据所要渲染的键的类型确定所要渲染的DOM节点；将所要渲染的DOM节点进行渲染，组成DOM树；根据DOM树组成web页面；获取web页面上DOM节点的点击事件；通过所述点击事件所对应的json键触发对应的setter方法，改变点击事件所对应的json数据，得到更新的json数据；根据更新的json数据对web页面进行更新。
[0007]可选地，获取web页面各个业务模块的json数据的步骤中，包括：获取业务需求；根据业务需求将web页面划分为不同的业务模块；根据每一个业务模块得到每一个业务模块所对应的json数据。
[0008]可选地，将每一个业务模块的json数据处理为键/值形式的数据的步骤中，包括：根据业务场景复杂度确定循环次数；根据循环次数对每一个业务模块的json数据进行循环处理得到每一个json数据所对应的键/值。
[0009]可选地，根据业务需求确定键/值形式的数据所对应的键的getter和setter方法的步骤中，包括：根据业务需求确定键/值形式的数据中对象的属性；若所述对象的属性为可读可写属性，则将对象所对应的键进行getter方法和setter方法的定义；若所述对象的属性为可读不可写属性，则将对象所对应的键进行getter方法的定义。
[0010]可选地，根据更新的json数据对web页面进行更新的步骤之后，还包括：将更新的json数据进行存储。
[0011]可选地，将更新的json数据进行存储的步骤中，包括：根据更新的json数据确定更新的json数据所对应的业务模块；根据更新的json数据所对应的业务模块确定更新的json数据所对应的来源标识；将更新的json数据按照来源标识存储至后台数据库中。
[0012]根据第二方面，本专利技术实施例提供了一种基于json数据构建双向绑定的web页面前端展示系统，包括：第一获取模块，用于获取web页面各个业务模块的json数据；第一处理模块，用于将每一个业务模块的json数据处理为键/值形式的数据：第二处理模块，用于根据业务需求确定键/值形式的数据所对应的键的getter和setter方法；第三处理模块，用于根据预设字段类型的属性信息确定所要渲染的键的类型；第四处理模块，用于对json数据进行遍历，根据所要渲染的键的类型确定所要渲染的DOM节点；第五处理模块，用于将所要渲染的DOM节点进行渲染，组成DOM树；第六处理模块，用于根据DOM树组成web页面；第二获取模块，用于获取web页面上DOM节点的点击事件；第七处理模块，用于通过所述点击事件所对应的json键触发对应的setter方法，改变点击事件所对应的json数据，得到更新的json数据；第八处理模块，用于根据更新的json数据对web页面进行更新。
[0013]可选地，所述第一获取单元包括：第一获取单元，用于获取业务需求；第一处理单元，用于根据业务需求将web页面划分为不同的业务模块；第二处理单元，用于根据每一个业务模块得到每一个业务模块所对应的json数据。
[0014]可选地，所述第一处理模块包括：第三处理单元，用于根据业务场景复杂度确定循环次数；第四处理单元，用于根据循环次数对每一个业务模块的json数据进行循环处理得到每一个json数据所对应的键/值。
[0015]可选地，所述第二处理模块包括：第五处理单元，用于根据业务需求确定键/值形式的数据中对象的属性；第六处理单元，用于若所述对象的属性为可读可写属性，则将对象所对应的键进行getter方法和setter方法的定义；第七处理单元，用于若所述对象的属性为可读不可写属性，则将对象所对应的键进行getter方法的定义。
[0016]可选地，还包括：第九处理模块，用于将更新的json数据进行存储。
[0017]可选地，所述第九处理模块包括：第八处理单元，用于根据更新的json数据确定更新的json数据所对应的业务模块；第九处理单元，用于根据更新的json数据所对应的业务模块确定更新的json数据所对应的来源标识；第十处理单元，用于将更新的json数据按照来源标识存储至后台数据库中。
[0018]根据第三方面，本专利技术实施例提供了一种电子设备，包括：至少一个处理器；以及与至少一个处理器通信连接的存储器；其中，存储器存储有可被至少一个处理器执行的计算机程序，计算机程序被至少一个处理器执行，以使至少一个处理器执行上述第一方面任意一项描述的基于json数据构建双向绑定的web页面前端展示方法。
[0019]根据第四方面，本专利技术实施例提供了一种计算机可读存储介质，计算机可读存储介质存储有计算机指令，计算机指令用于使计算机执行上述第一方面任意一项描述的基于json数据构建双向绑定的web页面前端展示方法。
[0020]本专利技术实施例技术方案，具有如下优点：
[0021]本专利技术实施例提供了一种基于json数据构建双向绑定的web页面前端展示方法、系统、电子设备及存储介质，其中，该方法包括：获取web页面各个业务模块的json数据；将每一个业务模块的json数据处理为键/值形式的数据：根据业务需求确定键/值形式的数据
所对应的键的getter和setter方法；根据预设字段类型的属性信息确定所要渲染的键的类型；对json数据进行遍历，根据所要渲染的键的类型确定所要渲染的DOM节点；将所要渲染的DOM节点进行渲染，组成DOM树；根据DOM树组成web页面；获取web页面上DOM节点的点击事件；通过所述点击事件所对应的json键触发对应的setter方法，改变点击事件所对应的json数据，得到更新的json数据；根据更新的json数本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种基于json数据构建双向绑定的web页面前端展示方法，其特征在于，包括：获取web页面各个业务模块的json数据；将每一个业务模块的json数据处理为键/值形式的数据；根据业务需求确定键/值形式的数据所对应的键的getter和setter方法；根据预设字段类型的属性信息确定所要渲染的键的类型；对json数据进行遍历，根据所要渲染的键的类型确定所要渲染的DOM节点；将所要渲染的DOM节点进行渲染，组成DOM树；根据DOM树组成web页面；获取web页面上DOM节点的点击事件；通过所述点击事件所对应的json键触发对应的setter方法，改变点击事件所对应的json数据，得到更新的json数据；根据更新的json数据对web页面进行更新。2.根据权利要求1所述的基于json数据构建双向绑定的web页面前端展示方法，其特征在于，获取web页面各个业务模块的json数据的步骤中，包括：获取业务需求；根据业务需求将web页面划分为不同的业务模块；根据每一个业务模块得到每一个业务模块所对应的json数据。3.根据权利要求1所述的基于json数据构建双向绑定的web页面前端展示方法，其特征在于，将每一个业务模块的json数据处理为键/值形式的数据的步骤中，包括：根据业务场景复杂度确定循环次数；根据循环次数对每一个业务模块的json数据进行循环处理得到每一个json数据所对应的键/值。4.根据权利要求1所述的基于json数据构建双向绑定的web页面前端展示方法，其特征在于，根据业务需求确定键/值形式的数据所对应的键的getter和setter方法的步骤中，包括：根据业务需求确定键/值形式的数据中对象的属性；若所述对象的属性为可读可写属性，则将对象所对应的键进行getter方法和setter方法的定义；若所述对象的属性为可读不可写属性，则将对象所对应的键进行getter方法的定义。5.根据权利要求1
‑
4中任一所述的基于json数据构建双向绑定的web页面前端展示方法，其特征在于，根据更新的json数据对web页面进行更新的步骤之后...

【专利技术属性】
技术研发人员：郝建亮，王雪峰，骆飞，李青龙，
申请(专利权)人：北京智慧星光信息技术有限公司，
类型：发明
国别省市：