CN115857934A - 一种根据配置变量文件生成表单页面的方法 - Google Patents

Abstract

本发明公开了一种根据配置变量文件生成表单页面的方法，包括：S1、生成配置文件，所述配置文件包括各个业务表单的配置项；S2、生成表单生成器，所述表单生成器用于将配置文件中的配置信息转换为浏览器理解的页面；S3、采用业务页面引用所述表单生成器和配置文件，并将所述业务页面加载至浏览器上。本发明能避免重复低效的表单开发工作，节省大量的人力，提高开发效率，也通过机器生成大量的业务代码，使代码格式规范，并且生成的代码有较少的低级BUG，从而降低了维护成本，本发明通过低代码和半自动化，可以迎合未来编程的发展趋势。

Description

一种根据配置变量文件生成表单页面的方法

技术领域

本发明涉及软件研发技术领域，更具体地说，特别涉及一种根据配置变量文件生成表单页面的方法。

背景技术

伴随着计算机技术和高级编程语言的飞速发展，如何降低学习成本提高编程效率成为了软件研发从业者关注的焦点。随着前端技术受到互联网不断更新变化的影响，模块化、低代码化、自动化成为趋势。在众多前端业务功能当中，通过浏览器填写表单是最为常见的使用场景，是人机交互的重要形式。目前，已经有不少相对成熟的表单生成插件面世。然而，这些表单生成插件往往存在有诸多的限制，掺杂了额外的业务逻辑、依赖于额外框架(比如VUE)，并不能成为一种相对独立的编程方法，例如：在后台管理系统当中往往需要开发大量表单页面，这些表单中存在大量相似或重复的表单页面，需要通过有效统一的管理来实现快速开发这类页面，提高软件质量和开发进度。因此，找到一个更独立的、更高效的编程方法来减少重复代码、低级BUG显得尤为重要。

发明内容

本发明的目的在于提供一种根据配置变量文件生成表单页面的方法，以克服现有技术所存在的缺陷。

为了达到上述目的，本发明采用的技术方案如下：

一种根据配置变量文件生成表单页面的方法，包括以下步骤：

S1、生成配置文件，所述配置文件包括各个业务表单的配置项；

S2、生成表单生成器，所述表单生成器用于将配置文件中的配置信息转换为浏览器理解的页面；

S3、采用业务页面引用所述表单生成器和配置文件，并将所述业务页面加载至浏览器上。

进一步地，所述步骤S1中的配置文件的内容包括每个业务表单中的每个元素的属性，该配置文件的最顶层数据为一个数组，每个数据元素为配置ITEM，所述配置ITEM具有全局唯一的键值。

进一步地，配置ITEM至少包含表单label名、表单name值、表单元素类型的基础表单配置。

进一步地，所述浏览器理解的页面为HTML页面或DOM页面。

进一步地，所述配置文件中的每个业务表单的配置项对应生成一个表单页面，每个配置项的元素对应生成表单页面中的表单域。

进一步地，所述步骤S2中表单生成器还包括用于区分业务表单的元素类型，以及至少对新增、编辑和详情的不同表单状态的渲染方法。

进一步地，所述表单生成器还包括渲染后的各个阶段的回调函数。

进一步地，所述表单生成器还包括用于重置表单的函数。

与现有技术相比，本发明的优点在于：本发明提供的一种根据配置变量文件生成表单页面的方法，能避免重复低效的表单开发工作，节省大量的人力，提高开发效率，也通过机器生成大量的业务代码，使代码格式规范，并且生成的代码有较少的低级BUG，从而降低了维护成本，本发明通过低代码和半自动化，可以迎合未来编程的发展趋势。

附图说明

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

图1是本发明根据配置变量文件生成表单页面的方法的流程图。

图2是本发明的基础抽象图。

图3是本发明的多配置文件抽象图例。

具体实施方式

下面结合附图对本发明的优选实施例进行详细阐述，以使本发明的优点和特征能更易于被本领域技术人员理解，从而对本发明的保护范围做出更为清楚明确的界定。

参阅图1-图3所示，本实施例公开了一种根据配置变量文件生成表单页面的方法，包括以下步骤：

步骤S1、生成配置文件，所述配置文件包括各个业务表单的配置项。

具体的，配置文件的内容是围绕各个表单中的每个元素的属性进行描述(例如，filedType代表表单标签类型，它具体码值可分为input、select、checkBox、radio、textarea等)。

本实施例中，编写各个业务表单的JavaScript配置文件，可以区分项目模块(如图3)，例如，user.js(代表用户模块)。

本实施例中，配置文件的最顶层数据是一个数组(由各个模块的配置文件组合而成)，其中每个数组元素称为配置ITEM。

其中，配置ITEM提供一个全局唯一的键值(例：renderKey:’FORMGENERATION_USER_ADDINFO’)。

其中，配置ITEM应包括基础的表单配置，包含表单label名、表单name值、表单元素类型等。

步骤S2、生成表单生成器，所述表单生成器用于将配置文件中的配置信息转换为浏览器理解的页面，可以为HTML页面或DOM页面。

具体的，表单生成器是一种用于生成网页表单的插件程序，配置文件中的每一个表单配置对应生成一个表单页面，每个配置的元素对应生成表单页面中的表单域。

本实施例中，在编写表单生成器时，该程序应当明确输入参数，输入的参数包括表单唯一键值、容器(可选)、渲染类型、是否禁用、表单回显数据(可选)、渲染钩子回调等等。

其中，表单生成器应能生成基础的表单页面，区分表单元素类型，并且针对新增、编辑、详情等不同的表单状态，提供相应的渲染方法。

本实施例中，表单生成器应提供渲染后的各个阶段的回调函数，用以方便业务程序调用。

本实施例中，表单生成器应当遵循前端JavaScript代码规范。

本实施例中，表单生成器生产的结果应当是HTML字符串或者是虚拟DOM，输出结果可以插入到具体的业务页面。

本实施例中，表单生成器应当提供重置表单的函数，用以方便业务程序调用

步骤S3、采用业务页面引用所述表单生成器和配置文件，并将所述业务页面加载至浏览器上。

具体的，业务页面是用于展示表单填写功能的浏览器页面的统称。每个业务页面都需要引用表单生成器和配置文件。在一般情况下，业务页面也需要包含网页样式和其他业务的处理。业务页面被浏览器加载，通过JavaScript语言解释，成为可视化的浏览器表单功能页面。

本实施例中，将表单生成器插件和配置文件引入项目全局(如是非框架的单页面项目，只需要引入主页面HTML中；如果是前端框架，则引入到框架入口挂载；如是非单页面项目，则需要保证配置文件和表单生成器插件能按需加载)，引入后的插件命名，不能与其他函数重名。

本实施例中，编写具体的业务页面程序代码，遵循前端代码规范，且该业务页面不应当是过度复杂的组合页面，不应当存在过度耦合的页面状态，该业务页面的程序命名方式应当尽量严谨，涉及到表单生成器插件的CLASS命名应当符合规范(如果是类似VUE的框架页面，应当给对应的容器HTML加上KEY)，并确保全局唯一。

本实施例由JavaScript语言支持，不依赖于任何前端框架。

本发明能避免重复低效的表单开发工作，节省大量的人力，提高开发效率，也通过机器生成大量的业务代码，使代码格式规范，并且生成的代码有较少的低级BUG，从而降低了维护成本，本发明通过低代码和半自动化，可以迎合未来编程的发展趋势。

虽然结合附图描述了本发明的实施方式，但是专利所有者可以在所附权利要求的范围之内做出各种变形或修改，只要不超过本发明的权利要求所描述的保护范围，都应当在本发明的保护范围之内。

Claims (8)

1.一种根据配置变量文件生成表单页面的方法，其特征在于，包括以下步骤：

S1、生成配置文件，所述配置文件包括各个业务表单的配置项；

S2、生成表单生成器，所述表单生成器用于将配置文件中的配置信息转换为浏览器理解的页面；

S3、采用业务页面引用所述表单生成器和配置文件，并将所述业务页面加载至浏览器上。

2.根据权利要求1所述的根据配置变量文件生成表单页面的方法，其特征在于，所述步骤S1中的配置文件的内容包括每个业务表单中的每个元素的属性，该配置文件的最顶层数据为一个数组，每个数据元素为配置ITEM，所述配置ITEM具有全局唯一的键值。

3.根据权利要求2所述的根据配置变量文件生成表单页面的方法，其特征在于，配置ITEM至少包含表单label名、表单name值、表单元素类型的基础表单配置。

4.根据权利要求1所述的根据配置变量文件生成表单页面的方法，其特征在于，所述浏览器理解的页面为HTML页面或DOM页面。

5.根据权利要求1所述的根据配置变量文件生成表单页面的方法，其特征在于，所述配置文件中的每个业务表单的配置项对应生成一个表单页面，每个配置项的元素对应生成表单页面中的表单域。

6.根据权利要求1所述的根据配置变量文件生成表单页面的方法，其特征在于，所述步骤S2中表单生成器还包括用于区分业务表单的元素类型，以及至少对新增、编辑和详情的不同表单状态的渲染方法。

7.根据权利要求6所述的根据配置变量文件生成表单页面的方法，其特征在于，所述表单生成器还包括渲染后的各个阶段的回调函数。

8.根据权利要求6所述的根据配置变量文件生成表单页面的方法，其特征在于，所述表单生成器还包括用于重置表单的函数。

Images