CN117406990B - 页面生成方法、装置、电子设备及计算机可读存储介质 - Google Patents
页面生成方法、装置、电子设备及计算机可读存储介质 Download PDFInfo
- Publication number
- CN117406990B CN117406990B CN202311714786.9A CN202311714786A CN117406990B CN 117406990 B CN117406990 B CN 117406990B CN 202311714786 A CN202311714786 A CN 202311714786A CN 117406990 B CN117406990 B CN 117406990B
- Authority
- CN
- China
- Prior art keywords
- module
- configuration information
- page
- data
- modules
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Active
Links
- 238000000034 method Methods 0.000 title claims abstract description 73
- 239000000463 material Substances 0.000 claims description 154
- 238000009877 rendering Methods 0.000 claims description 23
- 230000006870 function Effects 0.000 claims description 15
- 238000004590 computer program Methods 0.000 claims description 5
- 238000004806 packaging method and process Methods 0.000 claims description 5
- 230000008569 process Effects 0.000 description 21
- 238000011161 development Methods 0.000 description 12
- 238000010586 diagram Methods 0.000 description 11
- 238000012360 testing method Methods 0.000 description 7
- 230000003993 interaction Effects 0.000 description 5
- 238000004519 manufacturing process Methods 0.000 description 4
- 230000002093 peripheral effect Effects 0.000 description 4
- 238000012545 processing Methods 0.000 description 4
- 230000009471 action Effects 0.000 description 3
- 238000005516 engineering process Methods 0.000 description 3
- 230000002452 interceptive effect Effects 0.000 description 3
- 238000012986 modification Methods 0.000 description 2
- 230000004048 modification Effects 0.000 description 2
- 238000012544 monitoring process Methods 0.000 description 2
- 230000035515 penetration Effects 0.000 description 2
- 238000006467 substitution reaction Methods 0.000 description 2
- 238000003491 array Methods 0.000 description 1
- 238000013475 authorization Methods 0.000 description 1
- 230000005540 biological transmission Effects 0.000 description 1
- 238000004364 calculation method Methods 0.000 description 1
- 230000008859 change Effects 0.000 description 1
- 238000004891 communication Methods 0.000 description 1
- 238000013461 design Methods 0.000 description 1
- 230000006872 improvement Effects 0.000 description 1
- 239000004973 liquid crystal related substance Substances 0.000 description 1
- 230000007774 longterm Effects 0.000 description 1
- 238000012423 maintenance Methods 0.000 description 1
- 230000003287 optical effect Effects 0.000 description 1
- 238000005192 partition Methods 0.000 description 1
- 238000011160 research Methods 0.000 description 1
- 230000002441 reversible effect Effects 0.000 description 1
- 238000000638 solvent extraction Methods 0.000 description 1
- 230000001360 synchronised effect Effects 0.000 description 1
- 230000000007 visual effect Effects 0.000 description 1
- 238000012800 visualization Methods 0.000 description 1
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/38—Creation or generation of source code for implementing user interfaces
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/957—Browsing optimisation, e.g. caching or content distillation
- G06F16/9577—Optimising the visualization of content, e.g. distillation of HTML documents
-
- Y—GENERAL TAGGING OF NEW TECHNOLOGICAL DEVELOPMENTS; GENERAL TAGGING OF CROSS-SECTIONAL TECHNOLOGIES SPANNING OVER SEVERAL SECTIONS OF THE IPC; TECHNICAL SUBJECTS COVERED BY FORMER USPC CROSS-REFERENCE ART COLLECTIONS [XRACs] AND DIGESTS
- Y02—TECHNOLOGIES OR APPLICATIONS FOR MITIGATION OR ADAPTATION AGAINST CLIMATE CHANGE
- Y02D—CLIMATE CHANGE MITIGATION TECHNOLOGIES IN INFORMATION AND COMMUNICATION TECHNOLOGIES [ICT], I.E. INFORMATION AND COMMUNICATION TECHNOLOGIES AIMING AT THE REDUCTION OF THEIR OWN ENERGY USE
- Y02D10/00—Energy efficient computing, e.g. low power processors, power management or thermal management
Landscapes
- Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- General Engineering & Computer Science (AREA)
- Software Systems (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Databases & Information Systems (AREA)
- Human Computer Interaction (AREA)
- Data Mining & Analysis (AREA)
- Document Processing Apparatus (AREA)
- Stored Programmes (AREA)
Abstract
本申请提供了一种页面生成方法、装置、电子设备及计算机可读存储介质，其中，该方法包括：通过微前端架构将页面模板划分为一个或多个模块，每个模块独立配置；根据获取到的各个模块的配置信息配置对应的模块，配置信息为低代码信息；根据配置后的模块生成目标页面。本申请通过微前端架构将页面模板划分为多个可以独立配置的模块，在配置目标页面时，可以分别对多个模块同时配置，各个模块之间的配置和发布互不影响，对于大型多团队协作项目也能支持，提高了该页面生成方式的应用场景，同时还可以提高页面生成的效率。
Description
技术领域
本申请涉及计算机技术领域，具体而言，涉及一种页面生成方法、装置、电子设备及计算机可读存储介质。
背景技术
随着计算机业务的发展，一些项目的核心页面变得越来越复杂，其功能也越来越丰富，需要的代码也会越来越多，面对一个庞大的复杂页面，大量的代码挤在一起，众多复杂的逻辑相互交织，开发和维护都变得愈发困难。
在相关技术中，低代码平台对于大多数简单的业务场景能够应对自如，目前市面上的低代码平台种类繁多，通常它们的实现是将底层架构、页面元素高度抽象化为可视化界面，通过组件、业务模板、拖拽式设计快速构建应用。
但是，目前的低代码的开发方法还存在多团队在开发时会相互影响，开发难度大，效率低的问题，不利于多团队协作项目的开发。
发明内容
有鉴于此，本申请实施例的目的在于提供一种页面生成方法、装置、电子设备及计算机可读存储介质，能够支持多团队协作项目，同时提高页面生成的效率。
第一方面，本申请实施例提供了一种页面生成方法，包括：通过微前端架构将页面模板划分为一个或多个模块，每个模块独立配置；根据获取到的各个模块的配置信息配置对应的模块，所述配置信息为低代码信息或无代码信息；根据配置后的模块生成目标页面。
在上述实现过程中，通过微前端架构将页面模板划分为多个可以独立配置的模块，在配置目标页面时，可以分别对多个模块同时配置，各个模块之间的配置和发布互不影响，对于大型多团队协作项目也能支持，提高了该页面生成方式的应用场景，同时还可以提高页面生成的效率。
在一个实施例中，所述根据获取到的各个模块的配置信息配置对应的模块之前，所述方法还包括：获取数据域的物料数据，所述物料数据包括物料对应的低代码，所述数据域包括全局域、服务域和组件域，所述全局域嵌套所述组件域和/或其他服务域，所述服务域嵌套所述组件域和/或所述服务域；将所述物料数据封装到相应的组件中，以完成所述页面模板对应数据域的配置。
在上述实现过程中，通过将物料数据以数据域的方式进行配置，且将不同物料数据封装在不同组件中，通过组件将各个物料数据隔离开来，当物料数据需要进行交互，组件之间可以通过数据流的方式交互，进而可以支持配置交互复杂的界面，增加应用场景。
在一个实施例中，所述根据获取到的各个模块的配置信息配置对应的模块，包括：根据获取到的配置信息匹配所述数据域中的组件；将匹配到的组件配置到相应模块；通过所述微前端架构集成配置后的模块。
在上述实现过程中，由于提前配置好了数据域，在对模块进行配置时，业务人员只需要输入对应配置信息就可以匹配到对应的组件，这些组件是用于配置模块的数据信息代码的，进而完成模块代码的配置。对于业务人员来说，仅需要输入配置信息就可以直接实现模块的配置，减少了模块配置需要的代码的填写，降低了对业务人员的编程能力要求，同时降低了业务人员在进行模块配置时的难度。另外，在生成目标页面之间，先将多个模块集成在一起，进而可以得到完整的页面配置，提高页面生成的准确性。
在一个实施例中，所述根据获取到的配置信息匹配所述数据域中的组件，包括：从所述配置信息所在的当前数据域开始，逐层向外查找所述配置信息对应的组件，直到查找到所述配置信息对应的组件。
在上述实现过程中，通过设置逐层查找方式，优先查找配置信息所在的当前数据域，在当前数据域没有匹配到对应的组件时，再进一步向外逐层查找。通过这种一层层查找的方式可以减少查找时，数据匹配的物料数据的量，提高模块匹配效率。
在一个实施例中，所述组件包括第一组件和第二组件，所述配置信息包括第一配置信息和第二配置信息，所述第一配置信息对应的物料数据在所述第一组件中，所述第一配置信息和所述第二配置信息关联，所述根据获取到的各个模块的配置信息配置对应的模块，包括：将第一组件中所述第一配置信息对应的物料数据通过渗透参数功能传递到所述全局域；所述物料数据从所述全局域流入其他数据域，所述第二组件配置为监听所述第一配置信息对应的物料数据；若所述第二组件监听到所述数据，所述第二组件对监听到的物料数据进行渲染，所述第二配置信息对应的物料数据封装在所述第二组件中。
在上述实现过程中，通过渗透参数功能，可以形成数据流，该数据流策略可以使得各个组件之间相互交互，进而可以实现对复杂页面的配置，增加可配置页面的场景。
在一个实施例中，所述根据配置后的模块生成目标页面，包括：判断待渲染物料数据是否为模块物料，所述待渲染物料数据为所述页面模板中配置的物料数据；若所述物料数据不是模块物料，将所述物料数据渲染成物料HTML元素；将所述物料HTML元素插入所述页面模板的页面文档流；若所述页面模板中的物料数据未渲染完成，则继续判断下一待渲染物料数据是否为模块物料，直到所述页面模板中的物料数据均渲染完成。
在上述实现过程中，在对页面模板中的物料数据进行渲染时，对于模块物料可以先将模块物料单独渲染后，再通过非模块物料的渲染方式进行渲染，直到页面模板中所有的物料数据均渲染完，实现页面模板中各类物料数据的交互渲染，提高目标页面的完整性和准确性。
在一个实施例中，所述根据配置后的模块生成所述目标页面之后，所述方法还包括：将所述目标页面中的所有模块通过平铺方式在画布上展示。
在上述实现过程中，通过平铺方式将目标页面中的所有模块在画布上展示，可以使得目标页面中的所有模块均能直观的展示，降低部分模块被遗忘的风险。另外，由于所有模块均在画布上展示，没有了隐藏模块，进而不需要再另外调用某些模块，使用者可以根据实际情况直接选择性的操作这些模块，减少了使用者的操作流程，降低了页面操作复杂度。
第二方面，本申请实施例还提供一种页面生成装置，包括：划分模块，用于通过微前端架构将页面模板划分为一个或多个模块，每个模块独立配置；配置模块，用于根据获取到的各个模块的配置信息配置对应的模块，所述配置信息为低代码信息或无代码信息；生成模块，用于根据配置后的模块生成目标页面。
第三方面，本申请实施例还提供一种电子设备，包括：处理器、存储器，所述存储器存储有所述处理器可执行的机器可读指令，当电子设备运行时，所述机器可读指令被所述处理器执行时执行上述第一方面，或第一方面的任一种可能的实施方式中的方法的步骤。
第四方面，本申请实施例还提供一种计算机可读存储介质，该计算机可读存储介质上存储有计算机程序，该计算机程序被处理器运行时执行上述第一方面，或第一方面的任一种可能的实施方式中页面生成方法的步骤。
为使本申请的上述目的、特征和优点能更明显易懂，下文特举实施例，并配合所附附图，作详细说明如下。
附图说明
为了更清楚地说明本申请实施例的技术方案，下面将对实施例中所需要使用的附图作简单地介绍，应当理解，以下附图仅示出了本申请的某些实施例，因此不应被看作是对范围的限定，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他相关的附图。
图1为本申请实施例提供的页面生成方法的流程图；
图2为本申请实施例提供的数据域设置方式示意图；
图3为本申请实施例提供的组件中物料数据交互示意图；
图4为本申请实施例提供的物料数据渲染流程图；
图5为本申请实施例提供的页面生成装置的功能模块示意图；
图6为本申请实施例提供的电子设备的方框示意图。
具体实施方式
下面将结合本申请实施例中附图，对本申请实施例中的技术方案进行描述。
应注意到：相似的标号和字母在下面的附图中表示类似项，因此，一旦某一项在一个附图中被定义，则在随后的附图中不需要对其进行进一步定义和解释。同时，在本申请的描述中，术语“第一”、“第二”等仅用于区分描述，而不能理解为指示或暗示相对重要性。
随着互联网的发展，富客户端应用网页变得越来越普及，市场对前端开发工程师效率要求越来越高，而低代码或无代码的工具可以以非编码的技术生成页面，很大程度提高工程师的效率及产出。低代码或无代码技术目前仍在发展阶段，现阶段常见的低代码或无代码工具是通过拖拽物料的方式生成网页，数据通过后端接口获取。
本申请发明人经长期研究发现，现有的低代码或无代码工具在开发一个项目时，多团队在开发时会相互影响，需要彼此配合，开发难度大，效率低，尤其不利于大型多团队的项目的开发。
有鉴于此，本申请提出一种页面生成方法，通过微前端架构将页面模板划分为多个可以独立配置的模块，在配置目标页面时，可以分别对多个模块同时配置，各个模块之间的配置和发布互不影响，对于大型多团队协作项目也能支持，提高了该页面生成方式的应用场景，同时还可以提高页面生成的效率。
请参阅图1，是本申请实施例提供的页面生成方法的流程图。下面将对图1所示的具体流程进行详细阐述。
步骤201，通过微前端架构将页面模板划分为一个或多个模块。
这里的微前端架构可以用于将一个庞大的前端应用拆分为多个独立灵活的小型应用，再将这些小型应用联合为一个完整的应用。其中，每个应用都可以独立开发、独立运行、独立部署。
上述的页面模板为待生成的目标页面的模板。该页面模板可以提前存储在页面创建工具中，在创建目标页面时，业务人员选择的目标页面对应的模板。该页面模板也可以在每次创建目标页面时，由开发人员新建的目标页面对应的模板。该页面模板的确定方式可以根据实际情况选择，本申请不做具体限制。
可选地，该页面模板可以包括多种类型。例如，页面整体模板、模块模板等。该页面模板包括的类型可以根据实际情况选择，本申请不做具体限制。
其中，每个模块独立配置。
在一些实施例中，每个模块可以分别由不同团队或人员配置，该页面模板中的多个模块可以由多个团队或人员同时配置，每个团队或人员分别配置该团队或人员对应的模块。
示例性地，通过微前端架构将页面模板划分为3个模块，分别为模块A、模块B和模块C，人员A用于配置模块A，人员B用于配置模块B，人员C用于配置模块C。在对该页面模板进行配置时，在同一时间，人员A、人员B和人员C同时分别对模块A、模块B和模块C进行配置。
应理解，这里的模块是对页面模板的架构进行划分得到的，每个模块中包含有该模块对应的基础架构。在对这些模块进行配置时，可以在模块的基础架构的基础上再配置对应的数据，以完成模块的配置。步骤202，根据获取到的各个模块的配置信息配置对应的模块。
这里的配置信息为低代码信息或无代码信息。该配置信息可以包括接口配置信息、物料配置信息等。该配置信息的具体内容可以根据实际情况选择，本申请不做具体限制。
步骤203，根据配置后的模块生成目标页面。
可以理解地，各个模块配置完成后，还可以通过微前端架构再将多个模块联合在一起，形成完整的页面配置。在一些实施例中，在配置好页面模板中所有的模块后，可以通过渲染引擎将这些模块以及模块中配置的配置数据进行渲染，得到目标页面。
这里的渲染引擎是一种将HTML、CSS和JavaScript等内容转化为可视化的页面。
在一种实施例中，目标页面上设置的模块数量可以根据实际情况进行调整，且在确定目标页面的所有模板后，目标页面中的各个模板的排列顺序可以根据实际情况进行调整，本申请对目标页面中的模块数量和排列顺序不做具体限制。
在上述实现过程中，通过微前端架构将页面模板划分为多个可以独立配置的模块，在配置目标页面时，可以分别对多个模块同时配置，各个模块之间的配置和发布互不影响，对于大型多团队协作项目也能支持，提高了该页面生成方式的应用场景，同时还可以提高页面生成的效率。
在一种可能的实现方式中，步骤202之前，该方法还包括：获取数据域的物料数据；将物料数据封装到相应的组件中，以完成页面模板对应数据域的配置。
其中，如图2所示，数据域包括全局域、服务域和组件域。该全局域嵌套组件域和/或服务域，服务域嵌套组件域和/或其他服务域。
这里的全局域通常设置为一个，该全局域中可以嵌套部分组件域和部分服务域，该全局域中也可以全部嵌套组件域，该全局域中还可以全部嵌套服务域等。该全局域中嵌套的内容可以根据实际情况进行调整，本申请不做具体限制。
上述的服务域可以设置一个或多个，每个服务域中可以嵌套部分组件域和部分其他服务域，每个服务域中还可以全部嵌套组件域，每个服务域中也可以全部嵌套其他服务域等。该服务域的数量和嵌套的内容可以根据实际情况进行调整，本申请不做具体限制。
可选地，组件域也可以设置一个或多个，该组件域中可以嵌套一个或多个组件。该组件域的数量和嵌套的组件数量可以根据实际情况进行调整，本申请不做具体限制。
应理解，在一些情况下，组件也可以直接嵌套在全局域和/或服务域中，每个组件中可以封装一个或多个物料数据。这里的各个组件内的物料数据可以相互共享。该组件可以包括一个或多个，组件的设置数量和嵌套位置可以根据实际情况选择，本申请不做具体限制。
上述的物料数据包括物料对应的低代码，该物料数据可以由创建表单模板的开发人员在创建表单模板时输入，也可以由业务人员在选择对应的表单模板后输入等，该物料数据的获取可以根据实际情况选择，本申请不做具体限制。
在一种实施例中，各个页面模板可以对应不同的数据域。
可以理解地，业务人员在配置模块的配置信息时，可以通过该页面模板对应的数据域中的组件进行配置。
在上述实现过程中，通过将物料数据以数据域的方式进行配置，且将不同物料数据封装在不同组件中，通过组件将各个物料数据隔离开来，当物料数据需要进行交互，组件之间可以通过数据流的方式交互，进而可以支持配置交互复杂的界面，增加应用场景。
在一种可能的实现方式中，步骤202，包括：根据获取到的配置信息匹配数据域中的组件；将匹配到的组件配置到相应模块；通过微前端架构集成配置后的模块。
其中，配置信息可以包括一个或多个。例如，该配置信息包括第一配置信息和第二配置信息共两个配置信息。该第一配置信息对应的物料数据在第一组件中，第二配置信息对应的物料数据在第二组件中。且第一配置信息和第二配置信息关联。
应理解，数据域中封装的是页面模板对应数据的代码，在对每个模块进行配置时，根据获取到的配置信息在该数据域中匹配该配置信息对应的组件。在匹配到对应的组件后，将该组件配置到相应模块，以完成模块的配置。
可以理解地，由于模块是经页面模板划分后得到的，而各个模块是相互独立配置、发布的。因而，在生成目标页面之前，可以通过微前端架构先将多个模块集成在一起，进而形成完整的页面配置。
在上述实现过程中，由于提前配置好了数据域，在对模块进行配置时，业务人员只需要输入对应配置信息就可以匹配到对应的组件，这些组件是用于配置模块的数据信息代码的，进而完成模块代码的配置。对于业务人员来说，仅需要输入配置信息就可以直接实现模块的配置，减少了模块配置需要的代码的填写，降低了对业务人员的编程能力要求，同时降低了业务人员在进行模块配置时的难度。另外，在生成目标页面之间，先将多个模块集成在一起，进而可以得到完整的页面配置，提高页面生成的准确性。
在一种可能的实现方式中，根据获取到的配置信息匹配数据域中的组件，包括：从配置信息所在的当前数据域开始，逐层向外查找配置信息对应的组件，直到查找到配置信息对应的组件。
可以理解地，若配置信息所在的当前数据域匹配到对应的组件，则不再向其他数据域查找。若配置信息所在的当前数据域没有匹配到对应的组件，则需要向其他数据域继续查找配置信息对应的组件。
在向其他数据域中查找配置信息对应的组件时，如图2所示，若当前数据域为组件域1。若该组件域1没有匹配到该配置信息对应的组件，则可以继续向外扩展，即在组件域1所在的服务域1中查找配置信息对应的组件。若该服务域1没有匹配到该配置信息对应的组件，则还可以继续向外扩展，即在服务域1所在的服务域2中查找配置信息对应的组件。若该服务域2没有匹配到该配置信息对应的组件，则还可以继续向外扩展，即在服务域2所在的全局域中查找配置信息对应的组件，直到查找到该配置信息对应的组件。
在上述实现过程中，通过设置逐层查找方式，优先查找配置信息所在的当前数据域，在当前数据域没有匹配到对应的组件时，再进一步向外逐层查找。通过这种一层层查找的方式可以减少查找时，数据匹配的物料数据的量，提高模块匹配效率。
在一种可能的实现方式中，步骤202，包括：将第一组件中第一配置信息对应的物料数据通过渗透参数功能传递到全局域；物料数据从全局域流入其他数据域；若第二组件监听到物料数据，第二组件对监听到的物料数据进行渲染。
其中，组件可以包括第一组件和第二组件。该第二组件配置为监听第一配置信息对应的物料数据，第二配置信息对应的物料数据封装在第二组件中。
应理解，全局域设置有渗透参数功能，当配置信息为多个，且多个配置信息之间需要进行交互。即在将每个配置信息匹配到对应的组件后，通过渗透参数功能将组件中的物料数据流入组件所在的全局域，并流向其他数据域中。
这里的组件设置有监听功能，每个组件配置为监听一种或多种物料数据。如图3所示，当第一配置信息对应的物料数据流入其他数据域时，监听该物料数据的第二组件在监听到该物料数据的变化信息后，会获取该物料数据。
在第二组件监听到第一配置信息对应的物料数据后，该第二组件可以对监听到的物料数据和封装在该第二组件内的物料数据重新动态渲染，形成新的第二组件。该新的第二组件为上述配置信息对应的组件。
在上述实现过程中，通过渗透参数功能，可以形成数据流，该数据流策略可以使得各个组件之间相互交互，进而可以实现对复杂页面的配置，增加可配置页面的场景。
在一种可能的实现方式中，步骤203，包括：判断待渲染物料数据是否为模块物料，待渲染物料数据为页面模板中配置的物料数据；若物料数据不是模块物料，将物料数据渲染成物料HTML元素；将物料HTML元素插入页面模板的页面文档流；若页面模板中的物料数据未渲染完成，则继续判断下一待渲染物料数据是否为模块物料，直到页面模板中的物料数据均渲染完成。
应理解，配置后的模块中包括一个或多个组件，每个组件中封装有物料数据。在通过配置后的模块生成目标页面时，需要对各个页面模板中配置的物料数据均进行渲染。
这里的待渲染物料数据即为配置后的页面模板中的各个物料数据。
如图4所示，在进行物料渲染时，对于每个待渲染物料，当待渲染物料为模块物料，则可以直接对该模块物料直接进行渲染后，再对模块内的物料进行渲染。若待渲染物料不是模块物料，则可以先将该物料数据渲染成物料HTML元素，并将物料HTML元素插入页面模板的页面文档流，以完成该待渲染物料的渲染，直到页面模板中配置的所有物料数据均渲染完。当页面模板中配置的所有物料数据均渲染完成，就可以生成相应的目标页面。
在一种实施例中，在对页面进行渲染时，还可以实时监听当前页面的数据，进行实现对页面的动态渲染。
在上述实现过程中，在对页面模板中的物料数据进行渲染时，对于模块物料可以先将模块物料单独渲染后，再通过非模块物料的渲染方式进行渲染，直到页面模板中所有的物料数据均渲染完，实现页面模板中各类物料数据的交互渲染，提高目标页面的完整性和准确性。
在一种可能的实现方式中，步骤203之后，该方法还包括：将目标页面中的所有模块通过平铺方式在画布上展示。
这里的所有模块可以包括常规的隐藏模块。例如，弹出框、可选功能框等。
应理解，通常情况下，类似于弹出框这种类型的不可直接展示的物料的模块，一般是隐藏在画布之外，或者不设置这些模块显示区域。在需要使用这些模块时，需要进行一定的操作，才能将这些模块在画布上进行展示，这种方式易造成遗忘、操作复杂等问题的发生。通过设置将该目标页面的所有模块均以平铺方式在画布上展示，可以使得目标页面中的所有模块均能直观的展示，降低了被遗忘的风险，另外，使用者可以根据实际情况选择性的操作这些模块，减少了使用者的操作流程，降低了页面操作复杂度。
为了进一步理解本申请技术方案，下面以一具体实施例，进一步展示目标页面的生成和发布的整体实现过程：
在测试环境新建目标页面的页面模板，对页面模板上的各个模块进行配置，包括配置物料数据、配置接口等，并将配置好的页面模板在测试环境发布。在测试环境中发布后会生成一条测试页面链接，该页面链接可用于测试。同时，可以将测试环境中的页面模板的配置信息同步到生产环境，并在生产环境发布，并生成生产页面链接。其中，测试环境中可以新建、修改以及配置页面模板。生产环境中不能新建、修改以及配置页面模板，生产环境需要单独授权。
在上述实现过程中，通过平铺方式将目标页面中的所有模块在画布上展示，可以使得目标页面中的所有模块均能直观的展示，降低部分模块被遗忘的风险。另外，由于所有模块均在画布上展示，没有了隐藏模块，进而不需要再另外调用某些模块，使用者可以根据实际情况直接选择性的操作这些模块，减少了使用者的操作流程，降低了页面操作复杂度。
基于同一申请构思，本申请实施例中还提供了与页面生成方法对应的页面生成装置，由于本申请实施例中的装置解决问题的原理与前述的页面生成方法实施例相似，因此本实施例中的装置的实施可以参见上述方法的实施例中的描述，重复之处不再赘述。
请参阅图5，是本申请实施例提供的页面生成装置的功能模块示意图。本实施例中的页面生成装置中的各个模块用于执行上述方法实施例中的各个步骤。页面生成装置包括划分模块301、配置模块302、生成模块303；其中，
划分模块301用于通过微前端架构将页面模板划分为一个或多个模块，每个模块独立配置。
配置模块302用于根据获取到的各个模块的配置信息配置对应的模块，所述配置信息为低代码信息或无代码信息。
生成模块303用于根据配置后的模块生成目标页面。
一种可能的实施方式中，该页面生成装置还包括存储模块，用于获取数据域的物料数据，所述物料数据包括物料对应的低代码，所述数据域包括全局域、服务域和组件域，所述全局域嵌套所述组件域和/或所述服务域，所述服务域嵌套所述组件域和/或其他服务域；将所述物料数据封装到相应的组件中，以完成所述页面模板对应数据域的配置。
一种可能的实施方式中，配置模块302，具体用于：根据获取到的配置信息匹配所述数据域中的组件；将匹配到的组件配置到相应模块；通过所述微前端架构集成配置后的模块。
一种可能的实施方式中，配置模块302，具体用于：从所述配置信息所在的当前数据域开始，逐层向外查找所述配置信息对应的组件，直到查找到所述配置信息对应的组件。
一种可能的实施方式中，配置模块302，具体用于：将第一组件中所述第一配置信息对应的物料数据通过渗透参数功能传递到所述全局域；所述物料数据从所述全局域流入其他数据域，所述其中组件中的第二组件配置为监听所述第一配置信息对应的物料数据；若所述第二组件监听到所述物料数据，所述第二组件对监听到的物料数据进行渲染，所述第二配置信息对应的物料数据封装在所述第二组件中。
一种可能的实施方式中，生成模块303，具体用于：判断待渲染物料数据是否为模块物料，所述待渲染物料数据为所述页面模板中配置的物料数据；若所述物料数据不是模块物料，将所述物料数据渲染成物料HTML元素；将所述物料HTML元素插入所述页面模板的页面文档流；若所述页面模板中的物料数据未渲染完成，则继续判断下一待渲染物料数据是否为模块物料，直到所述页面模板中的物料数据均渲染完成。
一种可能的实施方式中，该页面生成装置还包括展示模块，用于：将所述目标页面中的所有模块通过平铺方式在画布上展示。
为便于对本实施例进行理解，下面对执行本申请实施例所公开的页面生成方法的电子设备进行详细介绍。
如图6所示，是电子设备的方框示意图。电子设备100可以包括存储器111、存储控制器112、处理器113、外设接口114、输入输出单元115、显示单元116。本领域普通技术人员可以理解，图6所示的结构仅为示意，其并不对电子设备100的结构造成限定。例如，电子设备100还可包括比图6中所示更多或者更少的组件，或者具有与图6所示不同的配置。
上述的存储器111、存储控制器112、处理器113、外设接口114、输入输出单元115及显示单元116各元件相互之间直接或间接地电性连接，以实现数据的传输或交互。例如，这些元件相互之间可通过一条或多条通讯总线或信号线实现电性连接。上述的处理器113用于执行存储器中存储的可执行模块。
其中，存储器111可以是，但不限于，随机存取存储器（Random Access Memory，简称RAM），只读存储器（Read Only Memory，简称ROM），可编程只读存储器（ProgrammableRead-Only Memory，简称PROM），可擦除只读存储器（Erasable Programmable Read-OnlyMemory，简称EPROM），电可擦除只读存储器（Electric Erasable Programmable Read-OnlyMemory，简称EEPROM）等。其中，存储器111用于存储程序，所述处理器113在接收到执行指令后，执行所述程序，本申请实施例任一实施例揭示的过程定义的电子设备100所执行的方法可以应用于处理器113中，或者由处理器113实现。
上述的处理器113可能是一种集成电路芯片，具有信号的处理能力。上述的处理器113可以是通用处理器，包括中央处理器(Central Processing Unit，简称CPU)、网络处理器(Network Processor，简称NP)等；还可以是数字信号处理器(digital signalprocessor，简称DSP)、专用集成电路(Application Specific Integrated Circuit，简称ASIC)、现场可编程门阵列(FPGA)或者其他可编程逻辑器件、分立门或者晶体管逻辑器件、分立硬件组件。可以实现或者执行本申请实施例中的公开的各方法、步骤及逻辑框图。通用处理器可以是微处理器或者该处理器也可以是任何常规的处理器等。
上述的外设接口114将各种输入/输出装置耦合至处理器113以及存储器111。在一些实施例中，外设接口114，处理器113以及存储控制器112可以在单个芯片中实现。在其他一些实例中，他们可以分别由独立的芯片实现。
上述的输入输出单元115用于提供给用户输入数据。所述输入输出单元115可以是，但不限于，鼠标和键盘等。
上述的显示单元116在电子设备100与用户之间提供一个交互界面（例如用户操作界面）或用于显示图像数据给用户参考。在本实施例中，所述显示单元可以是液晶显示器或触控显示器。若为触控显示器，其可为支持单点和多点触控操作的电容式触控屏或电阻式触控屏等。支持单点和多点触控操作是指触控显示器能感应到来自该触控显示器上一个或多个位置处同时产生的触控操作，并将该感应到的触控操作交由处理器进行计算和处理。
本实施例中的电子设备100可以用于执行本申请实施例提供的各个方法中的各个步骤。
此外，本申请实施例还提供一种计算机可读存储介质，该计算机可读存储介质上存储有计算机程序，该计算机程序被处理器运行时执行上述方法实施例中所述的页面生成方法的步骤。
本申请实施例所提供的页面生成方法的计算机程序产品，包括存储了程序代码的计算机可读存储介质，所述程序代码包括的指令可用于执行上述方法实施例中所述的页面生成方法的步骤，具体可参见上述方法实施例，在此不再赘述。
在本申请所提供的几个实施例中，应该理解到，所揭露的装置和方法，也可以通过其它的方式实现。以上所描述的装置实施例仅仅是示意性的，例如，附图中的流程图和框图显示了根据本申请的多个实施例的装置、方法和计算机程序产品的可能实现的体系架构、功能和操作。在这点上，流程图或框图中的每个方框可以代表一个模块、程序段或代码的一部分，所述模块、程序段或代码的一部分包含一个或多个用于实现规定的逻辑功能的可执行指令。也应当注意，在有些作为替换的实现方式中，方框中所标注的功能也可以以不同于附图中所标注的顺序发生。例如，两个连续的方框实际上可以基本并行地执行，它们有时也可以按相反的顺序执行，这依所涉及的功能而定。也要注意的是，框图和/或流程图中的每个方框、以及框图和/或流程图中的方框的组合，可以用执行规定的功能或动作的专用的基于硬件的系统来实现，或者可以用专用硬件与计算机指令的组合来实现。
另外，在本申请各个实施例中的各功能模块可以集成在一起形成一个独立的部分，也可以是各个模块单独存在，也可以两个或两个以上模块集成形成一个独立的部分。
所述功能如果以软件功能模块的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可读取存储介质中。基于这样的理解，本申请的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质中，包括若干指令用以使得一台计算机设备（可以是个人计算机，服务器，或者网络设备等）执行本申请各个实施例所述方法的全部或部分步骤。而前述的存储介质包括：U盘、移动硬盘、只读存储器（ROM，Read-Only Memory）、随机存取存储器（RAM，Random Access Memory）、磁碟或者光盘等各种可以存储程序代码的介质。需要说明的是，在本文中，诸如第一和第二等之类的关系术语仅仅用来将一个实体或者操作与另一个实体或操作区分开来，而不一定要求或者暗示这些实体或操作之间存在任何这种实际的关系或者顺序。而且，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括……”限定的要素，并不排除在包括所述要素的过程、方法、物品或者设备中还存在另外的相同要素。
以上所述仅为本申请的优选实施例而已，并不用于限制本申请，对于本领域的技术人员来说，本申请可以有各种更改和变化。凡在本申请的精神和原则之内，所作的任何修改、等同替换、改进等，均应包含在本申请的保护范围之内。应注意到：相似的标号和字母在下面的附图中表示类似项，因此，一旦某一项在一个附图中被定义，则在随后的附图中不需要对其进行进一步定义和解释。
以上所述，仅为本申请的具体实施方式，但本申请的保护范围并不局限于此，任何熟悉本技术领域的技术人员在本申请揭露的技术范围内，可轻易想到变化或替换，都应涵盖在本申请的保护范围之内。因此，本申请的保护范围应以权利要求的保护范围为准。
Claims (9)
1.一种页面生成方法，其特征在于，包括：
获取数据域的物料数据，所述数据域中封装有页面模板对应数据的代码；
将所述物料数据封装到相应的组件中，以完成所述页面模板对应数据域的配置；
通过微前端架构将所述页面模板的架构划分为一个或多个模块，每个模块独立配置，每个所述模块通过对应的团队或人员配置，每个所述模块中包括有对应的基础架构；
根据获取到的各个模块的配置信息配置对应的模块，所述配置信息为低代码信息或无代码信息；
根据配置后的模块生成目标页面；
所述根据获取到的各个模块的配置信息配置对应的模块，包括：
根据获取到的配置信息匹配所述数据域中的组件；
将匹配到的组件配置到相应模块；
通过所述微前端架构集成配置后的模块。
2.根据权利要求1所述的方法，其特征在于，所述物料数据包括物料对应的低代码，所述数据域包括全局域、服务域和组件域，所述全局域嵌套所述组件域和/或所述服务域，所述服务域嵌套所述组件域和/或其他服务域。
3.根据权利要求2所述的方法，其特征在于，所述根据获取到的配置信息匹配所述数据域中的组件，包括：
从所述配置信息所在的当前数据域开始，逐层向外查找所述配置信息对应的组件，直到查找到所述配置信息对应的组件。
4.根据权利要求2所述的方法，其特征在于，所述组件包括第一组件和第二组件，所述配置信息包括第一配置信息和第二配置信息，所述第一配置信息对应的物料数据在所述第一组件中，所述第一配置信息和所述第二配置信息关联，所述根据获取到的各个模块的配置信息配置对应的模块，包括：
将第一组件中所述第一配置信息对应的物料数据通过渗透参数功能传递到所述全局域；
所述物料数据从所述全局域流入其他数据域，所述第二组件配置为监听所述第一配置信息对应的物料数据；
若所述第二组件监听到所述物料数据，所述第二组件对监听到的物料数据进行渲染，所述第二配置信息对应的物料数据封装在所述第二组件中。
5.根据权利要求2所述的方法，其特征在于，所述根据配置后的模块生成目标页面，包括：
判断待渲染物料数据是否为模块物料，所述待渲染物料数据为所述页面模板中配置的物料数据；
若所述物料数据不是模块物料，将所述物料数据渲染成物料HTML元素；
将所述物料HTML元素插入所述页面模板的页面文档流；
若所述页面模板中的物料数据未渲染完成，则继续判断下一待渲染物料数据是否为模块物料，直到所述页面模板中的物料数据均渲染完成。
6.根据权利要求1所述的方法，其特征在于，所述根据配置后的模块生成所述目标页面之后，所述方法还包括：
将所述目标页面中的所有模块通过平铺方式在画布上展示。
7.一种页面生成装置，其特征在于，包括：
存储模块，用于获取数据域的物料数据，所述数据域中封装有页面模板对应数据的代码；将所述物料数据封装到相应的组件中，以完成所述页面模板对应数据域的配置；
划分模块，用于通过微前端架构将所述页面模板的架构划分为一个或多个模块，每个模块独立配置，每个所述模块通过对应的团队或人员配置，每个所述模块中包括有对应的基础架构；
配置模块，用于根据获取到的各个模块的配置信息配置对应的模块，所述配置信息为低代码信息或无代码信息；
生成模块，用于根据配置后的模块生成目标页面；
所述配置模块，还用于根据获取到的配置信息匹配所述数据域中的组件；将匹配到的组件配置到相应模块；通过所述微前端架构集成配置后的模块。
8.一种电子设备，其特征在于，包括：处理器、存储器，所述存储器存储有所述处理器可执行的机器可读指令，当电子设备运行时，所述机器可读指令被所述处理器执行时执行如权利要求1至6任一所述的方法的步骤。
9.一种计算机可读存储介质，其特征在于，该计算机可读存储介质上存储有计算机程序，该计算机程序被处理器运行时执行如权利要求1至6任一所述的方法的步骤。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202311714786.9A CN117406990B (zh) | 2023-12-14 | 2023-12-14 | 页面生成方法、装置、电子设备及计算机可读存储介质 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202311714786.9A CN117406990B (zh) | 2023-12-14 | 2023-12-14 | 页面生成方法、装置、电子设备及计算机可读存储介质 |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN117406990A CN117406990A (zh) | 2024-01-16 |
| CN117406990B true CN117406990B (zh) | 2024-02-27 |
Family
ID=89494721
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202311714786.9A Active CN117406990B (zh) | 2023-12-14 | 2023-12-14 | 页面生成方法、装置、电子设备及计算机可读存储介质 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN117406990B (zh) |
Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN105069164A (zh) * | 2015-08-27 | 2015-11-18 | 上海斐讯数据通信技术有限公司 | 数据加载的优化方法、系统及数据库和页面数据加载系统 |
| CN107958016A (zh) * | 2017-10-16 | 2018-04-24 | 平安科技（深圳）有限公司 | 功能页面定制方法及应用服务器 |
| CN108846087A (zh) * | 2018-06-12 | 2018-11-20 | 恒生电子股份有限公司 | 一种页面渲染方法、装置、终端及服务器 |
| CN113590103A (zh) * | 2020-04-30 | 2021-11-02 | 深圳中砼物联网科技有限公司 | 实现图形化无代码开发用户界面的方法、计算机设备、存储介质 |
Family Cites Families (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| KR20100075786A (ko) * | 2010-05-19 | 2010-07-05 | 세창인스트루먼트(주) | 웹사이트 영역취합시스템 및 그 방법 |
-
2023
- 2023-12-14 CN CN202311714786.9A patent/CN117406990B/zh active Active
Patent Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN105069164A (zh) * | 2015-08-27 | 2015-11-18 | 上海斐讯数据通信技术有限公司 | 数据加载的优化方法、系统及数据库和页面数据加载系统 |
| CN107958016A (zh) * | 2017-10-16 | 2018-04-24 | 平安科技（深圳）有限公司 | 功能页面定制方法及应用服务器 |
| CN108846087A (zh) * | 2018-06-12 | 2018-11-20 | 恒生电子股份有限公司 | 一种页面渲染方法、装置、终端及服务器 |
| CN113590103A (zh) * | 2020-04-30 | 2021-11-02 | 深圳中砼物联网科技有限公司 | 实现图形化无代码开发用户界面的方法、计算机设备、存储介质 |
Also Published As
| Publication number | Publication date |
|---|---|
| CN117406990A (zh) | 2024-01-16 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| US9471211B2 (en) | Chaining applications | |
| CN108984172B (zh) | 一种界面文件的生成方法及装置 | |
| US9575950B2 (en) | Systems and methods for managing spreadsheet models | |
| Rufiange et al. | Treematrix: A hybrid visualization of compound graphs | |
| US20160313874A1 (en) | Visual effects system for "big data" analysis workflow editors, distribution platforms, execution engines, and management systems comprising same | |
| Ono et al. | Cytoscape tools for the web age: D3. js and Cytoscape. js exporters | |
| US20130097592A1 (en) | User selected flow graph modification | |
| Seider et al. | Visualizing modules and dependencies of OSGi-based applications | |
| CN109716294B (zh) | 具有可移动迷你标签的用户界面 | |
| CN109885301B (zh) | 一种可缩放矢量图形的生成方法、装置、存储介质和设备 | |
| CN113900636A (zh) | 一种自助化渠道业务流程开发系统及其开发方法 | |
| Cleary et al. | Workspace: A workflow platform for supporting development and deployment of modelling and simulation | |
| JP6631527B2 (ja) | 情報処理装置、情報処理方法、及び、プログラム | |
| Khan et al. | Rapid development of a data visualization service in an emergency response | |
| JP2008242873A (ja) | ソフトウェア自動構成装置及び方法 | |
| CN117406990B (zh) | 页面生成方法、装置、电子设备及计算机可读存储介质 | |
| US11061664B2 (en) | Code management system and code management method | |
| US8533616B2 (en) | Time support for service adaptation | |
| CN116069303A (zh) | 一种代码生成方法、装置、设备及存储介质 | |
| CN111158684B (zh) | 系统创建方法、装置、电子设备及可读存储介质 | |
| CN116257236A (zh) | 页面生成方法、装置、设备及介质 | |
| Exman | Linear software models are theoretical standards of modularity | |
| CN116521285A (zh) | 应用程序的试用方法、装置、电子设备及存储介质 | |
| US20210124768A1 (en) | Methods and systems for visual management of relational data | |
| US11222076B2 (en) | Data set state visualization comparison lock |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| GR01 | Patent grant | ||
| GR01 | Patent grant | ||
| TR01 | Transfer of patent right | ||
| TR01 | Transfer of patent right |
Effective date of registration: 20240710 Address after: 200333, Room 306, Building 26, Lane 879, Zhongjiang Road, Putuo District, Shanghai Patentee after: Shanghai shouqianba Internet Technology Co.,Ltd. Country or region after: China Address before: Room 2072, Building 1, No. 89 Shuanggao Road, Economic Development Zone, Gaochun District, Nanjing City, Jiangsu Province, 211300 Patentee before: Nanjing Yanli Technology Co.,Ltd. Country or region before: China Patentee before: Shanghai shouqianba Internet Technology Co.,Ltd. |