[发明专利]基于自定义配置属性字段的页面动态渲染方法及系统

说明书

本公开提供了一种基于自定义配置属性字段的页面动态渲染方法及系统，包括：将待配置的表单或列表文件读入内存，并基于预封装的组件在图形化界面中进行显示；在所述图形化界面中通过拖拽属性字段、修改字段名称以及自定义排序，实现表单或列表文件中各配置项所对应资产属性值的动态配置；获取配置的表单或列表的资产属性值，基于表单或列表的预封装组件实现相关页面中表单或列表的动态渲染；其中，对于所述表单，采用预置表单项的方式封装动态表单组件，其中，所述表单基于JSON格式文件进行表示；对于所述列表，采用JSX与渲染器结合的方式进行动态列表封装；所述封装的动态表单组件及动态列表均在所述图形化界面中进行展示。

技术领域

本公开属于页面配置渲染技术领域，尤其涉及一种基于自定义配置属性字段的页面动态渲染方法及系统。

背景技术

本部分的陈述仅仅是提供了与本公开相关的背景技术信息，不必然构成在先技术。

在项目研发时经常会遇到功能类似、结构不变的业务需求，而对于数据类型的维护与展示缺少不了应用大量的表单和列表。通常，我们将常用的Form表单检索和Table列表展示进行封装，有助于提高开发效率和统一样式风格。

动态表单、列表的目的是为了根据业务流程不同灵活设计显示页面，显然在业务流程设计阶段不用过多的考虑表单、列表如何实现，将业务流程与页面显示分离开了，充分体现了MVC思想(即Model(模型)、View(视图)和Controller(控制器))，我们可以把动态表单、动态列表看成V层的具体实现。

现有的技术方案为开发一个配置式的表单，设计一个全新的表单Schema规范，然后根据Schema编写表单JSON对象，最后由表单JSON动态生成表单，并将表单中可能会显示的项，例如：文本框、下拉框、单选框、以及级联选择器等表单项类型尽可能多的提前预设好，通过判断完成不同类型的内容渲染展示。同理，列表中也可预设多选、单选、文字、图标及文本框等内容形式。这种思路已经非常成熟了，并且有非常多成熟的开源项目采用了这种思路。

但是，发明人发现，根据Schema编写表单JSON对象存在如下缺陷：

(1)使用者需要学习表单Schema规范；

(2)此方案难于实现复杂的表单交互逻辑。

为了实现动态表单的复杂交互逻辑，虽然可以为动态表单增加可编程接口，通过组件的交互事件和API方法实现交互逻辑，但现有技术组件只单独针对动态表单或动态列表完成配置渲染，无法在可视化界面直接操作表单或者列表中的属性字段并自定义其顺序，只能通过修改JSON对象进行增减修改，具有一定的操作局限性。

发明内容

本公开为了解决上述问题，提供了一种基于自定义配置属性字段的页面动态渲染方法及系统，所述方案通过在图形化界面中拖拽属性字段、修改字段名称以及自定义排序的方式，完成表单、列表中资产属性值动态配置，并在获取基础属性值后，通过表单、列表封装组件完成相关页面动态渲染，有效提高了页面动态配置及渲染的效率，使用户能够直接在图形界面进行相关信息处理，便于操作和维护数据，同时也提高了视觉目标搜索的效率以及信息传递的效率。

根据本公开实施例的第一个方面，提供了一种基于自定义配置属性字段的页面动态渲染方法，包括：

将待配置的表单或列表文件读入内存，并基于预封装的组件在图形化界面中进行显示；其中，所述表单及列表文件中的各配置项分别与其对应的预封装组件相关联；

在所述图形化界面中通过拖拽属性字段、修改字段名称以及自定义排序，实现表单或列表文件中各配置项所对应资产属性值的动态配置；

获取配置的表单或列表的资产属性值，基于表单或列表的预封装组件实现相关页面中表单或列表的动态渲染；