CN113051507B - 基于json数据构建双向绑定的web页面前端展示方法和系统 - Google Patents
基于json数据构建双向绑定的web页面前端展示方法和系统 Download PDFInfo
- Publication number
- CN113051507B CN113051507B CN202110336589.2A CN202110336589A CN113051507B CN 113051507 B CN113051507 B CN 113051507B CN 202110336589 A CN202110336589 A CN 202110336589A CN 113051507 B CN113051507 B CN 113051507B
- Authority
- CN
- China
- Prior art keywords
- json data
- web page
- data
- key
- json
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Active
Links
- 238000000034 method Methods 0.000 title claims abstract description 100
- 230000027455 binding Effects 0.000 title claims abstract description 33
- 238000009739 binding Methods 0.000 title claims abstract description 33
- 230000002457 bidirectional effect Effects 0.000 title claims abstract description 24
- 238000012545 processing Methods 0.000 claims abstract description 83
- 238000009877 rendering Methods 0.000 claims abstract description 17
- 230000015654 memory Effects 0.000 claims description 20
- 230000008859 change Effects 0.000 claims description 6
- 125000004122 cyclic group Chemical group 0.000 claims description 6
- 238000004590 computer program Methods 0.000 claims description 4
- 238000010276 construction Methods 0.000 claims description 4
- 230000003993 interaction Effects 0.000 abstract description 8
- 238000011161 development Methods 0.000 description 5
- 230000008569 process Effects 0.000 description 5
- 238000012216 screening Methods 0.000 description 4
- 238000010586 diagram Methods 0.000 description 3
- 230000006870 function Effects 0.000 description 3
- 238000012986 modification Methods 0.000 description 3
- 230000004048 modification Effects 0.000 description 3
- 238000005538 encapsulation Methods 0.000 description 2
- 238000013507 mapping Methods 0.000 description 2
- 239000007787 solid Substances 0.000 description 2
- 238000003491 array Methods 0.000 description 1
- 230000001419 dependent effect Effects 0.000 description 1
- 238000005516 engineering process Methods 0.000 description 1
- 238000010295 mobile communication Methods 0.000 description 1
- 238000012544 monitoring process Methods 0.000 description 1
- 230000003287 optical effect Effects 0.000 description 1
- 238000005192 partition Methods 0.000 description 1
- 230000004044 response Effects 0.000 description 1
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/957—Browsing optimisation, e.g. caching or content distillation
- G06F16/9577—Optimising the visualization of content, e.g. distillation of HTML documents
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/958—Organisation or management of web site content, e.g. publishing, maintaining pages or automatic linking
Landscapes
- Engineering & Computer Science (AREA)
- Databases & Information Systems (AREA)
- Theoretical Computer Science (AREA)
- Data Mining & Analysis (AREA)
- Physics & Mathematics (AREA)
- General Engineering & Computer Science (AREA)
- General Physics & Mathematics (AREA)
- Information Transfer Between Computers (AREA)
- Information Retrieval, Db Structures And Fs Structures Therefor (AREA)
Abstract
本发明公开了一种基于json数据构建双向绑定的web页面前端展示方法和系统，该方法包括：获取web页面各个业务模块的json数据；将json数据处理为键/值形式的数据：根据业务需求确定键/值形式的数据所对应的键的getter和setter方法；根据预设字段类型的属性信息确定所要渲染的键的类型；对json数据进行遍历，根据键的类型确定所要渲染的DOM节点；将DOM节点进行渲染组成DOM树；根据DOM树组成WEB页面；获取DOM节点的点击事件；通过点击事件对应的json键触发对应的setter方法，改变点击事件所对应的json数据，得到更新的json数据，对web页面进行更新。该方法把页面划分成多个业务模块，通过配置JSON数据控制WEB页面DOM的动态渲染，根据模块进行用户交互操作的双向绑定，实现了页面动态更新。
Description
技术领域
本发明涉及互联网数据处理领域，具体涉及到一种基于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数据按照来源标识存储至后台数据库中。
根据第二方面，本发明实施例提供了一种基于json数据构建双向绑定的web页面前端展示系统，包括：第一获取模块，用于获取web页面各个业务模块的json数据；第一处理模块，用于将每一个业务模块的json数据处理为键/值形式的数据：第二处理模块，用于根据业务需求确定键/值形式的数据所对应的键的getter和setter方法；第三处理模块，用于根据预设字段类型的属性信息确定所要渲染的键的类型；第四处理模块，用于对json数据进行遍历，根据所要渲染的键的类型确定所要渲染的DOM节点；第五处理模块，用于将所要渲染的DOM节点进行渲染，组成DOM树；第六处理模块，用于根据DOM树组成web页面；第二获取模块，用于获取web页面上DOM节点的点击事件；第七处理模块，用于通过所述点击事件所对应的json键触发对应的setter方法，改变点击事件所对应的json数据，得到更新的json数据；第八处理模块，用于根据更新的json数据对web页面进行更新。
可选地，所述第一获取单元包括：第一获取单元，用于获取业务需求；第一处理单元，用于根据业务需求将web页面划分为不同的业务模块；第二处理单元，用于根据每一个业务模块得到每一个业务模块所对应的json数据。
可选地，所述第一处理模块包括：第三处理单元，用于根据业务场景复杂度确定循环次数；第四处理单元，用于根据循环次数对每一个业务模块的json数据进行循环处理得到每一个json数据所对应的键/值。
可选地，所述第二处理模块包括：第五处理单元，用于根据业务需求确定键/值形式的数据中对象的属性；第六处理单元，用于若所述对象的属性为可读可写属性，则将对象所对应的键进行getter方法和setter方法的定义；第七处理单元，用于若所述对象的属性为可读不可写属性，则将对象所对应的键进行getter方法的定义。
可选地，还包括：第九处理模块，用于将更新的json数据进行存储。
可选地，所述第九处理模块包括：第八处理单元，用于根据更新的json数据确定更新的json数据所对应的业务模块；第九处理单元，用于根据更新的json数据所对应的业务模块确定更新的json数据所对应的来源标识；第十处理单元，用于将更新的json数据按照来源标识存储至后台数据库中。
根据第三方面，本发明实施例提供了一种电子设备，包括：至少一个处理器；以及与至少一个处理器通信连接的存储器；其中，存储器存储有可被至少一个处理器执行的计算机程序，计算机程序被至少一个处理器执行，以使至少一个处理器执行上述第一方面任意一项描述的基于json数据构建双向绑定的web页面前端展示方法。
根据第四方面，本发明实施例提供了一种计算机可读存储介质，计算机可读存储介质存储有计算机指令，计算机指令用于使计算机执行上述第一方面任意一项描述的基于json数据构建双向绑定的web页面前端展示方法。
本发明实施例技术方案，具有如下优点：
本发明实施例提供了一种基于json数据构建双向绑定的web页面前端展示方法、系统、电子设备及存储介质，其中，该方法包括：获取web页面各个业务模块的json数据；将每一个业务模块的json数据处理为键/值形式的数据：根据业务需求确定键/值形式的数据所对应的键的getter和setter方法；根据预设字段类型的属性信息确定所要渲染的键的类型；对json数据进行遍历，根据所要渲染的键的类型确定所要渲染的DOM节点；将所要渲染的DOM节点进行渲染，组成DOM树；根据DOM树组成web页面；获取web页面上DOM节点的点击事件；通过所述点击事件所对应的json键触发对应的setter方法，改变点击事件所对应的json数据，得到更新的json数据；根据更新的json数据对web页面进行更新。该方法通过配置json数据控制web页面DOM的动态渲染，根据业务模块把页面划分成多个模块，达到一次开发多处使用，根据模块进行用户交互操作的双向绑定，从而可以快速构建模块、提高开发效率、开箱即用，使原生JavaSript实现不再依赖前端框架、移植性更强。
附图说明
为了更清楚地说明本发明具体实施方式或现有技术中的技术方案，下面将对具体实施方式或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图是本发明的一些实施方式，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。
图1为本发明实施例的基于json数据构建双向绑定的web页面前端展示方法的一个具体示例的流程图；
图2为本发明实施例的基于json数据构建双向绑定的web页面前端展示方法的业务模块的一个具体示例的示意图；
图3为本发明实施例的基于json数据构建双向绑定的web页面前端展示方法的另一个具体示例的流程图；
图4为本发明实施例的基于json数据构建双向绑定的web页面前端展示系统的一个具体示例的框图；
图5为本发明实施例的电子设备的示意图。
具体实施方式
下面将结合附图对本发明的技术方案进行清楚、完整地描述，显然，所描述的实施例是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。
本发明实施例提供了一种基于json数据构建双向绑定的web页面前端展示方法，如图1所示，该方法包括步骤S1-S10。
步骤S1：获取web页面各个业务模块的json数据。
本实施例中，不同的用户需求确定不同的web网页，根据用户需求将web页面划分为多个业务模块，按照项目业务划分的大模块。模块化侧重于数据的封装，一组相关的组件定义成一个模块，一个json对象可以是一个模块，一个业务模块对应一个后台微服务。
通过后台接口把在数据库查询获得到每一个业务模块的json数据返回给前端，以便根据json数据控制每个业务模块页面的构建，这样可以通过后台接口权限控制不同业务模块的展示，可以对页面很方便的调整增加字段的时候只需要后台调整接口返回的数据即可，前端展示不需要修改就能达到需求目的。
业务模块的json格式的数据具体如下：
{xAxis:{type:"category"},yAxis:{show:false},series:[{type:"line",data:[300,200,620,432,220,534,300,400,420,419],areaStyle:{color:"purple"},lineStyle:{width:0},itemStyle:{opacity:0},smooth:true}]}
如图2所示，将web页面划分为多个业务模块，每一个业务模块对应一个json数据，业务模块和json数据是一一映射的关系。具体地，通过模块划分前后约定的模块名称进行映射。
例如，将一个web页面划分成4个业务模块，分别为模块1、模块2、模块3和模块4。分别获取这4个业务模块所对应的json数据，模块1对应json1，模块2对应json2，模块3对应json3，模块4对应json4。
步骤S2：将每一个业务模块的json数据处理为键/值形式的数据。
本实施例中，将每一个业务模块所对应的json数据进行处理得到标准的键/值形式的数据，便于对键进行getter、setter方法的定义。
通过遍历上面对象的键并判断键对应值的数据类型，如果值得数据类型是可遍历的，再进行遍历并把这些键值提取到最外层，这样递归处理数据得到标准的键/值形式的数据。
标准的键/值形式的数据的一个具体示例如下：
{xAxis:{type:"category"},yAxis:{show:false},series:[{type:"line",areaStyle:
{color:"purple"},lineStyle:{width:0},itemStyle:{opacity:0},smooth:true}]}
步骤S3：根据业务需求确定键/值形式的数据所对应的键的getter和setter方法。
本实施例中，将业务需求中不变的值，设置为getter方法，将业务需求中需要改变的值设置为setter方法和getter方法。不变的值具体可以是系统分配的值，例如用户权限所对应的值。需要改变的值具体可以是表单，需要经常改变，故需要将其设置为setter方法。
步骤S4：根据预设字段类型的属性信息确定所要渲染的键的类型。
本实施例中，预设字段类型是预先约定好的，预设字段类型的属性信息是需要渲染。例如预设字段类型的属性信息为属性1、属性2，那么需要渲染的键的类型就是属性1和属性2，也就是将属性1和属性2的键进行渲染。
步骤S5：对json数据进行遍历，根据所要渲染的键的类型确定所要渲染的DOM节点。
本实施例中，一个json数据中包括多个键，每一个键对应一个DOM节点。对json数据进行遍历，根据json数据中所需要的渲染的键的类型确定需要渲染的DOM节点，以便后续对DOM节点进行渲染。
步骤S6：将所要渲染的DOM节点进行渲染，组成DOM树。
本实施例中，对需要渲染的DOM节点进行渲染构成DOM树。
步骤S7：根据DOM树组成web页面。
本实施例中，对json数据的遍历通过键来判断所要渲染的DOM元素进而实现页面渲染，这种动态渲染的方式更灵活多变。
步骤S8：获取web页面上DOM节点的点击事件。
本实施例中，点击事件可以是鼠标的点击、选中、悬浮等操作。用户在web页面上进行了相应的操作，便可获取到该操作所对应的DOM节点。
步骤S9：通过点击事件所对应的json键触发对应的setter方法，改变点击事件所对应的json数据，得到更新的json数据。
本实施例中，由于用户交互的时常发生而且多变，在每次操作的时候实时通过触发键对应的setter方法使json数据达到响应式始终改变的都是json数据。对WEB页面DOM元素进行操作时可以通过JOSN键触发对应的setter方法修改JSON数据。
步骤S10：根据更新的json数据对web页面进行更新。
本实施例中，对json数据更新后，通过数据驱动更新web页面，web页面也相应的进行了更新，通过改变json数据实现了web页面的更新。
上述步骤，先得到web页面各个业务模块所对应的json数据，将json数据处理为标准的键/值形式的数据，根据业务需求确定键的getter和setter方法；根据预设字段类型的属性信息确定所要渲染的键的类型，之后遍历json数据，不同的DOM节点来组成DOM树进一步组成web页面；对web页面DOM元素进行操作时可以通过json键触发对应的setter方法修改json数据，进而实现文本页面的更新。通过配置json数据控制web页面DOM的动态渲染，根据业务模块把页面划分成多个模块，达到一次开发多处使用，根据模块进行用户交互操作的双向绑定，从而可以快速构建模块、提高开发效率、开箱即用，使原生JavaSript实现不再依赖前端框架、移植性更强。
作为示例性的实施例，步骤S1获取web页面各个业务模块的json数据的步骤中，包括步骤S11-S13。
步骤S11：获取业务需求。
本实施例中，不同的web页面有不同的需求，具体的业务需求包括构建不同样式的表单页面、渲染不同列表数据子元素。本实施例中对此仅作示意性说明，不以此为限，在实际应用中可根据实际需要合理设置。
步骤S12：根据业务需求将web页面划分为不同的业务模块。
本实施例中，根据业务需求将web页面划分为多个业务模块，对web页面进行模块化划分，提高页面设置的灵活性。
步骤S13：根据每一个业务模块得到每一个业务模块所对应的json数据。
本实施例中，通过ajax调用后台的接口在数据库中拿到当前用户相关模块的json数据，从而得到每一个业务模块所对应的json数据。
上述步骤，根据业务需求将web页面划分为不同的业务模块，进一步得到每一个业务模块对应的json数据，达到一次开发多处使用的目的，根据模块进行用户交互操作的双向绑定，把简单的json数据进行格式化后动态渲染DOM并进行数据的双向绑定交互。
作为示例性的实施例，步骤S2将每一个业务模块的json数据处理为键/值形式的数据的步骤中，包括步骤S21-S22。
步骤S21：根据业务场景复杂度确定循环次数。
本实施例中，业务场景复杂度是根据业务需求确定。业务模块的业务场景复杂度越复杂，对应的json数据越复杂，判断键所对应的值得类型是否是复杂数据类型，然后通过递归方式处理值的数据直到所有值都是简单数据类型的键/值，将复杂的数据结构进行简化，使得最终的json数据简单化。
假设一个结构复杂的多维json，不确定它的下标索引，不确定它的嵌套多少层，只能通过某一属性的属性值来确定它是要完成业务所需的数据。例如：一个表单模块每个大的筛选条件还有子筛选条件，子筛选条件还有分类筛选，分类筛选是多选。
步骤S22：根据循环次数对每一个业务模块的json数据进行循环处理得到每一个json数据所对应的键/值。
例如，循环次数为2次，对业务模块进行处理得到第一json数据，然后将第一json数据再次进行处理得到第二json数据，两次循环后，将得到的第二json数据作为json数据所对应的键/值。
上述步骤，通过业务场景复杂度对json数据进行循环处理，得到简化的json数据，便于存储和后续的数据处理。
作为示例性的实施例，步骤S3根据业务需求确定键/值形式的数据所对应的键的getter和setter方法的步骤中，包括步骤S31-S33。
步骤S31：根据业务需求确定键/值形式的数据中对象的属性。
本实施例中，将业务需求中不变的值所对应的对象的属性确定为getter属性；将业务需求中改变的值所对应的对象的属性确定为getter和setter属性。
步骤S32：若对象的属性为可读可写属性，则将对象所对应的键进行getter方法和setter方法的定义。
本实施例中，当对象的属性为可读可写属性时，说明该对象的值会变化，将对象所对应的键进行getter方法和setter方法的定义，便于后续通过改变json值实现web页面的改变。
步骤S33：若对象的属性为可读不可写属性，则将对象所对应的键进行getter方法的定义。
本实施例中，当对象的属性为可读不可写属性时，说明该对象的值是不会发生变化的，将对象所对应的键进行getter方法的定义。
上述步骤，根据业务需求确定键/值形式的数据中对象的属性，不同的属性设置不同的setter和getter方法，方便对对象进行操作。
作为示例性的实施例，步骤S10根据更新的json数据对web页面进行更新的步骤之后，还包括步骤S11。
步骤S11：将更新的json数据进行存储。
本实施例中，步骤S11具体可包括步骤S111-S113。
步骤S111：根据更新的json数据确定更新的json数据所对应的业务模块。
本实施例中，由于一个json数据对应一个业务模块，故json数据更新后，便可根据json数据的更新位置确定所对应的业务模块。
步骤S112：根据更新的json数据所对应的业务模块确定更新的json数据所对应的来源标识。
本实施例中，来源标识是前端和后端双方约定的特定类型的字段。具体的，type:1//来源监测；type:2//来源预警；type:3//来源事件等；本实施例中对此仅作示意性说明，不以此为限，在实际应用中可根据实际需要对特定类型的字段进行合理设置。
步骤S113：将更新的json数据按照来源标识存储至后台数据库中。
本实施例中，每一个业务模块在后台数据库中都有一个存储位置。根据来源标识将更新的json数据存储至后台数据库中对应的位置，记录用户操作便于下次的页面渲染从而提高用户体验。
通过上述步骤实现了json数据的分区存储，便于后续管理。
下面以一个具体示例进行详细说明，如图3所示。
1、根据每个页面模块获取json格式的数据data。
目的：根据后台接口返回的json数据控制每个业务模块页面的构建。json格式例如：
{xAxis:{type:"category"},yAxis:{show:false},series:[{type:"line",data:[300,200,620,432,220,534,300,400,420,419],areaStyle:{color:"purple"},lineStyle:{width:0},itemStyle:{opacity:0},smooth:true}]}
2、进行第一次循环把JSON数据处理成“键/值”模式。
目的：处理成标准的“键/值”形式。例如：
({xAxis:{type:"category"},yAxis:{show:false},series:[{type:"line",areaStyle:{color:"purple"},lineStyle:{width:0},itemStyle:{opacity:0},smooth:true}]})，便于对键进行getter、setter方法的定义
3、实现键的getter、setter方法，如果值是复杂数据结构可以提升getter、setter方法。例如：上一步中对象的属性series的值中data属性由于层级较深，我们可以直接把data属性的getter、setter方法直接定义给最外层的对象方便操作。
目的：封装的作用就是保护，保护属性本身不被篡改。比如有些属性只是可读但不可写，那么只提供它的getter方法就好，意思就是某些属性只能单一方向的被访问，getter和setter就是提供这样的方法。
4、递归遍历JSON数据渲染不同的DOM节点来组成DOM树进一步组成WEB页面。
目的：对JSON数据的遍历通过键来判断所要渲染的DOM元素进而实现页面渲染。这种动态渲染的方式更灵活多变。
5、对WEB页面DOM元素进行操作(点击、选中、悬浮)时可以通过JOSN键触发对应的setter方法修改JSON数据。
目的：由于用户交互的时常发生而且多变，在每次操作的时候实时通过触发键对应的setter方法使JSON数据达到响应式始终改变的都是JSON数据。通过数据驱动更新WEB页面。
6、根据业务模块的来源标识进行处理JSON数据提交。
目的：根据业务的需求，统一对提交的数据通过对JSON数据进行处理就可以了不用关系中间过程。
上述方法通过配置JSON数据控制WEB页面DOM的动态渲染，根据业务模块把页面划分成多个模块，达到一次开发多处使用，根据模块进行用户交互操作的双向绑定，从而可以快速构建模块、提高开发效率、开箱即用，使原生JavaSript实现不再依赖前端框架、移植性更强。
在本实施例中还提供了一种基于json数据构建双向绑定的web页面前端展示系统，该系统用于实现上述实施例及优选实施方式，已经进行过说明的不再赘述。如以下所使用的，术语“模块”可以实现预定功能的软件和/或硬件的组合。尽管以下实施例所描述的系统较佳地以软件来实现，但是硬件，或者软件和硬件的组合的实现也是可能并被构想的。
本实施例还提供一种基于json数据构建双向绑定的web页面前端展示系统，如图4所示，包括：
第一获取模块1，用于获取web页面各个业务模块的json数据；
第一处理模块2，用于将每一个业务模块的json数据处理为键/值形式的数据：
第二处理模块3，用于根据业务需求确定键/值形式的数据所对应的键的getter和setter方法；
第三处理模块4，用于根据预设字段类型的属性信息确定所要渲染的键的类型；
第四处理模块5，用于对json数据进行遍历，根据所要渲染的键的类型确定所要渲染的DOM节点；
第五处理模块6，用于将所要渲染的DOM节点进行渲染，组成DOM树；
第六处理模块7，用于根据DOM树组成web页面；
第二获取模块8，用于获取web页面上DOM节点的点击事件；
第七处理模块9，用于通过所述点击事件所对应的json键触发对应的setter方法，改变点击事件所对应的json数据，得到更新的json数据；
第八处理模块10，用于根据更新的json数据对web页面进行更新。
可选地，所述第一获取单元包括：第一获取单元，用于获取业务需求；第一处理单元，用于根据业务需求将web页面划分为不同的业务模块；第二处理单元，用于根据每一个业务模块得到每一个业务模块所对应的json数据。
可选地，所述第一处理模块包括：第三处理单元，用于根据业务场景复杂度确定循环次数；第四处理单元，用于根据循环次数对每一个业务模块的json数据进行循环处理得到每一个json数据所对应的键/值。
可选地，所述第二处理模块包括：第五处理单元，用于根据业务需求确定键/值形式的数据中对象的属性；第六处理单元，用于若所述对象的属性为可读可写属性，则将对象所对应的键进行getter方法和setter方法的定义；第七处理单元，用于若所述对象的属性为可读不可写属性，则将对象所对应的键进行getter方法的定义。
可选地，还包括：第九处理模块，用于将更新的json数据进行存储。
可选地，所述第九处理模块包括：第八处理单元，用于根据更新的json数据确定更新的json数据所对应的业务模块；第九处理单元，用于根据更新的json数据所对应的业务模块确定更新的json数据所对应的来源标识；第十处理单元，用于将更新的json数据按照来源标识存储至后台数据库中。
本实施例中的基于json数据构建双向绑定的web页面前端展示系统是以功能单元的形式来呈现，这里的单元是指ASIC电路，执行一个或多个软件或固定程序的处理器和存储器，和/或其他可以提供上述功能的器件。
上述各个模块的更进一步的功能描述与上述对应实施例相同，在此不再赘述。
本发明实施例还提供了一种电子设备，如图5所示，该电子设备包括一个或多个处理器71以及存储器72，图5中以一个处理器71为例。
该控制器还可以包括：输入装置73和输出装置74。
处理器71、存储器72、输入装置73和输出装置74可以通过总线或者其他方式连接，图5中以通过总线连接为例。
处理器71可以为中央处理器(Central Processing Unit，CPU)。处理器71还可以为其他通用处理器、数字信号处理器(Digital Signal Processor，DSP)、专用集成电路(Application Specific Integrated Circuit，ASIC)、现场可编程门阵列(Field-Programmable Gate Array，FPGA)或者其他可编程逻辑器件、分立门或者晶体管逻辑器件、分立硬件组件等芯片，或者上述各类芯片的组合。通用处理器可以是微处理器或者是任何常规的处理器等。
存储器72作为一种非暂态计算机可读存储介质，可用于存储非暂态软件程序、非暂态计算机可执行程序以及模块，如本申请实施例中的基于json数据构建双向绑定的web页面前端展示方法对应的程序指令/模块。处理器71通过运行存储在存储器72中的非暂态软件程序、指令以及模块，从而执行服务器的各种功能应用以及数据处理，即实现上述方法实施例的基于json数据构建双向绑定的web页面前端展示方法。
存储器72可以包括存储程序区和存储数据区，其中，存储程序区可存储操作系统、至少一个功能所需要的应用程序；存储数据区可存储根据服务器操作的处理装置的使用所创建的数据等。此外，存储器72可以包括高速随机存取存储器，还可以包括非暂态存储器，例如至少一个磁盘存储器件、闪存器件、或其他非暂态固态存储器件。在一些实施例中，存储器72可选包括相对于处理器71远程设置的存储器，这些远程存储器可以通过网络连接至网络连接装置。上述网络的实例包括但不限于互联网、企业内部网、局域网、移动通信网及其组合。
输入装置73可接收输入的数字或字符信息，以及产生与服务器的处理装置的用户设置以及功能控制有关的键信号输入。输出装置74可包括显示屏等显示设备。
一个或者多个模块存储在存储器72中，当被一个或者多个处理器71执行时，执行如图1和3所示的方法。
本领域技术人员可以理解，实现上述实施例方法中的全部或部分流程，是可以通过计算机程序来指示相关的硬件来完成，被执行的程序可存储于一计算机可读取存储介质中，该程序在执行时，可包括如上述基于json数据构建双向绑定的web页面前端展示方法的实施例的流程。其中，存储介质可为磁碟、光盘、只读存储记忆体(Read-Only Memory，ROM)、随机存储记忆体(Random Access Memory，RAM)、快闪存储器(Flash Memory)、硬盘(HardDisk Drive，缩写：HDD)或固态硬盘(Solid-State Drive，SSD)等；存储介质还可以包括上述种类的存储器的组合。
虽然结合附图描述了本发明的实施方式，但是本领域技术人员可以在不脱离本发明的精神和范围的情况下作出各种修改和变型，这样的修改和变型均落入由所附权利要求所限定的范围之内。
Claims (7)
1.一种基于json数据构建双向绑定的web页面前端展示方法，其特征在于，包括：
获取web页面各个业务模块的json数据；
将每一个业务模块的json数据处理为键/值形式的数据；
将每一个业务模块的json数据处理为键/值形式的数据的步骤中，包括：根据业务场景复杂度确定循环次数；根据循环次数对每一个业务模块的json数据进行循环处理得到每一个json数据所对应的键/值；
根据业务需求确定键/值形式的数据所对应的键的getter和setter方法；
根据业务需求确定键/值形式的数据所对应的键的getter和setter方法的步骤中，包括：根据业务需求确定键/值形式的数据中对象的属性；若所述对象的属性为可读可写属性，则将对象所对应的键进行getter方法和setter方法的定义；若所述对象的属性为可读不可写属性，则将对象所对应的键进行getter方法的定义；
根据预设字段类型的属性信息确定所要渲染的键的类型；
对json数据进行遍历，根据所要渲染的键的类型确定所要渲染的DOM节点；
将所要渲染的DOM节点进行渲染，组成DOM树；
根据DOM树组成web页面；
获取web页面上DOM节点的点击事件；
通过所述点击事件所对应的json键触发对应的setter方法，改变点击事件所对应的json数据，得到更新的json数据；
根据更新的json数据对web页面进行更新。
2.根据权利要求1所述的基于json数据构建双向绑定的web页面前端展示方法，其特征在于，获取web页面各个业务模块的json数据的步骤中，包括：
获取业务需求；
根据业务需求将web页面划分为不同的业务模块；
根据每一个业务模块得到每一个业务模块所对应的json数据。
3.根据权利要求1-2中任一所述的基于json数据构建双向绑定的web页面前端展示方法，其特征在于，根据更新的json数据对web页面进行更新的步骤之后，还包括：
将更新的json数据进行存储。
4.根据权利要求3所述的基于json数据构建双向绑定的web页面前端展示方法，其特征在于，将更新的json数据进行存储的步骤中，包括：
根据更新的json数据确定更新的json数据所对应的业务模块；
根据更新的json数据所对应的业务模块确定更新的json数据所对应的来源标识；
将更新的json数据按照来源标识存储至后台数据库中。
5.一种基于json数据构建双向绑定的web页面前端展示系统，其特征在于，包括：
第一获取模块，用于获取web页面各个业务模块的json数据；
第一处理模块，用于将每一个业务模块的json数据处理为键/值形式的数据：
第一处理模块包括：第三处理单元，用于根据业务场景复杂度确定循环次数；第四处理单元，用于根据循环次数对每一个业务模块的json数据进行循环处理得到每一个json数据所对应的键/值；
第二处理模块，用于根据业务需求确定键/值形式的数据所对应的键的getter和setter方法；
第二处理模块包括：第五处理单元，用于根据业务需求确定键/值形式的数据中对象的属性；第六处理单元，用于若所述对象的属性为可读可写属性，则将对象所对应的键进行getter方法和setter方法的定义；第七处理单元，用于若所述对象的属性为可读不可写属性，则将对象所对应的键进行getter方法的定义；
第三处理模块，用于根据预设字段类型的属性信息确定所要渲染的键的类型；
第四处理模块，用于对json数据进行遍历，根据所要渲染的键的类型确定所要渲染的DOM节点；
第五处理模块，用于将所要渲染的DOM节点进行渲染，组成DOM树；
第六处理模块，用于根据DOM树组成web页面；
第二获取模块，用于获取web页面上DOM节点的点击事件；
第七处理模块，用于通过所述点击事件所对应的json键触发对应的setter方法，改变点击事件所对应的json数据，得到更新的json数据；
第八处理模块，用于根据更新的json数据对web页面进行更新。
6.一种电子设备，其特征在于，包括：至少一个处理器；以及与所述至少一个处理器通信连接的存储器；其中，所述存储器存储有可被所述至少一个处理器执行的计算机程序，所述计算机程序被所述至少一个处理器执行，以使所述至少一个处理器执行权利要求1-4任意一项所述的基于json数据构建双向绑定的web页面前端展示方法。
7.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质存储有计算机指令，所述计算机指令用于使所述计算机执行权利要求1-4任意一项所述的基于json数据构建双向绑定的web页面前端展示方法。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202110336589.2A CN113051507B (zh) | 2021-03-29 | 2021-03-29 | 基于json数据构建双向绑定的web页面前端展示方法和系统 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202110336589.2A CN113051507B (zh) | 2021-03-29 | 2021-03-29 | 基于json数据构建双向绑定的web页面前端展示方法和系统 |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN113051507A CN113051507A (zh) | 2021-06-29 |
| CN113051507B true CN113051507B (zh) | 2023-11-21 |
Family
ID=76516237
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202110336589.2A Active CN113051507B (zh) | 2021-03-29 | 2021-03-29 | 基于json数据构建双向绑定的web页面前端展示方法和系统 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN113051507B (zh) |
Families Citing this family (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN113656030A (zh) * | 2021-08-19 | 2021-11-16 | 中国银行股份有限公司 | 一种页面展示方法、装置及系统 |
| CN114924815B (zh) * | 2022-03-31 | 2024-07-02 | 北京达佳互联信息技术有限公司 | 页面渲染方法、装置、电子设备及存储介质 |
| CN115099200B (zh) * | 2022-08-29 | 2022-11-01 | 南京中孚信息技术有限公司 | 防篡改的文本处理方法、装置和计算机设备 |
Citations (12)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN103544024A (zh) * | 2013-11-12 | 2014-01-29 | 深圳如果技术有限公司 | 生成浏览器页面的方法、系统及终端设备 |
| CN104573025A (zh) * | 2015-01-12 | 2015-04-29 | 北京京东尚科信息技术有限公司 | 一种提高页面加载速度的方法及系统 |
| US9553918B1 (en) * | 2014-11-26 | 2017-01-24 | Ensighten, Inc. | Stateful and stateless cookie operations servers |
| CN106776761A (zh) * | 2016-11-18 | 2017-05-31 | 武汉斗鱼网络科技有限公司 | 一种移动浏览器渲染网页的方法及装置 |
| CN108073513A (zh) * | 2017-04-21 | 2018-05-25 | 富士通株式会社 | 对基于区块链的智能合约进行测试的装置和方法 |
| CN108153886A (zh) * | 2017-12-28 | 2018-06-12 | 北京恒泰实达科技股份有限公司 | 实时数据在web应用中的自定义可视化展示方法 |
| CN109445791A (zh) * | 2018-11-01 | 2019-03-08 | 郑州云海信息技术有限公司 | 一种页面前端访问方法及实现系统 |
| CN111026491A (zh) * | 2019-12-10 | 2020-04-17 | 北京小米移动软件有限公司 | 界面显示方法、装置、电子设备、服务器及存储介质 |
| CN111124379A (zh) * | 2019-11-25 | 2020-05-08 | 贝壳技术有限公司 | 页面生成方法、装置、电子设备及存储介质 |
| CN111639287A (zh) * | 2020-04-29 | 2020-09-08 | 深圳壹账通智能科技有限公司 | 一种页面处理方法、装置、终端设备及可读存储介质 |
| CN111813479A (zh) * | 2020-07-06 | 2020-10-23 | 北京飞漫软件技术有限公司 | 一种构建滚轮对象的方法及系统 |
| CN112364496A (zh) * | 2020-11-03 | 2021-02-12 | 中国航空无线电电子研究所 | 基于html5和vue技术的航电仿真面板生成系统 |
Family Cites Families (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20110289141A1 (en) * | 2010-05-20 | 2011-11-24 | Salesforce.Com, Inc. | Methods and systems for providing a user interface in a multi-tenant database environment |
-
2021
- 2021-03-29 CN CN202110336589.2A patent/CN113051507B/zh active Active
Patent Citations (12)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN103544024A (zh) * | 2013-11-12 | 2014-01-29 | 深圳如果技术有限公司 | 生成浏览器页面的方法、系统及终端设备 |
| US9553918B1 (en) * | 2014-11-26 | 2017-01-24 | Ensighten, Inc. | Stateful and stateless cookie operations servers |
| CN104573025A (zh) * | 2015-01-12 | 2015-04-29 | 北京京东尚科信息技术有限公司 | 一种提高页面加载速度的方法及系统 |
| CN106776761A (zh) * | 2016-11-18 | 2017-05-31 | 武汉斗鱼网络科技有限公司 | 一种移动浏览器渲染网页的方法及装置 |
| CN108073513A (zh) * | 2017-04-21 | 2018-05-25 | 富士通株式会社 | 对基于区块链的智能合约进行测试的装置和方法 |
| CN108153886A (zh) * | 2017-12-28 | 2018-06-12 | 北京恒泰实达科技股份有限公司 | 实时数据在web应用中的自定义可视化展示方法 |
| CN109445791A (zh) * | 2018-11-01 | 2019-03-08 | 郑州云海信息技术有限公司 | 一种页面前端访问方法及实现系统 |
| CN111124379A (zh) * | 2019-11-25 | 2020-05-08 | 贝壳技术有限公司 | 页面生成方法、装置、电子设备及存储介质 |
| CN111026491A (zh) * | 2019-12-10 | 2020-04-17 | 北京小米移动软件有限公司 | 界面显示方法、装置、电子设备、服务器及存储介质 |
| CN111639287A (zh) * | 2020-04-29 | 2020-09-08 | 深圳壹账通智能科技有限公司 | 一种页面处理方法、装置、终端设备及可读存储介质 |
| CN111813479A (zh) * | 2020-07-06 | 2020-10-23 | 北京飞漫软件技术有限公司 | 一种构建滚轮对象的方法及系统 |
| CN112364496A (zh) * | 2020-11-03 | 2021-02-12 | 中国航空无线电电子研究所 | 基于html5和vue技术的航电仿真面板生成系统 |
Non-Patent Citations (3)
| Title |
|---|
| Beeswax：a platform for private web apps;Jean-Sebastien Legare等;proceedings on privacy enhancing technologies(第3期);24-40 * |
| 基于Vue.js高速路政管理系统的设计与实现;王胜;张靖;;电脑知识与技术;第13卷(第21期);86-88+101 * |
| 基于捕获/重放的Web应用跨浏览器兼容性检测;吴国全等;计算机研究与发展;第54卷(第3期);623-632 * |
Also Published As
| Publication number | Publication date |
|---|---|
| CN113051507A (zh) | 2021-06-29 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN113051507B (zh) | 基于json数据构建双向绑定的web页面前端展示方法和系统 | |
| US10824691B2 (en) | Page rendering method, device, and data storage medium | |
| CN109725901B (zh) | 前端代码的开发方法、装置、设备和计算机存储介质 | |
| US10552236B2 (en) | Serialization of focus movement between elements in web applications | |
| CN111736837B (zh) | 网页操作的还原方法、装置、设备、可读存储介质及系统 | |
| CN112487112A (zh) | 一种组件联动配置的方法、装置、计算机设备及存储介质 | |
| CN110955604A (zh) | 一种信息显示方法、装置、服务器及存储介质 | |
| CN114116108A (zh) | 动态渲染方法、装置、设备及存储介质 | |
| CN113326403A (zh) | 流程图渲染方法及装置、电子设备和介质 | |
| US9996559B2 (en) | Maintenance actions and user-specific settings of the attribute value derivation instruction set user interface | |
| CN110489686A (zh) | 一种数据分析方法、装置及终端 | |
| KR102593844B1 (ko) | 딥러닝 네트워크 구성 방법, 딥러닝 자동화 플랫폼 서비스 시스템 및 이를 위한 컴퓨터 프로그램 | |
| CN115509668A (zh) | 前端页面解析型框架的构建方法、装置、设备及存储介质 | |
| CN114241092A (zh) | 多图排版方法、多图排版装置及电子设备 | |
| CN115577344A (zh) | 一种权限管理方法、装置、设备及存储介质 | |
| CN111124386A (zh) | 基于Unity的动画事件处理方法、装置、设备和存储介质 | |
| CN115756632A (zh) | 面向低代码场景的事件动作配置方法、装置、设备及介质 | |
| CN117215585B (zh) | 一种可视化描述以及动态控制界面组件属性的方法及装置 | |
| CN115049804B (zh) | 虚拟场景的编辑方法、装置、设备及介质 | |
| JPH09311771A (ja) | ネットワーク機器管理方法及びその装置 | |
| EP4216097A1 (en) | Method, system, equipment and medium for modifying the layering layer information of finite element model unit | |
| CN113553443B (zh) | 记录知识图谱游走路径的关系图谱生成方法和系统 | |
| CN117130702A (zh) | 一种图形界面的调整方法、装置、存储介质及电子设备 | |
| CN115761093A (zh) | 渲染方法、装置、电子设备和存储介质 | |
| CN111090819A (zh) | 热力图生成方法、装置、终端以及计算机可读存储介质 |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| GR01 | Patent grant | ||
| GR01 | Patent grant |