本发明专利技术提出一种基于低代码前端组件的可插拔的页面扩展方法及系统包括：产品侧完成页面组件的开发后，将组件信息录入到系统中；产品侧将开放的、允许被项目定制的扩展点信息录入到系统中；产品侧封装前端SDK，页面通过调用SDK来加载前端组件；产品侧将后端接口注册到扩展点管理中心，使得管理中心可以自动识别接口的输入和输出，并新增项目租户；将产品侧的接口能力和扩展点定义数据分享给指定的项目租户，然后获取产品侧接口能力以及产品侧扩展点定义；扩展点实现管理。本发明专利技术通过租户隔离和扩展点实现，各个项目在不影响产品原有功能和其他项目定制功能的情况下，进行自行的组件定制。这在很大程度上提高了产品的定制化能力和灵活性。和灵活性。和灵活性。
【技术实现步骤摘要】
一种基于低代码前端组件的可插拔的页面扩展方法及系统
[0001]本专利技术涉及软件开发领域，具体涉及一种基于低代码前端组件的可插拔的页面扩展方法及系统。
技术介绍
[0002]在过去的一段时间里，见证了前端开发技术的迅速发展。React/Vue等前端组件化技术已经非常成熟，可以将复杂的页面分解成一个个前端组件，然后再通过组件组装出页面。这些前端组件的生命周期各阶段开放了API控制能力，使得业务侧可以灵活控制前端组件的渲染逻辑。
[0003]同时，也能够看到，由于一款软件产品往往不能满足所有的业务场景，因此在项目实施时经常需要进行不同程度的定制。然而，针对定制化代码的管理方法一直存在问题。常见的方法包括开一个代码分支出来做定制化，或者在原来的代码里通过if
‑
else的方式写入不同的逻辑分支。然而这两种方法都存在问题，前者导致分支数量越来越多，无法同时维护多个版本的代码的同步；后者则导致代码逻辑越来越复杂，难以更新维护。
[0004]同时，基于UMD模块化加载技术，市面上有些产品可以实现在运行时从服务器获取前端组件文件并加载到页面。然而，这些产品往往无法很好地解决定制开发组件如何和原产品组件隔离的问题，这就涉及到扩展前端组件的可视化编排开发、组件加载路由寻址和扩展点统一管理等技术问题。
[0005]例如，项目上定制开发者可能并不熟悉原产品的前端技术，或者学习门槛较高，导致定制化成本较高。同时，定制开发的组件在部署时不能覆盖原产品的默认组件，需要以外挂的模式存在，而不能以物理覆盖的模式存在。此外，不同的项目需要能够在线维护自己的扩展点实现，根据需求实现或关闭各自项目需要的扩展点。
[0006]因此，现有技术的局限性呼唤一种新的解决方案，它应能有效地解决以上所述的问题，并提供一种基于低代码前端组件的可插拔的页面扩展系统及方法。
技术实现思路
[0007]为克服现有技术的不足，本专利技术提出一种基于低代码前端组件的可插拔的页面扩展方法及系统，每个租户只需要关注和维护自己的定制功能，所以可以极大地降低项目间的沟通和协调成本，既满足了用户个性化需求的同时，也保持了产品的稳定性和可靠性，提高了用户的使用体验。
[0008]为实现上述目的，本专利技术提供一种基于低代码前端组件的可插拔的页面扩展方法，包括：步骤S1：产品侧完成页面组件的开发后，将组件信息录入到系统中；步骤S2：产品侧将开放的、允许被项目定制的扩展点信息录入到系统中；步骤S3：产品侧封装前端SDK，页面通过调用SDK来加载前端组件；步骤S4：产品侧将后端接口注册到扩展点管理中心，使得管理中心可以自动识别
接口的输入和输出，并新增项目租户；步骤S5：将产品侧的接口能力和扩展点定义数据分享给指定的项目租户，然后获取产品侧接口能力以及产品侧扩展点定义；步骤S6：扩展点实现管理。
[0009]进一步地，步骤S3包括：步骤S31：前端SDK封装参数；步骤S32：运行前端SDK；步骤S33：加载远程高代码组件js；步骤S34：本地运行DSL。
[0010]进一步地，步骤S32具体如下：页面调用前端SDK的方式：<RemoteComp url="xxx"compExtCode="xxx"tenantId="xxx" />以上组件参数中，RemoteComp为远程组件，Url表示默认的组建路径，compExtCode为扩展点编码，tenantId为租户ID，如果不存在compExtCode，则使用ajax请求组件参数中的“url”指定资源回来并运行；如果存在compExtCode，则根据扩展点编码和租户ID请求后台接口判断扩展点是否存在定制实现，以及定制实现的类型，如果此租户ID没有返回，那么采用产品侧默认的实现；如果返回定制实现，定制实现的类型分为高代码组件和编排组件。类型如果为高代码组件，则是返回一个js文件路径，ajax请求该路径资源运行；类型如果为编排组件，则是返回一串DSL，调用低代码运行引擎进行渲染。
[0011]进一步地，步骤S33包括：步骤S331：向服务端发起请求，获取组件的代码和元数据；步骤S332： 组件代码的加载：获取到组件代码后，使用动态创建script标签的方式将组件代码注入到页面中，从而实现组件的加载；步骤S333：组件渲染：组件代码加载完成后，使用React.createElement()方法创建组件实例，并将其渲染到页面中；步骤S334：组件更新：如果远程组件有更新，重新加载组件代码，并使用React.createElement()方法创建新的组件实例进行更新。
[0012]进一步地，步骤S34包括：步骤S341：解析出页面的结构、事件和数据源部分；步骤S342：页面结构解析：根据结构数据递归绘制小颗粒的组件到页面上，传人初始化的参数；步骤S343：事件解析：等页面结构解析完，再绑定事件，事件的逻辑拆分成条条的动作指令；步骤S344： 数据源解析：数据源的解析不依赖结构和事件、可以同步进行。数据源最终会转换为组建参数传递到组件内部。事件操作数据源变化也会触发页面结构的变化。
[0013]进一步地，步骤S6包括：步骤S61：上传高代码开发的组件，线下开发好组件编辑上传到扩展点管理中心；步骤S62： 可视化编排组件：项目租户侧打开页面设计器，拖拽页面控件、编排前
端事件、调用产品侧接口，来编排出业务组件；其中，使用产品侧注册进来的接口时，自动获取接口的入参和出参来参与组件的编排开发。
[0014]进一步地，还包括版本控制和回滚功能，具体如下：步骤S101：在后端存储系统中，为组件创建版本库；步骤S102：组件被更新或者定制时，在版本库中保存一个新的版本；步骤S103：在前端添加一个版本选择和回滚的界面，允许用户在不同的版本之间进行切换。
[0015]进一步地，还包括预览功能，步骤S111：在前端SDK中增加预览组件的功能；步骤S112：在用户定制或者更新组件时，先调用预览功能，显示预览效果；步骤S113：用户确认预览效果符合预期后，再进行真正的定制或者更新。
[0016]一种基于低代码前端组件的可插拔的页面扩展系统，适用于所述的一种基于低代码前端组件的可插拔的页面扩展方法，包括：扩展点管理中心、扩展点运行中心和前端SDK；扩展点管理中心是对产品功能模块化和可定制化的管理中心，包括以下几个子功能：前端组件注册管理：允许将产品的功能拆分为独立的前端组件，并将这些组件注册到管理中心，以便在定制化的过程中选择并调用。
[0017]组件扩展点管理：标记产品可以开放的扩展点，以便在项目定制时可以基于这些扩展点来实现自定义组件。
[0018]扩展点实现管理：创建各项目的租户空间，让项目在自己的租户空间中定制开发和管理组件，避免相互影响。
[0019]后端接口能力注册：注册产品的后端接口以便在组件编排时复用，自动识别接口的入参和出参结构。
[0020]组件开发方式：支持高代码组件上传（面向专业前端开发者）本文档来自技高网...
【技术保护点】
【技术特征摘要】
1.一种基于低代码前端组件的可插拔的页面扩展方法，其特征在于，包括：步骤S1：产品侧完成页面组件的开发后，将组件信息录入到系统中；步骤S2：产品侧将开放的、允许被项目定制的扩展点信息录入到系统中；步骤S3：产品侧封装前端SDK，页面通过调用SDK来加载前端组件；步骤S4：产品侧将后端接口注册到扩展点管理中心，使得管理中心可以自动识别接口的输入和输出，并新增项目租户；步骤S5：将产品侧的接口能力和扩展点定义数据分享给指定的项目租户，然后获取产品侧接口能力以及产品侧扩展点定义；步骤S6：扩展点实现管理。2.根据权利要求1所述的一种基于低代码前端组件的可插拔的页面扩展方法，其特征在于，步骤S3包括：步骤S31：前端SDK封装参数；步骤S32：运行前端SDK；步骤S33：加载远程高代码组件js；步骤S34：本地运行DSL。3.根据权利要求2所述的一种基于低代码前端组件的可插拔的页面扩展方法，其特征在于，步骤S32具体如下：页面调用前端SDK的方式：<RemoteComp url="xxx"compExtCode="xxx"tenantId="xxx" />Url表示默认的组建路径，compExtCode为扩展点编码，tenantId为租户ID，如果不存在compExtCode，则使用ajax请求组件参数中的“url”指定资源回来并运行；如果存在compExtCode，则根据扩展点编码和租户ID请求后台接口判断扩展点是否存在定制实现，以及定制实现的类型，如果此租户ID没有返回，那么采用产品侧默认的实现；如果返回定制实现，定制实现的类型分为高代码组件和编排组件，类型如果为高代码组件，则是返回一个js文件路径，ajax请求js文件路径资源运行；类型如果为编排组件，则是返回一串DSL，调用低代码运行引擎进行渲染。4.根据权利要求2所述的一种基于低代码前端组件的可插拔的页面扩展方法，其特征在于，步骤S33包括：步骤S331：向服务端发起请求，获取组件的代码和元数据；步骤S332： 组件代码的加载：获取到组件代码后，使用动态创建script标签的方式将组件代码注入到页面中，从而实现组件的加载；步骤S333：组件渲染：组件代码加载完成后，使用React.createElement()方法创建组件实例，并将其渲染到页面中；步骤S334：组件更新：如果远程组件有更新，重新加载组件代码，并使用React.createElement()方法创建新的组件实例进行更新。5...
【专利技术属性】
技术研发人员：余辉，
申请(专利权)人：浩鲸云计算科技股份有限公司，
类型：发明
国别省市：
还没有人留言评论。发表了对其他浏览者有用的留言会获得科技券。