CN106844467B - 数据展示方法和装置 - Google Patents

Abstract

本发明公开了一种数据展示方法和装置。其中，该方法包括：接收终端的后端平台发送的数据；根据调用的数据的类型按照第一预定规则调用与类型对应的组件；其中，数据的属性以及对应的属性值；在终端的前端平台以调用的组件的方式展示数据。本发明解决了现有技术中在前端展示页面时需要的工作量较大、面临重复开发的技术问题。

Description

数据展示方法和装置

技术领域

本发明涉及计算机领域，具体而言，涉及一种数据展示方法和装置。

背景技术

随着web2.0时代的到来，网页(web)服务的前端与后端的交互越来越多，交互的信息量越来越大。这样就引发一个问题，后端的内容如何在前端更容易展示，更容易让人与后端交互，用户体验更好。对于开发者而言，就意味着巨大的工作量，尤其是IT行业竞争激烈，开发周期一般都会要求越短越好，这样就带了下面的问题：工作量大，任务重，时间短，还需要保质保量。

针对相关技术中的上述技术问题，目前尚未提出有效的解决方案。

发明内容

本发明实施例提供了一种数据展示方法和装置，以至少解决现有技术中在前端展示页面时需要的工作量较大、面临重复开发的技术问题。

根据本发明实施例的一个方面，提供了一种数据展示方法，包括：接收终端的后端平台发送的数据；根据调用的数据的类型按照第一预定规则调用与类型对应的组件；其中，数据的类型包括：数据的属性以及对应的属性值；在终端的前端平台以调用的组件的方式展示数据。

可选地，根据调用的数据的类型按照预定规则调用与类型对应的组件包括：调用数据的类型，确定数据对应的应用场景；依据类型调用应用场景下与类型对应的组件。

可选地，不同的应用场景下，同一类型对应的组件的参数不同。

可选地，在在终端的前端平台以调用的组件的方式展示数据之后，方法还包括：按照第二预定规则确定数据中需要与用户进行交互的第一数据，其中，第一数据在前端平台的显示方式，用于提示用户进行与第一数据的操作。

可选地，在按照第二预定规则确定数据中需要与用户进行交互的第一数据之后，方法还包括：接收触发信号，其中，触发信号中携带有用户进行操作的操作数据；按照第三预定规则确定操作数据中需要返回到后端平台的第二数据；将第二数据返回到后端平台。

可选地，接收终端的后端平台发送的数据包括：通过应用程序编程接口Rest API接收后端平台发送的数据；其中，同一个Rest API用于接收类型相同的数据。

根据本发明实施例的一个方面，提供了一种数据展示装置，包括：接收模块，用于接收终端的后端平台发送的数据；调用模块，用于根据调用的数据的类型按照第一预定规则调用与类型对应的组件；其中，数据的类型包括：数据的属性以及对应的属性值；展示模块，用于在终端的前端平台以调用的组件的方式展示数据。

可选地，调用模块，还用于调用数据的类型，确定数据对应的应用场景；以及依据类型调用应用场景下与类型对应的组件。

可选地，装置还包括：确定模块，用于按照第二预定规则确定数据中需要与用户进行交互的第一数据，其中，第一数据在前端平台的显示方式，用于提示用户进行与第一数据的操作。

可选地，接收模块，还用于接收触发信号，其中，触发信号中携带有用户进行操作的操作数据；确定模块，还用于按照第三预定规则确定操作数据中需要返回到后端平台的第二数据；装置还包括：反馈模块，用于将第二数据返回到后端平台。

在本发明实施例中，采用根据后端平台发送的数据的类型调用与该类型对应的组件，以组件的方式显示该数据的方式，通过数据的类型对组件对应，通过类型对组件进行模块化，不同的数据的类型对应不同的组件，相同的类型对应相同的组件，进而可以使得开发人员针对后端平台数据在前端平台展示时专注于开发组件即可，而由于组件本身的方便复用，进而可以减少开发者的工作量，提高了开发速度，进而解决了现有技术中在前端展示页面时需要的工作量较大、面临重复开发的技术问题。

附图说明

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

图1是根据本发明实施例的数据展示方法的流程示意图；

图2是根据本发明实施例的数据展示装置的结构框图。

具体实施方式

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

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

实施例1

根据本发明实施例，提供了一种数据展示的方法实施例，需要说明的是，在附图的流程图示出的步骤可以在诸如一组计算机可执行指令的计算机系统中执行，并且，虽然在流程图中示出了逻辑顺序，但是在某些情况下，可以以不同于此处的顺序执行所示出或描述的步骤。

图1是根据本发明实施例的数据展示方法的流程示意图，如图1所示，该方法包括如下步骤：

步骤S102，接收终端的后端平台发送的数据；

步骤S104，根据调用的数据的类型按照第一预定规则调用与类型对应的组件；其中，数据的属性以及对应的属性值；

步骤S106，在终端的前端平台以调用的组件的方式展示数据。

通过上述步骤，采用根据后端平台发送的数据的类型调用与该类型对应的组件，以组件的方式显示该数据的方式，通过数据的类型与组件对应，即通过类型对组件进行模块化，不同的数据的类型对应不同的组件，相同的类型对应相同的组件，进而可以使得开发人员针对后端平台数据在前端平台展示时专注于开发组件即可，而由于组件本身的方便复用，进而可以减少开发者的工作量，提高了开发速度，进而解决了现有技术中在前端展示页面时需要的工作量较大、面临重复开发的技术问题。

需要说明的是，上述第一预定规则可以包括：后端平台发送的数据呈现在前端平台的方式，比如显示方式或者隐藏方式等，或者后端平台的数据以什么组件呈现在前端平台上，但并不限于此。以下举例说明：假设后端平台发送的数据为8条数据，上述第一预定规则可以是8条数据中的4条数据显示在前端平台，另外4条数据虽然展示在前端平台，但是其是以隐藏的方式展示在前端平台；但并不限于此。

需要说明的是，数据的类型可以是在将数据传输到前端平台后，由前端平台进行定义的；也可以是在后端平台预先定义好的，当数据传输到前端平台时可以直接调用后端平台中预先为该数据定义的类型，这样可以减少前端平台的操作；需要说明的是，该数据的类型不管是在前端平台还是在后端平台进行定义，其可以是前后端公用的数据类型，但并不限于此。

需要说明的是，上述数据中的属性可以是标识ID、中文名称、类型、页面处理、展示方式、默认值等，但并不限于此，的属性值可以用于针对每个在该属性下所表示的含义，比如ID的值为“userName”，则表示名称为userName；类型的值为text，则表示其为文本类型，但并不限于此。

以下进行举例说明，上述数据的类型可以定义为：{id:"userName",name:"用户账号",type:"text",r:"as",S:"str",default:"″}

上述ID、name、type、r、S、default可以为上述数据的属性，而userName、用户账号、text、as、str、空可以分别为属性ID、name、type、r、S、default的属性值，即标识名称是userName，中文名是用户账号，类型是文本，r代表页面的处理(a代表在展示页需要显示，s表示这个是可以搜索的属性)，S代表在搜索部分如何展示，default代表默认值是什么，其中默认值也可以是方法。

如果从后端平台得到的数据假设是：{userId:”aaaa”,userName:”testName”},那么会一个属性一个属性去处理，先处理userId，然后处理userName，在处理userName的时候就会调取上面对userName的定义，在不同的环境下，制定规则对相应的属性进行处理。比如在搜索页，会读取s属性所拥有的值，在上面示例是str，那么也就是表示在搜索栏其是可以输入的一个text文本框。

在本发明的一个实施例中，上述步骤S104可以表现为：调用数据的类型，确定数据对应的应用场景；依据类型调用应用场景下与类型对应的组件。

需要说明的是，不同的应用场景下，同一类型对应的组件的参数不同；因而可以根据组件的参数的不同确定该不同应用场景下的组件；具体地，上述依据类型调用应用场景下与类型对应的组件可以表现为：根据类型确定与类型对应的组件；根据应用场景确定组件的参数；根据确定的组件的参数修改所述类型对应的组件，得到应用场景下所述类型对应的组件。

在本发明的一个实施例中，在上述步骤S106之后，上述方法还可以包括：按照第二预定规则确定数据中需要与用户进行交互的第一数据，其中，第一数据在前端平台的显示方式，用于提示用户进行与第一数据的操作。

需要说明的是，上述第二预定规则可以根据实际情况进行预先设定，具体可以包括与用户交互的交互方式，比如可以规定后端平台返回的数据中哪些数据是与用户进行交互的数据等，但并不限于此。

需要说明的是，上述显示方式可以为提示框或者悬浮框，但并不限于此。

在本发明的一个实施例中，在按照第二预定规则确定数据中需要与用户进行交互的第一数据之后，上述方法还可以包括：接收触发信号，其中，触发信号中携带有用户进行操作的操作数据；按照第三预定规则确定操作数据中需要返回到后端平台的第二数据；将第二数据返回到后端平台。

需要说明的是，上述第三预定规则可以根据实际情况进行预先设定，具体可以包括：与后端平台进行交互的方式，比如可以是用户输入的数据中哪些数据需要反馈到后端平台中，哪些数据是不需要反馈到后端平台中等，但并不限于此。

需要说明的是，本实施例的上述方法，开发人员只需要专注于上述第一预定规则、第二预定规则、第三预定规则以及组件的开发即可，由于规则和组件是可以方便复用，因而可以极大的提高开发速度，保障开发质量。

在本发明的一个实施例中，上述步骤S102可以表现为：通过应用程序编程接口Rest API接收后端平台发送的数据；其中，同一个Rest API用于接收类型相同的数据。

需要说明的是，相同类型的数据可以从同一接口输入或者输出，可以方便控制和管理。

需要说明的是，上述步骤执行的主体可以是终端、服务器，但并不限于此。

需要说明的是，上述方法还可以应用于前端平台与后端平台分离的系统架构中，但并不限于此。

实施例2

根据本发明实施例，提供了一种数据展示的产品实施例，图2是根据本发明实施例的数据展示装置的结构框图，如图2所示，该装置包括：

接收模块22，用于接收终端的后端平台发送的数据；

调用模块24，与上述接收模块22连接，用于根据调用的数据的类型按照第一预定规则调用与类型对应的组件；其中，数据的类型包括：数据中的属性以及对应的属性值；

展示模块26，与上述调用模块24连接，用于在终端的前端平台以调用的组件的方式展示数据。

通过上述装置，采用根据后端平台发送的数据的类型调用与该类型对应的组件，以组件的方式显示该数据的方式，通过数据的类型与组件对应，即通过类型对组件进行模块化，不同的数据的类型对应不同的组件，相同的类型对应相同的组件，进而可以使得开发人员针对后端平台数据在前端平台展示时专注于开发组件即可，而由于组件本身的方便复用，进而可以减少开发者的工作量，提高了开发速度，进而解决了现有技术中在前端展示页面时需要的工作量较大、面临重复开发的技术问题。

需要说明的是，上述第一预定规则可以包括：后端平台发送的数据呈现在前端平台的方式，比如显示方式或者隐藏方式等，或者后端平台的数据以什么组件呈现在前端平台上，但并不限于此。以下举例说明：假设后端平台发送的数据为8条数据，上述第一预定规则可以是8条数据中的4条数据显示在前端平台，另外4条数据虽然展示在前端平台，但是其是以隐藏的方式展示在前端平台；但并不限于此。

需要说明的是，数据的类型可以是在将数据传输到前端平台后，由前端平台进行定义的；也可以是在后端平台预先定义好的，当数据传输到前端平台时可以直接调用后端平台中预先为该数据定义的类型，这样可以减少前端平台的操作；需要说明的是，该数据的类型不管是在前端平台还是在后端平台进行定义，其可以是前后端公用的数据类型，但并不限于此。

需要说明的是，上述数据中的属性可以是标识ID、中文名称、类型、页面处理、展示方式、默认值等，但并不限于此，的属性值可以用于针对每个在该属性下所表示的含义，比如ID的值为“userName”，则表示名称为userName；类型的值为text，则表示其为文本类型，但并不限于此。

以下进行举例说明，上述数据的类型可以定义为：{id:"userName",name:"用户账号",type:"text",r:"as",S:"str",default:"″}

上述ID、name、type、r、S、default可以为上述数据的属性，而userName、用户账号、text、as、str、空可以分别为属性ID、name、type、r、S、default的属性值，即标识名称是userName，中文名是用户账号，类型是文本，r代表页面的处理(a代表在展示页需要显示，s表示这个是可以搜索的属性)，S代表在搜索部分如何展示，default代表默认值是什么，其中默认值也可以是方法。

如果从后端平台得到的数据假设是：{userId:”aaaa”,userName:”testName”},那么会一个属性一个属性去处理，先处理userId，然后处理userName，在处理userName的时候就会调取上面对userName的定义，在不同的环境下，制定规则对相应的属性进行处理。比如在搜索页，会读取s属性所拥有的值，在上面示例是str，那么也就是表示在搜索栏其是可以输入的一个text文本框。

在本发明的一个实施例中，上述调用模块24，还可以用于调用数据的类型，以及确定数据对应的应用场景；以及依据类型调用应用场景下与类型对应的组件。

需要说明的是，不同的应用场景下，同一类型对应的组件的参数不同；因而可以根据组件的参数的不同确定该不同应用场景下的组件；具体地，上述调用模块24还可以用于根据类型确定与类型对应的组件；根据应用场景确定组件的参数；根据确定的组件的参数修改所述类型对应的组件，得到应用场景下所述类型对应的组件。

在本发明的一个实施例中，上述装置还可以包括：确定模块，与上述展示模块26连接，用于按照第二预定规则确定数据中需要与用户进行交互的第一数据，其中，第一数据在前端平台的显示方式，用于提示用户进行与第一数据的操作。

需要说明的是，上述第二预定规则可以根据实际情况进行预先设定，具体可以包括与用户交互的交互方式，比如可以规定后端平台返回的数据中哪些数据是与用户进行交互的数据等，但并不限于此。

需要说明的是，上述显示方式可以为提示框或者悬浮框，但并不限于此。

在本发明的一个实施例中，上述接收模块22，还可以用于接收触发信号，其中，触发信号中携带有用户进行操作的操作数据；上述确定模块，还可以用于按照第三预定规则确定操作数据中需要返回到后端平台的第二数据；上述装置还可以包括：反馈模块，与上述确定模块连接，用于将第二数据返回到后端平台。

需要说明的是，上述第三预定规则可以根据实际情况进行预先设定，具体可以包括：与后端平台进行交互的方式，比如可以是用户输入的数据中哪些数据需要反馈到后端平台中，哪些数据是不需要反馈到后端平台中等，但并不限于此。

需要说明的是，本实施例的上述方法，开发人员只需要专注于上述第一预定规则、第二预定规则、第三预定规则以及组件的开发即可，由于规则和组件是可以方便复用，因而可以极大的提高开发速度，保障开发质量。

在本发明的一个实施例中，上述接收模块22还可以用于通过应用程序编程接口Rest API接收后端平台发送的数据；其中，同一个Rest API用于接收类型相同的数据。

需要说明的是，相同类型的数据可以从同一接口输入或者输出，可以方便控制和管理。

需要说明的是，上述装置可以位于终端、服务器中，但并不限于此。

需要说明的是，上述装置还可以应用于前端平台与后端平台分离的系统架构中，但并不限于此。

此处需要说明的是，上述接收模块22、调用模块24、展示模块26对应于实施例1中的步骤S102至步骤S106，上述模块与对应的步骤所实现的示例和应用场景相同，但不限于上述实施例1所公开的内容。需要说明的是，上述模块作为装置的一部分可以在诸如一组计算机可执行指令的计算机系统中执行。

为了更好的理解本发明实施例，以下结合优选的实施例对本发明做进一步解释。

本优选实施例可以解决数据在前端的相关操作，同时可要求是前后端分离的系统架构，以RestApi接口进行数据交互。

数据一般与后端的交互，一般有：数据的增加，删除，修改，查询；文件的上传；消息的推送与接收等，但并不限于此。

数据在前端的展示方式则是多种多样的。本优选实施例提供的方案的处理方式为：

(1)接口统一。相同类型的操作(比如RestApi的Request请求)都从同一接口输入或者输出，这样便于控制与管理；

(2)展示组件化。针对同一类型的数据，例如：时间类型数据，对其的编辑模式和只读模式进行组件模块化。只是在不同场景时修改其组件的不同参数即可展现不同的样式和风格。

(3)同时组件之间可以互相组合，多个组件可以组合为更加复杂的组件，以此类推，使其适应各种环境和需求。

(4)自动化。页面展示的数据内容，基本是固定的，接口内容的输入输出更是固定的。需要制定规则。该规则规定了，什么样的数据以什么样的方式呈现在前端，同时以什么样的方式同用户交互，最后以什么样的方式同后台交互。当有数据到前端时，不同的数据遵循规则选取不同的组件，自动显示在前端，并自动与用户交互，自动提交到后端。

如此以来，开发只需要专注于制定规则和开发组件，就可以满足web的前端开发需求。由于规则和组件更加方便复用，这样就极大的提高了开发速度，保障质量。

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

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

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

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

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

所述集成的单元如果以软件功能单元的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可读取存储介质中。基于这样的理解，本发明的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的全部或部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质中，包括若干指令用以使得一台计算机设备(可为个人计算机、服务器或者网络设备等)执行本发明各个实施例所述方法的全部或部分步骤。而前述的存储介质包括：U盘、只读存储器(ROM，Read-Only Memory)、随机存取存储器(RAM，Random Access Memory)、移动硬盘、磁碟或者光盘等各种可以存储程序代码的介质。

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

Claims (4)

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

接收终端的后端平台发送的数据；

根据调用的所述数据的类型按照第一预定规则调用与所述类型对应的组件；其中，所述数据的类型包括：所述数据的属性以及对应的属性值；

在终端的前端平台以调用的所述组件的方式展示所述数据；

其中，根据调用的所述数据的类型按照预定规则调用与所述类型对应的组件包括：

调用所述数据的类型，以及确定所述数据对应的应用场景；

依据所述类型调用所述应用场景下与所述类型对应的组件；

在终端的前端平台以调用的所述组件的方式展示所述数据之后，所述方法还包括：

按照第二预定规则确定所述数据中需要与用户进行交互的第一数据，其中，所述第一数据在所述前端平台的显示方式，用于提示所述用户进行与所述第一数据的操作；

在按照第二预定规则确定所述数据中需要与用户进行交互的第一数据之后，所述方法还包括：

接收触发信号，其中，所述触发信号中携带有所述用户进行操作的操作数据；

按照第三预定规则确定所述操作数据中需要返回到所述后端平台的第二数据；

将所述第二数据返回到所述后端平台；

其中，所述第一预定规则、所述第二预定规则以及所述第三预定规则分别用于自动将数据在所述前端平台的呈现、自动与用户交互数据以及自动提交数据至所述后端平台。

2.根据权利要求1所述的方法，其特征在于，不同的应用场景下，同一类型对应的组件的参数不同。

3.根据权利要求1所述的方法，其特征在于，接收终端的后端平台发送的数据包括：

通过应用程序编程接口Rest API接收所述后端平台发送的数据；其中，同一个所述Rest API用于接收类型相同的数据。

4.一种数据展示装置，其特征在于，包括：

接收模块，用于接收终端的后端平台发送的数据；

调用模块，用于根据调用的所述数据的类型按照第一预定规则调用与所述类型对应的组件；其中，所述数据的类型包括：所述数据的属性以及对应的属性值；

展示模块，用于在终端的前端平台以调用的所述组件的方式展示所述数据；

其中，所述调用模块，还用于调用所述数据的类型，以及确定所述数据对应的应用场景；以及依据所述类型调用所述应用场景下与所述类型对应的组件；

所述装置还包括：

确定模块，用于按照第二预定规则确定所述数据中需要与用户进行交互的第一数据，其中，所述第一数据在所述前端平台的显示方式，用于提示所述用户进行与所述第一数据的操作；

所述接收模块，还用于接收触发信号，其中，所述触发信号中携带有所述用户进行操作的操作数据；所述确定模块，还用于按照第三预定规则确定所述操作数据中需要返回到所述后端平台的第二数据；

所述装置还包括：反馈模块，用于将所述第二数据返回到所述后端平台；

其中，所述第一预定规则、所述第二预定规则以及所述第三预定规则分别用于自动将数据在所述前端平台的呈现、自动与用户交互数据以及自动提交数据至所述后端平台。

Images