CN114860240A - 一种低代码页面创建方法、装置、设备及介质 - Google Patents

一种低代码页面创建方法、装置、设备及介质 Download PDF

Info

Publication number
CN114860240A
CN114860240A CN202210576247.2A CN202210576247A CN114860240A CN 114860240 A CN114860240 A CN 114860240A CN 202210576247 A CN202210576247 A CN 202210576247A CN 114860240 A CN114860240 A CN 114860240A
Authority
CN
China
Prior art keywords
application
sub
code
page
low
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.)
Pending
Application number
CN202210576247.2A
Other languages
English (en)
Inventor
胡晶
程从业
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
DBAPPSecurity Co Ltd
Original Assignee
DBAPPSecurity Co Ltd
Priority date (The priority date 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 date listed.)
Filing date
Publication date
Application filed by DBAPPSecurity Co Ltd filed Critical DBAPPSecurity Co Ltd
Priority to CN202210576247.2A priority Critical patent/CN114860240A/zh
Publication of CN114860240A publication Critical patent/CN114860240A/zh
Pending legal-status Critical Current

Links

Images

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
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0484—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range
    • G06F3/0486—Drag-and-drop
    • 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/34—Graphical or visual programming

Landscapes

  • Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • General Engineering & Computer Science (AREA)
  • Software Systems (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • Human Computer Interaction (AREA)
  • Databases & Information Systems (AREA)
  • Data Mining & Analysis (AREA)
  • Information Transfer Between Computers (AREA)

Abstract

本申请公开了一种低代码页面创建方法、装置、设备及介质，涉及前端开发技术领域，包括：通过低代码平台中的微前端基座分别加载对页面设计器中的组件仓库和配置模块进行注册后得到的第一子应用和对页面设计器中的渲染模块进行注册后得到的第二子应用；当监测到需要创建目标框架的web应用时，通过第二子应用加载与目标框架相关的前置依赖，并获取拖拽到页面设计器的画布中的目标组件，并将其元信息发送至第二子应用中的渲染模块；利用渲染模块对元信息解析后得到的代码下载地址和属性JSON文件对目标组件进行渲染和属性配置，得到web应用页面。本申请通过微前端来渲染低代码页面，能够将渲染模块与低代码平台完全隔离，并实现不同技术栈的应用开发。

Description

一种低代码页面创建方法、装置、设备及介质
技术领域
本申请涉及前端开发技术领域，特别涉及一种低代码页面创建方法、装置、设备及介质。
背景技术
随着计算机技术的蓬勃发展，浏览器的功能越来越强大，许多常见的软件都在逐步的迁移到浏览器当中，并以网站(即web应用)的形式供用户使用，这样以来，用户便不用下载安装软件只需在浏览器中输入一个地址就可以使用软件功能了。
web应用开发的基础是JavaScript(一种解释型脚本语言)语言、HTML(Hyper TextMarkup Language，超文本标记语言)语言和CSS(Cascading Style Sheets，层叠样式表)语言等语言，web应用的开发和其他软件开发一样都是以编码的形式完成的，然而随着前端开发技术的不断发展，企业对降本增效的需求越来越迫切，目前出现了通过低代码(LowCode)平台完成web应用开发的方案，该方案能够使非专业开发人员也能快速完成web应用的开发。
然而，基于前端技术开发的低代码平台本质上也是一个web应用，不可避免的会使用到一些前端框架或者库，如react(用于构建用户界面的JavaScript库)、Vue(一套构建用户界面的渐进式框架)、Angular(一个前端JavaScript框架)、Element-Ui(一个为Vue而生的UI库)等，基于低代码平台设计开发web应用时，在编辑和预览状态下，因为页面设计器中的画布在渲染页面时没有与低代码平台隔离(主要是JavaScript代码、CSS代码的隔离)，从而导致web应用和低代码平台之间的代码、样式相互污染、干扰，进而出现意想不到的漏洞，使得web应用在编辑状态和实际运行状态表现不一致，严重的甚至会因为组件存在漏洞导致整个低代码平台出现漏洞。
目前实现低代码平台中的画布和低代码平台隔离的主流方案是通过iframe(一种HTML标签)，然而iframe隔离过于严重，通信和资源共享方面都不十分适合，如路由状态易丢失，刷新一下iframe的URL(Uniform Resource Locator，统一资源定位符)状态就丢失了、DOM(Document Object Model，文档对象模型)割裂严重，弹窗只能在iframe内部展示，无法覆盖全局、通信非常困难，只能通过PostMessage(Windows应用程序接口中的一个常用函数)传递序列化的消息、白屏时间太长，对于SPA(Single-Page Application，单页应用)应用来说无法接受等。
因此，如何在渲染页面时，将页面设计器中的画布与低代码平台隔离，避免web应用代码和低代码平台代码的相互污染和干扰是本行业目前迫切需要解决的问题。
发明内容
有鉴于此，本申请的目的在于提供一种低代码页面创建方法、装置、设备及介质，能够将页面设计器中的渲染模块与低代码平台完全隔离，实现不同技术栈的应用开发。其具体方案如下：
第一方面，本申请公开了一种低代码页面创建方法，包括：
通过低代码平台中的微前端基座加载第一子应用；所述微前端基座为基于所述低代码平台中除页面设计器外的剩余组件构建的基座，所述第一子应用为通过所述微前端基座对所述页面设计器中的组件仓库和配置模块进行注册后得到的子应用；
在所述低代码平台的应用编辑界面上通过所述微前端基座加载第二子应用，并在隔离环境中运行所述第二子应用的代码；所述第二子应用为对所述页面设计器中的渲染模块进行注册后得到的子应用；
当监测到需要创建目标框架的web应用时，通过所述第一子应用告知所述第二子应用加载与所述目标框架相关的前置依赖，然后获取通过用户拖拽方式从所述组建仓库拖拽到所述页面设计器的画布中的目标组件，并将所述目标组件的元信息发送至所述第二子应用中的所述渲染模块；
利用所述渲染模块对所述元信息解析后得到的所述目标组件的代码下载地址和所述目标组件的属性JSON文件对所述目标组件进行渲染和属性配置，以得到相应的web应用页面。
可选的，所述在隔离环境中运行所述第二子应用的代码，包括：
为所述第二子应用创建JavaScript沙箱，注册与所述页面设计器之间的通信监听，装载层叠样式表，并利用所述层叠样式表渲染所述第二子应用的界面；
在所述JavaScript沙箱中运行所述第二子应用的代码。
可选的，所述利用所述渲染模块对所述元信息解析后得到的所述目标组件的代码下载地址和所述目标组件的属性JSON文件对所述目标组件进行渲染和属性配置，以得到相应的web应用页面之后，还包括：
保存所述web应用页面，退出所述页面设计器；
通过所述微前端基座监测到待卸载的所述第二子应用，执行删除所述目标组件，还原所述JavaScript沙箱至初始状态，卸载所述渲染模块中的DOM节点，并删除所述层叠样式表的操作。
可选的，所述获取通过用户拖拽方式从所述组建仓库拖拽到所述页面设计器的画布中的目标组件，并将所述目标组件的元信息发送至所述第二子应用中的所述渲染模块，包括：
获取通过用户拖拽方式从所述组建仓库拖拽到所述页面设计器的画布中的目标组件和对应的位置，并将所述目标组件的元信息和所述位置发送至所述渲染模块。
可选的，所述利用所述渲染模块对所述元信息解析后得到的所述目标组件的代码下载地址和所述目标组件的属性JSON文件对所述目标组件进行渲染和属性配置，以得到相应的web应用页面，包括：
通过所述渲染模块解析所述元信息，得到所述目标组件的代码下载地址和所述目标组件的属性JSON文件；
根据所述代码下载地址从远端服务器中获取所述目标组件的代码，并利用所述目标组件的代码对位于所述位置处的所述目标组件进行渲染；
将所述属性JSON文件发送至所述配置模块，以便所述配置模块利用所述属性JSON文件对所述目标组件进行属性配置，得到相应的web应用页面。
可选的，所述低代码页面创建方法，还包括：
通过所述微前端基座建立的通信总线实现所述低代码平台和所述渲染模块以及所述第一子应用和所述第二子应用之间的通信。
可选的，所述当监测到需要创建目标框架的web应用时，通过所述第一子应用告知所述第二子应用加载与所述目标框架相关的前置依赖，包括：
当监测到需要创建VUE框架的web应用时，通过所述第一子应用告知所述第二子应用加载与所述VUE框架相关的前置依赖。
第二方面，本申请公开了一种低代码页面创建装置，包括：
第一子应用加载模块，用于通过低代码平台中的微前端基座加载第一子应用；所述微前端基座为基于所述低代码平台中除页面设计器外的剩余组件构建的基座，所述第一子应用为通过所述微前端基座对所述页面设计器中的组件仓库和配置模块进行注册后得到的子应用；
第二子应用加载模块，用于在所述低代码平台的应用编辑界面上通过所述微前端基座加载第二子应用，并在隔离环境中运行所述第二子应用的代码；所述第二子应用为对所述页面设计器中的渲染模块进行注册后得到的子应用；
前置依赖加载模块，用于当监测到需要创建目标框架的web应用时，通过所述第一子应用告知所述第二子应用加载与所述目标框架相关的前置依赖；
目标组件获取模块，用于获取通过用户拖拽方式从所述组建仓库拖拽到所述页面设计器的画布中的目标组件，并将所述目标组件的元信息发送至所述第二子应用中的所述渲染模块；
页面创建模块，用于利用所述渲染模块对所述元信息解析后得到的所述目标组件的代码下载地址和所述目标组件的属性JSON文件对所述目标组件进行渲染和属性配置，以得到相应的web应用页面。
第三方面，本申请公开了一种电子设备，包括处理器和存储器；其中，所述处理器执行所述存储器中保存的计算机程序时实现前述的低代码页面创建方法。
第四方面，本申请公开了一种计算机可读存储介质，用于存储计算机程序；其中，所述计算机程序被处理器执行时实现前述的低代码页面创建方法。
可见，本申请先通过低代码平台中的微前端基座加载第一子应用；所述微前端基座为基于所述低代码平台中除页面设计器外的剩余组件构建的基座，所述第一子应用为通过所述微前端基座对所述页面设计器中的组件仓库和配置模块进行注册后得到的子应用，然后在所述低代码平台的应用编辑界面上通过所述微前端基座加载第二子应用，并在隔离环境中运行所述第二子应用的代码；所述第二子应用为对所述页面设计器中的渲染模块进行注册后得到的子应用，当监测到需要创建目标框架的web应用时，通过所述第一子应用告知所述第二子应用加载与所述目标框架相关的前置依赖，然后获取通过用户拖拽方式从所述组建仓库拖拽到所述页面设计器的画布中的目标组件，并将所述目标组件的元信息发送至所述第二子应用中的所述渲染模块，最后利用所述渲染模块对所述元信息解析后得到的所述目标组件的代码下载地址和所述目标组件的属性JSON文件对所述目标组件进行渲染和属性配置，以得到相应的web应用页面。本申请通过微前端来渲染低代码页面，能够将页面设计器中的渲染模块与低代码平台完全隔离，即将web应用代码和低代码平台代码完全隔离，不会对低代码平台造成代码污染和安全威胁，并且，通过微前端将页面设计器中的渲染模块独立成应用，可实现一套低代码平台开发多种技术生态的web应用。
附图说明
为了更清楚地说明本申请实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本申请的实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据提供的附图获得其他的附图。
图1为本申请公开的一种低代码页面创建方法流程图；
图2为本申请公开的一种具体的低代码页面创建方法流程图；
图3为本申请公开的一种低代码页面创建装置结构示意图；
图4为本申请公开的一种电子设备结构图。
具体实施方式
下面将结合本申请实施例中的附图，对本申请实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本申请一部分实施例，而不是全部的实施例。基于本申请中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本申请保护的范围。
本申请实施例公开了一种低代码页面创建方法，参见图1所示，该方法包括：
步骤S11：通过低代码平台中的微前端基座加载第一子应用；所述微前端基座为基于所述低代码平台中除页面设计器外的剩余组件构建的基座，所述第一子应用为通过所述微前端基座对所述页面设计器中的组件仓库和配置模块进行注册后得到的子应用。
本实施例中，先将整个低代码平台分为三个部分，具体包括：微前端基座、第一子应用和第二子应用。其中，所述微前端基座的获取过程是基于上述低代码平台中除页面设计器外的剩余组件构建的基座，所述剩余组件包括但不限于数据管理模块、应用管理模块、逻辑编排模块、出码模块等；所述第一子应用的获取过程是通过上述微前端基座对上述页面设计器中的组件仓库和配置模块进行注册后得到的子应用。在获取到所述微前端基座和所述第一子应用之后，先通过所述微前端基座加载所述第一子应用。
步骤S12：在所述低代码平台的应用编辑界面上通过所述微前端基座加载第二子应用，并在隔离环境中运行所述第二子应用的代码；所述第二子应用为对所述页面设计器中的渲染模块进行注册后得到的子应用。
本实施例中，通过低代码平台中的微前端基座加载第一子应用之后，可以通过用户点击等方式进入到上述低代码平台的应用编辑界面，此时会展示所述页面设计器，并且，所述微前端基座会通过页面路由检测到需要加载的第二子应用，然后通过所述微前端基座加载上述第二子应用，并在隔离环境中运行上述第二子应用的代码；其中，所述第二子应用的获取过程是通过对上述页面设计器中的渲染模块进行注册后得到的子应用。
本实施例中，所述低代码页面创建方法，具体还包括：通过所述微前端基座建立的通信总线实现所述低代码平台和所述渲染模块以及所述第一子应用和所述第二子应用之间的通信。也即，本实施例中所述微前端基座需要预先建立通信总线，通过所述通信总线即可以实现所述低代码平台和所述渲染模块，即所述第一子应用，之间的通信，还可以实现所述第一子应用和所述第二子应用之间的通信，即子应用之间的通信。所述低代码平台和所述渲染模块通过所述通信总线可以互相调用接口，完成页面数据的同步。
在另一种具体的实施方式中，还可以通过浏览器提供的接口，如window.postMessage，实现所述低代码平台和所述渲染模块之间的数据交互。
步骤S13：当监测到需要创建目标框架的web应用时，通过所述第一子应用告知所述第二子应用加载与所述目标框架相关的前置依赖，然后获取通过用户拖拽方式从所述组建仓库拖拽到所述页面设计器的画布中的目标组件，并将所述目标组件的元信息发送至所述第二子应用中的所述渲染模块。
本实施例中，当监测到需要创建针对目标框架的web应用时，上述第一子应用可以通过所述微前端基座和所述页面设计器之间预先建立的通信监听告知上述第二子应用加载与上述目标框架相关的前置依赖，即所述目标框架的代码，然后所述第二子应用加载与上述目标框架相关的前置依赖，此时环境准备完毕。接着可以通过用户拖拽的方式获取从上述组建仓库拖拽到上述页面设计器的画布中的目标组件，然后将上述目标组件的元信息发送到上述第二子应用中的所述渲染模块中。其中，所述目标框架包括但不限于Vue、react、Angular等。
步骤S14：利用所述渲染模块对所述元信息解析后得到的所述目标组件的代码下载地址和所述目标组件的属性JSON文件对所述目标组件进行渲染和属性配置，以得到相应的web应用页面。
本实施例中，将所述目标组件的元信息发送至所述第二子应用中的所述渲染模块之后，先利用上述渲染模块对上述元信息进行解析，得到所述目标组件的代码下载地址和所述目标组件的属性JSON文件，然后通过上述代码下载地址从远端的服务器上获取到上述目标组件的代码，通过上述目标组件的代码可以对上述目标组件进行渲染，渲染完成后可以通过上述通信监听告知所述配置模块需要渲染属性配置界面，然后将上述目标组件的属性JSON文件发送至所述配置模块，所述配置模块利用上述目标组件的属性JSON文件可以对上述目标组件的属性进行配置，所述配置模块属性配置完毕后可以得到新的属性JSON文件，然后通过上述通信监听将上述新的属性JSON文件返回至上述渲染模块，并利用上述新的属性JSON文件对所述渲染模块进行更新，进一步的，当监测到用户通过点击等方式选中了上述渲染模块中的某个组件时，该组件会被激活，所述渲染模块获取到上述被激活组件的属性JSON文件，然后将其同步至所述配置模块，所述配置模块利用所述被激活组件的属性JSON文件对所述被激活组件的属性进行配置，并在配置完成后将产生的新属性JSON文件返回至所述渲染模块，并利用上述新属性JSON文件对所述渲染模块进行更新，得到相应的web应用页面。
进一步的，在得到上述web应用页面之后，可以保存上述web应用页面，然后退出所述页面设计器，再通过所述微前端基座监测到待卸载的所述第二子应用，并执行删除上述目标组件，还原上述隔离环境至初始状态，卸载上述渲染模块中的DOM节点等操作。
可见，本申请实施例先通过低代码平台中的微前端基座加载第一子应用；所述微前端基座为基于所述低代码平台中除页面设计器外的剩余组件构建的基座，所述第一子应用为通过所述微前端基座对所述页面设计器中的组件仓库和配置模块进行注册后得到的子应用，然后在所述低代码平台的应用编辑界面上通过所述微前端基座加载第二子应用，并在隔离环境中运行所述第二子应用的代码；所述第二子应用为对所述页面设计器中的渲染模块进行注册后得到的子应用，当监测到需要创建目标框架的web应用时，通过所述第一子应用告知所述第二子应用加载与所述目标框架相关的前置依赖，然后获取通过用户拖拽方式从所述组建仓库拖拽到所述页面设计器的画布中的目标组件，并将所述目标组件的元信息发送至所述第二子应用中的所述渲染模块，最后利用所述渲染模块对所述元信息解析后得到的所述目标组件的代码下载地址和所述目标组件的属性JSON文件对所述目标组件进行渲染和属性配置，以得到相应的web应用页面。本申请实施例通过微前端来渲染低代码页面，能够将页面设计器中的渲染模块与低代码平台完全隔离，即将web应用代码和低代码平台代码完全隔离，不会对低代码平台造成代码污染和安全威胁，并且，通过微前端将页面设计器中的渲染模块独立成应用，可实现一套低代码平台开发多种技术生态的web应用。
本申请实施例公开了一种具体的低代码页面创建方法，参见图2所示，该方法包括：
步骤S21：通过低代码平台中的微前端基座加载第一子应用；所述微前端基座为基于所述低代码平台中除页面设计器外的剩余组件构建的基座，所述第一子应用为通过所述微前端基座对所述页面设计器中的组件仓库和配置模块进行注册后得到的子应用。
步骤S22：在所述低代码平台的应用编辑界面上通过所述微前端基座加载第二子应用，并为所述第二子应用创建JavaScript沙箱，注册与所述页面设计器之间的通信监听，装载层叠样式表，并利用所述层叠样式表渲染所述第二子应用的界面；所述第二子应用为对所述页面设计器中的渲染模块进行注册后得到的子应用。
本实施例中，通过低代码平台中的微前端基座加载第一子应用之后，通过用户点击等方式进入到上述低代码平台的应用编辑界面，此时会展示所述页面设计器，同时，上述微前端基座会通过页面路由检测到需要加载的第二子应用，然后通过所述微前端基座加载上述第二子应用，加载完成后会为上述第二子应用创建JavaScript沙箱，并注册与上述页面设计器之间的通信监听，装载层叠样式表，再利用所述层叠样式表渲染上述第二子应用的界面；其中，所述第二子应用为对上述页面设计器中的渲染模块进行注册后得到的子应用，所述JavaScript沙箱的创建方法包括但不限于iframe.contentWindow、Proxy(代理软件)、diff等，其中，所述第二子应用为对上述页面设计器中的渲染模块进行注册后得到的子应用。
步骤S23：在所述JavaScript沙箱中运行所述第二子应用的代码。
本实施例中，为所述第二子应用创建JavaScript沙箱，注册与所述页面设计器之间的通信监听，装载层叠样式表，并利用所述层叠样式表渲染所述第二子应用的界面之后，可以在上述JavaScript沙箱中运行所述第二子应用的代码。
步骤S24：当监测到需要创建VUE框架的web应用时，通过所述第一子应用告知所述第二子应用加载与所述VUE框架相关的前置依赖，然后获取通过用户拖拽方式从所述组建仓库拖拽到所述页面设计器的画布中的目标组件和对应的位置，并将所述目标组件的元信息和所述位置发送至所述渲染模块。
本实施例中，在所述JavaScript沙箱中运行所述第二子应用的代码之后，当监测到需要创建VUE框架的web应用时，可以通过所述第一子应用告知上述第二子应用加载与上述VUE框架相关的前置依赖，即所述VUE框架的代码，然后获取通过用户拖拽方式从上述组建仓库拖拽到上述页面设计器的画布中的目标组件和对应的位置，即坐标信息，并将所述目标组件的元信息和所述位置发送至上述渲染模块。
步骤S25：通过所述渲染模块解析所述元信息，得到所述目标组件的代码下载地址和所述目标组件的属性JSON文件。
本实施例中，将所述目标组件的元信息和所述位置发送至所述渲染模块之后，通过上述渲染模块对所述元信息进行解析，得到上述目标组件的代码下载地址和上述目标组件的属性JSON文件。
步骤S26：根据所述代码下载地址从远端服务器中获取所述目标组件的代码，并利用所述目标组件的代码对位于所述位置处的所述目标组件进行渲染。
本实施例中，通过所述渲染模块解析所述元信息，得到所述目标组件的代码下载地址和所述目标组件的属性JSON文件之后，进一步的，根据上述代码下载地址从远端服务器中获取与上述目标组件相关的代码，然后利用上述目标组件的代码对位于所述位置处的上述目标组件进行渲染。
步骤S27：将所述属性JSON文件发送至所述配置模块，以便所述配置模块利用所述属性JSON文件对所述目标组件进行属性配置，得到相应的web应用页面。
本实施例中，利用所述目标组件的代码对位于所述位置处的所述目标组件进行渲染之后，可以进一步的将上述属性JSON文件发送至上述配置模块，所述配置模块在获取到上述属性JSON文件后，可以利用上述属性JSON文件对上述目标组件的属性进行配置，配置完成后产生新的属性JSON文件，然后通过所述通信监听将上述新的属性JSON文件返回至上述渲染模块，再利用上述新的属性JSON文件对所述渲染模块进行更新，进一步的，当监测到用户通过点击等方式选中了上述渲染模块中的某个组件时，被点击的组件会被激活，上述渲染模块获取到上述被激活组件的属性JSON文件，然后将其同步至上述配置模块，所述配置模块获取到上述被激活组件的属性JSON文件后，会利用上述被激活组件的属性JSON文件对上述被激活组件的属性进行配置，然后在配置完成后将产生的新属性JSON文件返回至上述渲染模块，再利用上述新属性JSON文件对上述渲染模块进行更新，得到相应的web应用页面。
本实施例中，所述利用所述渲染模块对所述元信息解析后得到的所述目标组件的代码下载地址和所述目标组件的属性JSON文件对所述目标组件进行渲染和属性配置，以得到相应的web应用页面之后，具体还包括：保存所述web应用页面，退出所述页面设计器；通过所述微前端基座监测到待卸载的所述第二子应用，执行删除所述目标组件，还原所述JavaScript沙箱至初始状态，卸载所述渲染模块中的DOM节点，并删除所述层叠样式表的操作。也即，在完成web应用页面创建之后，对上述web应用页面进行保存，并退出上述页面设计器，然后通过所述微前端基座监测到待卸载的上述第二子应用，并删除上述目标组件，还原上述JavaScript沙箱至初始状态，卸载上述渲染模块中的DOM节点，并删除上述层叠样式表。
其中，关于上述步骤S21更加具体的处理过程可以参考前述实施例中公开的相应内容，在此不再进行赘述。
可见，本申请实施例先通过低代码平台中的微前端基座分别加载对页面设计器中的组件仓库和配置模块进行注册后得到的第一子应用和对页面设计器中的渲染模块进行注册后得到的第二子应用，然后为所述第二子应用创建JavaScript沙箱，注册与所述页面设计器之间的通信监听，装载层叠样式表，并利用所述层叠样式表渲染所述第二子应用的界面，然后在所述JavaScript沙箱中运行所述第二子应用的代码，当监测到需要创建VUE框架的web应用时，通过所述第二子应用加载与所述VUE框架相关的前置依赖，然后获取从所述组建仓库拖拽到所述页面设计器的画布中的目标组件和对应的位置，并将所述目标组件的元信息和所述位置发送至所述渲染模块，通过所述渲染模块解析所述元信息得到的所述目标组件的代码下载地址和属性JSON文件对位于所述位置处的所述目标组件进行渲染和属性配置，得到相应的web应用页面。本申请实施例通过微前端来渲染低代码页面，能够将页面设计器中的渲染模块与低代码平台的代码完全隔离，即将web应用代码和低代码平台代码完全隔离，不会对低代码平台造成代码污染和安全威胁，通过提供JavaScript沙箱的隔离运行环境，能够更加贴合实际运行环境，实现所见即所得，并且，通过微前端将页面设计器中的渲染模块单独抽离为一个独立的应用，可以用来创建VUE框架的web应用，具有更高的灵活性。
相应的，本申请实施例还公开了一种低代码页面创建装置，参见图3所示，该装置包括：
第一子应用加载模块11，用于通过低代码平台中的微前端基座加载第一子应用；所述微前端基座为基于所述低代码平台中除页面设计器外的剩余组件构建的基座，所述第一子应用为通过所述微前端基座对所述页面设计器中的组件仓库和配置模块进行注册后得到的子应用；
第二子应用加载模块12，用于在所述低代码平台的应用编辑界面上通过所述微前端基座加载第二子应用，并在隔离环境中运行所述第二子应用的代码；所述第二子应用为对所述页面设计器中的渲染模块进行注册后得到的子应用；
前置依赖加载模块13，用于当监测到需要创建目标框架的web应用时，通过所述第一子应用告知所述第二子应用加载与所述目标框架相关的前置依赖；
目标组件获取模块14，用于获取通过用户拖拽方式从所述组建仓库拖拽到所述页面设计器的画布中的目标组件，并将所述目标组件的元信息发送至所述第二子应用中的所述渲染模块；
页面创建模块15，用于利用所述渲染模块对所述元信息解析后得到的所述目标组件的代码下载地址和所述目标组件的属性JSON文件对所述目标组件进行渲染和属性配置，以得到相应的web应用页面。
其中，关于上述各个模块的具体工作流程可以参考前述实施例中公开的相应内容，在此不再进行赘述。
可见，本申请实施例中，先通过低代码平台中的微前端基座加载第一子应用；所述微前端基座为基于所述低代码平台中除页面设计器外的剩余组件构建的基座，所述第一子应用为通过所述微前端基座对所述页面设计器中的组件仓库和配置模块进行注册后得到的子应用，然后在所述低代码平台的应用编辑界面上通过所述微前端基座加载第二子应用，并在隔离环境中运行所述第二子应用的代码；所述第二子应用为对所述页面设计器中的渲染模块进行注册后得到的子应用，当监测到需要创建目标框架的web应用时，通过所述第一子应用告知所述第二子应用加载与所述目标框架相关的前置依赖，然后获取通过用户拖拽方式从所述组建仓库拖拽到所述页面设计器的画布中的目标组件，并将所述目标组件的元信息发送至所述第二子应用中的所述渲染模块，最后利用所述渲染模块对所述元信息解析后得到的所述目标组件的代码下载地址和所述目标组件的属性JSON文件对所述目标组件进行渲染和属性配置，以得到相应的web应用页面。本申请实施例通过微前端来渲染低代码页面，能够将页面设计器中的渲染模块与低代码平台完全隔离，即将web应用代码和低代码平台代码完全隔离，不会对低代码平台造成代码污染和安全威胁，并且，通过微前端将页面设计器中的渲染模块独立成应用，可实现一套低代码平台开发多种技术生态的web应用。
在一些具体实施例中，所述第二子应用加载模块12，具体可以包括：
隔离环境创建单元，用于为所述第二子应用创建JavaScript沙箱，注册与所述页面设计器之间的通信监听，装载层叠样式表，并利用所述层叠样式表渲染所述第二子应用的界面；
代码运行单元，用于在所述JavaScript沙箱中运行所述第二子应用的代码。
在一些具体实施例中，所述页面创建模块15之后，还可以包括：
保存单元，用于保存所述web应用页面；
退出单元，用于退出所述页面设计器；
恢复单元，用于通过所述微前端基座监测到待卸载的所述第二子应用，执行删除所述目标组件，还原所述JavaScript沙箱至初始状态，卸载所述渲染模块中的DOM节点，并删除所述层叠样式表的操作。
在一些具体实施例中，所述目标组件获取模块14，具体可以包括：
信息获取单元，用于获取通过用户拖拽方式从所述组建仓库拖拽到所述页面设计器的画布中的目标组件和对应的位置；
信息发送单元，用于将所述目标组件的元信息和所述位置发送至所述渲染模块。
在一些具体实施例中，所述页面创建模块15，具体可以包括：
元信息解析单元，用于通过所述渲染模块解析所述元信息，得到所述目标组件的代码下载地址和所述目标组件的属性JSON文件；
代码获取单元，用于根据所述代码下载地址从远端服务器中获取所述目标组件的代码，并利用所述目标组件的代码对位于所述位置处的所述目标组件进行渲染；
文件发送单元，用于将所述属性JSON文件发送至所述配置模块；
属性配置单元，用于所述配置模块利用所述属性JSON文件对所述目标组件进行属性配置，得到相应的web应用页面。
在一些具体实施例中，所述低代码页面创建装置，还可以包括：
通信单元，用于通过所述微前端基座建立的通信总线实现所述低代码平台和所述渲染模块以及所述第一子应用和所述第二子应用之间的通信。
在一些具体实施例中，所述前置依赖加载模块13，具体可以包括：
前置依赖加载单元，用于当监测到需要创建VUE框架的web应用时，通过所述第一子应用告知所述第二子应用加载与所述VUE框架相关的前置依赖。
进一步的，本申请实施例还公开了一种电子设备，图4是根据一示例性实施例示出的电子设备20结构图，图中的内容不能认为是对本申请的使用范围的任何限制。
图4为本申请实施例提供的一种电子设备20的结构示意图。该电子设备20，具体可以包括：至少一个处理器21、至少一个存储器22、电源23、通信接口24、输入输出接口25和通信总线26。其中，所述存储器22用于存储计算机程序，所述计算机程序由所述处理器21加载并执行，以实现前述任一实施例公开的低代码页面创建方法中的相关步骤。另外，本实施例中的电子设备20具体可以为电子计算机。
本实施例中，电源23用于为电子设备20上的各硬件设备提供工作电压；通信接口24能够为电子设备20创建与外界设备之间的数据传输通道，其所遵循的通信协议是能够适用于本申请技术方案的任意通信协议，在此不对其进行具体限定；输入输出接口25，用于获取外界输入数据或向外界输出数据，其具体的接口类型可以根据具体应用需要进行选取，在此不进行具体限定。
另外，存储器22作为资源存储的载体，可以是只读存储器、随机存储器、磁盘或者光盘等，其上所存储的资源可以包括操作系统221、计算机程序222等，存储方式可以是短暂存储或者永久存储。
其中，操作系统221用于管理与控制电子设备20上的各硬件设备以及计算机程序222，其可以是Windows Server、Netware、Unix、Linux等。计算机程序222除了包括能够用于完成前述任一实施例公开的由电子设备20执行的低代码页面创建方法的计算机程序之外，还可以进一步包括能够用于完成其他特定工作的计算机程序。
进一步的，本申请还公开了一种计算机可读存储介质，用于存储计算机程序；其中，所述计算机程序被处理器执行时实现前述公开的低代码页面创建方法。关于该方法的具体步骤可以参考前述实施例中公开的相应内容，在此不再进行赘述。
本说明书中各个实施例采用递进的方式描述，每个实施例重点说明的都是与其它实施例的不同之处，各个实施例之间相同或相似部分互相参见即可。对于实施例公开的装置而言，由于其与实施例公开的方法相对应，所以描述的比较简单，相关之处参见方法部分说明即可。
专业人员还可以进一步意识到，结合本文中所公开的实施例描述的各示例的单元及算法步骤，能够以电子硬件、计算机软件或者二者的结合来实现，为了清楚地说明硬件和软件的可互换性，在上述说明中已经按照功能一般性地描述了各示例的组成及步骤。这些功能究竟以硬件还是软件方式来执行，取决于技术方案的特定应用和设计约束条件。专业技术人员可以对每个特定的应用来使用不同方法来实现所描述的功能，但是这种实现不应认为超出本申请的范围。
结合本文中所公开的实施例描述的方法或算法的步骤可以直接用硬件、处理器执行的软件模块，或者二者的结合来实施。软件模块可以置于随机存储器(RAM)、内存、只读存储器(ROM)、电可编程ROM、电可擦除可编程ROM、寄存器、硬盘、可移动磁盘、CD-ROM、或技术领域内所公知的任意其它形式的存储介质中。
最后，还需要说明的是，在本文中，诸如第一和第二等之类的关系术语仅仅用来将一个实体或者操作与另一个实体或操作区分开来，而不一定要求或者暗示这些实体或操作之间存在任何这种实际的关系或者顺序。而且，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括所述要素的过程、方法、物品或者设备中还存在另外的相同要素。
以上对本申请所提供的一种低代码页面创建方法、装置、设备及介质进行了详细介绍，本文中应用了具体个例对本申请的原理及实施方式进行了阐述，以上实施例的说明只是用于帮助理解本申请的方法及其核心思想；同时，对于本领域的一般技术人员，依据本申请的思想，在具体实施方式及应用范围上均会有改变之处，综上所述，本说明书内容不应理解为对本申请的限制。

Claims (10)

1.一种低代码页面创建方法，其特征在于，包括：
通过低代码平台中的微前端基座加载第一子应用；所述微前端基座为基于所述低代码平台中除页面设计器外的剩余组件构建的基座，所述第一子应用为通过所述微前端基座对所述页面设计器中的组件仓库和配置模块进行注册后得到的子应用；
在所述低代码平台的应用编辑界面上通过所述微前端基座加载第二子应用，并在隔离环境中运行所述第二子应用的代码；所述第二子应用为对所述页面设计器中的渲染模块进行注册后得到的子应用；
当监测到需要创建目标框架的web应用时，通过所述第一子应用告知所述第二子应用加载与所述目标框架相关的前置依赖，然后获取通过用户拖拽方式从所述组建仓库拖拽到所述页面设计器的画布中的目标组件，并将所述目标组件的元信息发送至所述第二子应用中的所述渲染模块；
利用所述渲染模块对所述元信息解析后得到的所述目标组件的代码下载地址和所述目标组件的属性JSON文件对所述目标组件进行渲染和属性配置，以得到相应的web应用页面。
2.根据权利要求1所述的低代码页面创建方法，其特征在于，所述在隔离环境中运行所述第二子应用的代码，包括：
为所述第二子应用创建JavaScript沙箱，注册与所述页面设计器之间的通信监听，装载层叠样式表，并利用所述层叠样式表渲染所述第二子应用的界面；
在所述JavaScript沙箱中运行所述第二子应用的代码。
3.根据权利要求2所述的低代码页面创建方法，其特征在于，所述利用所述渲染模块对所述元信息解析后得到的所述目标组件的代码下载地址和所述目标组件的属性JSON文件对所述目标组件进行渲染和属性配置，以得到相应的web应用页面之后，还包括：
保存所述web应用页面，退出所述页面设计器；
通过所述微前端基座监测到待卸载的所述第二子应用，执行删除所述目标组件，还原所述JavaScript沙箱至初始状态，卸载所述渲染模块中的DOM节点，并删除所述层叠样式表的操作。
4.根据权利要求1所述的低代码页面创建方法，其特征在于，所述获取通过用户拖拽方式从所述组建仓库拖拽到所述页面设计器的画布中的目标组件，并将所述目标组件的元信息发送至所述第二子应用中的所述渲染模块，包括：
获取通过用户拖拽方式从所述组建仓库拖拽到所述页面设计器的画布中的目标组件和对应的位置，并将所述目标组件的元信息和所述位置发送至所述渲染模块。
5.根据权利要求4所述的低代码页面创建方法，其特征在于，所述利用所述渲染模块对所述元信息解析后得到的所述目标组件的代码下载地址和所述目标组件的属性JSON文件对所述目标组件进行渲染和属性配置，以得到相应的web应用页面，包括：
通过所述渲染模块解析所述元信息，得到所述目标组件的代码下载地址和所述目标组件的属性JSON文件；
根据所述代码下载地址从远端服务器中获取所述目标组件的代码，并利用所述目标组件的代码对位于所述位置处的所述目标组件进行渲染；
将所述属性JSON文件发送至所述配置模块，以便所述配置模块利用所述属性JSON文件对所述目标组件进行属性配置，得到相应的web应用页面。
6.根据权利要求1所述的低代码页面创建方法，其特征在于，还包括：
通过所述微前端基座建立的通信总线实现所述低代码平台和所述渲染模块以及所述第一子应用和所述第二子应用之间的通信。
7.根据权利要求1至6任一项所述的低代码页面创建方法，其特征在于，所述当监测到需要创建目标框架的web应用时，通过所述第一子应用告知所述第二子应用加载与所述目标框架相关的前置依赖，包括：
当监测到需要创建VUE框架的web应用时，通过所述第一子应用告知所述第二子应用加载与所述VUE框架相关的前置依赖。
8.一种低代码页面创建装置，其特征在于，包括：
第一子应用加载模块，用于通过低代码平台中的微前端基座加载第一子应用；所述微前端基座为基于所述低代码平台中除页面设计器外的剩余组件构建的基座，所述第一子应用为通过所述微前端基座对所述页面设计器中的组件仓库和配置模块进行注册后得到的子应用；
第二子应用加载模块，用于在所述低代码平台的应用编辑界面上通过所述微前端基座加载第二子应用，并在隔离环境中运行所述第二子应用的代码；所述第二子应用为对所述页面设计器中的渲染模块进行注册后得到的子应用；
前置依赖加载模块，用于当监测到需要创建目标框架的web应用时，通过所述第一子应用告知所述第二子应用加载与所述目标框架相关的前置依赖；
目标组件获取模块，用于获取通过用户拖拽方式从所述组建仓库拖拽到所述页面设计器的画布中的目标组件，并将所述目标组件的元信息发送至所述第二子应用中的所述渲染模块；
页面创建模块，用于利用所述渲染模块对所述元信息解析后得到的所述目标组件的代码下载地址和所述目标组件的属性JSON文件对所述目标组件进行渲染和属性配置，以得到相应的web应用页面。
9.一种电子设备，其特征在于，包括处理器和存储器；其中，所述处理器执行所述存储器中保存的计算机程序时实现如权利要求1至7任一项所述的低代码页面创建方法。
10.一种计算机可读存储介质，其特征在于，用于存储计算机程序；其中，所述计算机程序被处理器执行时实现如权利要求1至7任一项所述的低代码页面创建方法。
CN202210576247.2A 2022-05-25 2022-05-25 一种低代码页面创建方法、装置、设备及介质 Pending CN114860240A (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202210576247.2A CN114860240A (zh) 2022-05-25 2022-05-25 一种低代码页面创建方法、装置、设备及介质

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202210576247.2A CN114860240A (zh) 2022-05-25 2022-05-25 一种低代码页面创建方法、装置、设备及介质

Publications (1)

Publication Number Publication Date
CN114860240A true CN114860240A (zh) 2022-08-05

Family

ID=82639158

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202210576247.2A Pending CN114860240A (zh) 2022-05-25 2022-05-25 一种低代码页面创建方法、装置、设备及介质

Country Status (1)

Country Link
CN (1) CN114860240A (zh)

Cited By (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN115617324A (zh) * 2022-09-08 2023-01-17 中电金信软件有限公司 一种客户端网页的生成方法

Cited By (2)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN115617324A (zh) * 2022-09-08 2023-01-17 中电金信软件有限公司 一种客户端网页的生成方法
CN115617324B (zh) * 2022-09-08 2024-01-26 中电金信软件有限公司 一种客户端网页的生成方法

Similar Documents

Publication Publication Date Title
US11635974B2 (en) Providing a different configuration of added functionality for each of the stages of predeployment, deployment, and post deployment using a layer of abstraction
CN109144567B (zh) 跨平台的网页渲染方法、装置、服务器及存储介质
US11514232B2 (en) Multi dimensional rules-based dynamic layouts
CN111610978A (zh) 一种小程序转换方法、装置、设备及存储介质
US20130117719A1 (en) Context-Based Adaptation for Business Applications
CN112114890A (zh) 小程序的处理方法、装置、设备及存储介质
CN113760324A (zh) 构建微前端应用的方法和装置
CN113626036A (zh) 一种基于Jenkins的代码集成管理方法和系统
CN110888639A (zh) 一种业务代码编译打包方法和装置
CN101876998B (zh) 一种实现数据编辑的方法和系统
CN110554950A (zh) 一种界面调试方法、装置及存储介质
CN116069341A (zh) 一种应用程序的自动化部署方法、设备及存储介质
CN114860240A (zh) 一种低代码页面创建方法、装置、设备及介质
CN114217789A (zh) 功能组件拓展方法、装置、设备、存储介质及程序产品
CN113778543B (zh) 一种应用于插件的页面内容更新方法和装置
US11822872B2 (en) Rendering based on a document object model
CN112631563A (zh) 基于框架的系统开发方法、装置、计算机设备及存储介质
US8108419B2 (en) Virtually applying modifications
CN112287266A (zh) 一种网页配置的处理方法及其装置、设备及存储介质
CN116432624A (zh) 一种微服务api文档生成方法、装置、设备、存储介质
CN114253441B (zh) 目标功能的启用方法及装置、存储介质、电子装置
CN114721681A (zh) 配置文件更新方法、装置、设备及存储介质
CN112631571A (zh) 一种web编辑器内组件的联动方法及装置
CN111241538B (zh) 一种保护节点对象变量的方法、装置、介质和电子设备
EP3166017A1 (en) Method for projecting workspace and system using same

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