CN117591117A - 页面生成方法、系统、设备及存储介质 - Google Patents

Abstract

本申请公开了一种页面生成方法、系统、设备及存储介质，该方法通过先将感兴趣组件铺设在单据类型中，得到组件集合，实现了根据现有的系统条件满足用户的需要；进一步地，针对于用于的个性化需要，系统由于其本身容量等条件的限制无法一一提供，因此，提供构建自定义组件代码，将自定义组件代码与第一组件配置属性进行第二深度合并，得到目标组件配置，从而大大提高了目标组件配置与用户需要的适配程度，进而有效保证目标页面能够满足用户的个性化需要。

Description

页面生成方法、系统、设备及存储介质

技术领域

本发明涉及低代码平台开发技术领域，尤其涉及一种页面生成方法、系统、设备及存储介质。

背景技术

随着企业的数字化转型速度加快，基于低代码平台开发的方式得到了广泛的应用，开发者可视化搭建应用，通过界面完成页面的结构，快速高效，减少开发人员工作量。

然而，在实际开发的过程中，除了简单的通用场景，还有一些比较复杂的需求需要根据实际使用场景以及功能确定组件的配置。目前的组件配置，要么使用低代码开发平台所提供的组件配置接口，功能比较单一，不一定适配个性化功能；要么用户使用原生通用组件，覆盖低代码开发平台所提供的组件，耗时且繁琐，失去了使用低代码开发平台的意义。

因此，现有技术中在进行低代码开发的过程中，存在页面配置难以满足个性化需要的问题。

发明内容

有鉴于此，有必要提供一种页面生成方法、系统、设备及存储介质，用以解决现有技术中在进行低代码开发的过程中，存在的页面配置难以满足个性化需要的问题。

为了解决上述问题，本发明提供一种页面生成方法，包括：

获取单据类型，并选取感兴趣组件；

通过页面设计器将感兴趣组件铺设在单据类型中，得到组件集合；

获取单据类型的第一配置属性和感兴趣组件的第二配置属性，并对第一配置属性和第二配置属性进行第一深度合并，得到第一组件配置属性；

构建自定义组件代码；

将自定义组件代码与第一组件配置属性进行第二深度合并，得到目标组件配置；

根据组件集合和目标组件配置生成目标页面。

进一步地，对第一配置属性和第二配置属性进行第一深度合并，得到第一组件配置属性，包括：

对第一配置属性和第二配置属性的可枚举属性进行深度合并，得到第一组件配置属性。

进一步地，第一组件配置属性包括组件存储结构和组件配置对象；将自定义组件代码与第一组件配置属性进行第二深度合并，得到目标组件配置，包括：

通过自定义函数遍历组件存储结构的节点；节点包括钥匙属性、姓名属性和后代属性；

根据节点的钥匙属性确定节点在组件配置对象中对应的配置项；

根据深度合并函数将配置项与自定义组件代码进行合并，确定目标组件配置。

进一步地，根据深度合并函数将配置项与自定义组件代码进行合并，确定目标组件配置，包括：

获取配置项的第一值类型，和自定义组件代码的第二值类型；

根据第一值类型和第二值类型，确定合并策略；

根据合并策略将配置项与自定义组件代码进行合并，确定目标组件配置。

进一步地，合并策略包括递归合并策略、覆盖策略和拼接策略中的至少一种。

进一步地，根据第一值类型和第二值类型，确定合并策略，包括：

当第一值类型和第二值类型均为对象时，选择递归合并策略；

当第一值类型和第二值类型均为数组时，选择拼接策略；

否则，选择覆盖策略。

进一步地，第一值类型和第二值类型均分别包括对象、数组、字符串和数字中的至少一种。

为了解决上述问题，本发明还提供一种页面生成系统，包括：

感兴趣组件获取模块，用于获取单据类型，并选取感兴趣组件；

组件集合获取模块，用于通过页面设计器将感兴趣组件铺设在单据类型中，得到组件集合；

第一组件配置属性获取模块，用于获取单据类型的第一配置属性和感兴趣组件的第二配置属性，并对第一配置属性和第二配置属性进行第一深度合并，得到第一组件配置属性；

自定义组件代码构建模块，用于构建自定义组件代码；

目标组件配置确定模块，用于将自定义组件代码与第一组件配置属性进行第二深度合并，得到目标组件配置；

目标页面生成模块，用于根据组件集合和目标组件配置生成目标页面。

为了解决上述问题，本发明还提供一种页面生成设备，包括存储器和处理器，其中，

存储器，用于存储程序；

处理器，与存储器耦合，用于执行存储器中存储的程序，以实现如上文所述的页面生成方法中的步骤。

为了解决上述问题，本发明还提供一种计算机可读存储介质，用于存储计算机可读取的程序或指令，程序或指令被处理器执行时能够实现如上文所述的页面生成方法中的步骤。

采用上述实施例的有益效果是：本发明提供一种页面生成方法、系统、设备及存储介质，该方法通过先将感兴趣组件铺设在单据类型中，得到组件集合，实现了根据现有的系统条件满足用户的需要；进一步地，针对于用于的个性化需要，系统由于其本身容量等条件的限制无法一一提供，因此，提供构建自定义组件代码，将自定义组件代码与第一组件配置属性进行第二深度合并，得到目标组件配置，从而大大提高了目标组件配置与用户需要的适配程度，进而有效保证目标页面能够满足用户的个性化需要。

附图说明

图1为本发明提供的页面生成方法一实施例的流程示意图；

图2为本发明提供的页面生成方法一实施例的流程框架图；

图3为本发明提供的确定目标组件配置第一实施例的流程示意图；

图4为本发明提供的确定目标组件配置第二实施例的流程示意图；

图5为本发明提供的页面生成系统一实施例的结构框图；

图6为本发明提供的页面生成设备一实施例的结构框图。

具体实施方式

下面结合附图来具体描述本发明的优选实施例，其中，附图构成本申请一部分，并与本发明的实施例一起用于阐释本发明的原理，并非用于限定本发明的范围。

随着企业的数字化转型速度加快，基于低代码平台开发的方式得到了广泛的应用，开发者可视化搭建应用，通过界面完成页面的结构，快速高效，减少开发人员工作量。

然而，在实际开发的过程中，除了简单的通用场景，还有一些比较复杂的需求需要根据实际使用场景以及功能确定组件的配置。目前的组件配置，要么使用低代码开发平台所提供的组件配置接口，功能比较单一，不一定适配个性化功能；要么用户使用原生通用组件，覆盖低代码开发平台所提供的组件，耗时且繁琐，失去了使用低代码开发平台的意义。

因此，现有技术中在进行低代码开发的过程中，存在页面配置难以满足个性化需要的问题。

为了解决上述问题，本发明提供一种页面生成方法、系统、设备及存储介质，以下分别进行详细说明。

图1为本发明提供的页面生成方法一实施例的流程示意图，如图1所示，页面生成方法包括：

步骤S101：获取单据类型，并选取感兴趣组件；

步骤S102：通过页面设计器将感兴趣组件铺设在单据类型中，得到组件集合；

步骤S103：获取单据类型的第一配置属性和感兴趣组件的第二配置属性，并对第一配置属性和第二配置属性进行第一深度合并，得到第一组件配置属性；

步骤S104：构建自定义组件代码；

步骤S105：将自定义组件代码与第一组件配置属性进行第二深度合并，得到目标组件配置；

步骤S106：根据组件集合和目标组件配置生成目标页面。

本实施例中，首先，获取单据类型，并选取感兴趣组件；再通过页面设计器将感兴趣组件铺设在单据类型中，得到组件集合；其次，获取单据类型的第一配置属性和感兴趣组件的第二配置属性，并对第一配置属性和第二配置属性进行第一深度合并，得到第一组件配置属性；接下来，构建自定义组件代码；并将自定义组件代码与第一组件配置属性进行第二深度合并，得到目标组件配置；最后，根据组件集合和目标组件配置生成目标页面。

本实施例中，通过先将感兴趣组件铺设在单据类型中，得到组件集合，实现了根据现有的系统条件满足用户的需要；进一步地，针对于用于的个性化需要，系统由于其本身容量等条件的限制无法一一提供，因此，提供构建自定义组件代码，将自定义组件代码与第一组件配置属性进行第二深度合并，得到目标组件配置，从而大大提高了目标组件配置与用户需要的适配程度，进而有效保证目标页面能够满足用户的个性化需要。

在一具体实施例中，如图2所示，图2为本发明提供的页面生成方法一实施例的流程框架图。

作为优选的实施例，在步骤S101中，首先，获取单据类型，单据类型包括左树右卡、左树右表、档案列表、单据列表、单据卡片和空页面；然后，根据单据类型确定对应的控制器组件。

在一具体实施例中，基本的单据类型是在常用页面布局的基础上进行总结，用户根据页面设计选择单据类型，快速搭建页面模块框架，并生成基础的接口API。选定单据的同时，平台会生成对应的模板代码，里面会有基础组件配置。

在一具体实施例中，为了获取自定义组件，可以是根据预先设置好的指令去查找自定义组件，还可以是根据大数据统计，对用户习惯进行统计分析以确定可能的自定义组件，进而实现自动化调整更新。

感兴趣组件是指系统本身具备的，但是能够根据实际需要进行自主选择的组件。

在一具体实施例中，在步骤S102中，为了得到组件集合，在选定基础的单据类型后，可以通过外力人工将感兴趣组件拖拽到单据类型对应的页面上，并在页面的组件配置栏完成组件的界面化配置，从而得到组件集合。

需要说明的是，在用户设置配置的同时，中间画布区会实时显示用户配置后的组件样式，便于用户调试。

作为优选的实施例，在步骤S103中，为了得到第一组件配置属性，具体是通过对第一配置属性和第二配置属性的可枚举属性进行深度合并，得到第一组件配置属性。

在一具体实施例中，得到第一组件配置属性之后，低代码开发平台会自动生成一个页面源码和JSON文件。

其中，页面源码可直接粘贴复制到用户的前端代码中，作为React页面可直接显示。JSON文件分为uiTree和uiProps两部分，其中，uiTree为组件存储结构，采用树形结构存储，每一个节点对应一个组件，每个节点有三个属性：uiKey、name、children，分别对应组件唯一标识，组件名和组件的孩子组件。uiProps为组件配置对象，采用键值对的形式，以uiKey作为主键，分别存储每个组件的页面设计器配置，包括但不限于label、type、icon等。

作为优选的实施例，在步骤S104中，当系统本身的组件无法有效满足用户的个性化需要时，构建自定义组件代码对页面进行功能补充，具体的代码内容在此不作赘述。

作为优选的实施例，在步骤S105中，第一组件配置属性包括组件存储结构和组件配置对象；为了将自定义组件代码与第一组件配置属性进行第二深度合并，得到目标组件配置，如图3所示，图3为本发明提供的确定目标组件配置第一实施例的流程示意图，包括：

步骤S151：通过自定义函数遍历组件存储结构的节点；

步骤S152：根据节点的钥匙属性确定节点在组件配置对象中对应的配置项；

步骤S153：根据深度合并函数将配置项与自定义组件代码进行合并，确定目标组件配置。

本实施例中，首先，通过自定义函数遍历组件存储结构的节点；节点包括钥匙属性、姓名属性和后代属性；然后，根据节点的钥匙属性确定节点在组件配置对象中对应的配置项；最后，根据深度合并函数将配置项与自定义组件代码进行合并，确定目标组件配置。

本实施例中，通过遍历组件存储结构的节点，从而保证了每一个节点都能够在组件配置对象中找到配置项与其相匹配，再将配置项与自定义组件代码合并，有效充实了目标组件配置的功能完整性。

在一具体实施例中，自定义函数选取mergeCustomPropsIntoSchema，它的作用是遍历uiTree里的每一个节点，然后根据每一个节点的uiKey在uiProps找到对应的配置项后，使用深度合并函数深度合并到第一次合并得到的第一组件集合的props里，得到最终的组件配置。

公式表示为：props = deepMerge2(designProps, deepMerge1(controllerProps, userProps))。

通过上述顺序进行合并，由于页面设计器是一种可视化配置工具，可以让开发人员通过拖拽和配置属性等方式快速构建页面。用户自定义配置则是指用户根据自己的需求，对页面进行个性化配置和定制化。因此，这两个配置层级之间可能存在差异和冲突。

为了解决这个问题，低代码平台通常会将页面设计器配置和用户自定义配置先进行合并。这样，可以保留页面设计器的基本结构和布局，并允许用户自定义样式和行为等细节。这样做的好处是，用户可以在不影响页面整体结构和布局的情况下，进行个性化的修改和定制化。

接着，单据类型配置是针对表单、列表等具体页面的。由于单据类型配置是基于业务流程的需求进行的，因此它一般比页面设计器的配置更为详细和精细。将单据类型配置和前面的页面配置进行合并，可以保证在满足业务流程需求的同时，保留页面设计器和用户自定义配置的灵活性和可扩展性。这样，可以在不影响用户自定义配置和页面设计器配置的情况下，满足业务流程的需求。

作为优选的实施例，在步骤S153中，为了根据深度合并函数将配置项与设计组件进行合并，确定目标组件配置，如图4所示，图4为本发明提供的确定目标组件配置第二实施例的流程示意图，包括：

步骤S1531：获取配置项的第一值类型，和自定义组件代码的第二值类型；

步骤S1532：根据第一值类型和第二值类型，确定合并策略；

步骤S1533：根据合并策略将配置项与自定义组件代码进行合并，确定目标组件配置。

本实施例中，首先，获取配置项的第一值类型，和自定义组件代码的第二值类型；然后，根据第一值类型和第二值类型，确定合并策略；最后，根据合并策略将配置项与自定义组件代码进行合并，确定目标组件配置。

本实施例中，以第一值类型和第二值类型为基准，针对性确定合并策略，能够保证合并策略的可实现性，然后根据合并策略将配置项深度合并至第一组件集合，能够实现确定目标组件配置。

需要说明的是，第一值类型和第二值类型均分别包括对象、数组、字符串和数字中的至少一种。

合并策略包括递归合并、覆盖和拼接中的至少一种。

作为优选的实施例，在步骤S1532中，为了根据第一值类型和第二值类型，确定合并策略，具体地，当第一值类型和第二值类型均为对象时，选择递归合并策略；当第一值类型和第二值类型均为数组时，选择拼接策略；否则，选择覆盖策略。

深度合并函数（deepMerge函数）是一种用于合并两个或多个对象的方法，通常用于合并配置对象或数据对象。默认的合并策略是根据不同的值类型进行合并。在深度合并过程中，如果遇到两个属性的值都是对象，那么默认的合并策略是将它们递归合并。这意味着函数会递归地合并两个对象的属性，并将它们合并为一个新的对象。这样做可以有效地保留原始对象的结构，并确保所有的属性都能被合并。

然而，对于其他类型的值（如数组、字符串、数字等），默认的合并策略可能会有所不同。它可能是覆盖或者保留新的值，或者将它们合并成一个新的数组或字符串。这种默认的合并策略的设计是为了提供灵活性和通用性。不同的值在合并时可能需要不同的处理方式，以满足各种应用场景下的需求。

在一具体实施例中，根据第一值类型和第二值类型来确定不同的合并策略，可以使合并过程更加灵活和精确，具体地：

第一，对于基础类型的值，或者类型不同的值，直接覆盖；

例如：deepMerge([1,2], { 0： 3, 1： 4 }) =>{ 0： 3, 1： 4 }。

第二，对于数组，默认拼接；

例如：deepMerge([1,2], [3,4]) =>[1,2,3,4]。

第三，对于函数，默认覆盖。

通过上述方式，通过先将感兴趣组件铺设在单据类型中，得到组件集合，实现了根据现有的系统条件满足用户的需要；进一步地，针对于用于的个性化需要，系统由于其本身容量等条件的限制无法一一提供，因此，提供构建自定义组件代码，将自定义组件代码与第一组件配置属性进行第二深度合并，得到目标组件配置，从而大大提高了目标组件配置与用户需要的适配程度，进而有效保证目标页面能够满足用户的个性化需要。

为了解决上述问题，本发明还提供一种页面生成系统，如图5所示，图5为本发明提供的页面生成系统一实施例的结构框图，页面生成系统500包括：

感兴趣组件获取模块501，用于获取单据类型，并选取感兴趣组件；

组件集合获取模块502，用于通过页面设计器将感兴趣组件铺设在单据类型中，得到组件集合；

第一组件配置属性获取模块503，用于获取单据类型的第一配置属性和感兴趣组件的第二配置属性，并对第一配置属性和第二配置属性进行第一深度合并，得到第一组件配置属性；

自定义组件代码构建模块504，用于构建自定义组件代码；

目标组件配置确定模块505，用于将自定义组件代码与第一组件配置属性进行第二深度合并，得到目标组件配置；

目标页面生成模块506，用于根据组件集合和目标组件配置生成目标页面。

本发明还相应提供了一种页面生成设备，如图6所示，图6为本发明提供的页面生成设备一实施例的结构框图。页面生成设备600可以是移动终端、桌上型计算机、笔记本、掌上电脑及服务器等计算设备。页面生成设备600包括处理器601以及存储器602，其中，存储器602上存储有页面生成程序603。

存储器602在一些实施例中可以是计算机设备的内部存储单元，例如计算机设备的硬盘或内存。存储器602在另一些实施例中也可以是计算机设备的外部存储设备，例如计算机设备上配备的插接式硬盘，智能存储卡（Smart Media Card， SMC），安全数字（SecureDigital， SD）卡，闪存卡（Flash Card）等。进一步地，存储器602还可以既包括计算机设备的内部存储单元也包括外部存储设备。存储器602用于存储安装于计算机设备的应用软件及各类数据，例如安装计算机设备的程序代码等。存储器602还可以用于暂时的存储已经输出或者将要输出的数据。在一实施例中，页面生成程序603可被处理器601所执行，从而实现本发明各实施例的页面生成方法。

处理器601在一些实施例中可以是中央处理器（Central Processing Unit，CPU），微处理器或其他数据处理芯片，用于运行存储器602中存储的程序代码或处理数据，例如执行页面生成程序等。

本实施例还提供了一种计算机可读存储介质，其上存储有页面生成程序，计算机该程序被处理器执行时，实现如上述所述的页面生成方法。

为了解决上述问题，本发明还提供一种计算机程序产品，计算机程序产品被有形地存储在计算机可读介质上并且包括计算机可执行指令，计算机可执行指令在被执行时使至少一个处理器执行如上文所述的页面生成方法。

本领域普通技术人员可以理解实现上述实施例方法中的全部或部分流程，是可以通过计算机程序来指令相关的硬件来完成，所述的计算机程序可存储于一非易失性计算机可读取存储介质中，该计算机程序在执行时，可包括如上述各方法的实施例的流程。本申请所提供的各实施例中所使用的对存储器、存储、数据库或其他介质的任何引用，均可包括非易失性和/或易失性存储器。非易失性存储器可包括只读存储器（ROM）、可编程ROM（PROM）、电可编程ROM（EPROM）、电可擦除可编程ROM（EEPROM）或闪存。易失性存储器可包括随机存取存储器（RAM）或者外部高速缓冲存储器。作为说明而非局限，RAM以多种形式可得，诸如静态RAM（SRAM）、动态RAM（DRAM）、同步DRAM（SDRAM）、双数据率SDRAM（DDRSDRAM）、增强型SDRAM（ESDRAM）、同步链路（Synchlink） DRAM（SLDRAM）、存储器总线（Rambus）直接RAM（RDRAM）、直接存储器总线动态RAM（DRDRAM），以及存储器总线动态RAM（RDRAM）等。

以上所述，仅为本发明较佳的具体实施方式，但本发明的保护范围并不局限于此，任何熟悉本技术领域的技术人员在本发明揭露的技术范围内，可轻易想到的变化或替换，都应涵盖在本发明的保护范围之内。

Claims (10)

1.一种页面生成方法，其特征在于，包括：

获取单据类型，并选取感兴趣组件；

通过页面设计器将所述感兴趣组件铺设在所述单据类型中，得到组件集合；

获取所述单据类型的第一配置属性和所述感兴趣组件的第二配置属性，并对所述第一配置属性和所述第二配置属性进行第一深度合并，得到第一组件配置属性；

构建自定义组件代码；

将所述自定义组件代码与所述第一组件配置属性进行第二深度合并，得到目标组件配置；

根据所述组件集合和所述目标组件配置生成目标页面。

2.根据权利要求1所述的页面生成方法，其特征在于，所述对所述第一配置属性和所述第二配置属性进行第一深度合并，得到第一组件配置属性，包括：

对所述第一配置属性和所述第二配置属性的可枚举属性进行深度合并，得到第一组件配置属性。

3.根据权利要求1所述的页面生成方法，其特征在于，所述第一组件配置属性包括组件存储结构和组件配置对象；所述将所述自定义组件代码与所述第一组件配置属性进行第二深度合并，得到目标组件配置，包括：

通过自定义函数遍历所述组件存储结构的节点；所述节点包括钥匙属性、姓名属性和后代属性；

根据所述节点的所述钥匙属性确定所述节点在所述组件配置对象中对应的配置项；

根据深度合并函数将所述配置项与所述自定义组件代码进行合并，确定目标组件配置。

4.根据权利要求3所述的页面生成方法，其特征在于，所述根据深度合并函数将所述配置项与所述自定义组件代码进行合并，确定目标组件配置，包括：

获取所述配置项的第一值类型，和所述自定义组件代码的第二值类型；

根据所述第一值类型和所述第二值类型，确定合并策略；

根据所述合并策略将所述配置项与所述自定义组件代码进行合并，确定目标组件配置。

5.根据权利要求4所述的页面生成方法，其特征在于，所述合并策略包括递归合并策略、覆盖策略和拼接策略中的至少一种。

6.根据权利要求5所述的页面生成方法，其特征在于，所述根据所述第一值类型和所述第二值类型，确定合并策略，包括：

当所述第一值类型和所述第二值类型均为对象时，选择递归合并策略；

当所述第一值类型和所述第二值类型均为数组时，选择拼接策略；

否则，选择覆盖策略。

7.根据权利要求4所述的页面生成方法，其特征在于，所述第一值类型和所述第二值类型均分别包括对象、数组、字符串和数字中的至少一种。

8.一种页面生成系统，其特征在于，包括：

感兴趣组件获取模块，用于获取单据类型，并选取感兴趣组件；

组件集合获取模块，用于通过页面设计器将所述感兴趣组件铺设在所述单据类型中，得到组件集合；

第一组件配置属性获取模块，用于获取所述单据类型的第一配置属性和所述感兴趣组件的第二配置属性，并对所述第一配置属性和所述第二配置属性进行第一深度合并，得到第一组件配置属性；

自定义组件代码构建模块，用于构建自定义组件代码；

目标组件配置确定模块，用于将所述自定义组件代码与所述第一组件配置属性进行第二深度合并，得到目标组件配置；

目标页面生成模块，用于根据所述组件集合和所述目标组件配置生成目标页面。

9.一种页面生成设备，其特征在于，包括存储器和处理器，其中，

所述存储器，用于存储程序；

所述处理器，与所述存储器耦合，用于执行所述存储器中存储的所述程序，以实现上述权利要求1至7中任意一项所述的页面生成方法中的步骤。

10.一种计算机可读存储介质，其特征在于，用于存储计算机可读取的程序或指令，所述程序或指令被处理器执行时能够实现上述权利要求1至7中任意一项所述的页面生成方法中的步骤。