基于低代码开发平台进行web页面灵活复用的系统及方法与流程

技术特征：
1.一种基于低代码开发平台进行web页面灵活复用的系统，其特征在于，包括依次连接的可视化设计端、服务端和部署端；所述可视化设计端用于生成web页面；所述服务端用于存储web页面的页面元数据；所述部署端用于进行页面渲染。2.根据权利要求1所述的基于低代码开发平台进行web页面灵活复用的系统，其特征在于，所述可视化设计端具体为低代码开发平台，其设置有web页面组件库；所述web页面组件库包括若干组件。3.根据权利要求2所述的基于低代码开发平台进行web页面灵活复用的系统，其特征在于，所述部署端包括后端渲染服务模块和前端渲染框架；所述后端渲染服务模块用于生成页面元数据的实例和渲染批次号；所述前端渲染框架用于将页面元数据的实例和组件模板渲染成页面视图。4.一种基于权利要求1-3任一所述权利要求的基于低代码开发平台进行web页面灵活复用的系统的基于低代码开发平台进行web页面灵活复用的方法，其特征在于，包括以下步骤：s1、通过可视化设计端建立web页面，并将web页面的页面元数据存储至服务端；s2、通过部署端获取服务端的页面元数据，得到页面视图；s3、根据用户需要进行的页面视图复用，触发组件绑定事件，得到事件脚本实例；s4、根据事件脚本实例调用进行页面视图之间的数据交互。5.根据权利要求4所述的基于低代码开发平台进行web页面灵活复用的方法，其特征在于，所述步骤s1包括以下分步骤：s11、基于可视化设计端的web页面组件库中的组件，选择指定组件通过拖拉的方式建立web页面；s12、基于web页面的组件，配置所述组件的元数据，得到页面元数据；其中，所述页面元数据包括第一标识id以及包含建立web页面的所有组件元数据，每个所述组件元数据都包括第二标识id、组件类型、样式定义、属性定义、事件定义和方法定义；所述组件类型用于关联已封装的组件模板进行数据绑定渲染，所述样式用于定义所述组件的渲染样式脚本，所述事件用于定义所述组件可触发的联动操作事件；所述方法用于定义所述组件的内置处理回调方法。6.根据权利要求4所述的基于低代码开发平台进行web页面灵活复用的方法，其特征在于，所述步骤s2包括以下分步骤：s21、根据页面元数据调用后端渲染服务模块生成页面元数据实例；s22、根据页面元数据实例调用前端渲染框架生成页面视图。7.根据权利要求6所述的基于低代码开发平台进行web页面灵活复用的方法，其特征在于，所述步骤s21中，生成的页面元数据实例设置有渲染批次号，其生成方法具体为：通过后端渲染服务模块将页面元数据中每个组件元数据的第二标识id进行处理，生成渲染批次号；所述步骤s22具体为：根据页面元数据实例中的组件通过前端渲染框架的component语法标签指定渲染的组件，将指定渲染的组件对应的组件元数据与组件模板动态绑定，生成页面视图。
8.根据权利要求7所述的基于低代码开发平台进行web页面灵活复用的方法，其特征在于，所述步骤s3具体为：基于用户需要复用指定的页面视图，触发组件绑定事件，获取页面元数据的渲染批次号，通过后端渲染服务模块调用渲染批次号和事件id进行事件脚本查询，得到事件脚本实例。9.根据权利要求8所述的基于低代码开发平台进行web页面灵活复用的方法，其特征在于，所述步骤s4具体为：s41、根据事件脚本实例触发页面交互事件，调用后端渲染服务模块请求关联复用的子页面；s42、通过前端渲染框架渲染所述复用的子页面的页面元数据实例；并返回所述子页面元数据中的第一标识id；s43、根据返回的第一标识id确定事件脚本中第一标识id对应第二标识id的组件，并根据确定的组件进行数据交互的挂载方法，进行页面数据回填，实现页面视图的数据交互。10.根据权利要求9所述的基于低代码开发平台进行web页面灵活复用的方法，其特征在于，所述步骤s4中，数据交互的挂载方法具体为：获取数据挂载key值，创建交互挂载对象，在vue根容器组件的root根实例对象上缓存挂载对象，并作为key值主题消息发布给嵌入页面内的交互组件，判断所述交互组件是否已经创建；若是，则根据所述交互组件接收key值主题消息，立即执行挂载交互方法，更新己经执行的标识状态；若否，则异步初始化创建交互组件，并获取所述交互组件数据挂载key值，查询vue根容器组件的root根实例对象上缓存的挂载对象，当存在挂载对象时，执行挂载交互方法，更新己经执行的标识状态。

技术总结
本发明公开了基于低代码开发平台进行web页面灵活复用的系统及方法，本发明属于程序开发技术领域，方法包括以下步骤：S1、通过可视化设计端建立web页面，并将web页面的页面元数据存储至服务端；S2、通过部署端获取服务端的页面元数据，得到页面视图；S3、根据用户需要进行的页面视图复用，触发组件绑定事件，得到事件脚本实例；S4、根据事件脚本实例调用进行页面视图之间的数据交互。本发明使原本静态的元数据具有了动态使用的特性，结合生成的页面元数据实例和调用API方法，为页面内所有组件的复用渲染及事件隔离运行提供了基础支持，能够在低代码开发平台中实现web页面灵活复用交互。低代码开发平台中实现web页面灵活复用交互。低代码开发平台中实现web页面灵活复用交互。


技术研发人员：唐兴平 石丹杰 张晓宇
受保护的技术使用者：浙江瑞华康源科技有限公司
技术研发日：2022.06.30
技术公布日：2022/9/9