CN106302008A

CN106302008A - 数据更新方法和装置

Info

Publication number: CN106302008A
Application number: CN201610643678.0A
Authority: CN
Inventors: 叶嘉梁; 唐瞻立; 魏帆; 胡泽锐
Original assignee: Tencent Technology Shenzhen Co Ltd
Current assignee: Yunnan Tengyun Information Industry Co ltd
Priority date: 2016-08-05
Filing date: 2016-08-05
Publication date: 2017-01-04
Anticipated expiration: 2036-08-05
Also published as: CN106302008B

Abstract

本发明公开了一种数据更新方法和装置。其中，该方法包括：检测页面上的统一数据源中的数据是否发生变化，其中，所述统一数据源用于向所述页面上的多个页面组件提供数据，所述页面组件用于根据提供的数据进行页面内容的显示；若检测到所述统一数据源中的数据发生变化，则将更新后的数据传入到所述多个页面组件中；响应于传入的所述更新后的数据，在所述多个页面组件中对所述页面内容进行更新显示。本发明解决了更新效率低的技术问题。

Description

数据更新方法和装置

技术领域

本发明涉及数据处理领域，具体而言，涉及一种数据更新方法和装置。

背景技术

大屏幕监控的数据需要多种多样的可视化数据显示，现有技术中一般采用React(一款用户构建用户界面的Javascript库)+Redux(应用状态管理服务)的方式进行可视化数据显示，如图1所示，该显示方式的数据架构中，用户在屏幕上通过点击鼠标生成显示事件，视图提供模块检测到该显示事件之后，响应该显示事件将对应的用户需求通过中间件传输至组件状态管理单元，该组件状态管理单元中包括多个功能模块(每个页面对应一个业务逻辑)，用户需求与业务逻辑建立关系之后，通过对应的业务逻辑实现用户需求，将对应的数据显示在屏幕上，以完成设备与用户的交互或数据改动。

其中，中间件(即middleware)是用于连接两个独立的应用程序或系统的软件，如建立用户需求与业务逻辑之间的关系。

上述的React+Redux的显示方式，从整体上看，数据的流动是清晰的，但是，如上述分析，通过该显示方式进行数据交互或数据改动时，依赖的模块很多(如包括视图提供模块、中间件以及组件状态管理单元)，数据源和数据接口很多，若需要引入新的组件，则需要重新编写数据驱动单元。

为了解决该问题，现有技术中提供了一种纯样式组件化数据驱动开发模式，如图2所示，该模块化方案中，页面中包括A模块、B模块和C模块，A组件中包括模块A1和模块A2，B组件中包括模块B1和模块B2，C组件中包括模块C1和模块C101。在进行数据通信时，若模块B2中的数据发生事件1，则将该事件1反馈至页面管理单元，页面管理单元接收到该事件1触发A组件中的模块A2动作，并通过A组件触发C组件中的模块C101动作(该数据传输过程需通过模块C1)，该种模块化的数据交互方案中，业务逻辑封装在组件和页面管理单元中，一旦发生一个事件可能需要多个组件进行响应，并且这个过程中需要跨组件进行通信。

在该方案中，跨组件之间存在逻辑耦合，跨组件通信逻辑混乱复杂，需要更新数据时，需要调用或封装多个模块的逻辑，更新效率低。

针对上述更新数据效率低的问题，目前尚未提出有效的解决方案。

发明内容

本发明实施例提供了一种数据更新方法和装置，以至少解决更新效率低的技术问题。

根据本发明实施例的一个方面，提供了一种数据更新方法，该方法包括：检测页面上的统一数据源中的数据是否发生变化，其中，所述统一数据源用于向所述页面上的多个页面组件提供数据，所述页面组件用于根据提供的数据进行页面内容的显示；若检测到所述统一数据源中的数据发生变化，则将更新后的数据传入到所述多个页面组件中；响应于传入的所述更新后的数据，在所述多个页面组件中对所述页面内容进行更新显示。

根据本发明实施例的另一方面，还提供了一种数据更新装置，该装置包括：检测单元，用于检测页面上的统一数据源中的数据是否发生变化，其中，所述统一数据源用于向所述页面上的多个页面组件提供数据，所述页面组件用于根据提供的数据进行页面内容的显示；传输单元，用于若检测到所述统一数据源中的数据发生变化，则将更新后的数据传入到所述多个页面组件中；显示单元，用于响应于传入的所述更新后的数据，在所述多个页面组件中对所述页面内容进行更新显示。

在本发明实施例中，在检测到统一数据源中的数据发生变化之后，将更新后的数据传入页面组件中，并响应该传入的更新后的数据在页面组件中更新显示，以完成对数据的更新。在该方案中，利用统一数据源对页面组件中的数据进行管理，并且页面组件响应于该统一数据源中的更新后的数据进行显示，解除了页面组件之间的逻辑耦合，在上述的数据更新过程中，各个页面组件之间不需要进行数据交互，将统一数据源的数据传入页面组件中，页面组件响应该传入的数据直接进行更新显示，提高了数据更新的效率，解决了现有技术中更新效率低的技术问题。

附图说明

此处所说明的附图用来提供对本发明的进一步理解，构成本申请的一部分，本发明的示意性实施例及其说明用于解释本发明，并不构成对本发明的不当限定。在附图中：

图1是根据现有技术中数据驱动的数据流流向的示意图；

图2是根据现有技术中数据驱动架构的示意图；

图3是根据本发明实施例的数据更新方法的硬件环境的示意图；

图4是根据本发明实施例的一种可选的数据更新方法的流程图；

图5是根据本发明实施例的一种可选的数据驱动架构的示意图；

图6是根据本发明实施例的一种可选的统一数据源中树状关联关系的示意图；

图7是根据本发明实施例的一种可选的应用场景的界面示意图；

图8是根据本发明实施例的一种可选的数据传入方式的示意图；

图9是根据本发明实施例的另一种可选的数据传入方式的示意图；

图10是根据本发明实施例的一种可选的数据更新装置的示意图；以及

图11是根据本发明实施例的一种终端的结构框图。

具体实施方式

为了使本技术领域的人员更好地理解本发明方案，下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本发明一部分的实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都应当属于本发明保护的范围。

需要说明的是，本发明的说明书和权利要求书及上述附图中的术语“第一”、“第二”等是用于区别类似的对象，而不必用于描述特定的顺序或先后次序。应该理解这样使用的数据在适当情况下可以互换，以便这里描述的本发明的实施例能够以除了在这里图示或描述的那些以外的顺序实施。此外，术语“包括”和“具有”以及他们的任何变形，意图在于覆盖不排他的包含，例如，包含了一系列步骤或单元的过程、方法、系统、产品或设备不必限于清楚地列出的那些步骤或单元，而是可包括没有清楚地列出的或对于这些过程、方法、产品或设备固有的其它步骤或单元。

首先，在对本发明实施例进行描述的过程中出现的部分名词或者术语适用于如下解释：

Vue框架：是数据驱动的MVVM(Model-View-View Model，即模型-视图-视图-模型)框架，该框架是使用数据绑定的基础框架，该框架是将视图View和业务逻辑分离的架构。

SDS：单一数据源(Single Data Source)，相当于一个全局的模型对象Model，该模型对象用于在数据库中存取数据，模型对象从数据库中读取的每一种数据状态决定一种视图View快照。其中，Model代表模型对象，该模型对象是应用程序中用于处理应用程序数据逻辑的部分，模型对象用于在数据库中存取数据。具体地，单一数据源通过一个逻辑上单一的数据存储实体，在分布于不同数据存储系统中的文档对象数据之间建立严格的约束，以保证各个数据存储系统中的数据是一致完整的。

WeUI：网页开发样式库。

实施例1

根据本发明实施例，提供了一种数据更新的方法实施例。

可选地，在本实施例中，上述数据更新方法可以应用于如图3所示的由服务器302和终端304所构成的硬件环境中。如图3所示，服务器302通过网络与终端304进行连接，上述网络包括但不限于：广域网、城域网或局域网，终端304并不限定于PC、手机、平板电脑等。本发明实施例的数据更新方法可以由服务器302来执行，也可以由终端304来执行，还可以是由服务器302和终端304共同执行。其中，终端304执行本发明实施例的数据更新方法也可以是由安装在其上的客户端来执行。

图4是根据本发明实施例的一种可选的数据更新方法的流程图，如图4所示，该方法可以包括以下步骤：

步骤S402，检测页面上的统一数据源中的数据是否发生变化，其中，统一数据源用于向页面上的多个页面组件提供数据，页面组件用于根据提供的数据进行页面内容的显示；

步骤S404，若检测到统一数据源中的数据发生变化，则将更新后的数据传入到多个页面组件中；

步骤S406，响应于传入的更新后的数据，在多个页面组件中对页面内容进行更新显示。

通过上述步骤S402至步骤S408，在检测到统一数据源中的数据发生变化之后，将更新后的数据传入页面组件中，并响应该传入的更新后的数据在页面组件中更新显示，以完成对数据的更新。在该方案中，利用统一数据源对页面组件中的数据进行管理，并且页面组件响应于该统一数据源中的更新后的数据进行显示，解除了页面组件之间的逻辑耦合，在上述的数据更新过程中，各个页面组件之间不需要进行数据交互，将统一数据源的数据传入页面组件中，页面组件响应该传入的数据直接进行更新显示，提高了数据更新的效率，解决了现有技术中更新效率低的技术问题。

上述的页面组件可以包括表格、树和联动下拉框等，不同的页面组件可以具有不同的显示风格、显示位置等。

在步骤S402提供的技术方案中，每个页面对应一个单一数据源，也即上述的页面上的统一数据源，该统一数据源用于向页面上的多个页面组件提供数据，具体地，统一数据源与页面上的各个页面组件进行双向绑定，从而统一数据源可以向各个页面组件传入数据，页面组件可以检测统一数据源中的数据是否发生变化，还可以将页面组件中发生的事件传入统一数据源。

需要说明的是，统一数据源与各个页面组件之间建立有绑定关系，各个组件之间，不具有业务逻辑关系，也即，每个页面组件上的数据或显示的变更，受到统一数据源的影响，而其他组件中发生数据变更或发生逻辑变更，并不影响当前页面组件的数据或显示。

如图5所示的数据驱动的技术架构图中，该页面中包括三个页面组件，该技术方案中的统一数据源分别与该三个页面组件(包括页面组件A、页面组件B以及页面组件C)之间建立有绑定关系，每个页面组件的数据变更来源于统一数据源，如，统一数据源的数据发生变化，页面组件的数据会响应该变化，进行显示变更。

图5中示出的统一数据源可以通过数据拉取接口和路由系统获取发生变化的数据，并利用该发生变化的数据对统一数据源中的数据进行更新，得到更新后的数据。

该数据架构中的视图层(即View层)可以包含多个页面组件，如图5所示，可以包含页面组件A、页面组件B和页面组件C。每个页面组件分别与统一数据源建立有绑定关系，该绑定关系使得页面组件可以检测统一数据源中的数据是否发生改变，还可以将统一数据源中的数据传入对应的页面组件。

在一个可选的实施例中，页面组件检测到统一数据源中的数据发生变化，进一步地检测该发生变化的数据中是否存在与该页面组件相对应的数据，若存在，则确定检测到数据源中的数据发生变化。

在步骤S404提供的技术方案中，若检测到统一数据源中的数据发生变化，则将更新后的数据传入到对应的页面组件中，在这个过程中，不会有其他页面组件中的数据传入该页面组件。

可选地，将更新后的数据传入页面组件中时，数据没有发生改变的页面组件中无需传入更新后的数据，哪些页面组件的数据发生了改变，则向哪些页面组件中传输数据，减少了数据传输的冗余，提高了数据传输效率。

在步骤S406提供的技术方案中，响应于传入的更新后的数据，在多个页面组件中对页面内容进行更新显示。

上述的统一数据源中的每一种数据状态对应一个显示快照，在统一数据源中的数据发生变化时，会将数据传入页面组件，以改变页面组件的显示更新。

在上述实施例中，由统一数据源对数据更新进行统一管理，将页面组件封装成纯样式的组件，解除了各种组件之间的逻辑耦合和文件对象模型(Document Object Model，简称DOM)耦合，使得每一种数据状态决定一种视图快照，如图2中示出的复杂的蜘蛛网式的关系链变成统一数据源对各个页面组件的关系，页面上的所有操作全部变成了对数据的操作，可以在提高数据更新效率的情况下，使得前端代码变得友好，高度可维护，对开发人员来说也上手简单，逻辑清晰。

在一个可选的实施例中，将更新后的数据传入到多个页面组件中可以包括：通过预定方式将更新后的数据传入到多个页面组件中，其中，预定方式用于传输状态函数，状态函数与更新后的数据相对应。

其中，上述的预定方式可以为props的方式，该方式可以对待传输的数据进行解构赋值，并将解构得到的全部或部分属性值进行传输，具体地，父组件(如本申请的统一数据源)将更新后的数据发给页面组件时，可以对更新后的数据进行解构赋值，并生成对应的状态函数，子组件(如上述的页面组件)接收到状态函数之后，根据该状态函数中的变量和函数逻辑，确定子组件需执行的动作。

在本申请实施例中，页面组件向页面组件中的模块传输数据也可以使用该方式。

具体地，页面组件中数据的显示依赖于统一数据源中的数据变量或数据状态，或者，在页面组件中利用统一数据源中的更新后的数据进行更新显示时，可以将与该页面组件对应的更新后的数据进行解析，得到一个或多个函数关系，每个函数关系中均可以记录有业务逻辑，确定每个函数关系中的部分或全部变量，将该部分或全部变量传入对应的页面组件。

可选地，预先设置数据与状态函数的对应关系，在确定数据A的状态发生变化之后，读取与该数据状态或数据对应的函数关系(即上述的状态函数)，将该函数关系中的部分或全部变量传入对应的页面组件，页面组件接收到该变量之后，响应该变量进行数据的更新显示。

其中，通过props的方式将更新后的数据传入对应的页面组件时，可以将待传输的变量对应的函数关系传入页面组件，或者将传输变量对应的函数关系的标识传入页面组件。

在另一个可选的实施例中，可以将业务逻辑预先设置在页面组件中，页面组件接收到更新后的数据，利用其预先设置的业务逻辑确定更新后的数据对应的动作，并执行该动作。

在本发明上述实施例中，在多个页面组件中对页面内容进行更新显示可以包括：根据更新后的数据对页面组件的显示样式进行更新，其中，显示样式用于显示页面内容。

具体地，可以在检测到数据发生变化时，将统一数据源中的更新后的数据发送至对应的页面组件，根据更新后的数据对页面组件的显示样式进行更新，该更新可以包括显示或隐藏的更新、显示位置的更新、以及显示模板的更新等等。

根据更新后的数据对页面组件的显示样式进行更新可以包括：根据预先设置的业务逻辑和更新后的数据确定页面组件中一个或多个显示模块的动作，并指示一个或多个显示模块执行对应的动作，以更新页面组件的显示样式。

通过上述实施例，页面组件中的显示模块中不包含业务逻辑，也即页面组件中的显示模块封装成了纯样式的显示模块，通过页面组件统一接收统一数据源中的更新后的数据，并由页面组件统一确定其中的显示模块的动作，显示模块执行对应的动作，以更新页面的显示样式，在整个过程中，规范了数据源的管理，将逻辑聚焦在页面组件中，使得每一种数据状态可以对应一种视图快照，逻辑清晰，处理速度快。

在一个可选的实施例中，根据更新后的数据对页面组件的显示样式进行更新包括：根据更新后的数据将显示样式从第一样式调整到第二样式，或者，从第二样式调整到第一样式，其中，第一样式用于指示显示页面内容，第二样式用于指示不显示页面内容。

具体地，检测统一数据源中的数据发生变化，则将更新后的数据传入对应的页面组件，若页面组件在传入更新后的数据之前处于不显示页面内容的第二样式，根据该更新后的数据确定的显示样式为第一样式，则该页面组件显示在该页面上；或者，若页面组件在传入更新后的数据之前处于显示页面内容的第一样式，根据该更新后的数据确定的显示样式为第二样式，则该页面组件不再显示在该页面上。

可选地，上述的显示可以为部分显示，上述的不显示可以为部分不显示，例如，可以是显示模块1显示对应的页面内容，显示模块2不显示对应的页面内容。

在通过props传入数据的情况下，根据统一数据源中的更新后的数据确定页面组件A的显示样式为第一样式或第二样式，则将显示函数display的变量传入对应的页面组件，如，传输的变量为display(a1＝1，a2＝0)，其中，1可以表示第一样式，0可以表示第二样式，该第一样式和第二样式对应的变量值可以预先设置。

页面组件接收到变量display(1)之后，调取显示函数，确定接收到的变量指示显示模块a1显示内容，显示模块a2不显示内容，则页面组件指示显示模块a1显示对应的页面内容，显示模块a2不显示对应的页面内容。

在另一种可选的实施例中，根据更新后的数据将显示样式中页面内容的显示位置从第一位置调整到第二位置。

具体地，该页面内容的显示位置可以基于位置坐标确定，进一步地可选地，该页面内容的显示位置可以基于页面组件中基准点的位置坐标而确定。

在检测到统一数据源中的数据发生变化的情况下，若该发生变化的数据为页面组件的页面内容的显示位置的数据，则可以将该显示位置的位置坐标传入对应的页面组件，页面组件接收到该位置坐标之后，将该页面组件中的页面内容的显示位置从第一位置调整至位置坐标对应的第二位置。

可选地，该页面内容的显示位置可以基于位置偏移参数确定。

在检测到统一数据源中的数据发生变化的情况下，若该发生变化的数据为页面组件的页面内容的显示位置的数据，则可以将该显示位置的位置偏移参数传入对应的页面组件，页面组件接收到该位置偏移参数之后，按照位置偏移参数，将页面组件中的页面内容的显示位置从第一位置调整至第二位置，如，将该页面组件中所有内容的显示位置点的坐标按照位置偏移参数调整，以将显示位置从第一位置移至第二位置。

在通过props的方式传输数据的情况下，可以将上述的位置坐标或位置偏移操作传入对应的页面组件，页面组件基于业务逻辑和位置信息(位置坐标或位置偏移操作)确定该信息对应的显示模块和该显示模块需执行的动作，指示该显示模块执行对应的动作。

在又一个可选的实施例中，根据更新后的数据将显示样式中的页面内容从第一信息调整到第二信息。

具体地，可以将页面内容中的部分或全部页面内容进行更新，如，增加页面内容、减少页面内容、将页面内容进行变更。

在检测到统一数据源中的数据发生变化的情况下，若该发生变化的数据为页面组件的页面内容的信息，则可以将该发生变化的页面内容的信息传入对应的页面组件，页面组件接收到该发生变化的页面内容的信息之后，按照传入的变更方式显示发生变化的页面内容的信息。

在通过props的方式传输数据的情况下，可以将上述的发生变化的数据传入对应的页面组件，并传入该发生变化的数据的更新方式，如增加、减少或修改。

可选地，还可以将基于发生变化的数据得到的更新后的数据全量传入对应的页面组件，页面组件接收到该全量的更新后的数据之后，直接将当前显示的第一信息调整为接收到的全量的更新后的数据(即上述的第二信息)。

需要说明的是，页面组件接收到的更新后的数据可以指示不同的显示模块进行不同的更新，具体的实现方式与上述实施例中对应的技术方案的实现方式一致，在此不再赘述。

为了及时更新数据，检测页面上的统一数据源中的数据是否发生变化可以包括：每个页面组件周期性地检测页面上的统一数据源中的数据是否发生变化。

可选地，可以每隔一段时间检测一次页面上的统一数据源中的数据是否发生变化。进一步可选地，不同的时间段可以设置不同的间隔时长，例如，晚上12点到早上6点的时间段，可以将间隔时长设置为30分钟，在早上8点到中午12点的时间段，可以将间隔时长设置为10分钟，这样可以在保证及时更新数据的情况下，减小处理器的数据处理量，提高数据的处理效率。

需要说明的是，在检测页面上的统一数据源中的数据是否发生变化之前，可以包括：为页面配置统一数据源，其中，统一数据源包括具有树状关联关系的数据源，每一个或多个数据源用于为一个页面组件提供数据。

其中，可以预先设置具有树状关联关系的数据源，在图6所示的示例中，每个数据源为一个页面组件提供数据，图6中的根节点为统一数据源，该根节点包括三个父节点：节点A、节点B以及节点C，节点A包括子节点A1和A2，节点B包括子节点B1和B2，节点C包括子节点C1，子节点C1包括叶子节点C101。

该树状关联关系中的每个节点表示一个数据源，每个数据源为一个页面组件提供数据，例如，节点A为页面组件A提供数据。

根据本发明的上述实施例，在检测统一数据源中的一个数据源发生数据变化时，将该数据发生变化的数据源中的更新后的数据传入对应的页面组件。该页面组件中包含的子组件共用同一份数据。

例如，检测到节点A对应的数据源中的数据发生变化，则将该数据源中的数据传输至页面组件A，页面组件A基于传入的信息，通知其包含的显示模块进行更新显示。

通过上述实施例，通过树状关联关系可以快速查找到数据发生变化的数据源，并可以快速响应该变化，将对应页面组件中的页面内容进行更新显示。

下面结合图7至图9对本申请的上述实施例进行详细描述。

如图7所示的页面中，从显示维度来看，该页面可以包含页面组件：故障排查的页面组件A、筛选的页面组件B和结果显示的页面组件C，其中，页面组件A包含显示模块A1和显示模块A2，页面组件B包含显示模块B1和显示模块B2，页面组件C包含显示模块C1，显示模块C1包含子模块C101。

其中，显示模块A1用于显示返回首页的信息，如“首页”，显示模块A2用于显示故障排查的页面标题，显示模块B1用于显示筛选主题词的信息，显示模块B2用于显示搜索按键，显示模块C1用于显示结果参数(如，CPU使用率)，显示模块C1用于显示结果的具体信息，如图7中示出的CPU使用率的折线图。

为页面配置统一数据源，该统一数据源包括如图6所示的具有树状关联关系的数据源，每一个或多个数据源用于为一个页面组件提供数据。

根据该配置的统一数据源建立的数据驱动的架构，统一数据源Model是当前页面的单一数据源SDS，路由驱动route和数据拉取接口检测到数据更新的事件，更新的都是统一数据源中的数据，如图8所示，统一数据源通过props的方式将更新后的数据传入页面组件A、页面组件B和页面组件C，页面组件A、页面组件B和页面组件C分别基于更新后的数据确定待更新显示的模块和待执行的更新动作，并通知待更新显示的模块执行对应的动作。

如图8所示，在此架构中，以props的方式将模型对象Model中的数据统一传入页面组件，数据的变更会带来View视图层响应式的变更，这在Vue框架中通过获取getter/设置setter实现。如图8所示，统一数据源可以与各个页面组件双向绑定，来实现视图层带动统一数据源的变更，这样可以实现在大盘监控中的交互。

通过上述实施例，页面组件通过同一数据源Model来实现通讯，无需直接关注其他模块的变化，只关注统一数据源Model中对应的数据即可。进一步地，上述实施例中，对于各个模块组件，只是样式组件，不带上逻辑的封装，通过自定义标签使用，数据通过props传入，用于交互层UI(交互界面)展示用，需要修改数据的地方，统一在页面级的父组件中传入方法或者通过双向绑定来操作数据。

如图9所示，每个页面组件中包括：头部、主体和尾部，其中，头部、主体和尾部分别代表一个显示模块，同一组件中的各个显示组件之间没有连接关系，通过props的方式将数据传入页面组件，该页面组件分别将对应的数据传入头部、主体和尾部的显示模块。在开一个可选的实施例中，页面组件可以将接收到的数据传入头部、主体和尾部，从而头部、主体和尾部得到同样的数据。数据源统一了，组件数据统一了，对于移动端多种多样的可视化图表显示则赖于echart canvas(产品图表库)的支持，根据数据驱动，传入同一份数据，不同的图表类型则能够根据产品需求去变换不同的展示方式，则可从多个维度去分析监控告警，从而可以在CDN(Content Delivery Nerwork，内容分发网络)侧和用户侧大盘监控的数据可视化展示。对于移动端轻量、友好，UI(用户界面)交互简介，与图表展示终端(或客户端)无缝结合，图表的可操作性强，方便在告警时在移动端上数据的查看和问题排查。

通过上述实施例，各个组件直接监听统一数据源的变化，各个组件的属性只来自于统一数据源，通过props的方式传入将发生变化的数据传入页面组件，自上而下的数据传输方式使得组件数据流动和来源显得清晰，并且，各个组件内部组件统一只能用传入的props，数据不存在跨层使用，这样的组件变得可复用；进一步地，因为组件是通过Vue框架封装的WeUI纯样式组件，通过数据的变化，来改变组件的样式，从而改变View视图展示。

通过本申请的上述实施例，本技术方案首要解决了移动端数据可视化开发中多数据源入口，数据变更与页面交互同步的问题。依靠封装工具echart对移动端的强力支持，vue框架的数据驱动模式，WeUI的友好交互界面，以及模块加载器及打包工具webpack、编译器babel、JavaScript语言的新标准es6带来的开发效率的提升，把以往专注于页面的逻辑，迁移到数据层面，让页面维护和逻辑页面简单清晰。使得CDN大盘监控移动端的数据可视化开发变得轻松快捷。

需要说明的是，对于前述的各方法实施例，为了简单描述，故将其都表述为一系列的动作组合，但是本领域技术人员应该知悉，本发明并不受所描述的动作顺序的限制，因为依据本发明，某些步骤可以采用其他顺序或者同时进行。其次，本领域技术人员也应该知悉，说明书中所描述的实施例均属于优选实施例，所涉及的动作和模块并不一定是本发明所必须的。

通过以上的实施方式的描述，本领域的技术人员可以清楚地了解到根据上述实施例的方法可借助软件加必需的通用硬件平台的方式来实现，当然也可以通过硬件，但很多情况下前者是更佳的实施方式。基于这样的理解，本发明的技术方案本质上或者说对现有技术做出贡献的部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质(如ROM/RAM、磁碟、光盘)中，包括若干指令用以使得一台终端设备(可以是手机，计算机，服务器，或者网络设备等)执行本发明各个实施例所述的方法。

实施例2

根据本发明实施例，还提供了一种用于实施上述数据更新方法的数据更新装置。图10是根据本发明实施例的一种可选的数据更新装置的示意图，如图10所示，该装置可以包括：

检测单元1001，用于检测页面上的统一数据源中的数据是否发生变化，其中，统一数据源用于向页面上的多个页面组件提供数据，页面组件用于根据提供的数据进行页面内容的显示；

传输单元1003，用于若检测到统一数据源中的数据发生变化，则将更新后的数据传入到多个页面组件中；

显示单元1005，用于响应于传入的更新后的数据，在多个页面组件中对页面内容进行更新显示。

进一步地，传输单元包括：传输模块，用于通过预定方式将更新后的数据传入到多个页面组件中，其中，预定方式用于传输状态函数，状态函数与更新后的数据相对应。

上述实施例中，显示单元可以包括：更新模块，用于根据更新后的数据对页面组件的显示样式进行更新，其中，显示样式用于显示页面内容。

根据本发明的上述实施例，更新模块具体用于：

根据更新后的数据确定页面组件中一个或多个显示模块的动作，并指示一个或多个显示模块执行对应的动作，其中，一个或多个显示模块的动作用于更新显示页面组件的显示样式。

进一步地，更新模块包括以下至少之一：

第一子模块，用于根据更新后的数据将显示样式从第一样式调整到第二样式，或者，从第二样式调整到第一样式，其中，第一样式用于指示显示页面内容，第二样式用于指示不显示页面内容；第二子模块，用于根据更新后的数据将显示样式中页面内容的显示位置从第一位置调整到第二位置；第三子模块，用于根据更新后的数据将显示样式中的页面内容从第一信息调整到第二信息。

需要说明的是，检测单元具体用于：每个页面组件周期性地检测页面上的统一数据源中的数据是否发生变化。

可选地，可以每隔一段时间检测一次页面上的统一数据源中的数据是否发生变化。进一步可选地，不同的时间段可以设置不同的间隔时长，这样可以在保证及时更新数据的情况下，减小处理器的数据处理量，提高数据的处理效率。

进一步地，装置还包括：配置单元，用于在检测页面上的统一数据源中的数据是否发生变化之前，为页面配置统一数据源，其中，统一数据源包括具有树状关联关系的数据源，每一个或多个数据源用于为一个页面组件提供数据。

进一步地，本方案基于vue框架实现的组件化，因此网页模板层是文件对象模块引擎的，这在一定程度上局限了以往渲染时字符串模板引擎String-based templating的技术方案的迁移，而且在模板层面，是没有虚拟文件对象Virtual-dom的概念的，因此，如果加上Virtual-dom的话，在理论上性能是提升几倍的，模板层也可以去换成字符串模板引擎，则不同的模板引擎可以根据开发者自己需要去替换。

此处需要说明的是，上述模块与对应的步骤所实现的示例和应用场景相同，但不限于上述实施例所公开的内容。需要说明的是，上述模块作为装置的一部分可以运行在如图3所示的硬件环境中，可以通过软件实现，也可以通过硬件实现，其中，硬件环境包括网络环境。

实施例3

根据本发明实施例，还提供了一种用于实施上述数据更新方法的服务器或终端。

图11是根据本发明实施例的一种终端的结构框图，如图11所示，该终端可以包括：一个或多个(图中仅示出一个)处理器201、存储器203、以及传输装置205(如上述实施例中的发送装置)，如图11所示，该终端还可以包括输入输出设备207。

其中，存储器203可用于存储软件程序以及模块，如本发明实施例中的数据更新方法和装置对应的程序指令/模块，处理器201通过运行存储在存储器203内的软件程序以及模块，从而执行各种功能应用以及数据处理，即实现上述的数据更新方法。存储器203可包括高速随机存储器，还可以包括非易失性存储器，如一个或者多个磁性存储装置、闪存、或者其他非易失性固态存储器。在一些实例中，存储器203可进一步包括相对于处理器201远程设置的存储器，这些远程存储器可以通过网络连接至终端。上述网络的实例包括但不限于互联网、企业内部网、局域网、移动通信网及其组合。

上述的传输装置205用于经由一个网络接收或者发送数据，还可以用于处理器与存储器之间的数据传输。上述的网络具体实例可包括有线网络及无线网络。在一个实例中，传输装置205包括一个网络适配器(Network Interface Controller，NIC)，其可通过网线与其他网络设备与路由器相连从而可与互联网或局域网进行通讯。在一个实例中，传输装置205为射频(Radio Frequency，RF)模块，其用于通过无线方式与互联网进行通讯。

其中，具体地，存储器203用于存储应用程序。

处理器201可以通过传输装置205调用存储器203存储的应用程序，以执行下述步骤：检测页面上的统一数据源中的数据是否发生变化，其中，统一数据源用于向页面上的多个页面组件提供数据，页面组件用于根据提供的数据进行页面内容的显示；若检测到统一数据源中的数据发生变化，则将更新后的数据传入到多个页面组件中；响应于传入的更新后的数据，在多个页面组件中对页面内容进行更新显示。

处理器201还用于执行下述步骤：通过预定方式将更新后的数据传入到多个页面组件中，其中，预定方式用于传输状态函数，状态函数与更新后的数据相对应。

处理器201还用于执行下述步骤：根据更新后的数据对页面组件的显示样式进行更新，其中，显示样式用于显示页面内容。

处理器201还用于执行下述步骤：根据更新后的数据确定页面组件中一个或多个显示模块的动作，并指示一个或多个显示模块执行对应的动作，其中，一个或多个显示模块的动作用于更新显示页面组件的显示样式。

处理器201还用于执行下述步骤：根据更新后的数据将显示样式从第一样式调整到第二样式，或者，从第二样式调整到第一样式，其中，第一样式用于指示显示页面内容，第二样式用于指示不显示页面内容；根据更新后的数据将显示样式中页面内容的显示位置从第一位置调整到第二位置；根据更新后的数据将显示样式中的页面内容从第一信息调整到第二信息。

处理器201还用于执行下述步骤：每个页面组件周期性地检测页面上的统一数据源中的数据是否发生变化。

处理器201还用于执行下述步骤：在检测页面上的统一数据源中的数据是否发生变化之前，为页面配置统一数据源，其中，统一数据源包括具有树状关联关系的数据源，每一个或多个数据源用于为一个页面组件提供数据。

在检测到统一数据源中的数据发生变化之后，将更新后的数据传入页面组件中，并响应该传入的更新后的数据在页面组件中更新显示，以完成对数据的更新。在该方案中，利用统一数据源对页面组件中的数据进行管理，并且页面组件响应于该统一数据源中的更新后的数据进行显示，解除了页面组件之间的逻辑耦合，在上述的数据更新过程中，各个页面组件之间不需要进行数据交互，将统一数据源的数据传入页面组件中，页面组件响应该传入的数据直接进行更新显示，提高了数据更新的效率，解决了现有技术中更新效率低的技术问题。

可选地，本实施例中的具体示例可以参考上述实施例中所描述的示例，本实施例在此不再赘述。

本领域普通技术人员可以理解，图11所示的结构仅为示意，终端可以是智能手机(如Android手机、iOS手机等)、平板电脑、掌上电脑以及移动互联网设备(Mobile InternetDevices，MID)、PAD等终端设备。图11其并不对上述电子装置的结构造成限定。例如，终端还可包括比图11中所示更多或者更少的组件(如网络接口、显示装置等)，或者具有与图11所示不同的配置。

本领域普通技术人员可以理解上述实施例的各种方法中的全部或部分步骤是可以通过程序来指令终端设备相关的硬件来完成，该程序可以存储于一计算机可读存储介质中，存储介质可以包括：闪存盘、只读存储器(Read-Only Memory，ROM)、随机存取器(RandomAccess Memory，RAM)、磁盘或光盘等。

实施例4

本发明的实施例还提供了一种存储介质。可选地，在本实施例中，上述存储介质可以用于执行数据更新方法的程序代码。

可选地，在本实施例中，上述存储介质可以位于上述实施例所示的网络中的多个网络设备中的至少一个网络设备上。

可选地，在本实施例中，存储介质被设置为存储用于执行以下步骤的程序代码：

检测页面上的统一数据源中的数据是否发生变化，其中，统一数据源用于向页面上的多个页面组件提供数据，页面组件用于根据提供的数据进行页面内容的显示；若检测到统一数据源中的数据发生变化，则将更新后的数据传入到多个页面组件中；响应于传入的更新后的数据，在多个页面组件中对页面内容进行更新显示。

可选地，存储介质还被设置为存储用于执行以下步骤的程序代码：通过预定方式将更新后的数据传入到多个页面组件中，其中，预定方式用于传输状态函数，状态函数与更新后的数据相对应。

可选地，存储介质还被设置为存储用于执行以下步骤的程序代码：根据更新后的数据对页面组件的显示样式进行更新，其中，显示样式用于显示页面内容。

可选地，存储介质还被设置为存储用于执行以下步骤的程序代码：根据更新后的数据确定页面组件中一个或多个显示模块的动作，并指示一个或多个显示模块执行对应的动作，其中，一个或多个显示模块的动作用于更新显示页面组件的显示样式。

可选地，存储介质还被设置为存储用于执行以下步骤的程序代码：根据更新后的数据将显示样式从第一样式调整到第二样式，或者，从第二样式调整到第一样式，其中，第一样式用于指示显示页面内容，第二样式用于指示不显示页面内容；根据更新后的数据将显示样式中页面内容的显示位置从第一位置调整到第二位置；根据更新后的数据将显示样式中的页面内容从第一信息调整到第二信息。

可选地，存储介质还被设置为存储用于执行以下步骤的程序代码：每个页面组件周期性地检测页面上的统一数据源中的数据是否发生变化。

可选地，存储介质还被设置为存储用于执行以下步骤的程序代码：在检测页面上的统一数据源中的数据是否发生变化之前，为页面配置统一数据源，其中，统一数据源包括具有树状关联关系的数据源，每一个或多个数据源用于为一个页面组件提供数据。

可选地，在本实施例中，上述存储介质可以包括但不限于：U盘、只读存储器(ROM，Read-Only Memory)、随机存取存储器(RAM，Random Access Memory)、移动硬盘、磁碟或者光盘等各种可以存储程序代码的介质。

上述本发明实施例序号仅仅为了描述，不代表实施例的优劣。

上述实施例中的集成的单元如果以软件功能单元的形式实现并作为独立的产品销售或使用时，可以存储在上述计算机可读取的存储介质中。基于这样的理解，本发明的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的全部或部分可以以软件产品的形式体现出来，该计算机软件产品存储在存储介质中，包括若干指令用以使得一台或多台计算机设备(可为个人计算机、服务器或者网络设备等)执行本发明各个实施例所述方法的全部或部分步骤。

在本发明的上述实施例中，对各个实施例的描述都各有侧重，某个实施例中没有详述的部分，可以参见其他实施例的相关描述。

在本申请所提供的几个实施例中，应该理解到，所揭露的客户端，可通过其它的方式实现。其中，以上所描述的装置实施例仅仅是示意性的，例如所述单元的划分，仅仅为一种逻辑功能划分，实际实现时可以有另外的划分方式，例如多个单元或组件可以结合或者可以集成到另一个系统，或一些特征可以忽略，或不执行。另一点，所显示或讨论的相互之间的耦合或直接耦合或通信连接可以是通过一些接口，单元或模块的间接耦合或通信连接，可以是电性或其它的形式。

所述作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部单元来实现本实施例方案的目的。

另外，在本发明各个实施例中的各功能单元可以集成在一个处理单元中，也可以是各个单元单独物理存在，也可以两个或两个以上单元集成在一个单元中。上述集成的单元既可以采用硬件的形式实现，也可以采用软件功能单元的形式实现。

以上所述仅是本发明的优选实施方式，应当指出，对于本技术领域的普通技术人员来说，在不脱离本发明原理的前提下，还可以做出若干改进和润饰，这些改进和润饰也应视为本发明的保护范围。

Claims

1.一种数据更新方法，其特征在于，包括：

检测页面上的统一数据源中的数据是否发生变化，其中，所述统一数据源用于向所述页面上的多个页面组件提供数据，所述页面组件用于根据提供的数据进行页面内容的显示；

若检测到所述统一数据源中的数据发生变化，则将更新后的数据传入到所述多个页面组件中；

响应于传入的所述更新后的数据，在所述多个页面组件中对所述页面内容进行更新显示。

2.根据权利要求1所述的方法，其特征在于，所述将更新后的数据传入到所述多个页面组件中包括：

通过预定方式将更新后的数据传入到所述多个页面组件中，其中，所述预定方式用于传输状态函数，所述状态函数与所述更新后的数据相对应。

3.根据权利要求1所述的方法，其特征在于，所述在所述多个页面组件中对所述页面内容进行更新显示包括：

根据所述更新后的数据对所述页面组件的显示样式进行更新，其中，所述显示样式用于显示所述页面内容。

4.根据权利要求3所述的方法，其特征在于，根据所述更新后的数据对所述页面组件的显示样式进行更新包括：

根据所述更新后的数据确定所述页面组件中一个或多个显示模块的动作，并指示所述一个或多个显示模块执行对应的动作，其中，所述一个或多个所述显示模块的动作用于更新显示所述页面组件的显示样式。

5.根据权利要求3所述的方法，其特征在于，根据所述更新后的数据对所述页面组件的显示样式进行更新包括以下至少之一：

根据所述更新后的数据将所述显示样式从第一样式调整到第二样式，或者，从所述第二样式调整到所述第一样式，其中，所述第一样式用于指示显示所述页面内容，所述第二样式用于指示不显示所述页面内容；

根据所述更新后的数据将所述显示样式中所述页面内容的显示位置从第一位置调整到第二位置；

根据所述更新后的数据将所述显示样式中的所述页面内容从第一信息调整到第二信息。

6.根据权利要求1所述的方法，其特征在于，检测页面上的统一数据源中的数据是否发生变化包括：

每个所述页面组件周期性地检测所述页面上的所述统一数据源中的数据是否发生变化。

7.根据权利要求1所述的方法，其特征在于，在检测页面上的统一数据源中的数据是否发生变化之前，包括：

为所述页面配置所述统一数据源，其中，所述统一数据源包括具有树状关联关系的数据源，每一个或多个数据源用于为一个所述页面组件提供数据。

8.一种数据更新装置，其特征在于，包括：

检测单元，用于检测页面上的统一数据源中的数据是否发生变化，其中，所述统一数据源用于向所述页面上的多个页面组件提供数据，所述页面组件用于根据提供的数据进行页面内容的显示；

传输单元，用于若检测到所述统一数据源中的数据发生变化，则将更新后的数据传入到所述多个页面组件中；

显示单元，用于响应于传入的所述更新后的数据，在所述多个页面组件中对所述页面内容进行更新显示。

9.根据权利要求8所述的装置，其特征在于，所述传输单元包括：

传输模块，用于通过预定方式将更新后的数据传入到所述多个页面组件中，其中，所述预定方式用于传输状态函数，所述状态函数与所述更新后的数据相对应。

10.根据权利要求8所述的装置，其特征在于，所述显示单元包括：

更新模块，用于根据所述更新后的数据对所述页面组件的显示样式进行更新，其中，所述显示样式用于显示所述页面内容。

11.根据权利要求10所述的方法，其特征在于，所述更新模块具体用于：

12.根据权利要求10所述的装置，其特征在于，所述更新模块包括以下至少之一：

第一子模块，用于根据所述更新后的数据将所述显示样式从第一样式调整到第二样式，或者，从所述第二样式调整到所述第一样式，其中，所述第一样式用于指示显示所述页面内容，所述第二样式用于指示不显示所述页面内容；

第二子模块，用于根据所述更新后的数据将所述显示样式中所述页面内容的显示位置从第一位置调整到第二位置；

第三子模块，用于根据所述更新后的数据将所述显示样式中的所述页面内容从第一信息调整到第二信息。

13.根据权利要求8所述的装置，其特征在于，所述检测单元具体用于：

14.根据权利要求8所述的装置，其特征在于，所述装置还包括：

配置单元，用于在检测页面上的统一数据源中的数据是否发生变化之前，为所述页面配置所述统一数据源，其中，所述统一数据源包括具有树状关联关系的数据源，每一个或多个数据源用于为一个所述页面组件提供数据。