CN114489916A - 可视化大屏页面组件的加载方法和装置 - Google Patents
可视化大屏页面组件的加载方法和装置 Download PDFInfo
- Publication number
- CN114489916A CN114489916A CN202210227569.6A CN202210227569A CN114489916A CN 114489916 A CN114489916 A CN 114489916A CN 202210227569 A CN202210227569 A CN 202210227569A CN 114489916 A CN114489916 A CN 114489916A
- Authority
- CN
- China
- Prior art keywords
- component
- component data
- request
- screen page
- data
- 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.)
- Pending
Links
- 238000011068 loading method Methods 0.000 title claims abstract description 106
- 230000000007 visual effect Effects 0.000 title claims abstract description 58
- 238000000034 method Methods 0.000 title claims abstract description 49
- 238000009877 rendering Methods 0.000 claims abstract description 62
- 230000004044 response Effects 0.000 claims abstract description 14
- 230000003993 interaction Effects 0.000 claims description 35
- 238000012545 processing Methods 0.000 claims description 15
- 230000003068 static effect Effects 0.000 claims description 10
- 238000004590 computer program Methods 0.000 claims description 9
- 230000001960 triggered effect Effects 0.000 claims description 8
- 238000013507 mapping Methods 0.000 claims description 5
- 238000012544 monitoring process Methods 0.000 claims description 5
- 230000008569 process Effects 0.000 abstract description 21
- 238000000926 separation method Methods 0.000 abstract description 4
- 238000010586 diagram Methods 0.000 description 11
- 230000002829 reductive effect Effects 0.000 description 10
- 238000004891 communication Methods 0.000 description 7
- 230000007246 mechanism Effects 0.000 description 7
- 230000006870 function Effects 0.000 description 6
- 230000008859 change Effects 0.000 description 4
- 230000003287 optical effect Effects 0.000 description 4
- 238000013461 design Methods 0.000 description 3
- 230000002452 interceptive effect Effects 0.000 description 3
- 230000004048 modification Effects 0.000 description 3
- 238000012986 modification Methods 0.000 description 3
- 230000008901 benefit Effects 0.000 description 2
- 239000000835 fiber Substances 0.000 description 2
- 230000000670 limiting effect Effects 0.000 description 2
- 230000000644 propagated effect Effects 0.000 description 2
- 239000004065 semiconductor Substances 0.000 description 2
- 230000009471 action Effects 0.000 description 1
- 230000000712 assembly Effects 0.000 description 1
- 238000000429 assembly Methods 0.000 description 1
- 238000010276 construction Methods 0.000 description 1
- 230000001419 dependent effect Effects 0.000 description 1
- 230000000694 effects Effects 0.000 description 1
- 238000005429 filling process Methods 0.000 description 1
- 230000006872 improvement Effects 0.000 description 1
- 239000004973 liquid crystal related substance Substances 0.000 description 1
- 239000013307 optical fiber Substances 0.000 description 1
- 230000002441 reversible effect Effects 0.000 description 1
- 238000006467 substitution reaction Methods 0.000 description 1
- 238000012795 verification Methods 0.000 description 1
- 238000012800 visualization Methods 0.000 description 1
- 239000002699 waste material Substances 0.000 description 1
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F9/00—Arrangements for program control, e.g. control units
- G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
- G06F9/44—Arrangements for executing specific programs
- G06F9/451—Execution arrangements for user interfaces
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F9/00—Arrangements for program control, e.g. control units
- G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
- G06F9/44—Arrangements for executing specific programs
- G06F9/445—Program loading or initiating
- G06F9/44505—Configuring for program initiating, e.g. using registry, configuration files
- G06F9/4451—User profiles; Roaming
Landscapes
- Engineering & Computer Science (AREA)
- Software Systems (AREA)
- Theoretical Computer Science (AREA)
- Physics & Mathematics (AREA)
- General Engineering & Computer Science (AREA)
- General Physics & Mathematics (AREA)
- Human Computer Interaction (AREA)
- Information Retrieval, Db Structures And Fs Structures Therefor (AREA)
Abstract
本发明公开了一种可视化大屏页面组件的加载方法和装置，涉及计算机技术领域。该方法的一具体实施方式包括：响应于可视化大屏页面的显示操作，获取所述大屏页面包括的组件的样式配置信息；根据所述样式配置信息进行组件渲染，并注册组件数据请求事件；响应于所有组件都渲染完毕，触发所述组件数据请求事件，发送组件数据获取请求以获取组件数据；根据获取的组件数据进行组件数据加载，以完成可视化大屏页面组件的加载。该实施方式能够实现组件渲染与数据加载的分离解耦，减少了无效渲染，降低了组件加载性能资源消耗，且可以解决在对大屏页面进行编辑的过程中的操作卡顿问题。
Description
技术领域
本发明涉及计算机技术领域，尤其涉及一种可视化大屏页面组件的加载方法和装置。
背景技术
现有的可视化大屏组件大多是使用技术栈React框架来进行组件的包装，使每个组件具备样式设置、数据设置、交互设置等能力。其中，样式设置指的是组件的结构和显示属性等的设置，数据设置指的是组件对应要显示的数据等的设置，交互设置指的是组件与用户交互时所涉及的变量等的设置。可视化大屏组件在加载时，核心模式是以数据驱动组件和数据的渲染。在加载过程中，先根据组件要显示的数据类型进行对应的组件数据设置，然后对数据设置后的组件进行渲染以得到可视化大屏界面。
在实现本发明过程中，发明人发现现有技术中至少存在如下问题：
在复杂的大屏页面中，包括多个组件，且组件之间可能具有依赖关系。由于组件加载顺序与变量引用是无序的，导致相互依赖的组件在进行渲染时会存在等待现象，使得组件加载效率低，且系统加载性能资源消耗大。
发明内容
有鉴于此，本发明实施例提供一种可视化大屏页面组件的加载方法和装置，能够实现组件渲染与数据加载的分离解耦，减少了无效渲染，降低了组件加载性能资源消耗，且可以解决在对大屏页面进行编辑的过程中的操作卡顿问题。
为实现上述目的，根据本发明实施例的一个方面，提供了一种可视化大屏页面组件的加载方法。
一种可视化大屏页面组件的加载方法，包括：
响应于可视化大屏页面的显示操作，获取所述大屏页面包括的组件的样式配置信息；
根据所述样式配置信息进行组件渲染，并注册组件数据请求事件；
响应于所有组件都渲染完毕，触发所述组件数据请求事件，发送组件数据获取请求以获取组件数据；
根据获取的组件数据进行组件数据加载，以完成可视化大屏页面组件的加载。
可选地，组件数据包括静态数据、数据库数据和接口数据三种类型；
对于组件数据为静态数据的组件，在获取所述大屏页面包括的组件的样式配置信息之后，还包括：获取所述组件的组件数据；
以及，在根据所述样式配置信息进行组件渲染之后，还包括：根据所述组件的组件数据进行组件数据加载。
可选地，在获取所述大屏页面包括的组件的样式配置信息之后，还包括：
注册交互事件，所述交互事件用于监听组件的交互变量的值，以及当所述交互变量的值发生变化时，触发与所述交互变量相关的组件数据获取请求，以请求获取组件数据并更新组件数据。
可选地，在获取所述大屏页面包括的组件的样式配置信息之后，还包括：
注册组件更新事件，所述组件更新事件用于响应于对所述大屏页面的组件进行的编辑操作，更新组件的样式配置信息。
可选地，在注册组件数据请求事件之后，还包括：根据所述样式配置信息生成组件数据获取请求，并将生成的组件数据获取请求保存到请求池中；
在获取到组件数据之后，还包括：将所获取的组件数据进行缓存；
在触发所述组件数据请求事件之后，发送组件数据获取请求之前，还包括：
根据请求池中组件数据获取请求的请求信息生成缓存标识；
根据所述缓存标识从缓存中查找对应的组件数据；
以及，确认在所述缓存中不存在与所述缓存标识对应的组件数据。
可选地，所述组件数据获取请求为批量请求；
发送组件数据获取请求以获取组件数据包括：
根据组件数据获取请求的请求信息生成缓存标识；
根据所述缓存标识确定相同请求；
在所述缓存中不存在与所述缓存标识对应的组件数据的情况下，将相同请求所对应的组件标识添加到队列中并仅发送一次组件数据获取请求；
在获取到组件数据后，将获取的组件数据与所述队列中的组件标识建立映射关系。
可选地，所述组件数据获取请求的请求信息包括请求方式、请求头和请求路径；
根据组件数据获取请求的请求信息生成缓存标识包括：
从所述请求头中提取关键鉴权项，并对所述关键鉴权项进行序列化处理；
对所述请求方式、请求路径和序列化处理后的关键鉴权项进行加密生成缓存标识。
根据本发明实施例的另一方面，提供了一种可视化大屏页面组件的加载装置。
一种可视化大屏页面组件的加载装置，包括：
信息获取模块，用于响应于可视化大屏页面的显示操作，获取所述大屏页面包括的组件的样式配置信息；
组件渲染模块，用于根据所述样式配置信息进行组件渲染，并注册组件数据请求事件；
数据请求模块，用于响应于所有组件都渲染完毕，触发所述组件数据请求事件，发送组件数据获取请求以获取组件数据；
数据加载模块，用于根据获取的组件数据进行组件数据加载，以完成可视化大屏页面组件的加载。
根据本发明实施例的又一方面，提供了一种可视化大屏页面组件加载的电子设备。
一种可视化大屏页面组件的加载电子设备，包括：一个或多个处理器；存储装置，用于存储一个或多个程序，当所述一个或多个程序被所述一个或多个处理器执行，使得所述一个或多个处理器实现本发明实施例所提供的可视化大屏页面组件的加载方法。
根据本发明实施例的再一方面，提供了一种计算机可读介质。
一种计算机可读介质，其上存储有计算机程序，所述程序被处理器执行时实现本发明实施例所提供的可视化大屏页面组件的加载方法。
上述发明中的一个实施例具有如下优点或有益效果：通过响应于可视化大屏页面的显示操作，获取大屏页面包括的组件的样式配置信息；根据样式配置信息进行组件渲染，并注册组件数据请求事件；响应于所有组件都渲染完毕，触发组件数据请求事件，发送组件数据获取请求以获取组件数据；根据获取的组件数据进行组件数据加载，以完成可视化大屏页面组件的加载的技术方案，即可通过事件触发机制，将组件加载过程分为组件渲染阶段和数据加载阶段，实现了组件渲染与数据加载的分离解耦，减少了无效渲染，降低了组件加载性能资源消耗，且可以解决在对大屏页面进行编辑的过程中的操作卡顿问题。
上述的非惯用的可选方式所具有的进一步效果将在下文中结合具体实施方式加以说明。
附图说明
附图用于更好地理解本发明，不构成对本发明的不当限定。其中：
图1是根据本发明实施例的可视化大屏页面组件的加载方法的主要步骤示意图；
图2是本发明实施例的可视化大屏页面组件的加载过程示意图；
图3是根据本发明实施例的可视化大屏页面组件的加载装置的主要模块示意图；
图4是本发明实施例可以应用于其中的示例性系统架构图；
图5是适于用来实现本发明实施例的终端设备或服务器的计算机系统的结构示意图。
具体实施方式
以下结合附图对本发明的示范性实施例做出说明，其中包括本发明实施例的各种细节以助于理解，应当将它们认为仅仅是示范性的。因此，本领域普通技术人员应当认识到，可以对这里描述的实施例做出各种改变和修改，而不会背离本发明的范围和精神。同样，为了清楚和简明，以下的描述中省略了对公知功能和结构的描述。
为了解决现有技术中存在的技术问题，本发明提供了一种可视化大屏页面组件的加载方法和加载装置，将组件的加载过程分为组件渲染和数据加载两个阶段分别进行，可以优化状态触发机制，减少无效渲染，降低了组件加载性能资源消耗，且可以解决在对大屏页面进行编辑的过程中的操作卡顿问题。
在本发明的可视化大屏页面组件的加载方法中，使用事件系统构建发布订阅机制的设计模式，使可视化大屏页面组件的组件渲染和数据加载进行分离解耦，形成组件渲染阶段和数据加载阶段，从而避免了由于变量引用无序带来的渲染等待所导致的系统性能资源浪费的情况。其中，组件渲染阶段：渲染组件DOM(文档对象模型)、初始化组件的交互变量，并注册数据请求事件、交互事件和组件更新事件，为数据加载阶段奠定基础；数据加载阶段：待组件渲染阶段的所有组件渲染完毕后执行，因此在执行此阶段时，所有组件的DOM以及交互变量已准备就绪，此时进行数据加载的事件订阅，拉取数据请求事件进行数据加载。
图1是根据本发明实施例的可视化大屏页面组件的加载方法的主要步骤示意图。如图1所示，本发明实施例的可视化大屏页面组件的加载方法主要包括如下的步骤S101至步骤S104。
步骤S101：响应于可视化大屏页面的显示操作，获取所述大屏页面包括的组件的样式配置信息。一般情况下，在对可视化大屏页面进行编辑、预览或者发布的时候，均需要进行页面显示操作，而每次进行页面显示操作时，均需要进行组件加载以生成可视化的大屏页面。
根据本发明的实施例，当需要进行可视化大屏页面的显示操作时，将获取大屏页面包括的组件的样式配置信息。其中，大屏页面包括的组件可能会有多个，且可以为不同类型的组件，例如包括文本框、柱状图、折线图、地图，等等。以文本框组件为例，组件的样式配置信息例如是：文本框的大小、形状、线条颜色、线条粗细、背景、在页面中的位置等，以及该文本框组件中要显示的组件数据的获取方式和显示方式，等等。
根据本发明的技术方案，组件数据例如可以包括静态数据、数据库数据和接口数据三种类型的数据。对于数据库数据和接口数据，均是需要动态获取的数据。若组件数据为数据库数据，则在组件的样式配置信息中会包括对应的数据库查询SQL语句，用于进行组件数据的获取；若组件数据为接口数据，则在组件的样式配置信息中会包括对应的接口调用逻辑和接口调用参数，用于通过调用指定的接口以获取组件数据。对于这两种类型的组件数据，可以根据样式配置信息生成组件数据获取请求，并通过发送组件数据获取请求来获取组件数据。静态数据，即为固定值，对于组件数据为静态数据的组件，在获取大屏页面包括的组件的样式配置信息之后，还可以获取该组件的组件数据。由于此时无需等待发送请求以获取组件数据，故而可以按照现有技术的方案，在获取到组件对应的样式配置信息和组件数据之后，直接进行组件加载；也可以在获取到组件对应的样式配置信息和组件数据之后，根据样式配置信息进行组件渲染，根据组件数据进行组件数据加载，从而实现该组件的加载。
步骤S102：根据所述样式配置信息进行组件渲染，并注册组件数据请求事件。其中，渲染指的是，根据后端获取的组件的样式配置信息，生成浏览器端可以显示的大屏页面的DOM元素，展现到浏览器端。
根据本发明的实施例，在组件渲染阶段，进行组件渲染的时候，还可以初始化组件的交互变量以备后面进行组件数据请求时使用，注册组件数据请求事件、交互事件和组件更新事件等。根据本发明的实施例，在注册组件数据请求事件时，会根据样式配置信息生成组件数据获取请求，并将生成的组件数据获取请求保存到请求池中，以便在所有组件都渲染完毕后进行组件数据的请求获取。
根据本发明的一个实施例，在获取所述大屏页面包括的组件的样式配置信息之后，还可以注册交互事件，所述交互事件用于监听组件的交互变量的值，以及当所述交互变量的值发生变化时，触发与所述交互变量相关的组件数据获取请求，以请求获取组件数据并更新组件数据。其中，组件的交互变量会随着用户与该组件的交互而发生变量值的变化。例如：一个按钮组件，具有交互变量，当用户点击一次时，该交互变量的值为1，当用户连续双击时，该交互变量的值为2。又如，一个下拉框组件设置了一个交互变量“selectValue”，当选择下拉框中不同的选项时，选项对应的变量值会存储到“selectValue”这个变量中；当修改下拉框的选项时，变量“selectValue”的值会发生变化。当交互变量的值发生变化时，会触发与该交互变量相关的组件数据获取请求，以请求获取组件数据并更新组件数据。
根据本发明的另一个实施例，在获取所述大屏页面包括的组件的样式配置信息之后，还可以注册组件更新事件，组件更新事件用于响应于对大屏页面的组件进行的编辑操作，更新组件的样式配置信息。在对大屏页面的组件进行编辑时，可能会修改组件的数据请求模式或者数据请求模式中的参数等，在编辑完成后即需要进行页面显示以验证编辑结果是否正确，此时就会触发组件更新事件，更新组件的样式配置信息。其中，组件的数据请求模式与组件数据的类型相对应，包括静态数据、接口数据和数据库数据三种模式。在进行数据请求模式修改后，会对应进行数据请求模式参数的修改。
步骤S103：响应于所有组件都渲染完毕，触发所述组件数据请求事件，发送组件数据获取请求以获取组件数据。在所有组件都渲染完毕后，就会触发组件数据请求事件，对于需要动态获取组件数据的组件，会通过请求池中的组件数据获取请求来获取组件数据。
根据本发明的一个实施例，在获取到组件数据之后，可以将所获取的组件数据进行缓存。在需要获取组件数据时，优先从缓存中进行查找，可以提高数据获取效率，且节省系统资源消耗。具体地，在进行组件数据缓存时，可以生成一个缓存标识，以便于进行查找。在本发明的实施例中，在触发所述组件数据请求事件之后，发送组件数据获取请求之前，还包括：根据请求池中组件数据获取请求的请求信息生成缓存标识；根据所述缓存标识从缓存中查找对应的组件数据；以及，确认在所述缓存中不存在与所述缓存标识对应的组件数据。也就是说，在触发组件数据请求事件之后，预先根据组件数据获取请求的请求信息生成缓存标识，然后根据缓存标识从缓存中查找是否存在对应的组件数据，若存在，则无需再发送组件数据获取请求，若不存在，则发送组件数据获取请求。
根据本发明的实施例，若需要动态获取组件数据的组件有多个时，此时就会发出批量请求。而该批量请求中可能存在相同的请求，例如：当A组件和B组件的组件数据均保存在数据库的同一位置，或A组件和B组件的组件数据均依赖于同一个交互变量时，此时若要获取A组件和B组件的组件数据，发出的两个组件数据获取请求即为相同请求，对应的缓存标识也相同。但是由于这两个请求几乎同时发出，且请求响应的组件数据在进行缓存时会有填充过程，故而缓存中可能并不能查找到该缓存标识对应的组件数据。若重复发送相同的请求，也会造成系统资源的浪费。故而，在此种情况下，本发明的实施例在发送组件数据获取请求以获取组件数据时，具体可以按照以下步骤执行：根据组件数据获取请求的请求信息生成缓存标识；根据所述缓存标识确定相同请求；在所述缓存中不存在与所述缓存标识对应的组件数据的情况下，将相同请求所对应的组件标识添加到队列中并仅发送一次组件数据获取请求；在获取到组件数据后，将获取的组件数据与所述队列中的组件标识建立映射关系。如此，即可在缓存中不存在与该缓存标识对应的组件数据的情况下，对于相同请求仅发送一次，并通过建立组件标识与获取的组件数据的映射关系来完成相同请求的所有组件的组件数据获取，从而避免了重复请求，节省了系统资源消耗，提高了数据获取效率。
根据本发明的又一个实施例，组件数据获取请求的请求信息包括请求方式、请求头和请求路径。并且，在根据组件数据获取请求的请求信息生成缓存标识时，具体可以先从所述请求头中提取关键鉴权项，并对所述关键鉴权项进行序列化处理；然后，对所述请求方式、请求路径和序列化处理后的关键鉴权项进行加密生成缓存标识。具体地，在生成缓存标识时，可以是根据请求信息中包括的请求方式method、请求头headers、请求路径URL，使用AES进行加密处理后作为缓存标识UUID。而在加密时，对于headers，只提取关键鉴权项，并针对所有提取的关键鉴权项进行序列化处理，避免由于headers中携带动态值而影响缓存机制，会导致之前的缓存匹配不上，这样就会重新从后端请求数据，就失去了缓存意义。其中，鉴权项指的是权限验证相关属性，如：cityos-application-code、bridge-login-type、Authorization等，后端会利用这些属性校验请求是否合法。在进行序列化处理时，可以通过JSON.stringify()和JSON.parse()进行序列化和反序列化。
在将获取到的组件数据保存到缓存中时，可以通过将组件数据与缓存标识UUID建立映射关系以将其保存到UUID对应的数据data中，并通过建立长连接的方式来监测缓存的时效性，根据监测结果清除前端数据库IndexDB中的缓存。
步骤S104：根据获取的组件数据进行组件数据加载，以完成可视化大屏页面组件的加载。如此，即可进行可视化大屏页面的显示。当用户与可视化大屏进行交互时，会触发对应的组件的交互变量的值发生变化，此时会根据该交互变量从大屏页面包括的组件中查找到相关的组件，然后将这些组件的组件数据获取请求添加到请求池中以进行批量请求，从而获取到最新的组件数据，进行组件数据加载后显示。在此过程中，同样是优先从缓存中查找是否有对应的组件数据，在未找到时才会发送组件数据获取请求从数据库中或通过接口查询最新的组件数据。
根据上述的步骤S101至步骤S104，即可通过事件触发机制，将组件加载过程分为组件渲染阶段和数据加载阶段，实现了组件渲染与数据加载的分离解耦，减少了无效渲染，降低了组件加载性能资源消耗，且可以解决在对大屏页面进行编辑的过程中的操作卡顿问题。
图2是本发明实施例的可视化大屏页面组件的加载过程示意图。如图2所示，在本发明的实施例中，当大屏页面在进行编辑、预览或发布时，首先获取大屏页面包括的所有组件的样式配置信息，然后根据样式配置信息进行组件渲染，在组件渲染过程中，还可以初始化组件的交互变量、注册组件数据请求事件、交互事件和组件更新事件，以及生成组件数据获取请求并保存到请求池中。在所有组件都渲染完成后，触发组件数据请求事件，从请求池中获取组件数据获取请求以获取组件数据。在获取组件数据时，首先根据组件数据获取请求的请求信息生成缓存标识；然后从缓存中查找是否有对应的组件数据；若缓存中有对应的组件数据，则获取组件数据并更新组件的组件数据，否则发送组件数据获取请求以获取组件数据并更新组件的组件数据。最后，根据组件数据进行组件数据加载，以完成可视化大屏页面组件的加载过程。
图3是根据本发明实施例的可视化大屏页面组件的加载装置的主要模块示意图。如图3所示，本发明实施例的可视化大屏页面组件的加载装置300主要包括信息获取模块301、组件渲染模块302、数据请求模块303和数据加载模块304。
信息获取模块301，用于响应于可视化大屏页面的显示操作，获取所述大屏页面包括的组件的样式配置信息；
组件渲染模块302，用于根据所述样式配置信息进行组件渲染，并注册组件数据请求事件；
数据请求模块303，用于响应于所有组件都渲染完毕，触发所述组件数据请求事件，发送组件数据获取请求以获取组件数据；
数据加载模块304，用于根据获取的组件数据进行组件数据加载，以完成可视化大屏页面组件的加载。
根据本发明的一个实施例，组件数据包括静态数据、数据库数据和接口数据三种类型；
对于组件数据为静态数据的组件，信息获取模块301还可以用于：在获取所述大屏页面包括的组件的样式配置信息之后，获取所述组件的组件数据；
以及，数据加载模块304还可以用于：在根据所述样式配置信息进行组件渲染之后，根据所述组件的组件数据进行组件数据加载。
根据本发明的另一个实施例，组件渲染模块302还可以用于：
在获取所述大屏页面包括的组件的样式配置信息之后，注册交互事件，所述交互事件用于监听组件的交互变量的值，以及当所述交互变量的值发生变化时，触发与所述交互变量相关的组件数据获取请求，以请求获取组件数据并更新组件数据。
根据本发明的又一个实施例，组件渲染模块302还可以用于：
在获取所述大屏页面包括的组件的样式配置信息之后，注册组件更新事件，所述组件更新事件用于响应于对所述大屏页面的组件进行的编辑操作，更新组件的样式配置信息。
根据本发明的又一个实施例，可视化大屏页面组件的加载装置300还可以包括请求生成模块(图中未示出)，用于：在注册组件数据请求事件之后，根据所述样式配置信息生成组件数据获取请求，并将生成的组件数据获取请求保存到请求池中；
可视化大屏页面组件的加载装置300还可以包括数据缓存模块(图中未示出)，用于：在获取到组件数据之后，将所获取的组件数据进行缓存；
可视化大屏页面组件的加载装置300还可以包括缓存查找模块(图中未示出)，用于：在触发所述组件数据请求事件之后，发送组件数据获取请求之前，根据请求池中组件数据获取请求的请求信息生成缓存标识；根据所述缓存标识从缓存中查找对应的组件数据；以及，确认在所述缓存中不存在与所述缓存标识对应的组件数据。
根据本发明的又一个实施例，所述组件数据获取请求为批量请求；
数据请求模块303还可以用于：
根据组件数据获取请求的请求信息生成缓存标识；
根据所述缓存标识确定相同请求；
在所述缓存中不存在与所述缓存标识对应的组件数据的情况下，将相同请求所对应的组件标识添加到队列中并仅发送一次组件数据获取请求；
在获取到组件数据后，将获取的组件数据与所述队列中的组件标识建立映射关系。
根据本发明的再一个实施例，所述组件数据获取请求的请求信息包括请求方式、请求头和请求路径；
缓存查找模块(图中未示出)在根据组件数据获取请求的请求信息生成缓存标识时，还可以用于：
从所述请求头中提取关键鉴权项，并对所述关键鉴权项进行序列化处理；
对所述请求方式、请求路径和序列化处理后的关键鉴权项进行加密生成缓存标识。
根据本发明实施例的技术方案，通过响应于可视化大屏页面的显示操作，获取大屏页面包括的组件的样式配置信息；根据样式配置信息进行组件渲染，并注册组件数据请求事件；响应于所有组件都渲染完毕，触发组件数据请求事件，发送组件数据获取请求以获取组件数据；根据获取的组件数据进行组件数据加载，以完成可视化大屏页面组件的加载的技术方案，即可通过事件触发机制，将组件加载过程分为组件渲染阶段和数据加载阶段，实现了组件渲染与数据加载的分离解耦，减少了无效渲染，降低了组件加载性能资源消耗，且可以解决在对大屏页面进行编辑的过程中的操作卡顿问题。
图4示出了可以应用本发明实施例的可视化大屏页面组件的加载方法或可视化大屏页面组件的加载装置的示例性系统架构400。
如图4所示，系统架构400可以包括终端设备401、402、403，网络404和服务器405。网络404用以在终端设备401、402、403和服务器405之间提供通信链路的介质。网络404可以包括各种连接类型，例如有线、无线通信链路或者光纤电缆等等。
用户可以使用终端设备401、402、403通过网络404与服务器405交互，以接收或发送消息等。终端设备401、402、403上可以安装有各种通讯客户端应用，例如页面设计应用、网页浏览器应用、组件设置类应用、页面渲染类应用等(仅为示例)。
终端设备401、402、403可以是具有显示屏并且支持网页浏览的各种电子设备，包括但不限于智能手机、平板电脑、膝上型便携计算机和台式计算机等等。
服务器405可以是提供各种服务的服务器，例如对用户利用终端设备401、402、403所浏览的大屏页面提供支持的后台管理服务器(仅为示例)。后台管理服务器可以对接收到的页面组件加载请求等数据进行响应于可视化大屏页面的显示操作，获取所述大屏页面包括的组件的样式配置信息；根据所述样式配置信息进行组件渲染，并注册组件数据请求事件；响应于所有组件都渲染完毕，触发所述组件数据请求事件，发送组件数据获取请求以获取组件数据；根据获取的组件数据进行组件数据加载等处理，并将处理结果(例如组件数据加载结果、可视化大屏页面--仅为示例)反馈给终端设备。
需要说明的是，本发明实施例所提供的可视化大屏页面组件的加载方法一般由服务器405执行，相应地，可视化大屏页面组件的加载装置一般设置于服务器405中。
应该理解，图4中的终端设备、网络和服务器的数目仅仅是示意性的。根据实现需要，可以具有任意数目的终端设备、网络和服务器。
下面参考图5，其示出了适于用来实现本发明实施例的终端设备或服务器的计算机系统500的结构示意图。图5示出的终端设备或服务器仅仅是一个示例，不应对本发明实施例的功能和使用范围带来任何限制。
如图5所示，计算机系统500包括中央处理单元(CPU)501，其可以根据存储在只读存储器(ROM)502中的程序或者从存储部分508加载到随机访问存储器(RAM)503中的程序而执行各种适当的动作和处理。在RAM 503中，还存储有系统500操作所需的各种程序和数据。CPU 501、ROM 502以及RAM 503通过总线504彼此相连。输入/输出(I/O)接口505也连接至总线504。
以下部件连接至I/O接口505：包括键盘、鼠标等的输入部分506；包括诸如阴极射线管(CRT)、液晶显示器(LCD)等以及扬声器等的输出部分507；包括硬盘等的存储部分508；以及包括诸如LAN卡、调制解调器等的网络接口卡的通信部分509。通信部分509经由诸如因特网的网络执行通信处理。驱动器510也根据需要连接至I/O接口505。可拆卸介质511，诸如磁盘、光盘、磁光盘、半导体存储器等等，根据需要安装在驱动器510上，以便于从其上读出的计算机程序根据需要被安装入存储部分508。
特别地，根据本发明公开的实施例，上文参考流程图描述的过程可以被实现为计算机软件程序。例如，本发明公开的实施例包括一种计算机程序产品，其包括承载在计算机可读介质上的计算机程序，该计算机程序包含用于执行流程图所示的方法的程序代码。在这样的实施例中，该计算机程序可以通过通信部分509从网络上被下载和安装，和/或从可拆卸介质511被安装。在该计算机程序被中央处理单元(CPU)501执行时，执行本发明的系统中限定的上述功能。
需要说明的是，本发明所示的计算机可读介质可以是计算机可读信号介质或者计算机可读存储介质或者是上述两者的任意组合。计算机可读存储介质例如可以是——但不限于——电、磁、光、电磁、红外线、或半导体的系统、装置或器件，或者任意以上的组合。计算机可读存储介质的更具体的例子可以包括但不限于：具有一个或多个导线的电连接、便携式计算机磁盘、硬盘、随机访问存储器(RAM)、只读存储器(ROM)、可擦式可编程只读存储器(EPROM或闪存)、光纤、便携式紧凑磁盘只读存储器(CD-ROM)、光存储器件、磁存储器件、或者上述的任意合适的组合。在本发明中，计算机可读存储介质可以是任何包含或存储程序的有形介质，该程序可以被指令执行系统、装置或者器件使用或者与其结合使用。而在本发明中，计算机可读的信号介质可以包括在基带中或者作为载波一部分传播的数据信号，其中承载了计算机可读的程序代码。这种传播的数据信号可以采用多种形式，包括但不限于电磁信号、光信号或上述的任意合适的组合。计算机可读的信号介质还可以是计算机可读存储介质以外的任何计算机可读介质，该计算机可读介质可以发送、传播或者传输用于由指令执行系统、装置或者器件使用或者与其结合使用的程序。计算机可读介质上包含的程序代码可以用任何适当的介质传输，包括但不限于：无线、电线、光缆、RF等等，或者上述的任意合适的组合。
附图中的流程图和框图，图示了按照本发明各种实施例的系统、方法和计算机程序产品的可能实现的体系架构、功能和操作。在这点上，流程图或框图中的每个方框可以代表一个模块、程序段、或代码的一部分，上述模块、程序段、或代码的一部分包含一个或多个用于实现规定的逻辑功能的可执行指令。也应当注意，在有些作为替换的实现中，方框中所标注的功能也可以以不同于附图中所标注的顺序发生。例如，两个接连地表示的方框实际上可以基本并行地执行，它们有时也可以按相反的顺序执行，这依所涉及的功能而定。也要注意的是，框图或流程图中的每个方框、以及框图或流程图中的方框的组合，可以用执行规定的功能或操作的专用的基于硬件的系统来实现，或者可以用专用硬件与计算机指令的组合来实现。
描述于本发明实施例中所涉及到的单元或模块可以通过软件的方式实现，也可以通过硬件的方式来实现。所描述的单元或模块也可以设置在处理器中，例如，可以描述为：一种处理器包括信息获取模块、组件渲染模块、数据请求模块和数据加载模块。其中，这些单元或模块的名称在某种情况下并不构成对该单元或模块本身的限定，例如，信息获取模块还可以被描述为“用于响应于可视化大屏页面的显示操作，获取所述大屏页面包括的组件的样式配置信息的模块”。
作为另一方面，本发明还提供了一种计算机可读介质，该计算机可读介质可以是上述实施例中描述的设备中所包含的；也可以是单独存在，而未装配入该设备中。上述计算机可读介质承载有一个或者多个程序，当上述一个或者多个程序被一个该设备执行时，使得该设备包括：响应于可视化大屏页面的显示操作，获取所述大屏页面包括的组件的样式配置信息；根据所述样式配置信息进行组件渲染，并注册组件数据请求事件；响应于所有组件都渲染完毕，触发所述组件数据请求事件，发送组件数据获取请求以获取组件数据；根据获取的组件数据进行组件数据加载，以完成可视化大屏页面组件的加载。
根据本发明实施例的技术方案，通过响应于可视化大屏页面的显示操作，获取大屏页面包括的组件的样式配置信息；根据样式配置信息进行组件渲染，并注册组件数据请求事件；响应于所有组件都渲染完毕，触发组件数据请求事件，发送组件数据获取请求以获取组件数据；根据获取的组件数据进行组件数据加载，以完成可视化大屏页面组件的加载的技术方案，即可通过事件触发机制，将组件加载过程分为组件渲染阶段和数据加载阶段，实现了组件渲染与数据加载的分离解耦，减少了无效渲染，降低了组件加载性能资源消耗，且可以解决在对大屏页面进行编辑的过程中的操作卡顿问题。
上述具体实施方式，并不构成对本发明保护范围的限制。本领域技术人员应该明白的是，取决于设计要求和其他因素，可以发生各种各样的修改、组合、子组合和替代。任何在本发明的精神和原则之内所作的修改、等同替换和改进等，均应包含在本发明保护范围之内。
Claims (10)
1.一种可视化大屏页面组件的加载方法，其特征在于，包括：
响应于可视化大屏页面的显示操作，获取所述大屏页面包括的组件的样式配置信息；
根据所述样式配置信息进行组件渲染，并注册组件数据请求事件；
响应于所有组件都渲染完毕，触发所述组件数据请求事件，发送组件数据获取请求以获取组件数据；
根据获取的组件数据进行组件数据加载，以完成可视化大屏页面组件的加载。
2.根据权利要求1所述的方法，其特征在于，组件数据包括静态数据、数据库数据和接口数据三种类型；
对于组件数据为静态数据的组件，在获取所述大屏页面包括的组件的样式配置信息之后，还包括：获取所述组件的组件数据；
以及，在根据所述样式配置信息进行组件渲染之后，还包括：根据所述组件的组件数据进行组件数据加载。
3.根据权利要求1所述的方法，其特征在于，在获取所述大屏页面包括的组件的样式配置信息之后，还包括：
注册交互事件，所述交互事件用于监听组件的交互变量的值，以及当所述交互变量的值发生变化时，触发与所述交互变量相关的组件数据获取请求，以请求获取组件数据并更新组件数据。
4.根据权利要求1所述的方法，其特征在于，在获取所述大屏页面包括的组件的样式配置信息之后，还包括：
注册组件更新事件，所述组件更新事件用于响应于对所述大屏页面的组件进行的编辑操作，更新组件的样式配置信息。
5.根据权利要求1所述的方法，其特征在于，
在注册组件数据请求事件之后，还包括：根据所述样式配置信息生成组件数据获取请求，并将生成的组件数据获取请求保存到请求池中；
在获取到组件数据之后，还包括：将所获取的组件数据进行缓存；
在触发所述组件数据请求事件之后，发送组件数据获取请求之前，还包括：
根据请求池中组件数据获取请求的请求信息生成缓存标识；
根据所述缓存标识从缓存中查找对应的组件数据；
以及，确认在所述缓存中不存在与所述缓存标识对应的组件数据。
6.根据权利要求1所述的方法，其特征在于，所述组件数据获取请求为批量请求；
发送组件数据获取请求以获取组件数据包括：
根据组件数据获取请求的请求信息生成缓存标识；
根据所述缓存标识确定相同请求；
在所述缓存中不存在与所述缓存标识对应的组件数据的情况下，将相同请求所对应的组件标识添加到队列中并仅发送一次组件数据获取请求；
在获取到组件数据后，将获取的组件数据与所述队列中的组件标识建立映射关系。
7.根据权利要求5或6所述的方法，其特征在于，所述组件数据获取请求的请求信息包括请求方式、请求头和请求路径；
根据组件数据获取请求的请求信息生成缓存标识包括：
从所述请求头中提取关键鉴权项，并对所述关键鉴权项进行序列化处理；
对所述请求方式、请求路径和序列化处理后的关键鉴权项进行加密生成缓存标识。
8.一种可视化大屏页面组件的加载装置，其特征在于，包括：
信息获取模块，用于响应于可视化大屏页面的显示操作，获取所述大屏页面包括的组件的样式配置信息；
组件渲染模块，用于根据所述样式配置信息进行组件渲染，并注册组件数据请求事件；
数据请求模块，用于响应于所有组件都渲染完毕，触发所述组件数据请求事件，发送组件数据获取请求以获取组件数据；
数据加载模块，用于根据获取的组件数据进行组件数据加载，以完成可视化大屏页面组件的加载。
9.一种可视化大屏页面组件加载的电子设备，其特征在于，包括：
一个或多个处理器；
存储装置，用于存储一个或多个程序，
当所述一个或多个程序被所述一个或多个处理器执行，使得所述一个或多个处理器实现如权利要求1-7中任一所述的方法。
10.一种计算机可读介质，其上存储有计算机程序，其特征在于，所述程序被处理器执行时实现如权利要求1-7中任一所述的方法。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202210227569.6A CN114489916A (zh) | 2022-03-08 | 2022-03-08 | 可视化大屏页面组件的加载方法和装置 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202210227569.6A CN114489916A (zh) | 2022-03-08 | 2022-03-08 | 可视化大屏页面组件的加载方法和装置 |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN114489916A true CN114489916A (zh) | 2022-05-13 |
Family
ID=81486120
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202210227569.6A Pending CN114489916A (zh) | 2022-03-08 | 2022-03-08 | 可视化大屏页面组件的加载方法和装置 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN114489916A (zh) |
Cited By (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN114995817A (zh) * | 2022-08-03 | 2022-09-02 | 杭州乾冠数字物联技术有限公司 | 基于Vuex的web页面大屏数据处理方法 |
| US20230362220A1 (en) * | 2022-05-09 | 2023-11-09 | Servicenow, Inc. | Dynamic web component stream renderer |
Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN107391114A (zh) * | 2017-06-27 | 2017-11-24 | 阿里巴巴集团控股有限公司 | 页面可视化渲染方法及装置 |
| US20200026500A1 (en) * | 2018-07-18 | 2020-01-23 | Sap Se | Visual facet components |
| CN111290809A (zh) * | 2020-01-17 | 2020-06-16 | 西安奥卡云数据科技有限公司 | 一种数据大屏的动态编辑方法 |
| CN112015509A (zh) * | 2020-08-31 | 2020-12-01 | 中移（杭州）信息技术有限公司 | 数据可视化大屏的构建方法、电子设备及存储介质 |
| CN113220339A (zh) * | 2021-05-17 | 2021-08-06 | 北京京东拓先科技有限公司 | 一种页面生成方法和装置 |
-
2022
- 2022-03-08 CN CN202210227569.6A patent/CN114489916A/zh active Pending
Patent Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN107391114A (zh) * | 2017-06-27 | 2017-11-24 | 阿里巴巴集团控股有限公司 | 页面可视化渲染方法及装置 |
| US20200026500A1 (en) * | 2018-07-18 | 2020-01-23 | Sap Se | Visual facet components |
| CN111290809A (zh) * | 2020-01-17 | 2020-06-16 | 西安奥卡云数据科技有限公司 | 一种数据大屏的动态编辑方法 |
| CN112015509A (zh) * | 2020-08-31 | 2020-12-01 | 中移（杭州）信息技术有限公司 | 数据可视化大屏的构建方法、电子设备及存储介质 |
| CN113220339A (zh) * | 2021-05-17 | 2021-08-06 | 北京京东拓先科技有限公司 | 一种页面生成方法和装置 |
Cited By (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20230362220A1 (en) * | 2022-05-09 | 2023-11-09 | Servicenow, Inc. | Dynamic web component stream renderer |
| CN114995817A (zh) * | 2022-08-03 | 2022-09-02 | 杭州乾冠数字物联技术有限公司 | 基于Vuex的web页面大屏数据处理方法 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| US7870482B2 (en) | Web browser extension for simplified utilization of web services | |
| CN114489916A (zh) | 可视化大屏页面组件的加载方法和装置 | |
| US11809429B2 (en) | Method for processing model parameters, and apparatus | |
| CN111666293A (zh) | 数据库访问方法和装置 | |
| CN110909022A (zh) | 一种数据查询方法和装置 | |
| CN110109983B (zh) | 一种操作Redis数据库的方法和装置 | |
| CN111831461A (zh) | 一种处理业务流程的方法和装置 | |
| CN113378346A (zh) | 模型仿真的方法和装置 | |
| CN112948138A (zh) | 一种处理消息的方法和装置 | |
| CN107977277B (zh) | Erp系统中集成第三方系统的方法、装置及计算机设备 | |
| CN115858905A (zh) | 数据处理的方法、装置、电子设备和存储介质 | |
| CN112486482A (zh) | 一种页面展示方法和装置 | |
| CN109710604A (zh) | 数据处理方法、装置、系统、计算机可读存储介质 | |
| CN113094561B (zh) | 网页生成方法、网页生成装置、电子设备以及存储介质 | |
| CN112784195A (zh) | 一种页面数据发布方法和系统 | |
| CN115034175A (zh) | 表格数据处理方法、装置、终端和存储介质 | |
| CN113821430A (zh) | 一种多服务测试方法和装置 | |
| CN113779122A (zh) | 导出数据的方法和装置 | |
| CN112468543B (zh) | 发布信息的方法、装置、设备和计算机可读介质 | |
| CN114268558B (zh) | 监控图的生成方法、装置、设备、介质 | |
| CN112579428A (zh) | 接口测试的方法、装置、电子设备和存储介质 | |
| CN112131287A (zh) | 一种读取数据的方法和装置 | |
| US10133758B2 (en) | Cell-based database management system | |
| CN115840604B (zh) | 数据处理方法、装置、电子设备和计算机可读存储介质 | |
| CN113760886B (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 |