CN115982266A - 基于自定义配置属性字段的页面动态渲染方法及系统 - Google Patents

Abstract

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

Description

基于自定义配置属性字段的页面动态渲染方法及系统

技术领域

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

背景技术

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

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

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

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

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

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

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

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

发明内容

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

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

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

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

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

其中，对于所述表单，采用预置表单项的方式封装动态表单组件，其中，所述表单基于JSON格式文件进行表示；对于所述列表，采用JSX与渲染器结合的方式进行动态列表封装；所述封装的动态表单组件及动态列表均在所述图形化界面中进行展示。

进一步的，所述采用预置表单项的方式封装动态表单组件，具体为：预先将表单常用项封装为表单组件，所述表单常用项包括文本框、下拉框、级联选择器、文本域以及日期选择器。

进一步的，所述实现表单或列表文件中各配置项所对应资产属性值的动态配置，具体为：通过在所述图形化界面中拖拽属性字段、修改字段名称以及自定义排序，实现表单或列表对应配置项的修改，并将修改后的配置项属性值返回至内存中的表单或列表文件中。

进一步的，获取配置的表单或列表的资产属性值，基于表单或列表的预封装组件实现相关页面中表单或列表的动态渲染，具体为：从表单或列表文件中读取修改后的配置项，并进行相关校验判断后，通过循环遍历表单或列表相关组件的方式完成表单或列表在页面上的渲染。

进一步的，所述相关校验判断包括表单项类型、是否必填、限制字长、是否超链接、是否校验特殊字符以及一行展示几个表单项的属性值逻辑判断。

进一步的，所述采用JSX与渲染器结合的方式进行动态列表封装，具体为：采用vxe-table组件结合JSX+渲染器方式实现表头字段筛选以及单元格格式化的复用。

进一步的，所述列表的渲染，利用vxe-table中的cell-render属性，通过computed函数计算判断出数据是否为超链接、图标或操作项；通过读取全局注册的渲染器，获取对应render函数的返回结果；当存在固定列且列数超过预设阈值时，采用组件自带的loadData/loadColumn函数完成动态列表的渲染。

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

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

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

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

其中，对于所述表单，采用预置表单项的方式封装动态表单组件，其中，所述表单基于JSON格式文件进行表示；对于所述列表，采用JSX与渲染器结合的方式进行动态列表封装；所述封装的动态表单组件及动态列表均在所述图形化界面中进行展示。

根据本发明实施例的第三方面，提供了一种计算机可读存储介质，其上存储有程序，该程序被处理器执行时实现如上所述的一种基于自定义配置属性字段的页面动态渲染方法。

根据本发明实施例的第四方面，提供了一种电子设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的程序，所述处理器执行所述程序时实现如上所述的一种基于自定义配置属性字段的页面动态渲染方法。

与现有技术相比，本公开的有益效果是：

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

(2)本公开所述方案通过预置表单项的方式封装动态表单组件，可提供丰富的表单项，整体更加灵活的同时也更方便后续维护、升级，同时动态表单的交互逻辑也随之精简化了，降低了各个子组件之间的耦合性，对于迭代频繁的需求升级也可更好的支撑。此方案较之网上开源的动态表单组件在浏览器兼容性上也更具优势。

(3)本公开所述方案采用JSX+渲染器方式封装的动态列表，相比模板插槽渲染方式的列表在页面渲染提升性能方面表现更佳。

本公开附加方面的优点将在下面的描述中部分给出，部分将从下面的描述中变得明显，或通过本公开的实践了解到。

附图说明

构成本公开的一部分的说明书附图用来提供对本公开的进一步理解，本公开的示意性实施例及其说明用于解释本公开，并不构成对本公开的不当限定。

图1为本公开实施例中所述的显示配置页面中属性字段维护设置示意图；

图2为本公开实施例中所述的表单渲染示意图；

图3为本公开实施例中所述的列表渲染示意图。

具体实施方式

下面结合附图与实施例对本公开做进一步说明。

应该指出，以下详细说明都是示例性的，旨在对本公开提供进一步的说明。除非另有指明，本文使用的所有技术和科学术语具有与本公开所属技术领域的普通技术人员通常理解的相同含义。

需要注意的是，这里所使用的术语仅是为了描述具体实施方式，而非意图限制根据本公开的示例性实施方式。如在这里所使用的，除非上下文另外明确指出，否则单数形式也意图包括复数形式，此外，还应当理解的是，当在本说明书中使用术语“包含”和/或“包括”时，其指明存在特征、步骤、操作、器件、组件和/或它们的组合。

在不冲突的情况下，本公开中的实施例及实施例中的特征可以相互组合。

术语解释：

表单：表单在网页中主要负责数据采集功能，一个表单有三个基本组成部分：

表单标签：这里面包含了处理表单数据所用CGI程序的URL以及数据提交到服务器的方法；

表单域：包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等；

表单按钮：包括提交按钮、复位按钮和一般按钮；用于将数据传送到服务器上的CGI脚本或者取消输入，还可以用表单按钮来控制其他定义了处理脚本的处理工作。

列表：以表格为容器，装载着文字或图表的一种形式，叫列表。

资产：基于网络环境工作的设备类型的统称。

实施例一：

本实施例的目的是提供一种基于自定义配置属性字段的页面动态渲染方法。

一种基于自定义配置属性字段的页面动态渲染方法，包括：

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

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

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

其中，对于所述表单，采用预置表单项的方式封装动态表单组件，其中，所述表单基于JSON格式文件进行表示；对于所述列表，采用JSX与渲染器结合的方式进行动态列表封装；所述封装的动态表单组件及动态列表均在所述图形化界面中进行展示。

进一步的，所述采用预置表单项的方式封装动态表单组件，具体为：预先将表单常用项封装为表单组件，所述表单常用项包括文本框、下拉框、级联选择器、文本域以及日期选择器。

进一步的，所述实现表单或列表文件中各配置项所对应资产属性值的动态配置，具体为：通过在所述图形化界面中拖拽属性字段、修改字段名称以及自定义排序，实现表单或列表对应配置项的修改，并将修改后的配置项属性值返回至内存中的表单或列表文件中。

进一步的，获取配置的表单或列表的资产属性值，基于表单或列表的预封装组件实现相关页面中表单或列表的动态渲染，具体为：从表单或列表文件中读取修改后的配置项，并进行相关校验判断后，通过循环遍历表单或列表相关组件的方式完成表单或列表在页面上的渲染。

进一步的，所述相关校验判断包括表单项类型、是否必填、限制字长、是否超链接、是否校验特殊字符以及一行展示几个表单项的属性值逻辑判断。

进一步的，所述采用JSX(JavaScript XML)与渲染器(Vue中的render函数)结合的方式进行动态列表封装，具体为：采用vxe-table组件结合JSX+渲染器方式实现表头字段筛选以及单元格格式化的复用。

进一步的，所述列表的渲染，利用vxe-table中的cell-render属性，通过computed函数计算判断出数据是否为超链接、图标或操作项；通过读取全局注册的渲染器，获取对应render函数的返回结果；当存在固定列且列数超过预设阈值时，采用组件自带的loadData/loadColumn函数完成动态列表的渲染。

具体的，为了便于理解，以下结合附图对本实施例所述方案进行详细说明：

为了解决现有技术存在的问题，本实施例提供了一种基于自定义配置属性字段的页面动态渲染方法，其包括表单和列表的动态渲染，具体采用如下技术构思：

(1)对于表单的渲染：

先将表单JSON文件读入到内存，并为之创建一个内存对象；在表单加载为内存对象时，对表单JSON格式进行校验，并在发现不符合表单定义规则时给出提示信息；然后将读取的表单内存对象转换成UI框架特定的前端组件或元素，依托UI框架将最终的表单展现在Web页面中。

(2)对于列表的渲染

本实施例所述方案采用vxe-table组件，结合JSX+渲染器方式可以轻松实现表头字段筛选、单元格格式化等复用。利用vxe-table中的cell-render属性，通过computed计算判断出数据是否为超链接、图标或操作项，然后读取全局注册的渲染器获取对应render函数返回结果，当有固定列且列数过多或数据量多大时不建议使用双向绑定的data属性，因为vue监听会使其短暂的卡顿，用组件自带的loadData/loadColumn函数完成动态列表的渲染功能，可使渲染速度更快。其中，如图3所示，展示了列表渲染的过程。

进一步的，为了完成表单的渲染，需要提前将表单常用项，如文本框、下拉框、级联选择器、文本域、日期选择器等预置好，然后读取返回的JSON对象中的配置项，对表单项类型、是否必填、限制字长、是否超链接、是否校验特殊字符、一行展示几个表单项等属性进行逻辑判断，即判断其是否符合表单定义规则，然后，通过循环遍历在web页面上完成表单渲染，如图2所示，展示了表单渲染的过程。

进一步的，所述方案使用通用的JSON格式定义表单内将会动态变化的各个细节，同时提供了兼容各UI框架的页面展现适配机制，从而提高了复杂表单的开发效率、可复用性、可维护性和安全性。

进一步的，为了实现所述页面动态渲染，本实施例所述方案提供用于图形化拖拽的显示配置页面，通过所述显示配置页面实现对表单或列表中资产属性字段的配置，具体的：

所述显示配置页面左侧区域、中间区域及右侧区域，其中：

左侧区域为资产树展示区域，其用于通过鼠标点击切换不同类型的资产查看可操作的属性字段，其中，所述可操作的属性字段对应于表单或列表中预先定义的可动态变化的配置项；

中间区域包括字段区、列表区、详情区和新增编辑(表单)区，其被配置为；鼠标悬浮在字段区的注释图标上，可查看该字段的可展示位置；可将字段区的属性字段拖拽到对应区的特定位置，完成列表、表单中属性的增减、排序操作；同时也可对字段区的属性值进行设置操作，点击字段右侧会出现“笔”形图标，点击图标可打开编辑弹窗完成相关设置；

右侧区域为展示区，其用于对在此显示配置页面中对列表、表单及详情页面操作后的展示。

如图1所示，展示了所述显示配置页面中属性字段维护设置示意图。其中，所述显示配置页面的功能实现主要应用了vuedraggable.js组件功能，包括多列拖动、拖拽分组、滚动拖动、拷贝拖拽等等。

进一步的，通过拖拽属性字段、修改字段名称，自定义排序等功能，完成表单、列表中资产属性值动态配置。并在获取基础属性值后，通过表单、列表封装组件完成相关页面动态渲染。拖拽属性字段的方式可让用户直接在图形界面进行相关信息处理，便于操作和维护数据。同时也提高视觉目标搜索的效率以及信息传递的效率。

进一步的，预置表单项的方式封装动态表单组件可提供丰富的表单项，整体更加灵活的同时也更方便后续维护、升级，同时动态表单的交互逻辑也随之精简化了，降低了各个子组件之间的耦合性，对于迭代频繁的需求升级也可更好的支撑。此方案较之网上开源的动态表单组件在浏览器兼容性上也更具优势。

进一步的，JSX+渲染器方式封装的动态列表，比模板插槽渲染方式的列表在页面渲染提升性能方面表现更佳。其原因在于，渲染函数比模板更接近于编译器，对于复杂逻辑的DOM渲染，模板内的代码将会十分冗余，相比较而言利用渲染函数编写的代码则会更简洁。

实施例二：

本实施例的目的是提供一种基于自定义配置属性字段的页面动态渲染系统。

一种基于自定义配置属性字段的页面动态渲染系统，包括：

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

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

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

其中，对于所述表单，采用预置表单项的方式封装动态表单组件，其中，所述表单基于JSON格式文件进行表示；对于所述列表，采用JSX与渲染器结合的方式进行动态列表封装；所述封装的动态表单组件及动态列表均在所述图形化界面中进行展示。

进一步的，本实施例所述系统与实施例一所述方法相对应，其技术细节在实施例一中已经进行了详细说明，故此处不再赘述。

在更多实施例中，还提供：

一种电子设备，包括存储器和处理器以及存储在存储器上并在处理器上运行的计算机指令，所述计算机指令被处理器运行时，完成实施例一中所述的方法。为了简洁，在此不再赘述。

应理解，本实施例中，处理器可以是中央处理单元CPU，处理器还可以是其他通用处理器、数字信号处理器DSP、专用集成电路ASIC，现成可编程门阵列FPGA或者其他可编程逻辑器件、分立门或者晶体管逻辑器件、分立硬件组件等。通用处理器可以是微处理器或者该处理器也可以是任何常规的处理器等。

存储器可以包括只读存储器和随机存取存储器，并向处理器提供指令和数据、存储器的一部分还可以包括非易失性随机存储器。例如，存储器还可以存储设备类型的信息。

一种计算机可读存储介质，用于存储计算机指令，所述计算机指令被处理器执行时，完成实施例一中所述的方法。

实施例一中的方法可以直接体现为硬件处理器执行完成，或者用处理器中的硬件及软件模块组合执行完成。软件模块可以位于随机存储器、闪存、只读存储器、可编程只读存储器或者电可擦写可编程存储器、寄存器等本领域成熟的存储介质中。该存储介质位于存储器，处理器读取存储器中的信息，结合其硬件完成上述方法的步骤。为避免重复，这里不再详细描述。

本领域普通技术人员可以意识到，结合本实施例描述的各示例的单元即算法步骤，能够以电子硬件或者计算机软件和电子硬件的结合来实现。这些功能究竟以硬件还是软件方式来执行，取决于技术方案的特定应用和设计约束条件。专业技术人员可以对每个特定的应用来使用不同方法来实现所描述的功能，但是这种实现不应认为超出本申请的范围。

上述实施例提供的一种基于自定义配置属性字段的页面动态渲染方法及系统可以实现，具有广阔的应用前景。

以上所述仅为本公开的优选实施例而已，并不用于限制本公开，对于本领域的技术人员来说，本公开可以有各种更改和变化。凡在本公开的精神和原则之内，所作的任何修改、等同替换、改进等，均应包含在本公开的保护范围之内。

Claims (10)

1.一种基于自定义配置属性字段的页面动态渲染方法，其特征在于，包括：

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

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

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

其中，对于所述表单，采用预置表单项的方式封装动态表单组件，其中，所述表单基于JSON格式文件进行表示；对于所述列表，采用JSX与渲染器结合的方式进行动态列表封装；所述封装的动态表单组件及动态列表均在所述图形化界面中进行展示。

2.如权利要求1所述的一种基于自定义配置属性字段的页面动态渲染方法，其特征在于，所述采用预置表单项的方式封装动态表单组件，具体为：预先将表单常用项封装为表单组件，所述表单常用项包括文本框、下拉框、级联选择器、文本域以及日期选择器。

3.如权利要求1所述的一种基于自定义配置属性字段的页面动态渲染方法，其特征在于，所述实现表单或列表文件中各配置项所对应资产属性值的动态配置，具体为：通过在所述图形化界面中拖拽属性字段、修改字段名称以及自定义排序，实现表单或列表对应配置项的修改，并将修改后的配置项属性值返回至内存中的表单或列表文件中。

4.如权利要求1所述的一种基于自定义配置属性字段的页面动态渲染方法，其特征在于，获取配置的表单或列表的资产属性值，基于表单或列表的预封装组件实现相关页面中表单或列表的动态渲染，具体为：从表单或列表文件中读取修改后的配置项，并进行相关校验判断后，通过循环遍历表单或列表相关组件的方式完成表单或列表在页面上的渲染。

5.如权利要求4所述的一种基于自定义配置属性字段的页面动态渲染方法，其特征在于，所述相关校验判断包括表单项类型、是否必填、限制字长、是否超链接、是否校验特殊字符以及一行展示几个表单项的属性值逻辑判断。

6.如权利要求1所述的一种基于自定义配置属性字段的页面动态渲染方法，其特征在于，所述采用JSX与渲染器结合的方式进行动态列表封装，具体为：采用vxe-table组件结合JSX+渲染器方式实现表头字段筛选以及单元格格式化的复用。

7.如权利要求1所述的一种基于自定义配置属性字段的页面动态渲染方法，其特征在于，所述列表的动态渲染具体为：利用vxe-table中的cell-render属性，通过computed函数计算判断出数据是否为超链接、图标或操作项；通过读取全局注册的渲染器，获取对应render函数的返回结果；当存在固定列且列数超过预设阈值时，采用组件自带的loadData/loadColumn函数完成动态列表的渲染。

8.一种基于自定义配置属性字段的页面动态渲染系统，其特征在于，包括：

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

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

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

其中，对于所述表单，采用预置表单项的方式封装动态表单组件，其中，所述表单基于JSON格式文件进行表示；对于所述列表，采用JSX与渲染器结合的方式进行动态列表封装；所述封装的动态表单组件及动态列表均在所述图形化界面中进行展示。

9.一种计算机可读存储介质，其上存储有程序，其特征在于，该程序被处理器执行时实现如权利要求1-7任一项所述的一种基于自定义配置属性字段的页面动态渲染方法。

10.一种电子设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的程序，其特征在于，所述处理器执行所述程序时实现如权利要求1-7任一项所述的一种基于自定义配置属性字段的页面动态渲染方法。

Images