基于后端生成前端卡片组件的方法、装置、设备及存储介质[发明专利]

(12)发明专利申请

(10)申请公布号 CN 111061522 A(43)申请公布日 2020.04.24

(21)申请号 201911294878.X(22)申请日 2019.12.16

(71)申请人 深圳市随金科技有限公司

地址 518000 广东省深圳市南山区粤海街

道高新区南区科技南十二路金蝶软件园B栋402室(72)发明人 刘云海　

(74)专利代理机构 北京品源专利代理有限公司

11332

代理人 孟金喆(51)Int.Cl.

G06F 9/445(2018.01)

权利要求书1页 说明书8页 附图5页

(54)发明名称

基于后端生成前端卡片组件的方法、装置、设备及存储介质(57)摘要

本发明实施例公开了一种基于后端生成前端卡片组件的方法、装置、设备及存储介质。方法包括：通过前端向后端发送请求信息，其中，后端根据请求信息向前端发送卡片组件信息；前端根据卡片组件信息生成子组件；前端将子组件在预设模板中通过渲染的方式进行显示。前端通过向后端发送请求信息获取后端提前所设置的卡片组件信息，并根据卡片组件信息生成对应的子组件并进行显示，从而节省了针对不同类型的卡片单独设置所消耗的开发成本，提高了开发效率，使得前端组件部署更加简单。CN 111061522 ACN 111061522 A

权　利　要　求　书

1/1页

1.一种基于后端生成前端卡片组件的方法，其特征在于，包括：通过前端向后端发送请求信息，其中，所述后端根据所述请求信息向所述前端发送卡片组件信息；

所述前端根据所述卡片组件信息生成子组件；

所述前端将所述子组件在预设模板中通过渲染的方式进行显示。2.根据权利要求1所述的方法，其特征在于，所述请求信息包括：业务名称和卡片集名称，其中，所述后端通过代码或数据库的方式保存与所述业务名称和卡片集名称对应的所述卡片组件信息。

3.根据权利要求2所述的方法，其特征在于，所述卡片组件信息包括：卡片名称、组件类型和每个所述组件类型对应的初始值；

所述前端根据所述卡片组件信息生成子组件，包括：

根据所述组件类型对应的初始值对每一个所述组件进行配置；根据所述配置结果获取所述子组件。4.根据权利要求3所述的方法，其特征在于，所述组件类型包括：单选组件、选择组件、输入框组件和按钮组件。

5.根据权利要求4所述的方法，其特征在于，所述卡片组件信息还包括：请求状态信息，所述前端根据所述卡片组件信息生成子组件之前，还包括：根据所述请求状态信息确定所述请求信息发送成功。6.根据权利要求5所述的方法，其特征在于，所述前端将所述子组件在预设模板中通过渲染的方式进行显示，包括：

确定所述子组件在所述预设模板中所对应的位置；

将配置有所述初始值的子组件在所述位置上通过渲染的方式进行显示。7.根据权利要求1所述的方法，其特征在于，所述前端将所述子组件在预设模板中通过渲染的方式进行显示之后，还包括：

在确定接收到用户针对所述子组件的操作后，获取操作所对应的数据信息；根据所述数据信息对所述子组件的初始值进行更新。8.一种基于后端生成前端卡片组件的装置，其特征在于，包括：请求信息发送模块，用于通过前端向后端发送请求信息，其中，所述后端根据所述请求信息向所述前端发送卡片组件信息；

子组件生成模块，用于所述前端根据所述卡片组件信息生成子组件；子组件显示模块，用于所述前端将所述子组件在预设模板中通过渲染的方式进行显示。

9.一种设备，其特征在于，所述设备包括：一个或多个处理器；存储装置，用于存储一个或多个程序；

当所述一个或多个程序被所述一个或多个处理器执行，使得所述一个或多个处理器实现如权利要求1-7中任一所述的方法。

10.一种计算机存储介质，其上存储有计算机程序，其特征在于，该程序被处理器执行时实现如权利要求1-7中任一所述的方法。

2

CN 111061522 A

说　明　书

1/8页

基于后端生成前端卡片组件的方法、装置、设备及存储介质

技术领域

[0001]本发明实施例涉及数据处理技术领域，尤其涉及一种基于后端生成前端卡片组件的方法、装置、设备及存储介质。背景技术

[0002]集成测试平台是一个前后端分离的Web应用，在进行前端页面开发时，通常需要针对特定的组件编写相应的代码实现。因为各个脚本的入参存在数量或名称等差异，因此需要对每个卡片组件进行编码工作，从而实现接收用户输入参数组装为请求参数后通过接口调用特定脚本的功能。

[0003]发明人发现现有技术中至少存在如下问题：现有技术在生成前端卡片组件时，往往需要开发人员同时具有前后端开发技能，通过在前端针对不同的卡片编写不同的脚本单独进行设置，并在前端通过编译的形式进行部署，因此在前端生成卡片组件时开发效率低，前端的部署复杂。

发明内容

[0004]本发明实施例提供了一种基于后端生成前端卡片组件的方法、装置、设备及存储介质。以节省前端的开发成本，使得前端组件部署更加简单。[0005]第一方面，本发明实施例提供了一种基于后端生成前端卡片组件的方法，包括：通过前端向后端发送请求信息，其中，后端根据请求信息向前端发送卡片组件信息；[0006]前端根据卡片组件信息生成子组件；

[0007]前端将子组件在预设模板中通过渲染的方式进行显示。[0008]第二方面，本发明实施例提供了一种基于后端生成前端卡片组件的装置，包括：[0009]请求信息发送模块，用于通过前端向后端发送请求信息，其中，后端根据请求信息向前端发送卡片组件信息；[0010]子组件生成模块，用于前端根据卡片组件信息生成子组件；[0011]子组件显示模块，用于前端将子组件在预设模板中通过渲染的方式进行显示。[0012]第三方面，本发明实施例提供了一种设备，设备包括：[0013]一个或多个处理器；[0014]存储装置，用于存储一个或多个程序；

[0015]当一个或多个程序被一个或多个处理器执行，使得一个或多个处理器实现本发明任意实施例中的方法。[0016]第四方面，本发明实施例还提供了一种计算机存储介质，其上存储有计算机程序，该程序被处理器执行时实现如本发明任意实施例的方法。[0017]本发明实施例的技术方案，前端通过向后端发送请求信息获取后端提前所设置的卡片组件信息，并根据卡片组件信息生成对应的子组件并进行显示，从而节省了针对不同类型的卡片单独设置所消耗的开发成本，提高了开发效率，使得前端组件部署更加简单。

3

CN 111061522 A

说　明　书

2/8页

附图说明

[0018]为了更清楚地说明本发明实施例的技术方案，下面将对实施例中所需要使用的附图作简单地介绍，应当理解，以下附图仅示出了本发明的某些实施例，因此不应被看作是对范围的限定，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他相关的附图。

[0019]图1(a)是本发明实施例一提供的基于后端生成前端卡片组件的方法流程图；[0020]图1(b)是本发明实施例一提供的子组件的显示示意图；[0021]图1(c)是本发明实施例一提供的前端与后端的交互时序图；

[0022]图2(a)是本发明实施例二提供的基于后端生成前端卡片组件的方法流程图；[0023]图2(b)是本发明实施例二提供的子组件的初始值更新原理示意图；

[0024]图3是本发明实施例三提供的基于后端生成前端卡片组件的装置结构示意图；[0025]图4是本发明实施例四提供的设备的结构示意图。

具体实施方式

[0026]下面结合附图和实施例对本发明作进一步的详细说明。可以理解的是，此处所描述的具体实施例仅仅用于解释本发明，而非对本发明的限定。另外还需要说明的是，为了便于描述，附图中仅示出了与本发明相关的部分而非全部结构。[0027]另外还需要说明的是，为了便于描述，附图中仅示出了与本发明相关的部分而非全部内容。在更加详细地讨论示例性实施例之前应当提到的是，一些示例性实施例被描述成作为流程图描绘的处理或方法。虽然流程图将各项操作(或步骤)描述成顺序的处理，但是其中的许多操作可以被并行地、并发地或者同时实施。此外，各项操作的顺序可以被重新安排。当其操作完成时所述处理可以被终止，但是还可以具有未包括在附图中的附加步骤。所述处理可以对应于方法、函数、规程、子例程、子程序等等。[0028]实施例一

[0029]图1(a)为本发明实施例一提供的基于后端生成前端卡片组件的方法，本实施例可适用于前端开发过程中组件生成的情况，该方法可以由本发明实施例中的基于后端生成前端卡片组件的装置来执行，该装置可以采用软件和/或硬件的方式实现。如图1(a)所示，该方法具体包括如下操作：[0030]步骤101，通过前端向后端发送请求信息。[0031]其中，请求信息包括：业务名称和卡片集名称，而后端通过代码或数据库的方式保存与业务名称和卡片集名称对应的卡片组件信息，并且本实施方式中后端根据请求信息向前端发送卡片组件信息。[0032]具体的说，请求信息具体可以采用如下形式进行表示：[0033]businessCode(string)：业务名称[0034]cardSetName(string):卡片集名称[0035]当然，本实施方式中仅是举例进行说明而并不限定业务名称和卡片集名称的具体类型，对于其它类型的业务名称和卡片集名称也是在本申请的保护范围内的，本申请实施方式中不再进行赘述。[0036]步骤102，前端根据卡片信息生成子组件。

4

CN 111061522 A[0037]

说　明　书

3/8页

可选的，卡片组件信息包括：卡片名称、组件类型和每个组件类型对应的初始值。

前端根据卡片组件信息生成子组件，包括：根据组件类型对应的初始值对每一个组件进行配置；根据配置结果获取子组件。[0038]可选的，组件的类型包括：单选组件、选择组件、输入框组件和按钮组件。[0039]可选的，卡片组件信息还包括：请求状态信息，前端根据卡片组件信息生成子组件之前，还可以包括：根据请求状态信息确定请求信息发送成功。[0040]具体的说，卡片组件信息具体可以采用如下形式进行表示：

[0041]

5

CN 111061522 A

说　明　书

4/8页

[0042]

其中，data(arrar)是需要返回的数据，并且为一个数组，表示需要在前端进行显

示的多个卡片，而针对每一个卡片分别配置有所对应的组件类型，组件类型具体可以包括单选组件radioComponent(arrar)，选择组件selectComponent(arrar)，输入框组件inputComponent(arrar)和按钮组件buttonComponent(arrar)，其中，请求参数初始值repParams(arrar)中具体包含每个类型的组件具体所配置的初始数值。当然，本实施方式中仅是举例进行说明，而并不限定每个组件类型的具体表达形式，对于其它形式的表达方式也是在本申请的保护范围之内的，本申请实施方式不再进行赘述。[0044]需要说明的是，卡片组件信息中的code(string):返回状态码，msg(string):返回消息表示请求状态信息，前端根据返回状态码或返回消息可以确定请求消息是否发送成功，并在确定发送成功的情况下，前端才会确定当前的卡片组件信息是正确的，并根据卡片组件信息生成子组件。[0045]需要说明的是，后端通过代码或数据库的方式提前将业务名称和卡片集名称与上述卡片组件信息进行绑定保存，当后端确定接收到包括业务名称和卡片集名称的请求信息后，会根据请求信息进行查询，从而获取到上述的卡片组件信息。[0046]其中，前端获取到上述示例的卡片组件后，会确定每一个卡片中所包含的组件类型，并根据组件类型中所对应的初始值对每一个组件进行配置，从而获得需要在页面上进行显示的每个卡片名称下的子组件。其中，本实施方式中的页面可以成为父组件，而所获得的子组件是包含在父组件之内的。[0047]步骤103，前端将子组件在预设模板中通过渲染的方式进行显示。[0048]可选的，前端将子组件在预设模板中通过渲染的方式进行显示，可以包括：确定子

6

[0043]

CN 111061522 A

说　明　书

5/8页

组件在预设模板中所对应的位置；将配置有初始值的子组件在位置上通过渲染的方式进行显示。

[0049]需要说明的是，本实施方式中的前端只需要提前通过代码编译一个预设模板，分别确定每一个卡片子组件在预设模板中所对应的位置，并将配置有初始值的子组件在确定的位置上通过渲染的方式进行显示，并且本实施方式中每个卡片根据组件类型的不同采用相同的预设模板进行渲染，从而减少了前端的开发成本，不需要针对不同的卡片编译不同的代码程序。

[0050]在一个具体实现中，如图1(b)所示，为经过渲染之后子组件的显示示意图，其中，前端页面根据卡片组件信息显示出两个卡片，分别为卡片1和卡片2，并且卡片1的第一行表示单选子组件1，供用户选择不同的场景，卡片1的第二行表示输入框子组件1，供用户进行信息的输入，卡片1的第三行表示按钮子组件1，供用户进行点击确定操作，同理，卡片2的第一行表示单选子组件2，卡片2的第二行表示输入框架子组件2，卡片2的第三行表示按钮子组件2。当然，本实施方式中仅是以页面中显示2个卡片，两个卡片包含相同类型的子组件为例进行的举例说明，但是本实施方式中并不限定页面中进行显示的卡片的具体数量，以及每一个卡片所包含的子组件的类型。[0051]其中，如图1(c)为本实施方式中的前端与后端的交互时序图，包括：[0052]步骤11：前端向后端发送请求信息。[0053]其中，在本实施方式中，前端的页面即父组件处于“created”的创建阶段时会发起ajax请求，并将请求信息通过后端的接口发送给后端。[0054]步骤12：后端根据请求信息进行查询获取卡片组件信息。[0055]其中，后端通过查询代码或数据库的方式，获取请求信息所对应的卡片组件信息。[0056]步骤13：后端将卡片组件信息发送给前端。[0057]步骤14，前端根据卡片组件信息生成子组件。[0058]步骤15：子组件在预设模板中通过渲染的方式进行显示。[0059]需要说明的是，本实施方式中前端可以采用v-for循环迭代的方式在预设模板中渲染子组件，而子组件可以根据卡片组件信息，通过v-if控制某个子组件是否展示，并且通过v-for迭代渲染出多个对应的前端卡片子组件，同时根据卡片组件信息中reqParams的值确定每个子组件的初始状态。

[0060]本发明实施例的技术方案，前端通过向后端发送请求信息获取后端提前所设置的卡片组件信息，并根据卡片组件信息生成对应的子组件并进行显示，从而节省了针对不同类型的卡片单独设置所消耗的开发成本，提高了开发效率，使得前端组件部署更加简单。[0061]实施例二

[0062]图2(a)为本发明实施例二提供的数据存储方法的流程图，本实施例以上述实施例为基础，在本实施例中，在前端将子组件咋预设模板中通过渲染的方式进行显示之后，还可以包括：在确定接收到用户针对子组件的操作后，获取操作所对应的数据信息，根据数据信息对子组件的初始值进行更新。相应的，本实施例的方法具体包括如下操作：[0063]步骤201，通过前端向后端发送请求信息。[00]步骤202，前端根据卡片信息生成子组件。[0065]步骤203，前端将子组件在预设模板中通过渲染的方式进行显示。

7

CN 111061522 A[0066]

说　明　书

6/8页

步骤204，在确定接收到用户针对子组件的操作后，获取操作所对应的数据信息。

[0067]具体的说，如图2(b)所示为本实施例子组件初始值更新原理示意图，其中卡片子组件渲染完成后，用户可以操作前端显示的卡片子组件，通过选择、输入或点击等操作，完成数据输入和对应卡片组件请求的发起。[0068]步骤205，根据数据信息对子组件的初始值进行更新。[0069]其中，图2(b)所示为用户进行选择和输入操作时，输入值实际通过卡片组件信息中索引index进行对应，其中，子组件radioComponentA位于radioComponent数组中index＝0的位置，因此其值在reqParams中的位置也位于radios中的index＝0的位置,从而建立了卡片组件信息与输入值的对应关系，使得卡片组件信息中字段与用户输入值进行关联，从而能够根据用户的操作实现对初始值的准确更新。[0070]实施例三

[0071]图3为本发明实施例三提供的一种基于后端生成前端卡片组件的装置结构示意图，该装置包括：请求信息发送模块301、子组件生成模块302和子组件显示模块303。[0072]其中，请求信息发送模块301，用于通过前端向后端发送请求信息，其中，后端根据请求信息向前端发送卡片组件信息；[0073]子组件生成模块302，用于前端根据卡片组件信息生成子组件；[0074]子组件显示模块303，用于前端将子组件在预设模板中通过渲染的方式进行显示。[0075]可选的，请求信息包括：业务名称和卡片集名称，其中，后端通过代码或数据库的方式保存与业务名称和卡片集名称对应的卡片组件信息。[0076]可选的，卡片组件信息包括：卡片名称、组件类型和每个组件类型对应的初始值；子组件生成模块302，具体用于：根据组件类型对应的初始值对每一个组件进行配置；根据配置结果获取子组件。[0077]可选的，组件类型包括：单选组件、选择组件、输入框组件和按钮组件。[0078]可选的，卡片组件信息还包括：请求状态信息，装置还包括请求信息发送确定模块，用于根据请求状态信息确定请求信息发送成功。[0079]可选的，子组件显示模块，具体用于：确定子组件在预设模板中所对应的位置；将配置有初始值的子组件在位置上通过渲染的方式进行显示。[0080]可选的，装置还包括：初始值更新模块，具体用于：在确定接收到用户针对子组件的操作后，获取操作所对应的数据信息；根据数据信息对子组件的初始值进行更新。

[0081]上述装置可执行本发明任意实施例所提供的基于后端生成前端卡片组件的装置，具备执行方法相应的功能模块和有益效果。未在本实施例中详尽描述的技术细节，可参见本发明任意实施例提供的方法。[0082]实施例四

[0083]图4是本发明实施例提供的一种设备的结构示意图。图4示出了适用于用来实现本发明实施方式的示例性设备412的框图。图4显示的设备412仅仅是一个示例，不应对本发明实施例的功能和使用范围带来任何。[0084]如图4所示，设备412以通用计算设备的形式出现。设备412的组件可以包括但不限于：一个或者多个处理器416，存储器428，连接不同系统组件(包括存储器428和处理器416)的总线418.

8

CN 111061522 A[0085]

说　明　书

7/8页

总线418表示几类总线结构中的一种或多种，包括存储器总线或者存储器控制器，

外围总线，图形加速端口，处理器或者使用多种总线结构中的任意总线结构的局域总线。举例来说，这些体系结构包括但不限于工业标准体系结构(ISA)总线，微通道体系结构(MAC)总线，增强型ISA总线、视频电子标准协会(VESA)局域总线以及外围组件互连(PCI)总线。[0086]设备412典型地包括多种计算机系统可读介质。这些介质可以是任何能够被设备412访问的可用介质，包括易失性和非易失性介质，可移动的和不可移动的介质。[0087]存储器428用于存储指令。存储器428可以包括易失性存储器形式的计算机系统可读介质，例如随机存取存储器(RAM)430和/或高速缓存存储器432。设备412可以进一步包括其它可移动/不可移动的、易失性/非易失性计算机系统存储介质。仅作为举例，存储系统434可以用于读写不可移动的、非易失性磁介质(图4未显示，通常称为“硬盘驱动器”)。尽管图4中未示出，可以提供用于对可移动非易失性磁盘(例如“软盘”)读写的磁盘驱动器，以及对可移动非易失性光盘(例如CD-ROM，DVD-ROM或者其它光介质)读写的光盘驱动器。在这些情况下，每个驱动器可以通过一个或者多个数据介质接口与总线418相连。存储器428可以包括至少一个程序产品，该程序产品具有一组(例如至少一个)程序模块，这些程序模块被配置以执行本发明各实施例的功能。

[0088]具有一组(至少一个)程序模块442的程序/实用工具440，可以存储在例如存储器428中，这样的程序模块442包括——但不限于——操作系统、一个或者多个应用程序、其它程序模块以及程序数据，这些示例中的每一个或某种组合中可能包括网络环境的实现。程序模块442通常执行本发明所描述的实施例中的功能和/或方法。[00]设备412也可以与一个或多个外部设备414(例如键盘、指向设备、显示器424等)通信，还可与一个或者多个使得用户能与该设备412交互的设备通信，和/或与使得该设备412能与一个或多个其它计算设备进行通信的任何设备(例如网卡，调制解调器等等)通信。这种通信可以通过输入/输出(I/O)接口422进行。并且，设备412还可以通过网络适配器420与一个或者多个网络(例如局域网(LAN)，广域网(WAN)和/或公共网络，例如因特网)通信。如图所示，网络适配器420通过总线418与设备412的其它模块通信。应当明白，尽管图4中未示出，可以结合设备412使用其它硬件和/或软件模块，包括但不限于：微代码、设备驱动器、冗余处理单元、外部磁盘驱动阵列、RAID系统、磁带驱动器以及数据备份存储系统等。[0090]处理器416通过运行存储在存储器428中的指令，从而执行各种功能应用以及数据处理，例如通过前端向后端发送请求信息，其中，后端根据请求信息向前端发送卡片组件信息；前端根据卡片组件信息生成子组件；前端将子组件在预设模板中通过渲染的方式进行显示。

[0091]实施例五

[0092]本发明实施例五提供了一种计算机可读存储介质，其上存储有计算机程序，该程序被处理器执行时实现如本申请所有发明实施例提供的基于后端生成前端卡片组件的方法：

[0093]通过前端向后端发送请求信息，其中，后端根据请求信息向前端发送卡片组件信息；

[0094]前端根据卡片组件信息生成子组件；

[0095]前端将子组件在预设模板中通过渲染的方式进行显示。

9

CN 111061522 A[0096]

说　明　书

8/8页

可以采用一个或多个计算机可读的介质的任意组合。计算机可读介质可以是计算

机可读信号介质或者计算机可读存储介质。计算机可读存储介质例如可以是——但不限于——电、磁、光、电磁、红外线、或半导体的系统、装置或器件，或者任意以上的组合。计算机可读存储介质的更具体的例子(非穷举的列表)包括：具有一个或多个导线的电连接、便携式计算机磁盘、硬盘、随机存取存储器(RAM)、只读存储器(ROM)、可擦式可编程只读存储器(EPROM或闪存)、光纤、便携式紧凑磁盘只读存储器(CD-ROM)、光存储器件、磁存储器件、或者上述的任意合适的组合。在本文件中，计算机可读存储介质可以是任何包含或存储程序的有形介质，该程序可以被指令执行系统、装置或者器件使用或者与其结合使用。

[0097]计算机可读的信号介质可以包括在基带中或者作为载波一部分传播的数据信号，其中承载了计算机可读的程序代码。这种传播的数据信号可以采用多种形式，包括——但不限于——电磁信号、光信号或上述的任意合适的组合。计算机可读的信号介质还可以是计算机可读存储介质以外的任何计算机可读介质，该计算机可读介质可以发送、传播或者传输用于由指令执行系统、装置或者器件使用或者与其结合使用的程序。[0098]计算机可读介质上包含的程序代码可以用任何适当的介质传输，包括——但不限于——无线、电线、光缆、RF等等，或者上述的任意合适的组合。

[0099]可以以一种或多种程序设计语言或其组合来编写用于执行本发明操作的计算机程序代码，所述程序设计语言包括面向对象的程序设计语言—诸如Java、Smalltalk、C++，还包括常规的过程式程序设计语言—诸如“C”语言或类似的程序设计语言。程序代码可以完全地在用户计算机上执行、部分地在用户计算机上执行、作为一个的软件包执行、部分在用户计算机上部分在远程计算机上执行、或者完全在远程计算机或服务器上执行。在涉及远程计算机的情形中，远程计算机可以通过任意种类的网络——包括局域网(LAN)或广域网(WAN)—连接到用户计算机，或者，可以连接到外部计算机(例如利用因特网服务提供商来通过因特网连接)。[0100]注意，上述仅为本发明的较佳实施例及所运用技术原理。本领域技术人员会理解，本发明不限于这里所述的特定实施例，对本领域技术人员来说能够进行各种明显的变化、重新调整和替代而不会脱离本发明的保护范围。因此，虽然通过以上实施例对本发明进行了较为详细的说明，但是本发明不仅仅限于以上实施例，在不脱离本发明构思的情况下，还可以包括更多其他等效实施例，而本发明的范围由所附的权利要求范围决定。

10

CN 111061522 A

说　明　书　附　图

1/5页

图1(a)

图1(b)

11

CN 111061522 A

说　明　书　附　图

2/5页

12

图1(c)

CN 111061522 A

说　明　书　附　图

3/5页

图2(a)

13

CN 111061522 A

说　明　书　附　图

4/5页

图2(b)

图3

14

CN 111061522 A

说　明　书　附　图

5/5页

图4

15