CN109918370B - 一种基于web的可配置表单应用前端的开发方法及系统 - Google Patents

Abstract

本发明公开了一种基于WEB的可配置表单应用前端的开发方法及系统，包括以下步骤：将待输入数据中各类字段信息转换为能够在WEB开发中进行编程的数据结构对象；数据结构对象包括：录入类型和键值属性；在前端框架中，根据获得的数据结构对象，封装前端组件并设计组件接口；在前端框架中构建项目，将获得的数据结构对象作为全局可访问的数据对象引入编译环境中，对数据结构对象进行遍历；根据数据结构对象中的“录入类型”属性，引入设计的组件，完成可配置表单应用前端的开发。本发明基于待输入数据设计可编程的数据对象，利用对象属性描述待输入数据的UI呈现方式，从而实现从数据到UI的直接映射，能够达到表单应用的快速开发的效果。

Description

一种基于WEB的可配置表单应用前端的开发方法及系统

技术领域

本发明属于表单应用开发技术领域，特别涉及一种基于WEB的可配置表单应用前端的开发方法及系统。

背景技术

随着大数据与WEB的发展，各个领域都在尝试基于大数据进行知识的挖掘和可视化的分析。在相关的研究课题或项目中往往需要收集大量的数据作为基础，包括各种内容和形式的问卷、表单等等。目前的WEB应用通常有相关信息的数据录入的功能，然而在许多领域，例如医疗领域等，会涉及大量的检查信息和统计信息，这种情况下的WEB应用表单将涉及成百上千的字段和种类繁多的用户界面呈现形式。采用传统的表单应用开发方式，逐一通过前端的代码去构建这些表单，将会是一个繁琐和低效的过程。尤其是对于用户界面UI的实现，需要遵循浏览器的解析规则，进行大量的代码编写，开发效率较低，重复性工作较多。

综上，亟需一种新型的表单应用的开发方法。

发明内容

本发明的目的在于提供一种基于WEB的可配置表单应用前端的开发方法及系统，以解决上述存在的技术问题。本发明的开发方法基于待输入数据设计可编程的数据对象，利用对象属性描述待输入数据的UI呈现方式，从而实现从数据到UI的直接映射，能够达到表单应用的快速开发的效果。

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

一种基于WEB的可配置表单应用前端的开发方法，包括以下步骤：

步骤1，将待输入数据中各类字段信息转换为能够在WEB开发中进行编程的数据结构对象；所述数据结构对象包括：录入类型和键值属性；

步骤2，在前端框架中，根据步骤1获得的数据结构对象，封装前端组件并设计组件接口；

步骤3，在前端框架中构建项目，将步骤1获得的数据结构对象作为全局可访问的数据对象引入编译环境中，利用循环语句对数据结构对象进行遍历；根据数据结构对象中的“录入类型”属性，引入步骤2设计的组件，完成可配置表单应用前端的开发。

进一步地，步骤1具体包括：对待输入数据中各类字段进行数据结构设计，将设计结果通过脚本实现自动化转换，使需要录入的数据字段转换为预定的数据结构对象。

进一步地，组件的设计遵循单一职责和低耦合的原则，组件包括共有的接口，用于显示数据字段的信息；所述共有的接口包括：数据字段名称的接口；对其他数据字段的作用接口；数据字段在后端进行存储的键值接口；数据字段的录入类型。

进一步地，数据字段在后端进行存储的键值接口，对于简单的数据对象，直接以默认值的形式作为数据字段在后端的存储键值；对于复杂的数据对象，则基于此键值接口的默认值按照预定规则生成所有字段的存储键值；其中，所述简单的数据对象为录入时只需要一个输入框的数据，复杂的数据对象是以表格形式或多选框形式UI采集的数据。

进一步地，针对不同的组件需要设计不同的接口；具体包括：

(1)简单输入组件：对于可以通过单个输入框实现录入的数据字段，针对其最大长度、数据类型和错误提示属性进行接口设计；

(2)选择组件：对于可以通过单选和复选形式进行录入的离散值数据字段，针对单选与否、选项内容、选项值进行接口设计；

(3)日期组件：日期组件用于日期的设定，接口设有日期区间的限制；

(4)表格组件：对表格的行数、列数、表头和单元格形式属性进行制定。

进一步地，还包括，与后端的配合方法；具体包括以下步骤：对于开发获得的不同的数据表单应用前端，在第一次初始化的界面，通过http请求将所有的键值发送至后端，后端基于此请求体的内容，进行数据表的建立，并为此数据表单生成唯一的ID作为数据表的标识；在此后的数据录入过程中，数据表单的ID作为每次保存请求的一个参数发送给后端，使得后端可对请求进行正确的处理，将接收到的字段保存到相应的表下。

进一步地，步骤1具体包括：

S1.1，收集并整理待输入数据样本；待输入数据样本的形式包括纸质或电子文档形式；

S1.2，根据整理获得的待输入数据样本，对各类字段进行数据结构的设计；具体包括：数据名称、数据ID、数据类型、录入形式和长达限制属性的设定；

S1.3，将步骤S1.2获得的各类字段数据结构设计的结果，利用脚本实现自动化的转换，将所有需要录入的数据字段转换为相应的数据结构对象；数据结构对象至少包括：录入类型和键值属性。

进一步地，还包括步骤S1.4；S1.4，对步骤S1.3生成的数据结构对象进行修补处理；修补处理具体包括：向数据结构对象中补入预设的属性信息。

进一步地，步骤3中，需要进行分页处理的表单，则将数据结构对象以页为单位进行划分，实现将录入界面拆分为多个。

一种基于WEB的可配置表单应用前端的开发系统，包括：

数据结构对象转换模块，用于将待输入数据中各类字段信息转换为能够在WEB开发中进行编程的数据结构对象；所述数据结构对象包括：录入类型和键值属性；

封装及接口设计模块，用于在前端框架中，根据数据结构对象转换模块获得的数据结构对象，封装前端组件并设计组件接口；

可配置表单应用前端生成模块，用于在前端框架中构建项目，将获得的数据结构对象作为全局可访问的数据对象引入编译环境中，利用循环语句对数据结构对象进行遍历；根据数据结构对象中的“录入类型”属性，引入封装及接口设计模块设计的组件，完成可配置表单应用前端的开发。

与现有技术相比，本发明具有以下有益效果：

本发明的基于WEB的可配置表单应用的开发方法，可提高表单应用开发效率，减少重复性工作。本发明中，首先根据数据在线下收集的内容和格式，进行对应的数据结构的设计。将所有可能出现的数据类型、收集形式进行总结，设计对应的数据结构，可以是JSON数据结构，使之可以与表单的UI一一对应；其次，基于现有的WEB应用前端框架，可以是AngularJS，Vue.js，ReactJS；根据上一步设计的数据结构，进行前端表单组件的封装和接口的代码实现；再次，利用前端框架直接读取要进行录入的数据结构，将其中的数据对象按照接口映射为对应的组件。本发明的适用性比较广泛，适用于多种基于MV*设计模式的组件化前端开发框架，包括react、angular、vue.js等，只要基于组件化的思想实施本发明的方法即可。本发明有助于提高类似的表单应用的开发效率，对于数据量大，数据录入形式复杂的应用；采用本发明中的方法，可以极大地减少表单交互界面的开发成本，可使程序开发人员专注于数据处理和组件内部逻辑，提高开发的效率和准确度。

进一步地，可以将数据在数据库中存储的键值也作为数据对象的一个属性，使得构建UI的同时，也能实现从UI到数据库对应字段的关系映射；通过访问组件的接口，整理并获取要存储的数据键值，在后端进行数据库的建表，实现表单应用的数据录入和存储。

附图说明

图1是本发明的一种基于WEB的可配置表单应用的开发方法的流程示意框图；

图2是本发明实施例中基于某种医疗数据样例而实现录入系统的示意图。

具体实施方式

下面结合附图和具体实施例对本发明作进一步详细说明。

请参阅图1，本发明的一种基于WEB的可配置表单应用的开发方法，具体包括以下步骤：

步骤1，根据待输入数据设计数据结构。

待输入数据格式往往是通过纸质表单、基于计算机本地的存储和录入的桌面应用，或者用户和数据使用者来进行目标数据的描述这几种方式来获取的。为了将这些数据通过WEB表单应用的形式进行更多地增量采集，需要通过获取待输入数据，并进行相应的表单结构的设计，来建立WEB端依据的JSON数据结构，从而进一步进行数据对象到UI的映射。

步骤1具体包括以下步骤：

Step1.收集并整理线下待输入数据样本，可以是纸质、电子文档等多种形式，保证数据的完整性，尽量避免后期因数据字段缺失和修改造成较大的改动。

Step2.根据整理的数据样本，对各类字段进行数据结构的设计，包括数据名称、数据ID、数据类型、录入形式、以及长达限制等属性的设定。对于存在并列关系或从属关系的数据，可以设计为更复杂的采集形式，如表格。

Step3.整理上一步对各类字段数据结构设计的结果，利用python、nodeJS、JAVA等脚本实现自动化的转换，将所有需要录入的数据字段转换为相应预定的数据结构对象；数据结构对象至少包括：录入类型和键值属性。

Step4.基于上一步生成的数据结构对象，进行一些个别数据字段的特殊处理。处理具体包括待输入数据中没有提供的属性信息，比如数据录入过程中的错误提示、数据单位这样的属性。例如对于前面的数据字段值会直接影响到后面数据录入的情况，可以在这一步中进行指定。例如，当性别选项选择男时，关于女性的相关数据录入比如生育史则不允许被输入，对应的UI会变为只读状态。这种情况下，性别的数据对象应该拥有一个属性，来制定性别的值对后面哪些UI会产生哪些影响。

步骤1的目的是将csv或其他格式的数据字段信息，转化为可以在WEB开发中进行编程的JSON(JavaScript Object Notation，JS对象简谱)数据对象，从而进行接口的设计和开发。

单独的字段往往会以单个简单的对象呈现，一些逻辑上并列形式上可合并的字段可能合起来成为一个较为复杂的对象。例如，姓名、联系电话、编号这样的字段，所需要的UI比较简单，数据对象的属性比较少，数据对象相对简单；例如，检验检查、体检指标这样的待输入数据，对应的UI比较复杂，需要表格或复选框这样的UI来呈现，这种情况下，描述这样的待输入数据的数据对象就需要更多的属性，形成的数据对象就较为复杂。

步骤2，在前端框架中，根据数据结构，封装前端组件并设计组件接口。

步骤1中输出的JSON数据对象由多个属性组成，针对这些属性，需要相应的前端组件接口进行访问和呈现。

组件的设计遵循单一职责和低耦合的原则，尽量保证各个组件职能区分明显，不会互相影响。组件有一些共有的接口，用于显示数据字段的一些基本信息，包括：1)数据字段名称的接口，2)对其他数据字段的作用接口，3)数据字段在后端进行存储的键值接口，4)数据字段的录入类型，例如输入、单选、复选、表格等。其中第3)个接口对于简单的数据对象，可以直接以默认值的形式作为数据字段在后端的存储键值，对于复杂的数据对象，则需要基于此接口的默认值按照一定规则生成所有字段的存储键值。简单的数据对象的属性少，对应的UI简单；复杂数据对象的属性多，对应的UI比较复杂，存在层级显示的情况。

除上述的通用接口外，对于不同类型的组件，还有不同的接口需要进行实现。包括以下组件：

(1)简单输入组件：对于各种可以通过单个输入框实现录入的数据字段，需要进行各种数据类型和长度的限制和检验，包括错误信息的提示，因此需要针对最大长度、数据类型和错误提示等属性实现接口。

(2)选择组件：对于一些离散值的数据字段，可以通过单选和复选等形式进行录入，因此需要针对单选与否、选项内容、选项值等属性进行接口的设计。

(3)日期组件：日期组件主要用于日期的设定，因此需要有日期区间的限制，对应的接口中应该考虑到这一点。

(4)表格组件：表格组件的封装和接口较为复杂，需要对表格的行数、列数、表头、单元格形式等属性进行制定。同时，表格组件内部需要对表格内所有数据字段在后端的存储键值进行生成，从而使得表格内的数据字段键值在行列上保持一定规律。

其中，组件的封装和接口的设计是一个反复迭代的过程，由于数据的多样性，组件需要针对各种属性进行接口的完善，尤其是表格组件的设计，直至达到预设的优化收敛条件。

步骤3，读取目标数据表单，构建前端录入界面。

在前端框架中构建项目，将第一步中的JSON数据作为全局可访问的数据对象引入编译环境中，利用循环语句对JSON对象进行遍历，并根据对象的“录入类型”属性，引入步骤2中相应的组件。组件的接口基于对应JSON对象的属性值进行相应的呈现，至此该录入界面的前端部分实现已经完毕。

对于数据量较大从而UI的高度过大，影响了用户体验的情况，需要进行分页来处理的表单，可以将录入界面拆分为多个。将JSON数据以页为单位进行划分，在相应的页面访问对应的部分即可。

步骤4，本发明开发的前端与与后端的配合方法，利用组件接口，整理数据键值并建表。具体步骤包括：

根据步骤1中数据结构对象的键值属性和步骤2中组件的“键值接口”，可以直接获得所有简单JSON对象在后端存储的键值，而表格组件中的所有字段键值可以按照一定预设规则生成。比如，表格需要统计若干次血常规的数据，那么血常规的具体项目以列的形式呈现，血常规的次数以行的形式呈现。那么，以第二次血常规的第三列项目血小板的数值为例，其后端存储的键值就可以定义为XueCG_2_3，表示血常规的第二次的血小板的数据库键值。

对于不同的数据表单应用，在第一次初始化的界面，将通过http请求将所有的键值发送至后端数据库，后端基于此请求体的内容，进行数据表的建立，并为此表单生成唯一的ID作为数据表的标识。在此后的数据录入过程中，表单ID将作为每次保存请求的一个重要字段发送给后端，使得后端可以对请求进行正确的处理，将接收到的字段保存到相应的表下。

本发明基于以上四个步骤，录入系统可以实现从前端录入到后端保存的过程。实现完全基于JSON数据对象的属性和封装好的前端组件。对于表单的修改，可以针对JSON数据对象进行属性的修剪和定义，并对相应的组件进行相应的同步修改。在MVW模式下，开发者可以专注于组件内部Model层的逻辑，减少过去开发过程中前端样式和内容的手段添加的工作量，极大地简化了View层的代码量。本发明是一种基于现有WEB应用前后端框架，通过接口设计和组件化方法而实现可配置表单应用的方法，通过进行数据结构的设计和WEB前端组件的封装，可以用于高效地开发具有大量表单需求的医疗数据录入系统。与现有技术相比，本发明的优点主要包括：适用性比较广泛，适用于多种基于MV*设计模式的组件化前端开发框架，包括react、angular、vue.js等，只要基于组件化的思想实施上述步骤即可；有助于提高类似的表单应用的开发效率，对于数据量大，数据录入形式复杂的应用，采用此发明中的方法，可以极大地减少表单交互界面的开发成本，使程序开发人员专注于数据处理和组件内部逻辑，提高开发的效率和准确度。

在数据录入之前，将待录入表单的结构和属性，整理为某种数据格式，通过加入一些配置的信息以及一些抽象封装好的前端代码，利用脚本语言直接生成对应的前端表单样式，可以很好地减少前端程序员的工作量。本发明不同于传统对UI的纯手动实现方法，对数据的操作通过脚本来编程操作，修改成本较低；本发明建立一个从数据到UI组件的映射关系，数据的属性可以利用组件的接口来体现。后端的数据库键值信息也可以通过属性添加进数据中。以数据为基础，利用组件进行用户界面的生成，并通过网路请求发送至服务端进行数据表的建立，可以实现一个表单的生成和数据库的存取。通过这种方式，开发者可以专注于数据处理和组件的设计，并可以不断进行迭代开发，进一步完善可复用性。

本发明的一种基于WEB的可配置表单应用的开发系统，包括：

数据结构对象转换模块，用于将待输入数据中各类字段信息转换为能够在WEB开发中进行编程的数据结构对象；所述数据结构对象包括一系列用于描述UI和数据存储的属性，其中最基本的两个属性为录入类型和键值属性；

封装及接口设计模块，用于在前端框架中，根据数据结构对象转换模块获得的数据结构对象，封装前端组件并设计组件接口；

可配置表单应用前端生成模块，用于在前端框架中构建项目，将获得的数据结构对象作为全局可访问的数据对象引入编译环境中，利用循环语句对数据结构对象进行遍历；根据数据结构对象中的“录入类型”属性，引入封装及接口设计模块设计的组件，完成可配置表单应用前端的开发。

实施例

下面通过一个医疗数据表单应用的具体实施例对本发明进行详细描述。

请参阅图2，本发明实施例中实现一个对应的可配置医疗表单录入系统，包括以下步骤：

S201，根据线下医疗数据设计数据结构。

线下医疗数据的采集往往是通过纸质表单或桌面应用基于计算机本地的存储和录入，通过获取这些数据字段，并进行相应的表单结构的设计，来建立WEB端可依据的数据结构。

具体包括以下步骤：

1.收集并整理线下医疗数据样本，其可以是纸质、电子文档等多种形式，保证数据的完整性，尽量避免后期因数据字段缺失和修改造成较大的改动。

2.根据整理的医疗数据样本，对各类字段进行数据结构的设计，包括数据名称、数据ID、数据类型、录入形式、长达限制等属性的设定。对于存在并列关系或从属关系的数据，可以设计为更复杂的采集形式，如表格。

3.整理步骤2对各类字段数据结构设计的结果，利用python脚本实现自动化的转换，将所有需要录入的数据字段转换为相应的数据结构对象。

4.基于步骤3生成的数据结构对象，进行一些个别数据字段的特殊处理。例如对于前面的数据字段值会直接影响到后面数据录入的情况，可以在这一步中进行指定，需要对个别数据字段进行处理。例如，当性别选项选择男时，关于女性的相关数据录入比如生育史则不允许被输入，对应的UI会变为只读状态。这种情况下，前面的数据数值会产生对其它UI的影响，以性别为例，性别的数据对象应该拥有一个属性，来指定性别的值对后面哪些UI会产生哪些影响。

经过步骤S201的过程，目的是将csv或其他格式的数据字段信息，转化为可以在WEB开发中进行编程的JSON数据对象，从而进行接口的设计和开发。单独的字段往往会以单个简单的对象呈现，一些逻辑上并列形式上可合并的字段可能合起来成为一个较为复杂的对象。例如，姓名、性别这样的单一数值且UI简单的字段，可以用简单的数据对象呈现；例如，检验化验这种以表格形式UI去采集的数据，其数据对象较为复杂，需要更多的属性和层级结构的数据对象来表示。

S202，在前端框架中，根据数据结构，封装前端组件并设计组件接口。

S201中输出的JSON数据对象由多个属性组成，针对这些属性，需要相应的前端组件接口进行访问和呈现。组件的设计遵循单一职责和低耦合的原则，尽量保证各个组件职能区分明显，不会互相影响。组件有一些共有的接口，用于显示数据字段的一些基本信息，包括：1)数据字段名称的接口。2)对其他数据字段的作用接口。3)数据字段在后端进行存储的键值接口。4)数据字段的录入形式(输入、单选、复选、表格等)。其中第三个接口对于简单的数据对象，可以直接以默认值的形式作为数据字段在后端的存储键值，对于复杂的数据对象，则需要基于此接口的默认值按照一定规则生成所有字段的存储键值。

除上述的通用接口外，对于不同类型的组件，还有不同的接口需要进行实现。包括以下组件：

简单输入组件：以<m-input>为例，对于各种可以通过单个输入框实现录入的数据字段，需要进行各种数据类型和长度的限制和检验，包括错误信息的提示，因此需要针对最大长度、数据类型和错误提示等属性实现接口。

选择组件：以<m-select>为例，对于一些离散值的数据字段，可以通过单选和复选等形式进行录入，因此需要针对单选与否、选项内容、选项值等属性进行接口的设计。

日期组件：以<m-date>为例，日期组件主要用于日期的设定，因此需要有日期区间的限制，对应的接口中应该考虑到这一点。

表格组件：以<m-table-1/2>为例，表格组件的封装和接口较为复杂，需要对表格的行数、列数、表头、单元格形式等属性进行制定。同时，表格组件内部需要对表格内所有数据字段在后端的存储键值进行生成，从而使得表格内的数据字段键值在行列上保持一定规律。

组件的封装和接口的设计是一个反复迭代的过程，由于数据的多样性，组件需要针对各种属性进行接口的完善，尤其是表格组件的设计。本实施例中仅仅展示了input，select，date等三种基础组件和table一种复合组件，在实际应用中，需要进行更多种类的组件的实现和组件样式的调整。

S203读取目标数据表单，构建前端录入界面。

在前端框架中构建项目，将第一步中的JSON数据作为全局可访问的数据对象引入，利用循环语句对JSON对象进行遍历，并根据对象的“录入类型”属性，引入相应的组件。组件的接口基于对应JSON对象的属性值进行相应的呈现。至此该录入界面的前端部分实现已经完毕。数据量过大导致表单应用UI的高度过高，以至于影响了用户体验的情况，需要进行分页处理的表单，可以将录入界面拆分为多个。将JSON数据以页为单位进行划分，在相应的页面访问对应的部分即可。

S204利用组件接口，整理数据键值并建表。

根据组件的“键值接口”，可以直接获得所有简单JSON对象在后端存储的键值，而表格组件中的所有字段键值可以按照一定的规则生成；规则可以是，以行列顺序来定位数据字段在表格UI中的位置，并将行列信息加入到键值中这样的规则。对于不同的数据表单，在第一次初始化的界面，将通过http请求将所有的键值发送至后端，后端基于此请求体的内容，进行数据表的建立，并为此表单生成唯一的ID作为数据表的标识。在此后的数据录入过程中，表单ID将作为每次保存请求的一个重要字段发送给后端，使得后端可以对请求进行正确的处理，将接收到的字段保存到相应的表下。

综上，本发明实施例提供了一种基于现有WEB应用前后端框架而实现的可配置表单应用实现方法。本发明实施例的实现方式是首先根据线下要录入的数据，进行数据处理和JSON数据结构的设计，并基于此数据结构，将相应WEB应用的交互界面进行组件化封装，使得组件的接口可以体现JSON数据对象的各种属性，建立从各种需要录入的数据字段到WEB应用交互界面的映射。在此基础上，利用JSON数据对象中的属性来提供后端数据库表的键值信息，实现从交互界面到服务端存储的完整流程。通过此发明中的方法，系统开发人员专注于医疗数据本身的结构和类型，更加快速地构建自己需要的医疗数据录入系统。本发明解决了具备大量复杂和重复UI的表单应用，尤其是医疗领域，医院各个科室对于大量类似WEB应用开发的需求问题，提升了相关数据录入系统的开发者的开发效率。本发明是一种基于现有WEB应用前后端框架，通过接口设计和组件化方法而实现可配置表单应用的方法，本发明的方法主要解决WEB应用开发者在面对需要大量的表单场景时的应用开发效率问题。

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

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

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

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

以上实施例仅用以说明本发明的技术方案而非对其限制，尽管参照上述实施例对本发明进行了详细的说明，所属领域的普通技术人员依然可以对本发明的具体实施方式进行修改或者等同替换，这些未脱离本发明精神和范围的任何修改或者等同替换，均在申请待批的本发明的权利要求保护范围之内。

Claims (1)

1.一种基于WEB的可配置表单应用前端的开发方法，其特征在于，包括以下步骤：

步骤1，将待输入数据中各类字段信息转换为能够在WEB开发中进行编程的数据结构对象；所述数据结构对象包括：录入类型和键值属性；

步骤2，在前端框架中，根据步骤1获得的数据结构对象，封装前端组件并设计组件接口；

步骤3，在前端框架中构建项目，将步骤1获得的数据结构对象作为全局可访问的数据对象引入编译环境中，利用循环语句对数据结构对象进行遍历；根据数据结构对象中的“录入类型”属性，引入步骤2设计的组件，完成可配置表单应用前端的开发；

其中，步骤1包括：对待输入数据中各类字段进行数据结构设计，将设计结果通过脚本实现自动化转换，使需要录入的数据字段转换为预定的数据结构对象；具体包括：

S1.1，收集并整理待输入数据样本；待输入数据样本的形式包括纸质或电子文档形式；

S1.2，根据整理获得的待输入数据样本，对各类字段进行数据结构的设计；具体包括：数据名称、数据ID、数据类型、录入形式和长达限制属性的设定；

S1.3，将步骤S1.2获得的各类字段数据结构设计的结果，利用脚本实现自动化的转换，将所有需要录入的数据字段转换为相应的数据结构对象；数据结构对象至少包括：录入类型和键值属性；

S1.4，对步骤S1.3生成的数据结构对象进行修补处理；修补处理具体包括：向数据结构对象中补入预设的属性信息；

组件的设计遵循单一职责和低耦合的原则，组件包括共有的接口，用于显示数据字段的信息；所述共有的接口包括：数据字段名称的接口；对其他数据字段的作用接口；数据字段在后端进行存储的键值接口；数据字段的录入类型；

数据字段在后端进行存储的键值接口，对于简单的数据对象，直接以默认值的形式作为数据字段在后端的存储键值；对于复杂的数据对象，则基于此键值接口的默认值按照预定规则生成所有字段的存储键值；其中，所述简单的数据对象为录入时只需要一个输入框的数据，复杂的数据对象是以表格形式或多选框形式UI采集的数据；

针对不同的组件需要设计不同的接口；具体包括：

(1)简单输入组件：对于可以通过单个输入框实现录入的数据字段，针对其最大长度、数据类型和错误提示属性进行接口设计；

(2)选择组件：对于可以通过单选和复选形式进行录入的离散值数据字段，针对单选与否、选项内容、选项值进行接口设计；

(3)日期组件：日期组件用于日期的设定，接口设有日期区间的限制；

(4)表格组件：对表格的行数、列数、表头和单元格形式属性进行制定；

所述基于WEB的可配置表单应用前端的开发方法还包括，与后端的配合方法；具体包括以下步骤：

对于开发获得的不同的数据表单应用前端，在第一次初始化的界面，通过http请求将所有的键值发送至后端，后端基于此请求体的内容，进行数据表的建立，并为此数据表单生成唯一的ID作为数据表的标识；

在此后的数据录入过程中，数据表单的ID作为每次保存请求的一个参数发送给后端，使得后端可对请求进行正确的处理，将接收到的字段保存到相应的表下；

步骤3中，需要进行分页处理的表单，则将数据结构对象以页为单位进行划分，实现将录入界面拆分为多个。

Images