CN111367515B - 页面卡片的开发方法、装置、计算设备和存储介质 - Google Patents

Abstract

本发明公开一种页面卡片的开发方法，包括：响应于用户在可视化界面上的操作，从服务器获取基于第一架构的一个或多个效果模块的渲染结果；将所述渲染结果转换为中间元素，所述中间元素具有所述第一架构和第二架构均可识别的格式；将所述中间元素转换为基于第二架构的可视化组件；根据用户在可视化界面上的所述操作，在卡片模板上布置所述可视化组件，以得到页面卡片样式。由此，使得客户端和服务端组件系统异构的情况下，能够共享一套组件系统。

Description

页面卡片的开发方法、装置、计算设备和存储介质

技术领域

本发明涉及互联网技术领域，特别涉及一种页面卡片的开发方法、装置、计算设备和存储介质。

背景技术

互联网技术的迅猛发展，将人们带入信息设备时代，对人们生活产生了深刻影响，人们可以通过各种范式获取互联网上海量的信息，以满足生活、工作、学习等各方面的需求。为了方便用户进行网页浏览，通常在网页中添加扩展功能的页面组件(被常态化定性交互方式和结构的部件)，通过页面组件可以轻松构造出具有丰富互联网应用特征的web页面。

但是，在客户端和服务端组件系统异构的情况下，在服务端维护的组件样式在客户端无法直接使用，从而导致无法复用在服务端维护的组件样式库，从而导致页面卡片的开发成本高。

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

发明内容

本公开的目的是提供一种页面卡片的开发方法和装置，以解决在客户端与服务端组件系统异构的情况下，在服务端维护的组件样式在客户端无法直接使用，从而导致页面卡片的开发成本高的技术问题。

根据本公开的第一个方面，提供了一种页面卡片的开发方法，包括：响应于用户在可视化界面上的操作，从服务器获取基于第一架构的一个或多个效果模块的渲染结果；将所述渲染结果转换为中间元素，所述中间元素具有所述第一架构和第二架构均可识别的格式；将所述中间元素转换为基于第二架构的可视化组件；根据用户在可视化界面上的所述操作，在卡片模板上布置所述可视化组件，以得到页面卡片样式。

可选地，所述效果模块可以分别对应于要在所述页面卡片上呈现的元素的类型及其呈现方式，并且至少一个效果模块分别与实体数据库中的至少一个字段对应。

可选地，所述渲染结果是HTML形式的；所述中间元素是DOM元素；以及所述可视化组件是React组件。

可选地，所述用户在所述可视化界面上的所述操作至少包括点击操作或拖拽操作，所述操作基于如下的至少一项实现：鼠标；键盘；触摸屏；以及语音。

可选地，所述第一架构基于PHP；并且/或者所述第二架构基于React。

根据本公开的第二个方面，还提供了一种搜索结果页面卡片的开发方法，包括：响应于用户在可视化界面上的操作，从服务器获取基于第一架构的一个或多个效果模块的渲染结果，所述效果模块分别对应于要在所述搜索结果页面卡片上呈现的元素的类型及其呈现方式；将所述渲染结果转换为中间元素，所述中间元素具有所述第一架构和第二架构均可识别的格式；将所述中间元素转换为基于第二架构的可视化组件；根据用户在可视化界面上的所述操作，在卡片模板上布置所述可视化组件，以得到搜索结果页面卡片样式。

可选地，所述至少一个效果模块分别与实体数据库中的至少一个字段对应。

根据本公开的第三个方面，还提供了一种页面卡片的开发装置，包括：模块获取装置，用于响应于用户在可视化界面上的操作，从服务器获取基于第一架构的一个或多个效果模块的渲染结果；第一转换装置，用于将所述渲染结果转换为中间元素，所述中间元素具有所述第一架构和第二架构均可识别的格式；第二转换装置，用于将所述中间元素转换为基于第二架构的可视化组件；卡片布置装置，用于根据用户在可视化界面上的所述操作，在卡片模板上布置所述可视化组件，以得到页面卡片样式。

可选地，所述效果模块分别对应于要在所述页面卡片上呈现的元素的类型及其呈现方式，并且至少一个效果模块分别与实体数据库中的至少一个字段对应。

可选地，所述第一架构基于PHP；并且/或者所述第二架构基于React。

根据本公开的第四个方面，还提供了一种搜索结果页面卡片的开发装置，包括：模块获取装置，用于响应于用户在可视化界面上的操作，从服务器获取基于第一架构的一个或多个效果模块的渲染结果，所述效果模块分别对应于要在所述搜索结果页面卡片上呈现的元素的类型及其呈现方式；第一装换装置，用于将所述渲染结果转换为中间元素，所述中间元素具有所述第一架构和第二架构均可识别的格式；第二装换装置，用于将所述中间元素转换为基于第二架构的可视化组件；卡片布置装置，用于根据用户在可视化界面上的所述操作，在卡片模板上布置所述可视化组件，以得到搜索结果页面卡片样式。

可选地，所述至少一个效果模块分别与实体数据库中的至少一个字段对应。

根据本公开的第五个方面，还提供了一种计算设备，包括：处理器；以及存储器，其上存储有可执行代码，当所述可执行代码被所述处理器执行时，使所述处理器执行如上任何一项所述的方法。

根据本公开的第六个方面，还提供了一种非暂时性机器可读存储介质，其上存储有可执行代码，当所述可执行代码被电子设备的处理器执行时，使所述处理器执行如上任一项所述的方法。

由此，通过本公开如上所述的转译方案，将服务端侧基于第一架构的效果模块，转译为客户端侧基于第二架构的可视化组件，使得客户端侧的用户能够直观地查看到该可视化组件，并使得用户能够对该可视化组件的简捷操作直接实现页面卡片样式的可视化搭建，减少了与其它开发者用户的沟通，从而减少了沟通成本和时间成本，减少了页面卡片的开发成本。进一步地，能够为提升页面卡片的开发效率提供支撑。

附图说明

通过结合附图对本公开示例性实施方式进行更详细的描述，本公开的上述以及其它目的、特征和优势将变得更加明显，其中，在本公开示例性实施方式中，相同的参考标号通常代表相同部件。

图1示出了根据本公开一个实施例的页面卡片的开发原理的示意图。

图2示出了根据本公开一个实施例的页面卡片开发的流程示意图。

图3示出了根据本公开一个实施例的页面卡片的开发方法的流程示意图。

图4示出了根据本公开一个实施例的组件系统的结构示意图。

图5示出了根据本公开一个示例的组件转换流程示意图。

图6示出了根据本公开一个示例的设置接口映射的示意图。

图7示出了根据本公开一个实施例的搜索结果页面卡片的开发方法的流程示意图。

图8是示出了根据本公开一实施例的页面卡片的开发装置的结构的示意性方框图。

图9示出了根据本发明一实施例的计算设备的结构示意图。

具体实施方式

下面将参照附图更详细地描述本公开的优选实施方式。虽然附图中显示了本公开的优选实施方式，然而应该理解，可以以各种形式实现本公开而不应被这里阐述的实施方式所限制。相反，提供这些实施方式是为了使本公开更加透彻和完整，并且能够将本公开的范围完整地传达给本领域的技术人员。

【术语解释】

React Element：React组件树中基本的元素。

服务端组件：由服务器端渲染的基于第一架构的html字符串。

组件系统异构：客户端和服务器端采用不同的语言和技术栈。

【方案概述】

如前所述，为了解决现有技术中客户端与服务端组件系统异构的情况下，在服务端维护的组件样式在客户端无法直接使用，从而导致页面卡片的开发成本高的技术问题。

本公开提出了一种页面卡片的开发方法和装置，通过中间元素，对从服务器获取的组件样式的渲染结果进行转换，将其转换为在客户端(例如页面卡片开发平台)侧可视的可视化组件，从而使得在开发平台侧的相关用户能够通过在可视化界面上对可视化组件执行简单的操作，以进行相关页面卡片样式的开发。

在本公开如下的示例中，为了对客户端侧和服务器端侧的组件系统进行区分，将客户端侧组件称为可视化组件，将在服务器端维护的组件称为效果模块。应当理解的是，该表述仅是对相关对象进行区分，而不是对本公开的任何限定。

本公开的页面卡片的开发方案可以适用于台式设备终端侧的页面，也可以适用于便携式移动设备终端侧的页面。并且，该页面卡片的开发方案也可以适用于任何业务场景，包括但不限于是搜索引擎、电商平台、新闻资讯平台等，本公开对此均不做限制。

本公开如下的示例中，所维护的效果模块库中的效果模块具有可复用性，可重复用于搭建多种页面卡片样式，以便于在不同的业务场景中基于相应的页面卡片样式向业务用户展现与其业务相应的业务数据。

本公开如下的示例中，在维护效果模块库时，根据页面的构成，可以基于多种维度建立上述效果模块库中的效果模块。并且，基于页面卡片在不同业务场景下的复杂应用及其功能实现，还可以分别将与页面构成或页面元素相关的交互数据和/或功能数据进行绑定和封装来实现上述效果模块。由此，使得在可视化界面侧的用户基于效果模块库中的效果模块即能够可视化地搭建其期望的页面卡片样式，而无需再与相关技术人员进行沟通，能够极大减少沟通成本和时间成本，提升页面卡片开发效率。

应当理解的是，本公开如下的示例中，“用户”包括效果模块以及页面卡片的整体开发过程中涉及的多个开发者用户，例如可以包括但不限于是用户体验设计人员(UE)、前端开发人员(FE)、后端开发人员(RD)、PHP开发人员、产品人员(PM)、运营人员(OM)等。“业务用户”则可以包括所开发出的页面卡片在实际业务场景中所面向的用户，例如搜索用户、网购用户、新闻浏览用户等。

如下将结合附图及实施例详细说明本发明的页面卡片的开发方案。

页面卡片的开发原理

图1示出了根据本公开一个实施例的页面卡片的开发原理的示意图。

如图1所示，基于在本公开页面卡片的开发中所涉及的主体的不同，主要可以分为两端，例如用户界面的一侧(如图1所示UI)以及相关数据(Data)的一侧。

在其中，用户界面(User Interface，简称UI，亦称使用者界面)也就是本公开其它示例中所述的可视化界面，是开发系统和开发者用户之间进行交互和信息交换的媒介，以实现信息的内部形式与人类可以接受形式之间的转换。

在该侧可以设计或产出用于进行页面开发所需的多项元素的模块/组件化的基础模块样式，例如框架样式、控件样式、元素样式、图片样式、样例样式等。

数据可以包括与信息的内部形式相关的数据字段，例如可以包括用于描述呈现效果的数据字段、用于描述交互操作的数据字段、用于实现功能的数据字段、用于进行展现的内容数据的数据字段等等。在该侧能够基于用户界面侧提供的模块样式来进行相关数据处理，使得相关数据的数据格式能够与上述效果模块保持一一对应的统一模式。

由此，通过将上述样式与相关数据的绑定，即可得到本公开的相关开发范式，将隐形的数据格式以显性的、可视化的效果模块/组件进行展示，使得用户界面侧的相关开发者用户(例如如前所述的UE、PM、OM等)可以直接通过对上述可视化的效果模块进行操作，以搭建出更加符合相关业务预期的页面卡片样式，不仅可以降低人力沟通成本，还能够使得页面卡片样式的搭建更加快速、简洁，极大地减少时间成本。

进一步地，基于上述效果模块和/或页面卡片样式，以及上述与效果模块保持对应的数据格式，能够基于不同的页面卡片样式，针对不同类型的实体对象或是针对同一类型实体对象进行页面卡片的规模化生产，从而极大地提升页面卡片的开发效率。

图2示出了根据本公开一个实施例的页面卡片开发的流程示意图。

如图2所示，作为本公开的一个示例，页面卡片的开发流程中所涉及的开发者用户例如可以包括用户界面侧的UE、PM和OM，还可以包括数据侧的FE、PHP和RD。

用户界面侧例如可以由UE提供开发页面卡片所需要的效果模块样式，可以包括常用的使用样式，也可以包括特定的使用样式，还可以包括针对效果模块样式的定制扩展。用户界面侧例如还可以提供页面卡片样式的设计图等。

数据侧可以提供与上述效果模块样式相关的数据，并提供相关数据的处理以及执行相关数据的绑定，以得到能够用于进行页面卡片开发的多个效果模块，并维护相应的效果模块库。

在其中，例如可以由前端人员FE实现与效果模块相关的前端代码开发，包括基本的HTML和CSS以及JavaScript/ajax等。

例如可以由后端开发人员RD提供实现效果模块的功能所需的相关数据，例如可以包括后台程序设计、数据库设计、动态代码编写等，还可以包括与如何实现功能、数据的存取、平台的稳定性与性能等相关的其它数据，例如与数据库进行交互以处理相应业务的流程、业务逻辑、状态和/业务或规则等。在一个优选示例中，这些相关数据均可以采用XML文档格式，以便于在客户端与服务器端进行数据传输。

作为本公开的一个示例，可以采用PHP(:PHP:Hypertext Preprocessor，超文本预处理器)技术预先将上述相关数据进行绑定以及封装，以得到所维护的效果模块库中的一个或多个效果模块。

这些效果模块本身相互独立且具有一定的业务逻辑，当可视化界面侧的相关用户(例如图2所示的UE、PM、OM等)需要进行新的页面卡片样式开发时，可以直接在可视化界面侧对搭建页面卡片样式所需的多个效果模块进行可视化操作(例如点击、拖拽等)，以得到新的页面卡片样式。

这样，用户界面侧用户不需要多次与数据侧技术人员进行沟通即可可视化地搭建更加符合相关业务预期的页面卡片样式，页面卡片样式开发流程更加快速简洁，减少了人力沟通成本和时间成本，极大地提升了页面卡片样式开发的开发效率。

用户界面侧用户(包括UE、PM、OM等)对已开发出的页面样式有修改需求时，其也可以直接在可视化界面侧对原页面卡片样式中的相关效果模块进行相应操作(例如点击、拖拽、属性修改、模块替换等)，以实现对原页面卡片样式的修改或更新。从而可以很大程度上避免很多低附加值的工作，提升页面卡片样式的维护效率。

作为本公开的一个示例，可以为开发出的页面卡片样式设置索引项，并使得上述前端或后端数据与效果模块的数据格式具有一一对应的统一模式。这样，对于同一类型的多个实体对象，可以基于一种页面卡片样式快速实现分别对应于该多个实体对象的多个页面卡片的开发，从而可以实现页面卡片的规模化生产，以较小的开发成本为业务用户提供更多实体对象卡片。

在如下的示例中，将从维护效果模块库、组件转换两个方面对本公开的页面卡片的开发方案进行详细描述。对于之后的搭建页面卡片样式、以及页面卡片开发的方面将不再赘述。

维护效果模块库

效果模块也可以称为页面组件，是用户搭建页面卡片样式所需的多种元素的模块化实现。效果模块样式可以对应于要在以页面卡片上呈现的元素对应的展现效果。

效果模块库可以包括多种维度的效果模块，每种维度下可以包括对应于不同状态、不同业务逻辑、不同业务规则、不同样式效果等的一个或多个效果模块。并且，所维护的效果模块库中的效果模块具有可复用性，可重复用于搭建多种页面卡片样式，以便于在不同的业务场景中基于相应的页面卡片样式向业务用户展现与其业务相应的业务数据。

作为一个示例，上述多种维度例如可以包括框架维度、控件维度、元素维度和/或样例库维度。

具体来说，框架维度及其相应的效果模块例如可以包括基于页面卡片样式的框架效果进行的效果预搭建，如自然结果、系统推荐、收起态、展开态、MAX态等。

控件维度及其相应的效果模块例如可以包括基于组成页面卡片样式的控件效果进行的效果预搭建，如副标题样式、图片样式、标签栏样式、选择器样式、属性样式等。

元素维度及其相应的效果模块例如可以包括根据组成页面卡片样式的元素效果进行的效果预搭建，如颜色、文字、线、投影等。

样例库维度及其相应的效果模块例如可以包括根据组成页面卡片样式可用的较为分散样例进行的效果预搭建，如图标样例、状态栏样例、加载状态样式等。

效果模块库的维护可以包括效果模块库的初始建立，还可以包括之后对该效果模块库的维护。

在初始建立效果模块库时，可以基于以往页面卡片常用的使用样式，预先实现各个效果模块。之后，在使用过程中，随着业务环境的变化、信息的增多或是随着用户体验需求的变化，还可以对该模块效果库中的模块效果进行添加或修改或删除，以丰富或更新该模块效果库。特别低，还可以根据业务需求，基于初始效果模块库进行模块的定制扩展，使其以树状结构发展形势逐渐丰富效果模块库。

在建立或维护效果模块库时，可以基于预定的效果模块样式，将与该效果模块样式相对应的模块数据进行绑定以及封装，以得到效果模块库中的一个或多个效果模块，从而将隐性(即可视化界面侧不可见)的数据格式以显性(即可视化界面侧可见)的样式进行展示。

预定的效果模块样式可以包括历史页面展现时常用的使用样式，也可以包括相关设计人员设计的新的样式，还可以包括针对特定场景/用户设计的特定样式。

与效果模块样式相对应的模块数据可以包括与实现该效果模块的效果或其功能相关的数据，并可以由如前所述的数据侧的相关人员提供。

例如，上述模块数据可以包括但不限于是用于描述所述效果模块的呈现效果的数据字段；用于描述一种或多种可视化界面操作的数据字段；以及用于实现所述效果模块(在基于其所搭建的页面卡片样式上)的功能的数据字段(例如与数据库进行交互以执行相关处理相关的流程、业务逻辑、状态和/业务规则等)。作为一个优选示例，该模块数据也可以包括能够在相应效果模块进行展现的内容数据的数据字段，本公开对此不做限制。

在其中，效果模块的模块样式与模块数据的数据格式优选保持一一对应的统一模式。其中，可以基于效果模块样式的设计，对模块所需的数据字段进行标准化处理，来使得设计样式与数据格式保持一一对应的同一模式。

作为本公开的一个示例，可以基于PHP将上述数据进行绑定以及封装，以得到本公开的效果模块库中的一个或多个效果模块。并且，还可以属性设置/修改的相关接口，以使得用户界面侧的相关用户能够对效果模块库中的效果模块的属性进行设置或修改。这一技术具体实现可参见相关PHP技术，本公开在此不再赘述。

应当理解的是，在维护效果模块库中的多个效果模块时，根据效果模块对应的元素的不同类型，其相应的模块数据也不完全相同。例如，对于功能性元素(例如框架或控件等)，可以为其绑定上述用于描述效果、操作或功能的数据字段。对于内容元素(例如搜索框、标题框、文本内容框等)，则还可以为其绑定与能够在相应效果模块进行展现的内容数据的数据字段。

所维护的效果模块库可以存储在服务器端，并且可以通过相关接口与客户端侧的页面卡片开发平台对接，使得页面卡片开发平台侧的用户可以通过可视化界面对该效果模块进行操作和/或控制。

在其中，在客户端与服务器端采用同一种架构(相同的语言或技术栈)的情况下，效果模块在可视化界面侧可以以可视化组件的形式直接展现。在客户端与服务器端异构即采用不同种架构(不同的语言或技术栈)的情况下，在客户端侧可以对所获取的效果模块进行转译，以将其转换为能够在客户端侧可视化呈现的可视化组件，以便于可视化界面侧的用户对组件进行精准的操作控制，实现对页面卡片样式的可视化搭建。

由此，通过预先将数据进行绑定以实现效果模块库中的多个效果模块，通过向可视化界面侧的相关用户(例如UE、PM、OM等)提供预先维护的可视化模块/组件，使得用户无需再与其他人员沟通即可通过其在可视化界面侧的自主操作来搭建更加符合相关业务与其的页面卡片样式，从而减少人工沟通成本和时间成本，为提升页面卡片的开发效率提供良好的支撑。

组件转换

图3示出了根据本公开一个实施例的页面卡片的开发方法的流程示意图。作为一个示例，该方法可在客户端侧(即页面卡片开发平台)侧实现。

如图3所示，在步骤S310，响应于用户在可视化界面上的操作，从服务器获取基于第一架构的一个或多个效果模块的渲染结果。

在步骤S320，将所述渲染结果转换为中间元素，所述中间元素具有所述第一架构和第二架构均可识别的格式。

在步骤S330，将所述中间元素转换为基于第二架构的可视化组件。

在步骤S340，根据用户在可视化界面上的所述操作，在卡片模板上布置所述可视化组件，以得到页面卡片样式。

第一架构和第二架构可以分别对应于服务器端和客户端所使用的语言和技术栈。服务器端与客户端组件系统异构是指其分别对应的第一架构与第二架构不同，即服务器端和客户端采用不同的语言和技术栈。作为本公开的一个示例，第一架构可以是基于PHP的，第二架构可以基于是React的。

可视化界面即为客户端侧的可视化的用户界面，在本公开示例中即为页面卡片开发平台(如下简称开发平台)的可视界面。

效果模块可以是从服务器(或相关的数据库)端维护的效果模块库中获取的。其中，效果模块库是在服务器端维护的组件样式库，效果模块即为服务器端维护的组件样式。

效果模块库中的效果模块可以是由相关开发人员预先基于预定的模块样式建立以及维护的，并且可以分别对应于要在页面卡片上呈现的元素的类型及其呈现方式。

基于元素在页面卡片上所起的作用不同，上述元素可以包括功能元素和/或内容元素。其中，功能元素可以包括能够在页面中起到功能性作用的元素，例如可以包括一些框架元素、控件元素等。内容元素可以包括页面中与文字内容有关的元素，例如可以包括一些标题框、副标题框、文本内容框、搜索框等。并且，效果模块库中对应于内容元素的至少一个效果模块还可以分别与实体数据库中的至少一个字段对应。

效果模块的渲染结果可以是在服务器端基于第一架构的第一语言表达的元素(例如字符串)。其中，渲染结果可以是HTML形式的。作为本公开的一个示例，效果模块的渲染结果可以是由PHP服务端渲染的HTML元素。作为本公开的另一个示例，一个或多个效果模块的渲染结果可以是由PHP服务端渲染的包括所述一个或多个效果模块对应是HTML元素的HTML页面。

中间元素可以作为基于第一架构的元素和基于第二架构的元素的中间元素，具有第一架构和第二架构均可识别的格式。作为本公开的一个示例，该中间元素可以是DOM元素。

可视化组件可以是在客户端基于第二架构的第二语言表达的元素。作为本公开的一个示例，该可视化组件可以是React组件。

图4示出了根据本公开一个实施例的组件系统的结构示意图。图5示出了根据本公开一个示例的组件转换流程示意图。

如图4所示，服务器端侧可以采用基于PHP的语言和技术栈，并且服务器端侧可以包括在服务器端维护的效果模块(即C组件)，以及PHP渲染系统(PHP Render)。

客户端侧可以采用基于React的语言和技术栈。并且，基于客户端组件的类型，可以将客户端侧的可视化组件分为更细粒度的子类，并且可以一些子类可以具有一定的继承关系。例如，基类(CBase)、拖拽类(CDnd)、容器基类(CBox)、展示类(CView)、容器类(CCell、CCcolumn)、物料类(CKlass)。其中，CBox继承CBase和CDnd，CView继承CBase和CDnd，CCell、CCcolumn继承CBox。由此，以便于可视化界面侧的用户能够根据需求在相应的子类中查看搭建页面卡片样式所需要的组件。

客户端可以通过调用预定的API(Application Programming Interface，应用程序编程接口)访问服务器，来获得服务端组件的渲染结果。

如图5所示，在获得服务端组件的渲染结果，即HTML字符串(String)或HTML页面后，可以首先解析(Prase)所获得的渲染结果，之后，将该渲染结果转换为中间元素DOM元素(即DOM Element)，之后解析DOM元素并将其转换为客户端侧可见的React元素(即ReactElement)。由此，可视化界面侧的相关用户可以对可视化组件进行操作以进行页面卡片样式的开发。

用户在所述可视化界面上的所述操作至少包括点击操作或拖拽操作，所述操作可以基于如下的至少一项实现：鼠标；键盘；触摸屏；以及语音。

这样，在进行页面卡片样式的开发时，可视化界面侧的相关用户即可通过点击和/或拖拽的方式将页面卡片样式开发所需的多个可视化组件布置在卡片模板上，以搭建得到所需的页面卡片样式。

并且其中，可视化界面侧的相关用户还可以对这多个可视化组件进行设置从而修改原有组件及其属性，以使得所搭建的页面卡片样式更加符合个人或是相关业务的预期。

图6示出了根据本公开一个示例的设置接口映射的示意图。如图6所示，作为本公开的一个示例，在基于PHP将相关数据(Data)进行绑定以及封装以得到效果模块库中的多个效果模块(即服务端组件)时，将其以API接口的形式映射到模式(schema)，并分别对应于相应的prop函数，以解析至相应的设计器(setter)，不同的设计器对应于不同的设置元素(输入设计器InputSetter、列表设计器ListSetter、颜色设计器ColorSetter等)。由此，可视化界面侧的相关用户通过针对这些设置元素进行设置从而修改原有组件及其属性。

由此，通过本公开如上所述的方案，通过中间元素，对从服务器获取的组件样式的渲染结果进行转换，将其转换为在开发平台侧可视的可视化组件，使得客户端与服务器端能够共享一套组件样式库，从而减少开发成本。进一步地，还可以使得在开发平台侧的相关用户能够通过在可视化界面上对可视化组件执行简单的操作以及相关的属性设置，搭建出更加符合相关业务预期的页面卡片样式，减少了与其他开发人员的沟通，为提升页面卡片的开发效率提供支撑。

作为本公开的一个示例，上述页面卡片的开发方案可以适用于搜索引擎业务场景中，即一种搜索结果页面卡片的开发。图7示出了根据本公开一个实施例的搜索结果页面卡片的开发方法的流程示意图。

如图7所示，在步骤S710，响应于用户在可视化界面上的操作，从服务器获取基于第一架构的一个或多个效果模块的渲染结果，所述效果模块分别对应于要在所述搜索结果页面卡片上呈现的元素的类型及其呈现方式。作为本公开的一个示例，效果模块库中的至少一个效果模块分别与实体数据库中的至少一个字段对应。

在步骤S720，将所述渲染结果转换为中间元素，所述中间元素具有所述第一架构和第二架构均可识别的格式。

在步骤S730，将所述中间元素转换为基于第二架构的可视化组件。

在步骤S740，根据用户在可视化界面上的所述操作，在卡片模板上布置所述可视化组件，以得到搜索结果页面卡片样式。

该在搜索引擎业务场景下的搜索结果页面卡片的开发方法与上述的页面卡片的开发方法相同或相似，详细可参见上文的相关描述，在此不再赘述。

【装置】

图8是示出了根据本公开一实施例的页面卡片的开发装置(如下简称开发装置)的结构的示意性方框图。其中，装置的功能模块可以由实现本发明原理的硬件、软件或硬件和软件的结合来实现。本领域技术人员可以理解的是，图8所描述的功能模块可以组合起来或者划分成子模块，从而实现上述发明的原理。因此，本文的描述可以支持对本文描述的功能模块的任何可能的组合、或者划分、或者更进一步的限定。

下面就装置可以具有的功能模块以及各功能模块可以执行的操作做简要说明，对于其中涉及的细节部分可以参见上文相关的描述，这里不再赘述。

如图8所示，本公开的页面卡片的开发装置800可以包括模块获取装置810、第一转换装置820、第二转换装置830和卡片布置装置840。

模块获取装置810可以响应于用户在可视化界面上的操作，从服务器获取基于第一架构的一个或多个效果模块的渲染结果。

第一转换装置820可以将所述渲染结果转换为中间元素，所述中间元素具有所述第一架构和第二架构均可识别的格式。

第二转换装置830可以将所述中间元素转换为基于第二架构的可视化组件。

卡片布置装置840可以根据用户在可视化界面上的所述操作，在卡片模板上布置所述可视化组件，以得到页面卡片样式。

作为本公开一个示例，效果模块分别对应于要在所述页面卡片上呈现的元素的类型及其呈现方式，并且至少一个效果模块分别与实体数据库中的至少一个字段对应。

作为本公开的一个示例，上述第一架构可以是基于PHP，第二架构可以是基于React。

在搜索引擎业务场景中，上述页面卡片的开发装置800的装置或模块也可以实现对搜索结果卡片页面的开发。

例如，模块获取装置可以响应于用户在可视化界面上的操作，从服务器获取基于第一架构的一个或多个效果模块的渲染结果，所述效果模块分别对应于要在所述搜索结果页面卡片上呈现的元素的类型及其呈现方式。其中，至少一个效果模块分别与实体数据库中的至少一个字段对应。

第一装换装置可以将所述渲染结果转换为中间元素，所述中间元素具有所述第一架构和第二架构均可识别的格式。

第二装换装置可以将所述中间元素转换为基于第二架构的可视化组件。

卡片布置装置可以根据用户在可视化界面上的所述操作，在卡片模板上布置所述可视化组件，以得到搜索结果页面卡片样式。

页面卡片的开发装置800的功能的实现与上述开发方法相同或相似，详细可参见上文的相关描述，在此不再赘述。

图9示出了根据本发明一实施例的计算设备的结构示意图。

参见图9，计算设备900包括存储器910和处理器920。

处理器920可以是一个多核的处理器，也可以包含多个处理器。在一些实施例中，处理器920可以包含一个通用的主处理器以及一个或多个特殊的协处理器，例如图形处理器(GPU)、数字信号处理器(DSP)等等。在一些实施例中，处理器920可以使用定制的电路实现，例如特定用途集成电路(ASIC，Application Specific Integrated Circuit)或者现场可编程逻辑门阵列(FPGA，Field Programmable Gate Arrays)。

存储器910可以包括各种类型的存储单元，例如系统内存、只读存储器(ROM)，和永久存储装置。其中，ROM可以存储处理器920或者计算机的其他模块需要的静态数据或者指令。永久存储装置可以是可读写的存储装置。永久存储装置可以是即使计算机断电后也不会失去存储的指令和数据的非易失性存储设备。在一些实施方式中，永久性存储装置采用大容量存储装置(例如磁或光盘、闪存)作为永久存储装置。另外一些实施方式中，永久性存储装置可以是可移除的存储设备(例如软盘、光驱)。系统内存可以是可读写存储设备或者易失性可读写存储设备，例如动态随机访问内存。系统内存可以存储一些或者所有处理器在运行时需要的指令和数据。此外，存储器910可以包括任意计算机可读存储媒介的组合，包括各种类型的半导体存储芯片(DRAM，SRAM，SDRAM，闪存，可编程只读存储器)，磁盘和/或光盘也可以采用。在一些实施方式中，存储器910可以包括可读和/或写的可移除的存储设备，例如激光唱片(CD)、只读数字多功能光盘(例如DVD-ROM，双层DVD-ROM)、只读蓝光光盘、超密度光盘、闪存卡(例如SD卡、min SD卡、Micro-SD卡等等)、磁性软盘等等。计算机可读存储媒介不包含载波和通过无线或有线传输的瞬间电子信号。

存储器910上存储有可处理代码，当可处理代码被处理器920处理时，可以使处理器920执行上文述及的方法。

上文中已经参考附图详细描述了根据本发明的页面卡片的开发方法和装置。

此外，根据本发明的方法还可以实现为一种计算机程序或计算机程序产品，该计算机程序或计算机程序产品包括用于执行本发明的上述方法中限定的上述各步骤的计算机程序代码指令。

或者，本发明还可以实施为一种非暂时性机器可读存储介质(或计算机可读存储介质、或机器可读存储介质)，其上存储有可执行代码(或计算机程序、或计算机指令代码)，当所述可执行代码(或计算机程序、或计算机指令代码)被电子设备(或计算设备、服务器等)的处理器执行时，使所述处理器执行根据本发明的上述方法的各个步骤。

本领域技术人员还将明白的是，结合这里的公开所描述的各种示例性逻辑块、模块、电路和算法步骤可以被实现为电子硬件、计算机软件或两者的组合。

附图中的流程图和框图显示了根据本发明的多个实施例的系统和方法的可能实现的体系架构、功能和操作。在这点上，流程图或框图中的每个方框可以代表一个模块、程序段或代码的一部分，所述模块、程序段或代码的一部分包含一个或多个用于实现规定的逻辑功能的可执行指令。也应当注意，在有些作为替换的实现中，方框中所标记的功能也可以以不同于附图中所标记的顺序发生。例如，两个连续的方框实际上可以基本并行地执行，它们有时也可以按相反的顺序执行，这依所涉及的功能而定。也要注意的是，框图和/或流程图中的每个方框、以及框图和/或流程图中的方框的组合，可以用执行规定的功能或操作的专用的基于硬件的系统来实现，或者可以用专用硬件与计算机指令的组合来实现。

以上已经描述了本发明的各实施例，上述说明是示例性的，并非穷尽性的，并且也不限于所披露的各实施例。在不偏离所说明的各实施例的范围和精神的情况下，对于本技术领域的普通技术人员来说许多修改和变更都是显而易见的。本文中所用术语的选择，旨在最好地解释各实施例的原理、实际应用或对市场中的技术的改进，或者使本技术领域的其它普通技术人员能理解本文披露的各实施例。

Claims (14)

1.一种页面卡片的开发方法，其特征在于，包括：

响应于用户在可视化界面上的操作，从服务器获取基于第一架构的一个或多个效果模块的渲染结果；

将所述渲染结果转换为中间元素，所述中间元素具有所述第一架构和第二架构均可识别的格式；

将所述中间元素转换为基于第二架构的可视化组件；

根据用户在可视化界面上的所述操作，在卡片模板上布置所述可视化组件，以得到页面卡片样式，

所述第一架构和所述第二架构分别对应于服务器端和客户端所使用的语言和技术栈。

2.根据权利要求1所述的方法，其特征在于，所述效果模块分别对应于要在所述页面卡片上呈现的元素的类型及其呈现方式，并且至少一个效果模块分别与实体数据库中的至少一个字段对应。

3.根据权利要求1所述的方法，其特征在于，

所述渲染结果是HTML形式的；

所述中间元素是DOM元素；以及

所述可视化组件是React组件。

4.根据权利要求1所述的方法，其特征在于，所述用户在所述可视化界面上的所述操作至少包括点击操作或拖拽操作，所述操作基于如下的至少一项实现：

鼠标；

键盘；

触摸屏；以及

语音。

5. 根据权利要求1所述的方法，其特征在于，

所述第一架构基于PHP；并且/或者

所述第二架构基于React。

6.一种搜索结果页面卡片的开发方法，其特征在于，包括：

响应于用户在可视化界面上的操作，从服务器获取基于第一架构的一个或多个效果模块的渲染结果，所述效果模块分别对应于要在所述搜索结果页面卡片上呈现的元素的类型及其呈现方式；

将所述渲染结果转换为中间元素，所述中间元素具有所述第一架构和第二架构均可识别的格式；

将所述中间元素转换为基于第二架构的可视化组件；

根据用户在可视化界面上的所述操作，在卡片模板上布置所述可视化组件，以得到搜索结果页面卡片样式，

所述第一架构和所述第二架构分别对应于服务器端和客户端所使用的语言和技术栈。

7.根据权利要求6所述的方法，其特征在于，所述效果模块库中的至少一个效果模块分别与实体数据库中的至少一个字段对应。

8.一种页面卡片的开发装置，其特征在于，包括：

模块获取装置，用于响应于用户在可视化界面上的操作，从服务器获取基于第一架构的一个或多个效果模块的渲染结果；

第一转换装置，用于将所述渲染结果转换为中间元素，所述中间元素具有所述第一架构和第二架构均可识别的格式；

第二转换装置，用于将所述中间元素转换为基于第二架构的可视化组件；

卡片布置装置，用于根据用户在可视化界面上的所述操作，在卡片模板上布置所述可视化组件，以得到页面卡片样式，

所述第一架构和所述第二架构分别对应于服务器端和客户端所使用的语言和技术栈。

9.根据权利要求8所述的装置，其特征在于，所述效果模块分别对应于要在所述页面卡片上呈现的元素的类型及其呈现方式，并且至少一个效果模块分别与实体数据库中的至少一个字段对应。

10. 根据权利要求8所述的装置，其特征在于，

所述第一架构基于PHP；并且/或者

所述第二架构基于React。

11.一种搜索结果页面卡片的开发装置，其特征在于，包括：

模块获取装置，用于响应于用户在可视化界面上的操作，从服务器获取基于第一架构的一个或多个效果模块的渲染结果，所述效果模块分别对应于要在所述搜索结果页面卡片上呈现的元素的类型及其呈现方式；

第一装换装置，用于将所述渲染结果转换为中间元素，所述中间元素具有所述第一架构和第二架构均可识别的格式；

第二装换装置，用于将所述中间元素转换为基于第二架构的可视化组件；

卡片布置装置，用于根据用户在可视化界面上的所述操作，在卡片模板上布置所述可视化组件，以得到搜索结果页面卡片样式，

所述第一架构和所述第二架构分别对应于服务器端和客户端所使用的语言和技术栈。

12.根据权利要求11所述的装置，其特征在于，所述效果模块库中的至少一个效果模块分别与实体数据库中的至少一个字段对应。

13.一种计算设备，包括：

处理器；以及

存储器，其上存储有可执行代码，当所述可执行代码被所述处理器执行时，使所述处理器执行如权利要求1-7中任何一项所述的方法。

14.一种非暂时性机器可读存储介质，其上存储有可执行代码，当所述可执行代码被电子设备的处理器执行时，使所述处理器执行如权利要求1至7中任一项所述的方法。

Images