一种表单生成方法、装置和控制器

技术领域

本发明涉及web前端开发技术领域，具体涉及一种表单生成方法、装置和控制器。

背景技术

目前电子政务领域中有各种关于表单信息提交的业务场景，比如用户的增删改查等操作，均需要一个用于编辑和展示的表单页面进行操作。而一个完整的表单会根据业务场景拥有众多输入、选择、文本、上传、筛选等标签，而这些标签又是分散的、属性又是不相同的，因此常常需要为每个表单单独进行设计展示，操作繁琐且效率低下。目前市场上能提供的Form表单组件，基本上都是根据现有的前端UI框架比如：view-design、elementUI、ant-design等进行开发的。但是这些UI框架只提供一些通用的组件，只适用于开发简单的、功能不太复杂的Form表单。对于一些复杂度比较高、逻辑交互过于复杂的Form表单页面，虽然也能满足相应功能，但是代码会非常的冗长、配置信息与UI组件之间耦合性较强，代码的可阅读性、可复用性较低，不利于大量的Form表单开发和维护。

发明内容

有鉴于此，本发明的目的在于克服现有技术的不足，提供一种表单生成方法、装置和控制器。

为实现以上目的，本发明采用如下技术方案：一种表单生成方法，包括：

引入FormBuilder组件，并进行注册和初始化；

获取用户输入的配置信息；

对所述配置信息进行处理；

根据处理后的配置信息并结合组件库生成表单页面。

可选的，所述FormBuilder组件依赖于前端框架Vue以及前端UI组件库View-Design；

通过对view-design进行二次封装，将View-Design提供的分散的组件进行内置处理，并将配置文件暴露出来，以供用户根据提供字段进行自定义配置。

可选的，所述进行注册和初始化，包括：

引入FormBuilder组件后，分别初始化配置信息，初始化数据中心以及初始化事件中心；

其中，初始化数据中心包括新建一个空对象。

可选的，所述配置信息是用户根据给定的配置字段进行自定义配置输入的；

所述配置信息，包括：

表单的布局、子UI组件的数据项名称、默认值、显隐状态和/或校验方式。

可选的，所述FormBuilder组件包括：Schema处理器、Config处理器和Parse处理器；

所述对所述配置信息进行处理，包括：

通过所述Schema处理器筛选出所述配置信息中传入的组件标签名称。

可选的，所述对所述配置信息进行处理，还包括：

通过所述Config处理器根据所述配置信息中传入的数据项名称和默认值，重新生成新的数据源；

所述新的数据源用于给数据中心新增与配置信息一一匹配的数据源。

可选的，所述对所述配置信息进行处理，还包括：

通过所述Parse处理器根据所述配置信息传入的数据，提取各个数据所需的事件名，然后与事件中心新增的事件名相匹配，以便触发相应事件。

可选的，所述根据处理后的配置信息并结合组件库生成表单页面，包括：

根据所述Schema处理器筛选出的组件标签名称从组件库中提取相应组件后，按照处理后的配置信息给各个组件添加相应属性，然后生成表单页面。

本发明还提供了一种表单生成装置，包括：

初始化模块，用于引入FormBuilder组件，并进行注册和初始化；

配置信息获取模块，用于获取用户输入的配置信息；

配置信息处理模块，用于对所述配置信息进行处理；

表单页面生成模块，用于根据处理后的配置信息并结合组件库生成表单页面。

本发明还提供了一种控制器，用于执行前面任一项所述的表单生成方法。

本发明采用以上技术方案，所述一种表单生成方法，包括：引入FormBuilder组件，并进行注册和初始化；获取用户输入的配置信息；对所述配置信息进行处理；根据处理后的配置信息并结合组件库生成表单页面。本发明所述的表单生成方法，整个表单是由配置项自动生成，增加了代码的复用度，有利于提高开发质量和效率；通过对view-design的二次封装，使表单既保留了view-design的特性，又具有了高复用的特性；此外，该表单生成方法将配置信息与组件分割开，降低了两者的耦合性，增加了组件的配置性和灵活性，简化了表单页面开发流程，便于新人入手和后期维护。

附图说明

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

图1是本发明一种表单生成方法提供的整体流程示意图；

图2是本发明一种表单生成方法提供的详细处理流程示意图；

图3是本发明一种表单生成装置提供的结构示意图。

图中：1、初始化模块；2、配置信息获取模块；3、配置信息处理模块；4、表单页面生成模块。

具体实施方式

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

图1是本发明一种表单生成方法提供的整体流程示意图。

如图1所示，本发明所述的一种表单生成方法，包括：

S11：引入FormBuilder组件，并进行注册和初始化；

进一步的，所述FormBuilder组件依赖于前端框架Vue以及前端UI组件库View-Design；

通过对view-design进行二次封装，将View-Design提供的分散的组件进行内置处理，并将配置文件暴露出来，以供用户根据提供字段进行自定义配置。

进一步的，所述进行注册和初始化，包括：

引入FormBuilder组件后，分别初始化配置信息，初始化数据中心以及初始化事件中心；

其中，初始化数据中心包括新建一个空对象。

S12：获取用户输入的配置信息；

进一步的，所述配置信息是用户根据给定的配置字段进行自定义配置输入的；

其中，所述配置信息，包括：

表单的布局、子UI组件的数据项名称、默认值、显隐状态和/或校验方式。

S13：对所述配置信息进行处理；

进一步的，所述FormBuilder组件包括：Schema处理器、Config处理器和Parse处理器；

所述对所述配置信息进行处理，包括：

通过所述Schema处理器筛选出所述配置信息中传入的组件标签名称，以便为后续从组件库中提取相应组件提供标识。

进一步的，所述对所述配置信息进行处理，还包括：

通过所述Config处理器根据所述配置信息中传入的数据项名称和默认值，重新生成新的数据源；

所述新的数据源用于给数据中心新增与配置信息一一匹配的数据源。

进一步的，所述对所述配置信息进行处理，还包括：

通过所述Parse处理器根据所述配置信息传入的数据，提取各个数据所需的事件名，然后与事件中心新增的事件名相匹配，以便触发相应事件。

S14：根据处理后的配置信息并结合组件库生成表单页面。

进一步的，所述根据处理后的配置信息并结合组件库生成表单页面，包括：

根据所述Schema处理器筛选出的组件标签名称从组件库中提取相应组件后，按照处理后的配置信息给各个组件添加相应属性，然后生成表单页面，并将生成的表单页面展示给用户，以便用户根据实际需求进行操作。

本发明所述的表单生成方法特别适用于对Form表单的快速开发场景，解决当Form表单页面数据比较多，数据之间的交互过于复杂，用传统的表单写法功能过于冗长、配置信息过于杂乱、页面的复用性不高、新手上手过慢的问题。

本发明针对业务痛点，将在UI组件库之上，开发架构封装成一个FormBuilder组件，通过将配置信息与组件隔离，只需简单的对配置信息进行配置，即可自动生成Form表单页面。

具体的，FormBuilder展示与逻辑交互层：根据view-design提供的UI组件进行封装，允许用户根据传入的参数，自定义Form表单的布局及子UI组件的显隐、校验等功能；

FormBuilder配置信息层：允许用户根据给定的配置字段进行自定义配置，FormBuilder可根据用户的配置文件，自动生成Form表单页面，表单中子组件的默认值、状态、校验等均可从配置文件进行配置；

FormBuilder数据源：Form表单提交的数据参数及格式，是通过配置文件自动生成的。用户仅需给组件传入value值即可获取由配置文件生成的可供提交的数据源。

本发明所涉及的FormBuilder组件依赖于前端框架Vue以及前端UI组件库View-Design，将View-Design提供的分散的组件进行了内置处理，并将配置文件暴露出来，可供用户根据提供字段进行自定义配置。

本发明所涉及的FormBuilder组件将展示逻辑交互层与配置层切割开发。用户可通过直接配置配置文件，自动生成相应的Form表单提交页面，无须关注组件的展示逻辑交互层的实现方法，以此简化了Form表单页面开发的流程。

图2是本发明一种表单生成方法提供的详细处理流程示意图。

如图2所示，页面是用于与用户直接交互的界面，引入FormBuilder组件后，分别初始化配置信息，初始化数据中心以及初始化事件中心。其中初始化数据中心仅需提供空对象即可，而数据中心的数据源可通过配置信息进行提取后，新增到当前的空对象中。

所述FormBuilder组件包括：Builder处理器、Schema处理器、Config处理器、Parse处理器和Component组件库。

根据页面传入的初始化信息，首先通过Builder处理器进行初始化后，再通过Schema处理器、Config处理器和Parse处理器对用户输入的配置信息进行处理，处理后结合Component组件库生成表单页面。

具体的，所述Schema处理器主要功能为筛选出配置信息中传入的组件标签名称，为后续从组件库中提取相应组件提供标识。

所述Config处理器主要功能是根据配置信息中传入的数据项名称和默认值，重新生成新的数据源，所述新的数据源用于给数据中心新增与配置信息一一匹配的数据源。

所述Parse处理器主要功能是根据配置信息传入的数据，提取各个数据所需的事件名，然后与事件中心新增的事件名相匹配，从而触发相应事件。

所述Component组件库主要功能是根据Schema处理器筛选出的组件标签名称从组件库中提取相应组件后，按照处理后的配置信息给各个组件添加相应属性，然后生成表单页面用于用户操作。

本发明所述的表单生成方法，整个表单是由配置项自动生成，增加了代码的复用度，有利于提高开发质量和开发效率；通过对view-design的二次封装，使表单既保留了view-design的特性，又具有了高复用的特性；此外，该表单生成方法将配置信息与组件分割开，降低了两者的耦合性，增加了组件的配置性和灵活性，简化了表单页面开发流程；针对不同的配置信息调用不同的处理逻辑进行处理，便于新人入手和后期维护。

图3是本发明一种表单生成装置提供的结构示意图。

如图3所示，本发明所述的一种表单生成装置，包括：

初始化模块1，用于引入FormBuilder组件，并进行注册和初始化；

配置信息获取模块2，用于获取用户输入的配置信息；

配置信息处理模块3，用于对所述配置信息进行处理；

表单页面生成模块4，用于根据处理后的配置信息并结合组件库生成表单页面。

本发明所述的一种表单生成装置的工作原理与前面所述的一种表单生成方法的工作原理相同，在此不再赘述。

本发明所述的表单生成装置特别适用于对Form表单的快速开发场景，该装置解决了当Form表单页面数据比较多，数据之间的交互过于复杂，用传统的表单写法功能过于冗长、配置信息过于杂乱、页面的复用性不高、新手上手过慢的问题。该装置通过将配置信息与组件分割开，降低了两者的耦合性，增加了组件的配置性和灵活性，简化了表单页面开发流程，有利于提高开发质量和效率，且便于后期维护。

此外，本发明还提供了一种控制器，用于执行图1或图2所述的表单生成方法。

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

需要说明的是，在本发明的描述中，术语“第一”、“第二”等仅用于描述目的，而不能理解为指示或暗示相对重要性。此外，在本发明的描述中，除非另有说明，“多个”的含义是指至少两个。

流程图中或在此以其他方式描述的任何过程或方法描述可以被理解为，表示包括一个或更多个用于实现特定逻辑功能或过程的步骤的可执行指令的代码的模块、片段或部分，并且本发明的优选实施方式的范围包括另外的实现，其中可以不按所示出或讨论的顺序，包括根据所涉及的功能按基本同时的方式或按相反的顺序，来执行功能，这应被本发明的实施例所属技术领域的技术人员所理解。

应当理解，本发明的各部分可以用硬件、软件、固件或它们的组合来实现。在上述实施方式中，多个步骤或方法可以用存储在存储器中且由合适的指令执行系统执行的软件或固件来实现。例如，如果用硬件来实现，和在另一实施方式中一样，可用本领域公知的下列技术中的任一项或他们的组合来实现：具有用于对数据信号实现逻辑功能的逻辑门电路的离散逻辑电路，具有合适的组合逻辑门电路的专用集成电路，可编程门阵列(PGA)，现场可编程门阵列(FPGA)等。

本技术领域的普通技术人员可以理解实现上述实施例方法携带的全部或部分步骤是可以通过程序来指令相关的硬件完成，所述的程序可以存储于一种计算机可读存储介质中，该程序在执行时，包括方法实施例的步骤之一或其组合。

此外，在本发明各个实施例中的各功能单元可以集成在一个处理模块中，也可以是各个单元单独物理存在，也可以两个或两个以上单元集成在一个模块中。上述集成的模块既可以采用硬件的形式实现，也可以采用软件功能模块的形式实现。所述集成的模块如果以软件功能模块的形式实现并作为独立的产品销售或使用时，也可以存储在一个计算机可读取存储介质中。

上述提到的存储介质可以是只读存储器，磁盘或光盘等。

在本说明书的描述中，参考术语“一个实施例”、“一些实施例”、“示例”、“具体示例”、或“一些示例”等的描述意指结合该实施例或示例描述的具体特征、结构、材料或者特点包含于本发明的至少一个实施例或示例中。在本说明书中，对上述术语的示意性表述不一定指的是相同的实施例或示例。而且，描述的具体特征、结构、材料或者特点可以在任何的一个或多个实施例或示例中以合适的方式结合。

尽管上面已经示出和描述了本发明的实施例，可以理解的是，上述实施例是示例性的，不能理解为对本发明的限制，本领域的普通技术人员在本发明的范围内可以对上述实施例进行变化、修改、替换和变型。