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

1.本发明属于程序开发技术领域，具体涉及基于低代码开发平台进行web页面灵活复用的系统及方法。


背景技术：

2.在低代码开发平台中，每个web页面是由组件模板可视化拖拽设计的，组件都包含一套完整的事件或方法配置定义，这些web页面就是组件模板集合，通常生成json元数据来驱动。目前低代码开发平台都是单个页面设计，页面内不能灵活复用展示另一个页面信息，数据只能在单个页面内流动。
3.这样的低代码开发平台设计模式使用起来比较单一，复杂的页面结构不能进行灵活的数据交互，组件全部堆叠在一个页面内维护改动也比较困难。此外，在一些特殊组件或业务场景中，一个信息页面被另一个页面内的事件触发嵌入复用展示在所难免，到目前为止还未有相关技术来解决低代码开发平台中同一页面可以被灵活复用进行数据交互的问题：
4.1.例如标签页组件需要动态添加已设计页面作为选项卡显示的内容。
5.2.例如数据表格组件的不同行需要展开显示详细信息视图。
6.3.例如新增或编辑事件都需要打开相同的外部对话框操作表单信息。


技术实现要素：

7.针对现有技术中的上述不足，本发明提供的基于低代码开发平台进行web页面灵活复用的系统及方法解决了低代码开发平台对具有数据传递功能的通用页面结构不能进行灵活数据交互的问题。
8.为了达到上述发明目的，本发明采用的技术方案为：一种基于低代码开发平台进行web页面灵活复用的系统，包括依次连接的可视化设计端、服务端和部署端；
9.所述可视化设计端用于生成web页面；所述服务端用于存储web页面的页面元数据所述部署端用于进行页面渲染。
10.进一步地：所述可视化设计端具体为低代码开发平台，其设置有web页面组件库；所述web页面组件库包括若干组件。
11.上述进一步方案的有益效果为：低代码平台可以独立开发一个设计系统web页面的管理端，无需编码或只需少量代码就可以快速生成应用程序的开发平台。
12.进一步地：所述部署端包括后端渲染服务模块和前端渲染框架；
13.所述后端渲染服务模块用于生成页面元数据的实例和渲染批次号；所述前端渲染框架用于将页面元数据的实例和组件模板渲染成页面视图。
14.一种基于低代码开发平台进行web页面灵活复用的系统的基于低代码开发平台进行web页面灵活复用的方法，包括以下步骤：
15.s1、通过可视化设计端建立web页面，并将web页面的页面元数据存储至服务端；
16.s2、通过部署端获取服务端的页面元数据，得到页面视图；
17.s3、根据用户需要进行的页面视图复用，触发组件绑定事件，得到事件脚本实例；
18.s4、根据事件脚本实例调用进行页面视图之间的数据交互。
19.进一步地：所述步骤s1包括以下分步骤：
20.s11、基于可视化设计端的web页面组件库中的组件，选择指定组件通过拖拉的方式建立web页面；
21.s12、基于web页面的组件，配置所述组件的元数据，得到页面元数据；
22.其中，所述页面元数据包括第一标识id以及包含建立web页面的所有组件元数据，每个所述组件元数据都包括第二标识id、组件类型、样式定义、属性定义、事件定义和方法定义；
23.所述组件类型用于关联已封装的组件模板进行数据绑定渲染，所述样式用于定义所述组件的渲染样式脚本，所述事件用于定义所述组件可触发的联动操作事件；所述方法用于定义所述组件的内置处理回调方法。
24.上述进一步方案的有益效果为：根据用户业务需求进行样式调整、组件属性配置、交互事件脚本定义等操作，即可完成web页面的生成。
25.进一步地：所述步骤s2包括以下分步骤：
26.s21、根据页面元数据调用后端渲染服务模块生成页面元数据实例；
27.s22、根据页面元数据实例调用前端渲染框架生成页面视图。
28.进一步地：所述步骤s21中，生成的页面元数据实例设置有渲染批次号，其生成方法具体为：
29.通过后端渲染服务模块将页面元数据中每个组件元数据的第二标识id进行处理，生成渲染批次号；
30.所述步骤s22具体为：根据页面元数据实例中的组件通过前端渲染框架的component语法标签指定渲染的组件，将指定渲染的组件对应的组件元数据与组件模板动态绑定，生成页面视图。
31.进一步地：所述步骤s3具体为：
32.基于用户需要复用指定的页面视图，触发组件绑定事件，获取页面元数据的渲染批次号，通过后端渲染服务模块调用渲染批次号和事件id进行事件脚本查询，得到事件脚本实例。
33.进一步地：所述步骤s4具体为：
34.s41、根据事件脚本实例触发页面交互事件，调用后端渲染服务模块请求关联复用的子页面；
35.s42、通过前端渲染框架渲染所述复用的子页面的页面元数据实例；并返回所述子页面元数据中的第一标识id；
36.s43、根据返回的第一标识id确定事件脚本中第一标识id对应第二标识id的组件，并根据确定的组件进行数据交互的挂载方法，进行页面数据回填，实现页面视图的数据交互。
37.进一步地：所述步骤s4中，数据交互的挂载方法具体为：
38.获取数据挂载key值，创建交互挂载对象，在vue根容器组件的root根实例对象上
缓存挂载对象，并作为key值主题消息发布给嵌入页面内的交互组件，判断所述交互组件是否已经创建；
39.若是，则根据所述交互组件接收key值主题消息，立即执行挂载交互方法，更新己经执行的标识状态；
40.若否，则异步初始化创建交互组件，并获取所述交互组件数据挂载key值，查询vue根容器组件的root根实例对象上缓存的挂载对象，当存在挂载对象时，执行挂载交互方法，更新己经执行的标识状态。
41.本发明的有益效果为：
42.(1)本发明通过对设计页面的常规元数据添加可计算管理的标识id规则变量，使原本静态的元数据具有了动态使用的特性，结合后端渲染服务模块生成的页面元数据实例、组件事件脚本实例以及调用api方法，为页面内所有组件的复用渲染及事件隔离运行提供了基础支持，能够在低代码开发平台中实现web页面灵活复用交互。
43.(2)本发明通过对web页面进行数据交互，可以增强页面数据模型的通用灵活性，让整个页面的数据结构不再臃肿，管理维护也变得更简单，能够满足更多web系统功能设计需求。
附图说明
44.图1为基于低代码开发平台进行web页面灵活复用的系统框架图。
45.图2为基于低代码开发平台进行web页面灵活复用的方法流程图。
具体实施方式
46.下面对本发明的具体实施方式进行描述，以便于本技术领域的技术人员理解本发明，但应该清楚，本发明不限于具体实施方式的范围，对本技术领域的普通技术人员来讲，只要各种变化在所附的权利要求限定和确定的本发明的精神和范围内，这些变化是显而易见的，一切利用本发明构思的发明创造均在保护之列。
47.实施例1：
48.如图1所示，在本发明的一个实施例中，一种基于低代码开发平台进行web页面灵活复用的系统，包括依次连接的可视化设计端、服务端和部署端；
49.所述可视化设计端用于生成web页面；所述服务端用于存储web页面的页面元数据；所述部署端用于将页面元数据的实例和组件模板进行视图绑定渲染。
50.所述可视化设计端具体为低代码开发平台，其设置有web页面组件库；所述web页面组件库包括若干组件。
51.在本实施例中，低代码开发平台是一种无需编码或只需少量代码就可以快速生成应用程序的开发平台。
52.所述部署端包括后端渲染服务模块和前端渲染框架；
53.所述后端渲染服务模块用于生成页面元数据的实例；所述前端渲染框架用于将页面元数据和组件模板渲染成页面视图。
54.实施例2：
55.本实施例针对一种基于低代码开发平台进行web页面灵活复用的系统的实施方
法。
56.如图2所示，一种基于低代码开发平台进行web页面灵活复用的方法，包括以下步骤：
57.s1、通过可视化设计端建立web页面，并将web页面的页面元数据存储至服务端；
58.s2、通过部署端获取服务端的页面元数据，得到页面视图；
59.s3、根据用户需要进行的页面视图复用，触发组件绑定事件，得到事件脚本实例；
60.s4、根据事件脚本实例调用进行页面视图之间的数据交互。
61.所述步骤s1包括以下分步骤：
62.s11、基于可视化设计端的web页面组件库中的组件，选择指定组件通过拖拉的方式建立web页面；
63.所述组件类型用于关联已封装的组件模板进行数据绑定渲染，所述样式用于定义所述组件的渲染样式脚本，所述事件用于定义所述组件可触发的联动操作事件；所述方法用于定义所述组件的内置处理回调方法。
64.在本实施例中，用户设计管理系统页时，需要在可视化设计端的数据文件目录中新建设计页面，打开设计页面后选择合适的组件进行拖拽设计。
65.用户设计带展开行的数据表格时，需要在设计页面内拖拽放置表格组件，并对表格列对象属性进行配置。
66.用户设计新增/编辑按钮点击弹出外部对话框维护表单信息界面时，需要在主操作页面内拖拽放置新增/编辑按钮，然后单独在对话框设计页面内对表单信息内容进行设计。
67.s12、基于web页面的组件，配置所述组件的元数据，得到页面元数据；
68.所述页面元数据包括第一标识id以及包含建立web页面的所有组件元数据，每个所述组件元数据都包括第二标识id、组件类型、样式定义、属性定义、事件定义和方法定义；
69.页面元数据的第一标识id为batchno，其可保持整个页面被复用时渲染批次号batchno全局唯一，可以让页面内任意子组件能够快速获取到所属同一批次渲染的根页面对象。第二标识id的batchno_uuid中的uuid作用为保持组件拖拽设计时全局唯一，分隔符则用于前端在渲染处理时可以获取渲染批次号及区分组件。
70.本发明的第一标识符作用为保持整个页面被复用时渲染批次号batchno全局唯一，第二标识符作用为保持组件拖拽设计时uuid全局唯一，分隔符则用于前端在渲染处理时可以获取渲染批次号及区分组件。而页面根容器标识id只有渲染批次号batchno，这样做的好处是可以让页面内任意子组件能够快速获取到所属同一批次渲染的根页面对象。
71.在本实施例中，配置管理系统页时，需要配置菜单组件的菜单项元数据属性，该元数据属性与菜单组件模板绑定显示为菜单选择项，然后继续配置菜单组件的菜单项选择事件，在该事件的处理脚本中调用自定义的公共新增标签页选项卡的方法，将选中菜单项的页面地址动态请求生成元数据实例并渲染显示到对应的标签页选项卡区域中。
72.配置带展开行的数据表格时，将表格组件行展开的复用页面嵌入地址属性为事先独立设计好的详细信息页面，接着配置表格行展开事件，定义与嵌入复用页面的数据交互处理脚本，该处理脚本会遍历展开的详细页面内所有表单元素组件标识id，再传参调用自定义的数据挂载方法对表单元素组件进行赋值回填行数据操作。
73.配置新增/编辑按钮点击弹出外部对话框维护表单信息界面时，配置按钮组件的点击事件脚本，在该脚本中定义弹出单独设计的目标对话框页面执行步骤，添加弹窗触发前事件执行逻辑，通过调用数据挂载渲染方法，在对话框内组件初始化时对新增/编辑的表单数据回填赋值；然后配置对话框表单内提交按钮的点击事件，添加调用服务接口处理表单数据步骤脚本，将接口请求返回数据缓存到步骤变量中。
74.所述步骤s2包括以下分步骤：
75.s21、根据页面元数据调用后端渲染服务模块生成页面元数据实例；
76.s22、根据页面元数据实例调用前端渲染框架生成页面视图。
77.所述步骤s21中，生成的页面元数据实例设置有渲染批次号，其生成方法具体为：
78.通过后端渲染服务模块将页面元数据中每个组件元数据的第二标识id进行处理，生成渲染批次号；
79.在本实施例中，主页面在渲染时已经调用后端服务统一生成了所有组件第一标识id的渲染批次号batchno(不包括复用的子页面)，而当复用渲染子页面时也需要调用后端服务生成子页面的渲染批次号batchno，这样做的好处是可以让每次渲染的页面组件对象都是唯一标识的，便于前端组件的区分操作管理。复用渲染子页面的流程为：访问主页面地址；请求主页面元数据模板；返回主页面渲染批次号的页面元数据实例并渲染；请求渲染子页面元数据实例；返回子页面渲染批次号的页面元数据实例并渲染。
80.所述步骤s22具体为：根据页面元数据实例中的组件通过前端渲染框架的component语法标签指定渲染的组件，将指定渲染的组件对应的组件元数据与组件模板动态绑定，生成页面视图。
81.component语法标签的用法为：渲染一个“元组件”为动态组件，并根据is值决定一个组件被渲染；is值是一个字符串，它既可以是html标签名称也可以是组件名称。
82.所述步骤s3具体为：
83.基于用户需要复用指定的页面视图，触发组件绑定事件，获取页面元数据的第一标识id，并通过截取前缀得到事件id，通过后端渲染服务模块调用渲染批次号和事件id进行事件脚本查询，得到事件脚本实例。
84.在本实施例中，主页面数据列表行展开事件触发操作的方法具体为：
85.用户触发数据列表绑定的行展开事件，调用后端服务请求行展开关联复用的子页面，前端渲染该次复用的子页面元数据实例(前端渲染完成后会把相关组件对象都缓存管理起来，以便后续通过组件元数据的第二标识id获取使用，调用后端服务请求行展开定义的事件脚本，前端声明数据列表渲染批次的事件脚本实例(当主页面内有事件定义调用组件方法时，只能操作所属同一批次渲染的组件，需要同步更新事件脚本里面的组件引用页面元数据的第一标识id渲染批次号batchno)。执行事件脚本实例中对不同渲染批次页面组件进行数据交互的挂载方法(当主页面操作不同批次渲染的子页面组件时，需要通过组件标识id的uuid后缀进行数据挂载传参)；子页面内各个表单组件初始化渲染过程中，会执行数据挂载方法进行数据回填绑定展示。
86.所述步骤s4具体为：
87.s41、根据事件脚本实例触发页面交互事件，调用后端渲染服务模块请求关联复用的子页面；
88.s42、通过前端渲染框架渲染所述复用的子页面的页面元数据实例；并返回所述子页面元数据中的第一标识id；
89.s43、根据返回的第一标识id确定事件脚本中第一标识id对应第二标识id的组件，并根据确定的组件进行数据交互的挂载方法，进行页面数据回填，实现页面视图的数据交互。
90.所述步骤s4中，数据交互的挂载方法具体为：
91.获取数据挂载key值，创建交互挂载对象，在vue根容器组件的root根实例对象上缓存挂载对象，并作为key值主题消息发布给嵌入页面内的交互组件，判断所述交互组件是否已经创建；
92.若是，则根据所述交互组件接收key值主题消息，立即执行挂载交互方法，更新己经执行的标识状态；
93.若否，则异步初始化创建交互组件，并获取所述交互组件数据挂载key值，查询vue根容器组件的root根实例对象上缓存的挂载对象，当存在挂载对象时，执行挂载交互方法，更新己经执行的标识状态。
94.进行带展开行的数据表格的数据交互方法具体为：
95.在表格的行展开事件脚本中对详细信息页面进行数据回填处理，该事件内部会调用后端渲染服务模块获取展开的页面地址对应的页面元数据实例，然后将该实例数据作为json参数传递到事件脚本中，这样用户就可以遍历获取到详细信息页面的所有组件第二标识id信息，以及组件关联的表格行数据对象属性值，再通过调用页面数据挂载方法来处理详细信息页面内组件的回填赋值。
96.进行新增/编辑按钮点击弹出外部对话框维护表单信息界面的数据交互方法具体为：
97.新增/编辑按钮在弹出外部公共对话框时，如果需要传递主页面的数据，就需要通过数据挂载方法进行交互，默认取的整个主页面vue根容器组件作为外部对话框嵌入页面的父容器组件，主页面根容器组件的第二标识id嵌入交互的组件的uuid后缀。
98.当事件脚本触发数据挂载方法时，传入挂载点直接父容器组件的第二标识id至父容器组件实例对象，获取父容器组件对象临时存储的挂载key值作为迭代的业务数据key值，再截取传入的嵌入的交互组件的uuid后缀，完成生成数据挂载key值。
99.本发明的有益效果为：本发明通过对设计页面的常规元数据添加可计算管理的标识id规则变量，使原本静态的元数据具有了动态使用的特性，结合后端渲染服务模块生成的页面元数据实例、组件事件脚本实例以及调用api方法，为页面内所有组件的复用渲染及事件隔离运行提供了基础支持，能够在低代码开发平台中实现web页面灵活复用交互。
100.本发明通过对web页面进行数据交互，可以增强页面数据模型的通用灵活性，让整个页面的数据结构不再臃肿，管理维护也变得更简单，能够满足更多web系统功能设计需求。
101.在本发明的描述中，需要理解的是，术语“中心”、“厚度”、“上”、“下”、“水平”、“顶”、“底”、“内”、“外”、“径向”等指示的方位或位置关系为基于附图所示的方位或位置关系，仅是为了便于描述本发明和简化描述，而不是指示或暗示所指的设备或元件必须具有特定的方位、以特定的方位构造和操作，因此不能理解为对本发明的限制。此外，术语“第
一”、“第二”、“第三”仅用于描述目的，而不能理解为指示或暗示相对重要性或隐含指明的技术特征的数量。因此，限定由“第一”、“第二”、“第三”的特征可以明示或隐含地包括一个或者更多个该特征。