CN116974527B - 一种基于低代码前端组件的可插拔的页面扩展方法及*** - Google Patents
一种基于低代码前端组件的可插拔的页面扩展方法及*** Download PDFInfo
- Publication number
- CN116974527B CN116974527B CN202311196404.8A CN202311196404A CN116974527B CN 116974527 B CN116974527 B CN 116974527B CN 202311196404 A CN202311196404 A CN 202311196404A CN 116974527 B CN116974527 B CN 116974527B
- Authority
- CN
- China
- Prior art keywords
- component
- page
- code
- product side
- interface
- 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 35
- 238000011161 development Methods 0.000 claims abstract description 30
- 230000006870 function Effects 0.000 claims abstract description 29
- 238000004806 packaging method and process Methods 0.000 claims abstract description 8
- 238000004458 analytical method Methods 0.000 claims description 9
- 238000009877 rendering Methods 0.000 claims description 9
- 238000012800 visualization Methods 0.000 claims description 8
- 230000000694 effects Effects 0.000 claims description 7
- 230000009471 action Effects 0.000 claims description 3
- 230000000977 initiatory effect Effects 0.000 claims description 3
- 239000002245 particle Substances 0.000 claims description 3
- 238000010276 construction Methods 0.000 claims description 2
- 238000002955 isolation Methods 0.000 abstract description 2
- 238000001338 self-assembly Methods 0.000 abstract 1
- 238000007726 management method Methods 0.000 description 14
- 238000010586 diagram Methods 0.000 description 8
- 230000008569 process Effects 0.000 description 4
- 230000000007 visual effect Effects 0.000 description 4
- 238000005516 engineering process Methods 0.000 description 3
- 238000013459 approach Methods 0.000 description 2
- 238000004891 communication Methods 0.000 description 2
- 238000004519 manufacturing process Methods 0.000 description 2
- 238000012986 modification Methods 0.000 description 2
- 230000004048 modification Effects 0.000 description 2
- 238000012360 testing method Methods 0.000 description 2
- 230000009286 beneficial effect Effects 0.000 description 1
- 230000010485 coping Effects 0.000 description 1
- 230000007547 defect Effects 0.000 description 1
- 238000005538 encapsulation Methods 0.000 description 1
- 230000008676 import Effects 0.000 description 1
- 238000012423 maintenance Methods 0.000 description 1
- 238000013507 mapping Methods 0.000 description 1
- 238000006467 substitution reaction 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/20—Software design
-
- 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/31—Programming languages or programming paradigms
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/60—Software deployment
- G06F8/61—Installation
- G06F8/62—Uninstallation
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/60—Software deployment
- G06F8/65—Updates
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F9/00—Arrangements for program control, e.g. control units
- G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
- G06F9/44—Arrangements for executing specific programs
- G06F9/445—Program loading or initiating
- G06F9/44521—Dynamic linking or loading; Link editing at or after load time, e.g. Java class loading
-
- 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
- Y02P—CLIMATE CHANGE MITIGATION TECHNOLOGIES IN THE PRODUCTION OR PROCESSING OF GOODS
- Y02P90/00—Enabling technologies with a potential contribution to greenhouse gas [GHG] emissions mitigation
- Y02P90/30—Computing systems specially adapted for manufacturing
Landscapes
- Engineering & Computer Science (AREA)
- Software Systems (AREA)
- Theoretical Computer Science (AREA)
- General Engineering & Computer Science (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Computing Systems (AREA)
- Computer Security & Cryptography (AREA)
- Stored Programmes (AREA)
Abstract
本发明提出一种基于低代码前端组件的可插拔的页面扩展方法及***包括：产品侧完成页面组件的开发后，将组件信息录入到***中；产品侧将开放的、允许被项目定制的扩展点信息录入到***中；产品侧封装前端SDK，页面通过调用SDK来加载前端组件；产品侧将后端接口注册到扩展点管理中心，使得管理中心可以自动识别接口的输入和输出，并新增项目租户；将产品侧的接口能力和扩展点定义数据分享给指定的项目租户，然后获取产品侧接口能力以及产品侧扩展点定义；扩展点实现管理。本发明通过租户隔离和扩展点实现，各个项目在不影响产品原有功能和其他项目定制功能的情况下，进行自行的组件定制。这在很大程度上提高了产品的定制化能力和灵活性。
Description
技术领域
本发明涉及软件开发领域，具体涉及一种基于低代码前端组件的可插拔的页面扩展方法及***。
背景技术
在过去的一段时间里，见证了前端开发技术的迅速发展。React/Vue等前端组件化技术已经非常成熟，可以将复杂的页面分解成一个个前端组件，然后再通过组件组装出页面。这些前端组件的生命周期各阶段开放了API控制能力，使得业务侧可以灵活控制前端组件的渲染逻辑。
同时，也能够看到，由于一款软件产品往往不能满足所有的业务场景，因此在项目实施时经常需要进行不同程度的定制。然而，针对定制化代码的管理方法一直存在问题。常见的方法包括开一个代码分支出来做定制化，或者在原来的代码里通过if-else的方式写入不同的逻辑分支。然而这两种方法都存在问题，前者导致分支数量越来越多，无法同时维护多个版本的代码的同步；后者则导致代码逻辑越来越复杂，难以更新维护。
同时，基于UMD模块化加载技术，市面上有些产品可以实现在运行时从服务器获取前端组件文件并加载到页面。然而，这些产品往往无法很好地解决定制开发组件如何和原产品组件隔离的问题，这就涉及到扩展前端组件的可视化编排开发、组件加载路由寻址和扩展点统一管理等技术问题。
例如，项目上定制开发者可能并不熟悉原产品的前端技术，或者学习门槛较高，导致定制化成本较高。同时，定制开发的组件在部署时不能覆盖原产品的默认组件，需要以外挂的模式存在，而不能以物理覆盖的模式存在。此外，不同的项目需要能够在线维护自己的扩展点实现，根据需求实现或关闭各自项目需要的扩展点。
因此，现有技术的局限性呼唤一种新的解决方案，它应能有效地解决以上所述的问题，并提供一种基于低代码前端组件的可插拔的页面扩展***及方法。
发明内容
为克服现有技术的不足，本发明提出一种基于低代码前端组件的可插拔的页面扩展方法及***，每个租户只需要关注和维护自己的定制功能，所以可以极大地降低项目间的沟通和协调成本，既满足了用户个性化需求的同时，也保持了产品的稳定性和可靠性，提高了用户的使用体验。
为实现上述目的，本发明提供一种基于低代码前端组件的可插拔的页面扩展方法，包括：
步骤S1：产品侧完成页面组件的开发后，将组件信息录入到***中；
步骤S2：产品侧将开放的、允许被项目定制的扩展点信息录入到***中；
步骤S3：产品侧封装前端SDK，页面通过调用SDK来加载前端组件；
步骤S4：产品侧将后端接口注册到扩展点管理中心，使得管理中心可以自动识别接口的输入和输出，并新增项目租户；
步骤S5：将产品侧的接口能力和扩展点定义数据分享给指定的项目租户，然后获取产品侧接口能力以及产品侧扩展点定义；
步骤S6：扩展点实现管理。
进一步地，步骤S3包括：
步骤S31：前端SDK封装参数；
步骤S32：运行前端SDK；
步骤S33：加载远程高代码组件js；
步骤S34：本地运行DSL。
进一步地，步骤S32具体如下：
页面调用前端SDK的方式：
<RemoteComp url="xxx"compExtCode="xxx"tenantId="xxx" />
以上组件参数中，RemoteComp为远程组件，Url表示默认的组建路径，compExtCode为扩展点编码，tenantId为租户ID，如果不存在compExtCode，则使用ajax请求组件参数中的“url”指定资源回来并运行；如果存在compExtCode，则根据扩展点编码和租户ID请求后台接口判断扩展点是否存在定制实现，以及定制实现的类型，如果此租户ID没有返回，那么采用产品侧默认的实现；
如果返回定制实现，定制实现的类型分为高代码组件和编排组件。类型如果为高代码组件，则是返回一个js文件路径，ajax请求该路径资源运行；类型如果为编排组件，则是返回一串DSL，调用低代码运行引擎进行渲染。
进一步地，步骤S33包括：
步骤S331：向服务端发起请求，获取组件的代码和元数据；
步骤S332： 组件代码的加载：获取到组件代码后，使用动态创建script标签的方式将组件代码注入到页面中，从而实现组件的加载；
步骤S333：组件渲染：组件代码加载完成后，使用React.createElement()方法创建组件实例，并将其渲染到页面中；
步骤S334：组件更新：如果远程组件有更新，重新加载组件代码，并使用React.createElement()方法创建新的组件实例进行更新。
进一步地，步骤S34包括：
步骤S341：解析出页面的结构、事件和数据源部分；
步骤S342：页面结构解析：根据结构数据递归绘制小颗粒的组件到页面上，传人初始化的参数；
步骤S343：事件解析：等页面结构解析完，再绑定事件，事件的逻辑拆分成条条的动作指令；
步骤S344： 数据源解析：数据源的解析不依赖结构和事件、可以同步进行。数据源最终会转换为组建参数传递到组件内部。事件操作数据源变化也会触发页面结构的变化。
进一步地，步骤S6包括：
步骤S61：上传高代码开发的组件，线下开发好组件编辑上传到扩展点管理中心；
步骤S62： 可视化编排组件：项目租户侧打开页面设计器，拖拽页面控件、编排前端事件、调用产品侧接口，来编排出业务组件；其中，使用产品侧注册进来的接口时，自动获取接口的入参和出参来参与组件的编排开发。
进一步地，还包括版本控制和回滚功能，具体如下：
步骤S101：在后端存储***中，为组件创建版本库；
步骤S102：组件被更新或者定制时，在版本库中保存一个新的版本；
步骤S103：在前端添加一个版本选择和回滚的界面，允许用户在不同的版本之间进行切换。
进一步地，还包括预览功能，
步骤S111：在前端SDK中增加预览组件的功能；
步骤S112：在用户定制或者更新组件时，先调用预览功能，显示预览效果；
步骤S113：用户确认预览效果符合预期后，再进行真正的定制或者更新。
一种基于低代码前端组件的可插拔的页面扩展***，适用于所述的一种基于低代码前端组件的可插拔的页面扩展方法，包括：扩展点管理中心、扩展点运行中心和前端SDK；
扩展点管理中心是对产品功能模块化和可定制化的管理中心，包括以下几个子功能：
前端组件注册管理：允许将产品的功能拆分为独立的前端组件，并将这些组件注册到管理中心，以便在定制化的过程中选择并调用。
组件扩展点管理：标记产品可以开放的扩展点，以便在项目定制时可以基于这些扩展点来实现自定义组件。
扩展点实现管理：创建各项目的租户空间，让项目在自己的租户空间中定制开发和管理组件，避免相互影响。
后端接口能力注册：注册产品的后端接口以便在组件编排时复用，自动识别接口的入参和出参结构。
组件开发方式：支持高代码组件上传（面向专业前端开发者）和组件可视化编排（面向实施人员和技能一般的前端开发者）两种方式。
扩展点运行中心是一个独立的服务，负责执行和管理各项目的定制化配置和功能；
前端SDK用于封装产品侧页面的调用，使其简化对前端组件的调用。前端SDK会自动检测该组件是否为扩展点，如果是，它将自动加载定制组件；如果不是，它将自动加载默认组件。
与现有技术相比，本发明的有益效果是：
1.本发明提供了一种基于低代码前端组件的可插拔的页面扩展方法及***， 通过租户隔离和扩展点实现，各个项目可以在不影响产品原有功能和其他项目定制功能的情况下，进行自行的组件定制。这在很大程度上提高了产品的定制化能力和灵活性。
2.本发明提供了一种基于低代码前端组件的可插拔的页面扩展方法及***，每个租户只需要关注和维护自己的定制功能，所以可以极大地降低项目间的沟通和协调成本，既满足了用户个性化需求的同时，也保持了产品的稳定性和可靠性，提高了用户的使用体验。
3.本发明提供了一种基于低代码前端组件的可插拔的页面扩展方法及***，通过提供可视化编排和DSL解析渲染的功能，使得前端组件的定制化开发难度大大降低，同时也提高了开发效率。
4.本发明提供了一种基于低代码前端组件的可插拔的页面扩展方法及***，通过扩展点运行中心的外挂式部署，避免了项目定制功能代码对产品原有功能代码的物理覆盖或修改，从而保护了产品原有功能的独立完整性。
5.本发明提供了一种基于低代码前端组件的可插拔的页面扩展方法及***，支持热插拔的方式实现标准产品的个性化前端定制，提供了很高的运维效率和便利性。
附图说明
为了更清楚地说明本发明具体实施方式或现有技术中的技术方案，下面将对具体实施方式或现有技术描述中所需要使用的附图作简单的介绍，显而易见地，下面描述中的附图是本发明的一些实施方式，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。
图1是本发明流程图；
图2是本发明***功能图；
图3为本发明按租户隔离各项目扩展点的实现示意图；
图4为扩展点运行中心部署构成示意图；
图5为前端组件自动寻址图；
图6为使用前端SDK调用前端组件图；
图7为本地加载远程高代码组件js的过程图；
图8为本地运行DSL图；
图9为扩展点运行中心部署图。
具体实施方式
下面将结合附图、通过对本发明的优选实施方式的描述，更加清楚、完整地阐述本发明的技术方案。
如图1所示，一种基于低代码前端组件的可插拔的页面扩展方法，包括：
步骤S1：产品侧完成页面组件的开发后，将组件信息录入到***中；
步骤S2：产品侧将开放的、允许被项目定制的扩展点信息录入到***中；
步骤S3：产品侧封装前端SDK，页面通过调用SDK来加载前端组件；
步骤S4：产品侧将后端接口注册到扩展点管理中心，使得管理中心可以自动识别接口的输入和输出，并新增项目租户；
步骤S5：将产品侧的接口能力和扩展点定义数据分享给指定的项目租户，然后获取产品侧接口能力以及产品侧扩展点定义；
步骤S6：扩展点实现管理。
作为一种具体的实施方式，还包括加入版本控制和回滚功能，当定制化的组件在某次更新后出现问题，可能会需要回滚到之前的版本。因此，加入版本控制的功能将会大大增强***的鲁棒性。
实施步骤：
在后端存储***中，为每个组件创建版本库；
每当一个组件被更新或者定制时，都在版本库中保存一个新的版本；
在前端添加一个版本选择和回滚的界面，允许用户在不同的版本之间进行切换。
作为一种具体的实施方式，还包括增加预览功能，在组件被定制或者更新之前，有一个预览的步骤可以帮助用户确认他们的改动是否符合预期。
实施步骤：
在前端SDK中增加一个预览组件的功能；
在用户定制或者更新组件时，先调用预览功能，显示预览效；
用户确认预览效果符合预期后，再进行真正的定制或者更新。
作为一种具体的实施方式，由图2可见，***由扩展点管理中心、扩展点运行中心和前端SDK三部分组成。具体如下：
1、扩展点管理中心
前端组件注册管理：产品将页面的功能拆成一个个前端组件，页面就是由这些前端组装起来。将拆出来的前端组件注册到扩展点管理中心，表示这个组件能力接入到管理中心了，在后续的页面定制化可视化编排时就可以选择并调用。支持多环境配置，分别配置开发/测试/生产环境的前端组件的请求路径，前端组件的存放可以在任意服务器上，运行时按地址请求组件文件。
组件扩展点管理：登记产品允许开放的扩展点，表示项目定制时可以针对这些扩展点来实现自己的组件。
扩展点实现管理：为不同的项目创建租户空间，各个项目在自己的租户空间定制开发和管理组件，相互不影响。项目可以查询到指定产品的扩展点，可以选择开启定制开关，然后进行定制，定制的方式包括：上传高代码开发的组件、提交可视化编排的组件。如果不再需要扩展点可以关闭，关闭后就能恢复产品原来默认的能力。
后端接口能力注册：定制一个前端组件时，大部分后端的接口能力是可以复用的，可以将原产品的后端接口注册到扩展点管理中心，自动识别接口的入参和出参结构，以便在组件编排时可以获取接口的入参和出参来参与组件的编排开发。
组件开发方式1-高代码组件上传：遵循umd模块化加载技术，采用传统高代码方式编程方式来开发一个组件。这个方式主要面向专业的前端开发人员。
组件开发方式2-组件可视化编排：打开页面设计器，拖拽控件、编排前端事件、调用接口服务，来编排出一个业务组件。这个方式主要面向是实施人员和技能一般的前端开发人员。
2、扩展点运行中心
导入租户配置数据：产品的部署还是按原来自己的方式，不需要进行任何调整。项目如果有定制，额外部署一个“扩展点运行中心”，并从“扩展点管理中心”导出本项目的定制数据，再导入到“扩展点运行中心”，产品页面在运行时，就能调用“扩展点运行中心”提供的定制能力。同一个产品，应对不同项目不同的定制时，只需要导出不同项目的定制数据并导入到“扩展点管理中心”即可。
扩展支撑服务：页面SDK会请求此服务模块，判断扩展点是否有扩展实现，获取编码组件的DSL字符或高代码组件的JS地址等。
3、前端SDK
前端组件调用SDK：封装并前端SDK，简化页面的调用。产品侧页面调用SDK完成前端组件的调用。
前端组件自动寻址：前端SDK会自动检测此组件是否为扩展点，此扩展点是否有定制实现，如果有，自动加载定制组件；如果没有，自动加载默认的组件。加载定制组件时，能区分是高代码开发的组件还是编排的组件，如果是高代码开发的组件，则从扩展点运行中心加载组件JS；如果是编排的组件，则从扩展点运行中心加载编排DSL字符，在前端动态解析DSL完成组件的渲染
作为一种具体的实施方式：按租户隔离各项目扩展点的实现。如图3。
步骤1前端组件注册管理：产品侧在完成了页面组件开发后，将这些组件的信息录入，包括组件名称、组件编码、请求地址（支持开发/测试/生产多环境地址）。
步骤2组件扩展点录入：产品侧录入本产品开放的允许被项目上定制实现的扩展点信息，包括：组件名称、组件编码、扩展点名称、扩展点编码。每个扩展点绑定一个组件编码（就是上述步骤1登记的），表示产品的标准功能就是显示这个组件，如果没有被项目上定制的话，就默认显示加载这个组件。
步骤3 使用前端SDK调用前端组件：产品侧封装前端SDK，产品侧页面调用SDK完成前端组件的调用。
其中步骤3有多个步骤，如图6。
3.1 前端SDK封装参数。本身也是一个组件，提供给页面直接调用，它接收下面几个参数
| 参数编码 | 参赛名称 | 说明 |
| url | 默认的组建路径 | 必须，如果组件没有被定制，默认加载的地址 |
| compExtCode | 扩展点编码 | 非必须，如果组件需要被定制，由管理中心生成的唯一的扩展点编码， |
| tenantId | 租户ID | 非必须，如果组件被多个定制实现了，根据租户ID映射到具体实现 |
3.2 前端SDK核心运行逻辑
页面调用前端SDK的方式：
<RemoteComp url="xxx"compExtCode="xxx"tenantId="xxx" />
以上组件参数中，如果不存在compExtCode，则使用ajax请求组件参数中的“url”指定资源回来并运行；如果存在compExtCode，则根据扩展点编码和租户ID请求后台接口判断扩展点是否存在定制实现，以及定制实现的类型。如果此租户ID没有返回，那么采用产品侧默认的实现。
如果返回定制实现，定制实现的类型分为高代码组件和编排组件。类型如果为高代码组件，则是返回一个js文件路径，ajax请求该路径资源运行；类型如果为编排组件，则是返回一串DSL，调用低代码运行引擎进行渲染。
3.3 本地加载远程高代码组件js的过程
其中3.3步骤有多个步骤，如图7。
远程高代码组件js文件也是通过react编写，构建之后的代码，其加载过程如下：
3.3.1. 向服务端发起请求，获取组件的代码和元数据。
3.3.2. 组件代码的加载：获取到组件代码后，使用动态创建script标签的方式将组件代码注入到页面中，从而实现组件的加载。
3.3.3. 组件渲染：组件代码加载完成后，使用React.createElement()方法创建组件实例，并将其渲染到页面中。
3.3.4. 组件更新：如果远程组件有更新，重新加载组件代码，并使用React.createElement()方法创建新的组件实例进行更新。
3.4 本地运行DSL
DSL是可视化编排保存的一串字符串，是一种特定的语言，在这里被定义为是一串大的json。其中3.4步骤有多个步骤，如图8。
解析过程通常包括以下几个步骤：
3.4.1 语法分析：解析出页面的结构、事件和数据源部分。
3.4.2 页面结构解析：根据结构数据递归绘制小颗粒的组件到页面上，传人初始化的参数。
3.4.3 事件解析：等页面结构解析完，再绑定事件，事件的逻辑拆分成条条的动作指令。
3.4.4 数据源解析：数据源的解析不依赖结构和事件、可以同步进行。数据源最终会转换为组建参数传递到组件内部。事件操作数据源变化也会触发页面结构的变化。
步骤4 后端接口能力注册到扩展点管理中心：产品侧将原产品的后端接口注册到扩展点管理中心，自动识别接口的入参和出参结构。
步骤5 新增项目租户：新增一个租户，表示此租户下的设置内容不会影响到其他租户。不同的项目租户进来看到的内容都是自己的，通过租户权限进行了隔离。
步骤6 分享产品侧数据：将产品侧的接口能力和扩展点定义数据分享给指定的项目租户。
步骤7 获取产品侧接口能力：项目租户侧订阅产品侧分享的接口能力。这样项目租户就可以访问产品侧的接口能力。
步骤8 获取产品侧扩展点定义：项目租户侧获取产品侧分享的扩展点定义。项目上就知道前端哪个组件允许被定制。
步骤9扩展点实现管理：在项目租户里，可以看到产品侧维护的组件扩展点列表，可以选择扩展点启动扩展，需要进一步设置扩展的实现方式。包括：上传高代码开发的组件、可视化编排组件。
其中步骤9有多个步骤，如图3。
步骤9.1 上传高代码开发的组件：线下开发好组件编辑上传到扩展点管理中心。
步骤9.2 可视化编排组件：项目租户侧打开页面设计器，拖拽页面控件、编排前端事件、调用产品侧接口，来编排出一个业务组件。其中，使用产品侧注册进来的接口时，可以自动获取接口的入参和出参来参与组件的编排开发。
作为一种具体的实施方式：扩展点运行中心部署。如图9。
步骤1 部署“扩展点运行中心”模块，如图4：项目侧部署此“扩展点运行中心”模块，此模块以外挂的方式，存储了扩展点实现的配置数据，并为产品侧提供一系列接口能力，包括：判断是否针对某个扩展点实现了扩展，返回定制组件JS文件，返回定制组件的编排DSL字符等等。
步骤2 导出定制配置数据：项目侧导出本租户内的配置数据。
步骤3导入定制配置数据：项目侧将配置数据导入都到“扩展点运行中心”。
步骤4 关停“扩展点运行中心”模块：现场侧如果不需要生效定制功能，直接关停“扩展点运行中心”模块，就自动恢复到产品通用的功能。
作为一种具体的实施方式：运行时-前端组件自动寻址。本实施例有多个步骤，如图5。
步骤1 检测组件是否有扩展点： 如果发现前端组件在代码里带有组件属性“扩展点编码”。
步骤2 检测组件是否做了定制扩展：产品侧前端SDK通过“扩展点编码”请求“扩展点运行中心”查询是否有定制实现。
步骤3 如果没有做定制扩展实现，自动加载产品侧默认的组件。如果有，“扩展点运行中心”返回定制实现的方式（包括上传高代码开发的组件、可视化编排组件）
步骤4 定制方式如果为“上传高代码开发的组件”，“扩展点运行中心”返回此组件JS的地址，页面请求组件并加载。
步骤5 定制方式如果为“可视化编排组件”，“扩展点运行中心”返回此组件的DSL字符，页面前端SDK在前端动态解析DSL完成组件的渲染。
上述具体实施方式仅仅对本发明的优选实施方式进行描述，而并非对本发明的保护范围进行限定。在不脱离本发明设计构思和精神范畴的前提下，本领域的普通技术人员根据本发明所提供的文字描述、附图对本发明的技术方案所作出的各种变形、替代和改进，均应属于本发明的保护范畴。本发明的保护范围由权利要求确定。
Claims (6)
1.一种基于低代码前端组件的可插拔的页面扩展方法，其特征在于，包括：
步骤S1：产品侧完成页面组件的开发后，将组件信息录入到***中；
步骤S2：产品侧将开放的、允许被项目定制的扩展点信息录入到***中；
步骤S3：产品侧封装前端SDK，页面通过调用SDK来加载前端组件；步骤S3包括：
步骤S31：前端SDK封装参数；
步骤S32：运行前端SDK；步骤S32具体如下：
页面调用前端SDK的方式：
<RemoteComp url="xxx" compExtCode="xxx" tenantId="xxx" />
Url表示默认的组建路径，compExtCode为扩展点编码，tenantId为租户ID，如果不存在compExtCode，则使用ajax请求组件参数中的“url”指定资源回来并运行；如果存在compExtCode，则根据扩展点编码和租户ID请求后台接口判断扩展点是否存在定制实现，以及定制实现的类型，如果此租户ID没有返回，那么采用产品侧默认的实现；
如果返回定制实现，定制实现的类型分为高代码组件和编排组件，类型如果为高代码组件，则是返回一个js文件路径，ajax请求js文件路径资源运行；类型如果为编排组件，则是返回一串DSL，调用低代码运行引擎进行渲染；
步骤S33：加载远程高代码组件js；
步骤S34：本地运行DSL；
步骤S4：产品侧将后端接口注册到扩展点管理中心，使得管理中心自动识别接口的输入和输出，并新增项目租户；
步骤S5：将产品侧的接口能力和扩展点定义数据分享给指定的项目租户，然后获取产品侧接口能力以及产品侧扩展点定义；
步骤S6：扩展点实现管理；步骤S6包括：
步骤S61：上传高代码开发的组件，线下开发好组件编辑上传到扩展点管理中心；
步骤S62：可视化编排组件：项目租户侧打开页面设计器，拖拽页面控件、编排前端事件、调用产品侧接口，来编排出业务组件；其中，使用产品侧注册进来的接口时，自动获取接口的入参和出参来参与组件的编排开发。
2.根据权利要求1所述的一种基于低代码前端组件的可插拔的页面扩展方法，其特征在于，步骤S33包括：
步骤S331：向服务端发起请求，获取组件的代码和元数据；
步骤S332： 组件代码的加载：获取到组件代码后，使用动态创建script标签的方式将组件代码注入到页面中，从而实现组件的加载；
步骤S333：组件渲染：组件代码加载完成后，使用React.createElement()方法创建组件实例，并将其渲染到页面中；
步骤S334：组件更新：如果远程组件有更新，重新加载组件代码，并使用React.createElement()方法创建新的组件实例进行更新。
3.根据权利要求1所述的一种基于低代码前端组件的可插拔的页面扩展方法，其特征在于，步骤S34包括：
步骤S341：解析出页面的结构、事件和数据源部分；
步骤S342：根据结构数据递归绘制小颗粒的组件到页面上，传入初始化的参数；
步骤S343：等页面结构解析完，再绑定事件，事件的逻辑拆分成条条的动作指令；
步骤S344：数据源的解析不依赖结构和事件且同步进行，数据源转换为组建参数传递到组件内部。
4.根据权利要求1所述的一种基于低代码前端组件的可插拔的页面扩展方法，其特征在于，还包括版本控制和回滚功能，具体如下：
步骤S101：在后端存储***中，为组件创建版本库；
步骤S102：组件被更新或者定制时，在版本库中保存一个新的版本；
步骤S103：在前端添加一个版本选择和回滚的界面，允许用户在不同的版本之间进行切换。
5.根据权利要求1所述的一种基于低代码前端组件的可插拔的页面扩展方法，其特征在于，还包括预览功能，
步骤S111：在前端SDK中增加预览组件的功能；
步骤S112：在用户定制或者更新组件时，先调用预览功能，显示预览效果；
步骤S113：用户确认预览效果符合预期后，再进行真正的定制或者更新。
6.一种基于低代码前端组件的可插拔的页面扩展***，适用于权利要求1-5任一项所述的一种基于低代码前端组件的可插拔的页面扩展方法，其特征在于，包括：扩展点管理中心、扩展点运行中心和前端SDK；
扩展点管理中心是对产品功能模块化和可定制化的管理中心，包括以下几个子功能：
前端组件注册管理，允许将产品的功能拆分为独立的前端组件，并将这些组件注册到管理中心；
组件扩展点管理，标记产品开放的扩展点；
扩展点实现管理，创建各项目的租户空间，让项目在自己的租户空间中定制开发和管理组件；
后端接口能力注册，注册产品的后端接口以便在组件编排时复用，自动识别接口的入参和出参结构；
扩展点运行中心是一个独立的服务，负责执行和管理各项目的定制化配置和功能；
前端SDK用于封装产品侧页面的调用，使其简化对前端组件的调用。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202311196404.8A CN116974527B (zh) | 2023-09-18 | 2023-09-18 | 一种基于低代码前端组件的可插拔的页面扩展方法及*** |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202311196404.8A CN116974527B (zh) | 2023-09-18 | 2023-09-18 | 一种基于低代码前端组件的可插拔的页面扩展方法及*** |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN116974527A CN116974527A (zh) | 2023-10-31 |
| CN116974527B true CN116974527B (zh) | 2023-12-15 |
Family
ID=88481757
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202311196404.8A Active CN116974527B (zh) | 2023-09-18 | 2023-09-18 | 一种基于低代码前端组件的可插拔的页面扩展方法及*** |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN116974527B (zh) |
Citations (6)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US9509571B1 (en) * | 2012-07-25 | 2016-11-29 | NetSuite Inc. | First-class component extensions for multi-tenant environments |
| CN108810164A (zh) * | 2018-06-29 | 2018-11-13 | 合肥微商圈信息科技有限公司 | 一种支持SaaS应用流程按需定制及运行的装置 |
| CN113220295A (zh) * | 2021-04-26 | 2021-08-06 | 深圳市云网万店科技有限公司 | 前端组件动态扩展的方法、***及计算机可读存储介质 |
| CN113239310A (zh) * | 2021-06-17 | 2021-08-10 | 上海微盟企业发展有限公司 | 一种页面加载方法及相关装置 |
| CN114489614A (zh) * | 2021-12-26 | 2022-05-13 | 汇承金融科技服务(南京)有限公司 | 一种saas平台定制化ui解决方法 |
| CN114860205A (zh) * | 2022-05-09 | 2022-08-05 | 维沃移动通信有限公司 | 低代码开发平台的应用扩展***、方法和装置 |
Family Cites Families (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US11360765B2 (en) * | 2020-05-01 | 2022-06-14 | Salesforce.Com, Inc. | Metadata driven serverless functions in a multitenant environment |
-
2023
- 2023-09-18 CN CN202311196404.8A patent/CN116974527B/zh active Active
Patent Citations (6)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US9509571B1 (en) * | 2012-07-25 | 2016-11-29 | NetSuite Inc. | First-class component extensions for multi-tenant environments |
| CN108810164A (zh) * | 2018-06-29 | 2018-11-13 | 合肥微商圈信息科技有限公司 | 一种支持SaaS应用流程按需定制及运行的装置 |
| CN113220295A (zh) * | 2021-04-26 | 2021-08-06 | 深圳市云网万店科技有限公司 | 前端组件动态扩展的方法、***及计算机可读存储介质 |
| CN113239310A (zh) * | 2021-06-17 | 2021-08-10 | 上海微盟企业发展有限公司 | 一种页面加载方法及相关装置 |
| CN114489614A (zh) * | 2021-12-26 | 2022-05-13 | 汇承金融科技服务(南京)有限公司 | 一种saas平台定制化ui解决方法 |
| CN114860205A (zh) * | 2022-05-09 | 2022-08-05 | 维沃移动通信有限公司 | 低代码开发平台的应用扩展***、方法和装置 |
Non-Patent Citations (2)
| Title |
|---|
| 《Alcatraz: Data Exfiltration-Resilient Corporate Network Architecture》;Daniele Enrico Asoni等;《2018 IEEE 4th International Conference on Collaboration and Internet Computing (CIC)》;1-12 * |
| 基于SCA可变性的多租户功能可配置方法研究;许梦雨等;《计算机工程与设计》;1-5 * |
Also Published As
| Publication number | Publication date |
|---|---|
| CN116974527A (zh) | 2023-10-31 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| US11868231B2 (en) | System and method for evaluating code by a hybrid of local and cloud-based computers | |
| CN110825362B (zh) | 低代码应用软件开发***及方法 | |
| Freeman | Pro Asp. net core MVC | |
| US7080350B2 (en) | Method for developing Web applications, development support system and storage medium for storing programs developed according to the method | |
| US8291374B2 (en) | System and method for generating modified source code based on change-models | |
| CN100492290C (zh) | 软件动态演化中构件运行时状态的获取和转换方法 | |
| US20160170719A1 (en) | Software database system and process of building and operating the same | |
| CN103164249A (zh) | 用于脚本语言编译器的扩展机制 | |
| CN112860260A (zh) | 一种在高校场景下基于web的跨平台应用构建工具及方法 | |
| US9116708B2 (en) | Program creation support apparatus, program, and information system | |
| Bork et al. | A vision for flexible glsp-based web modeling tools | |
| CN115113850A (zh) | 一种跨平台应用的构建、运行方法、服务器、终端和*** | |
| CN116974527B (zh) | 一种基于低代码前端组件的可插拔的页面扩展方法及*** | |
| JP7014960B2 (ja) | 情報処理装置、サーバ、その処理方法及びプログラム | |
| Bochon et al. | Challenges of cloud business process management | |
| Völker et al. | Adding decision management to robotic process automation | |
| CN114527993A (zh) | 应用程序部署方法、装置、设备及介质 | |
| Di Ruscio et al. | A feature-based approach for variability exploration and resolution in model transformation migration | |
| Vaupel | A framework for model-driven development of mobile applications with context support | |
| Fricke | Standalone web diagrams and lightweight plugins for web-IDEs such as Visual Studio Code and Theia | |
| CN116974558B (zh) | 一种营销计费活动h5页面开发平台及开发方法 | |
| Hermida et al. | XANUI: a textual platform-independent model for rich user interfaces | |
| Dittrich | Extraction of user behavior profiles for software modernization | |
| Raynov | Android widgets development: native programming with Kotlin and JetPack Glance | |
| Hoang | Finnish scanner mobile application |
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 |