CN114721632A - 一种基于低代码可视化组件的页面设计方法和装置 - Google Patents

Abstract

本发明属于计算机软件技术领域，具体涉及一种基于低代码可视化组件的页面设计方法和装置，该方法包括：利用可视化设计器获取模板DSL；根据模板DSL生成页面DSL；利用DSL解释器和DSL执行器对页面DSL进行解释渲染处理，得到可视化页面。本申请提供的技术方案，实现了对整页按需设计，无需通过预先确定页面结构与数据交互过程来完成页面的处理，极大地提高了低代码定制页面的灵活性；通过可视化的方式来设计数据结构、数据绑定和数据流程，降低了低代码设计和处理页面复杂度，使得研发效率得到提升。

Description

一种基于低代码可视化组件的页面设计方法和装置

技术领域

本发明属于计算机软件技术领域，具体涉及一种基于低代码可视化组件的页面设计方法和装置。

背景技术

目前进行可视化组件的页面设计和处理主要分为两类：第一类是提前为软件产品提供固定的页面结构设定，将可视化组件拖动到设定中，拼装出软件产品的页面。这种页面设计处理方式的主体结构、页面与页面之间的路由跳转、组件间数据通信是由编写代码来确定如何处理，用户无法根据需求进行定制和变化。

第二类是为增删改查四种操作确定整体页面结构和使用布局容器来确定局部页面结构。这种方式确定的整体页面结构可以根据操作来内置数据交互的逻辑，无需用户编写额外的处理逻辑，却无法针对用户需求进一步进行扩展和改变固化好的行为。即使满足了基于可视化组件定制页面的部分需求，却无法完成超出增删改查四种操作范围外的功能，从而降低了可视化组件带来的设计效果。

而布局容器通过确定页面行与列的数量、单元格的合并来设定组件的位置。这种方式可以根据需求对页面的布局进行灵活的定制，却无法解决组件与组件之间的数据交互问题。由于没有定义组件间数据通信，用户仍然需要为数据加载与提交编写额外的代码来完成页面的处理逻辑，灵活性低。

发明内容

有鉴于此，本发明的目的在于克服现有技术的不足，提供一种基于低代码可视化组件的页面设计方法和装置，以解决现有技术中存在无法根据用户需求进行定制和变化，以及灵活性低的问题。

根据本申请实施例的第一方面，提供一种基于低代码可视化组件的页面设计方法，包括：

利用可视化设计器获取模板DSL；

根据所述模板DSL生成页面DSL；

利用DSL解释器和DSL执行器对所述页面DSL进行解释渲染处理，得到可视化页面。

优选的，所述模板DSL包括：母版和视图；

所述母版包括：页头区、边栏区、视图内容区和页尾区；

所述视图包括以下至少一种：列表视图、表单视图、详情视图、图表视图和自定义视图。

优选的，所述利用可视化设计器获取模板DSL，包括：

根据所述用户需求信息，在所述可视化设计器的设计区定义所述模板DSL的母版；

利用容器嵌套容器的方式对所述模板DSL中的母版中的各个区进行页面布局；

将视图添加至所述模板DSL的母版中的视图内容区；

在所述模板DSL的视图中设置插槽，得到所述模板DSL。

优选的，所述插槽包括：

模板插槽，用于填充可视化组件；

元数据插槽，用于填充字段和动作。

优选的，所述根据所述模板DSL生成页面DSL，包括：

利用DSL解释器对所述模板DSL进行解释处理，确定所述模板DSL对应的可视化设计器的设计区的布局结构；

基于所述可视化设计器的设计区的布局结构，根据所述用户需求信息，将可视化设计器的物料区中的可视化组件、字段和/或动作填充至所述可视化设计器的设计区的布局结构中的插槽；

利用可视化设计器的属性设计区，对所述插槽中的可视化组件、字段和动作的属性进行设置，得到所述页面DSL。

优选的，所述利用DSL解释器和DSL执行器对所述页面DSL进行解释渲染处理，得到可视化页面，包括：

利用所述DSL解释器对所述页面DSL进行解释处理，生成可解释执行的DSL；

利用所述DSL执行器对所述可解释执行的DSL进行渲染处理，得到所述可视化页面。

优选的，所述可视化设计器包括：物料区、设计区和属性设置区。

根据本申请实施例的第二方面，提供一种基于低代码可视化组件的页面设计装置，包括：

获取模块，用于利用可视化设计器获取模板DSL；

生成模块，用于根据所述模板DSL生成页面DSL；

可视化模块，用于利用DSL解释器和DSL执行器对所述页面DSL进行解释渲染处理，得到可视化页面。

根据本申请实施例的第三方面，提供一种可读存储介质，其上存储有可执行程序，所述可执行程序被处理器执行时实现上述的基于低代码可视化组件的页面设计方法中的步骤。

根据本申请实施例的第四方面，提供一种服务器，包括：

存储器，其上存储有可执行程序；

处理器，用于执行所述存储器中的所述可执行程序，以实现上述的基于低代码可视化组件的页面设计方法中的步骤。

本发明采用以上技术方案，能够达到的有益效果包括：通过利用可视化设计器获取模板DSL，根据模板DSL生成页面DSL，利用DSL解释器和DSL执行器对页面DSL进行解释渲染处理，得到可视化页面，实现了对整页按需设计，无需通过预先确定页面结构与数据交互过程来完成页面的处理，极大地提高了低代码定制页面的灵活性；通过可视化的方式来设计数据结构、数据绑定和数据流程，降低了低代码设计和处理页面复杂度，使得研发效率得到提升。

附图说明

为了更清楚地说明本发明实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。

图1是根据一示例性实施例示出的一种基于低代码可视化组件的页面设计方法的流程图；

图2是根据一示例性实施例示出的可视化设计器的示意图；

图3是根据一示例性实施例示出的视图类型的示意图；

图4是根据一示例性实施例示出的母版的示意图；

图5是根据一示例性实施例示出的容器的示意图；

图6是根据一示例性实施例示出的在模板DSL中编排插槽的示意图；

图7是根据一示例性实施例示出的通过动作处理页面间路由与数据提交处理的示意图；

图8是根据一示例性实施例示出的监听器将监听可视化组件绑定字段的数据值变化的示意图；

图9是根据一示例性实施例示出的树状结构的数据容器的示意图；

图10是根据一示例性实施例示出的插槽类型及其使用方法的示意图；

图11是根据一示例性实施例示出的填充模板DSL的示意图；

图12是根据一示例性实施例示出的模板DSL和页面DSL的结构图；

图13是根据一示例性实施例示出的一种基于低代码可视化组件的页面设计方法的流程图；

图14是根据一示例性实施例示出的一种基于低代码可视化组件的页面设计方法的流程图；

图15是根据一示例性实施例示出的一种基于低代码可视化组件的页面设计装置的框图。

具体实施方式

为使本发明的目的、技术方案和优点更加清楚，下面将对本发明的技术方案进行详细的描述。显然，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动的前提下所得到的所有其它实施方式，都属于本发明所保护的范围。

实施例一

图1是根据一示例性实施例示出的一种基于低代码可视化组件的页面设计方法的流程图，如图1所示，该方法可以但不限于用于终端中，包括以下步骤：

步骤101：利用可视化设计器获取模板DSL；

步骤102：根据模板DSL生成页面DSL；

步骤103：利用DSL解释器和DSL执行器对页面DSL进行解释渲染处理，得到可视化页面。

本发明实施例提供的一种基于低代码可视化组件的页面设计方法，通过利用可视化设计器获取模板DSL，根据模板DSL生成页面DSL，利用DSL解释器和DSL执行器对页面DSL进行解释渲染处理，得到可视化页面，实现了对整页按需设计，无需通过预先确定页面结构与数据交互过程来完成页面的处理，极大地提高了低代码定制页面的灵活性；通过可视化的方式来设计数据结构、数据绑定和数据流程，降低了低代码设计和处理页面复杂度，使得研发效率得到提升。

具体的，如图2所示，可视化设计器包括：物料区、设计区和属性设置区；

物料区展示可供拖拽到设计区的可视化组件和模型元数据；其中，模型元数据包含字段和动作，用于处理页面数据的交互与联动；

设计区用于设计页面的结构与布局、数据交互。

进一步的，模板DSL包括：母版和视图；

母版包括：页头区、边栏区、视图内容区和页尾区；

视图包括以下至少一种：列表视图、表单视图、详情视图、图表视图和自定义视图。

需要说明的是，列表视图用于处理表格、卡片列等管理多行数据的页面；表单视图用于处理读取加载和提交单行数据的页面；详情视图用于处理读取加载单行数据的只读页面；图表视图用于处理数据可视化类的图表页面。如图3所示，基于视图类型，页面处理时可根据用户需求定义对应类型的视图模板。

一些实施例中，如图4所示，将模板DSL的页面分为母版与视图可以但不限于通过DSL中的mask和view标签分别进行母版和视图的定义与描述，用于处理页面的整体结构与页面间路由跳转。在母版中定义页头区、边栏区、视图内容区和页尾区。在定义母版的模板DSL时，可根据用户需求选择是否缺省页头、边栏、视图内容区和页尾或添加更多区域，编排各区域位置，从而实现针对整页按需设计，再进一步通过模板插槽技术解决了页面设计器设计区无法被设计的问题。

进一步的，步骤101，包括：

步骤1011：根据用户需求信息，在可视化设计器的设计区定义模板DSL的母版；

步骤1012：利用容器嵌套容器的方式对模板DSL中的母版中的各个区进行页面布局；

例如，如图5所示，在母版中各个区中可以定义容器container来确定每个局部页面布局方式，其中容器可以继续嵌套定义容器；

步骤1013：将视图添加至模板DSL的母版中的视图内容区；

步骤1014：在模板DSL的视图中设置插槽，得到模板DSL；

例如，如图6所示，在模板DSL中编排插槽slot完成页面的灵活布局设置。

进一步的，插槽包括：

模板插槽，用于填充可视化组件；

元数据插槽，用于填充字段和动作。

具体的，动作包括：逻辑动作与视图动作；

逻辑动作，用于处理客户端或服务端的逻辑处理；

视图动作，用于处理页面间路由跳转或外链跳转。

一些实施例中，逻辑动作可以但不限于通过submit属性绑定数据处理逻辑来处理客户端或服务端的逻辑处理；视图动作可以但不限于通过view属性来绑定目标视图来处理页面间的路由跳转；视图动作可以但不限于通过url属性绑定目标链接来处理外链跳转；视图动作可以但不限于通过load属性和condition属性绑定目标数据加载逻辑来处理页面初始化数据逻辑。如图7所示，通过动作action处理页面间路由与数据提交处理。

具体的，元数据插槽中的字段field本身包括标题title、名称name、类型type和多值multi属性。类型type决定字段的数据类型和可支持绑定的可视化组件类型。multi属性决定字段是对象还是集合类型数据。字段分为基础字段和关联关系字段。关联关系字段可以通过ref属性建立模型与模型间的关联关系。如图8所示，通过元数据插槽将可视化组件与字段field进行绑定，监听器将监听可视化组件绑定字段field的数据值变化从而完成组件间的数据通信。

需要说明的是，如图9所示，在设计可视化页面的加载和提交数据时，可以但不限于根据字段的定义将数据形成一种树状结构的数据容器完成数据通信。

可以理解的是，如图10所示，在可视化组件进行页面设计时，通过使用插槽slot来确定可视化组件拖入的页面位置与范围。插槽slot分为模板插槽tpl-slot和元数据插槽meta-slot。通过设置type属性来确定可视化组件类型，设置data-type属性来确定可视化组件数据类型。只有可视化组件类型和可视化组件数据类型与模板插槽的support属性匹配的组件才可被填充到模板插槽中。可填充到元数据插槽的元数据包括字段field和动作action。元数据插槽中的元数据用于定义页面数据联动与绑定的交互规则。

需要说明的是，通过设置字段field的type属性来确定字段的数据类型，后续DSL执行器会根据字段的数据类型进行数据的加载与提交处理。

可以理解的是，按照步骤102中的具体步骤来获取模板DSL时，可以根据用户需求来自定义添加母版和视图。

一些实施例中，可以但不限于在页面设计和处理时选择使用直接利用预先设置好的模板DSL，预先设置好的模板DSL母版和视图为默认的。

进一步的，步骤102，包括：

步骤1021：利用DSL解释器对模板DSL进行解释处理，确定模板DSL对应的可视化设计器的设计区的布局结构；

步骤1022：基于可视化设计器的设计区的布局结构，根据用户需求信息，将可视化设计器的物料区中的可视化组件、字段和/或动作填充至可视化设计器的设计区的布局结构中的插槽；

步骤1023：利用可视化设计器的属性设计区，对插槽中的可视化组件、字段和动作的属性进行设置，得到页面DSL；

例如，如图11所示，通过使用页面设计器拖拽物料区的可视化组件和模型中的字段、动作，并将其放置于插槽中，从而填充模板DSL，得到页面DSL。

进一步的，步骤103，包括：

步骤1031：利用DSL解释器对页面DSL进行解释处理，生成可解释执行的DSL；

步骤1032：利用DSL执行器对可解释执行的DSL进行渲染处理，得到可视化页面。

一些可选的实施例中，DSL解释器与执行器用于解释渲染处理模板DSL和页面DSL定义的母版mask、视图view、容器container、组件widget、字段field、动作action和插槽slot。DSL解释器又分为模板DSL解释器与页面DSL解释器，模板解释器用于解释处理模板DSL，确定可视化设计器的设计区内部结构与可视化组件的可拖拽区域。页面解释器用于解释经过页面设计器设计后的可解释执行的DSL，将DSL渲染处理成软件产品的页面。模板DSL和页面DSL的结构图可以但不限于如图12所示。

本发明实施例提供的一种基于可视化组件的页面设计方法，基于元数据和模型驱动方式，使用领域特定语言DSL定义与处理页面框架结构、数据交互及页面间路由跳转的方法，来解决基于低代码可视化组件的页面处理时无法针对用户差异化需求无需编程灵活设计页面同时又降低处理数据交互复杂度的问题。

为进一步说明上述实施例提供的一种基于可视化组件的页面设计方法，本发明实施例还提供一具体的例子，如图13和图14所示，包括：

步骤201：利用可视化设计器生成模板DSL；

步骤202：利用模板DSL解释器对模板DSL进行解释处理，确定模板DSL对应的可视化设计器的设计区的布局结构；

步骤203：基于可视化设计器的设计区的布局结构，根据用户需求信息，将可视化设计器的物料区中的可视化组件、字段和/或动作填充至可视化设计器的设计区的布局结构中的插槽；

利用可视化设计器的属性设计区，对插槽中的可视化组件、字段和动作的属性进行设置，得到页面DSL；

步骤204：利用页面DSL解释器对页面DSL进行解释处理，生成可解释执行的DSL；

步骤205：利用DSL执行器对可解释执行的DSL进行渲染处理，得到可视化页面。

本发明实施例提供的一种基于可视化组件的页面设计方法，通过利用可视化设计器获取模板DSL，根据模板DSL生成页面DSL，利用DSL解释器和DSL执行器对页面DSL进行解释渲染处理，得到可视化页面，相较于现有技术使用DSL可针对母版和视图分别编排设计和处理，可以针对整页按需设计，通过模板插槽技术解决了页面设计器设计区无法被设计的问题；不再通过预先确定页面结构与数据交互过程来完成页面的处理，极大地提高了低代码定制页面的灵活性；

通过元数据插槽技术可以在不编写代码的情况下完成自定义页面的数据加载与提交，通过可视化的方式来设计数据结构、数据绑定和数据流程，降低了低代码设计和处理页面复杂度，使得研发效率得到提升。

实施例二

为配合实现上述空调运行控制方法，本发明实施例提供一种基于可视化组件的页面设计装置，参照图15，该装置包括：

获取模块，用于利用可视化设计器获取模板DSL；

生成模块，用于根据模板DSL生成页面DSL；

可视化模块，用于利用DSL解释器和DSL执行器对页面DSL进行解释渲染处理，得到可视化页面。

进一步的，模板DSL包括：母版和视图；

母版包括：页头区、边栏区、视图内容区和页尾区；

视图包括以下至少一种：列表视图、表单视图、详情视图、图表视图和自定义视图。

进一步的，获取模块，具体用于：

根据用户需求信息，在可视化设计器的设计区定义模板DSL的母版；

利用容器嵌套容器的方式对模板DSL中的母版中的各个区进行页面布局；

将视图添加至模板DSL的母版中的视图内容区；

在模板DSL的视图中设置插槽，得到模板DSL。

进一步的，插槽包括：

模板插槽，用于填充可视化组件；

元数据插槽，用于填充字段和动作。

进一步的，生成模块，具体用于：

利用DSL解释器对模板DSL进行解释处理，确定模板DSL对应的可视化设计器的设计区的布局结构；

基于可视化设计器的设计区的布局结构，根据用户需求信息，将可视化设计器的物料区中的可视化组件、字段和/或动作填充至可视化设计器的设计区的布局结构中的插槽；

利用可视化设计器的属性设计区，对插槽中的可视化组件、字段和动作的属性进行设置，得到页面DSL。

进一步的，可视化模块，具体用于：

利用DSL解释器对页面DSL进行解释处理，生成可解释执行的DSL；

利用DSL执行器对可解释执行的DSL进行渲染处理，得到可视化页面。

进一步的，可视化设计器包括：物料区、设计区和属性设置区。

本发明实施例提供的一种基于可视化组件的页面设计装置，通过获取模块利用可视化设计器获取模板DSL，生成模块根据模板DSL生成页面DSL，可视化模块利用DSL解释器和DSL执行器对页面DSL进行解释渲染处理，得到可视化页面，实现了对整页按需设计，无需通过预先确定页面结构与数据交互过程来完成页面的处理，极大地提高了低代码定制页面的灵活性；通过可视化的方式来设计数据结构、数据绑定和数据流程，降低了低代码设计和处理页面复杂度，使得研发效率得到提升。

实施例三

本发明实施例还提供一种可读存储介质，其上存储有可执行程序，可执行程序被处理器执行时实现上述实施例提供的基于低代码可视化组件的页面设计方法中的步骤。

实施例四

本发明实施例还提供一种服务器，包括：

存储器，其上存储有可执行程序；

处理器，用于执行存储器中的可执行程序，以实现上述实施例提供的基于低代码可视化组件的页面设计方法中的步骤。

可以理解的是，上述提供的装置实施例与上述的方法实施例对应，相应的具体内容可以相互参考，在此不再赘述。

可以理解的是，上述各实施例中相同或相似部分可以相互参考，在一些实施例中未详细说明的内容可以参见其他实施例中相同或相似的内容。

本领域内的技术人员应明白，本申请的实施例可提供为方法、系统、或计算机程序产品。因此，本申请可采用完全硬件实施例、完全软件实施例、或结合软件和硬件方面的实施例的形式。而且，本申请可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质（包括但不限于磁盘存储器和光学存储器等）上实施的计算机程序产品的形式。

本申请是参照根据本申请实施例的方法、设备（系统）、和计算机程序产品的流程图和／或方框图来描述的。应理解可由计算机程序指令实现流程图和／或方框图中的每一流程和／或方框以及流程图和／或方框图中的流程和／或方框的结合。可提供这些计算机程序指令到通用计算机、专用计算机、嵌入式处理机或其他可编程数据处理设备的处理器以产生一个机器，使得通过计算机或其他可编程数据处理设备的处理器执行的指令产生用于实现在流程图一个流程或多个流程和／或方框图一个方框或多个方框中指定的功能的装置。

这些计算机程序指令也可存储在能引导计算机或其他可编程数据处理设备以特定方式工作的计算机可读存储器中，使得存储在该计算机可读存储器中的指令产生包括指令方法的制造品，该指令方法实现在流程图一个流程或多个流程和／或方框图一个方框或多个方框中指定的功能。

这些计算机程序指令也可装载到计算机或其他可编程数据处理设备上，使得在计算机或其他可编程设备上执行一系列操作步骤以产生计算机实现的处理，从而在计算机或其他可编程设备上执行的指令提供用于实现在流程图一个流程或多个流程和／或方框图一个方框或多个方框中指定的功能的步骤。

以上所述，仅为本发明的具体实施方式，但本发明的保护范围并不局限于此，任何熟悉本技术领域的技术人员在本发明揭露的技术范围内，可轻易想到变化或替换，都应涵盖在本发明的保护范围之内。因此，本发明的保护范围应以所述权利要求的保护范围为准。

Claims (8)

1.一种基于低代码可视化组件的页面设计方法，其特征在于，包括：

利用可视化设计器获取模板DSL；

根据所述模板DSL生成页面DSL；

利用DSL解释器和DSL执行器对所述页面DSL进行解释渲染处理，得到可视化页面。

2.根据权利要求1所述的方法，其特征在于，所述模板DSL包括：母版和视图；

所述母版包括：页头区、边栏区、视图内容区和页尾区；

所述视图包括以下至少一种：列表视图、表单视图、详情视图、图表视图和自定义视图。

3.根据权利要求1所述的方法，其特征在于，所述利用可视化设计器获取模板DSL，包括：根据所述用户需求信息，在所述可视化设计器的设计区定义所述模板DSL的母版；

利用容器嵌套容器的方式对所述模板DSL中的母版中的各个区进行页面布局；

将视图添加至所述模板DSL的母版中的视图内容区；

在所述模板DSL的视图中设置插槽，得到所述模板DSL。

4.根据权利要求1所述的方法，其特征在于，所述插槽包括：

模板插槽，用于填充可视化组件；

元数据插槽，用于填充字段和动作。

5.根据权利要求1所述的方法，其特征在于，所述根据所述模板DSL生成页面DSL，包括：利用DSL解释器对所述模板DSL进行解释处理，确定所述模板DSL对应的可视化设计器的设计区的布局结构；

基于所述可视化设计器的设计区的布局结构，根据所述用户需求信息，将可视化设计器的物料区中的可视化组件、字段和/或动作填充至所述可视化设计器的设计区的布局结构中的插槽；

利用可视化设计器的属性设计区，对所述插槽中的可视化组件、字段和动作的属性进行设置，得到所述页面DSL。

6.根据权利要求1所述的方法，其特征在于，所述利用DSL解释器和DSL执行器对所述页面DSL进行解释渲染处理，得到可视化页面，包括：

利用所述DSL解释器对所述页面DSL进行解释处理，生成可解释执行的DSL；

利用所述DSL执行器对所述可解释执行的DSL进行渲染处理，得到所述可视化页面。

7.根据权利要求1-6任一项所述的方法，其特征在于，

所述可视化设计器包括：物料区、设计区和属性设置区。

8.一种基于低代码可视化组件的页面设计装置，其特征在于，包括：

获取模块，用于利用可视化设计器获取模板DSL；

生成模块，用于根据所述模板DSL生成页面DSL；

可视化模块，用于利用DSL解释器和DSL执行器对所述页面DSL进行解释渲染处理，得到可视化页面。

Images