CN106469047A - 一种表单实现方法及装置 - Google Patents

Abstract

本发明提供了一种表单实现方法及装置，以提高表单实现方法的用户体验。该方法包括：采用浏览器及服务器BS架构，设计表单；基于浏览器及服务器BS架构，展示表单。通过本发明的实施，提供了一种基于BS架构的表单实现方法，完成表单的在线设计和应用展示，支持各主流浏览器使用，在此基础上，用户无需安装客户端，就能够方便的在浏览器界面上通过拖拽等可视化的方式完成表单设计和预览；完成设计的表单可供系统内部使用，也可提供API接口供第三方系统调用。

Description

一种表单实现方法及装置

技术领域

本发明涉及web互联网开发领域，尤其涉及一种表单实现方法及装置。

背景技术

随着信息技术的发展，企业办公、运维等各项业务的开展越来越依赖于各种表单的传递和使用；然而传统的表单开发方式效率相对低下，尤其在大型项目中，表单页面开发周期长、存在大量的重复开发工作；各种表单充斥在系统中，各自独立，后期也难以维护和升级，同时，传统的表单系统通常都不具备良好的扩展性和可移植性，更无法满足移动互联网等新兴领域的应用需求；即，现有表单实现方法的用户使用体验较差。

因此，如何提供一种具备较高用户使用体验的表单实现方法，是本领域技术人员亟待解决的技术问题。

发明内容

本发明提供了一种表单实现方法及装置，以提高表单实现方法的用户体验。

本发明提供了一种表单实现方法，其包括：采用浏览器及服务器BS架构，设计表单；基于浏览器及服务器BS架构，展示表单。

进一步的，采用浏览器及服务器BS架构，设计表单包括：创建表单、设计表单、保存表单。

进一步的，在创建表单之前，还包括：配置标签模板。

进一步的，保存表单包括：以html格式，将表单存入数据库。

进一步的，设计表单包括：拖入标签模板，生成标签实例，配置标签实例；配置验证规则，将标签实例插件化。

进一步的，基于浏览器及服务器BS架构，展示表单包括：在需要展示表单的位置，放置占位标签，获取与占位标签的属性对应的表单数据，解析表单数据以展示表单。

本发明提供了一种表单实现装置，其包括：设计模块，用于采用浏览器及服务器BS架构，设计表单；展示模块，用于基于浏览器及服务器BS架构，展示表单。

进一步的，设计模块用于创建表单、设计表单、保存表单。

进一步的，设计模块在创建表单之前，还用于配置标签模板。

进一步的，设计模块用于以html格式，将表单存入数据库。

进一步的，设计模块用于拖入标签模板，生成标签实例，配置标签实例；配置验证规则，将标签实例插件化。

进一步的，展示模块用于在需要展示表单的位置，放置占位标签，获取与占位标签的属性对应的表单数据，解析表单数据以展示表单。

本发明的有益效果：

本发明提供了一种新的表单实现方法，其基于BS架构(Browser/Server，即浏览器和服务器结构，该模式统一了客户端，简化了系统的开发、维护和使用，它是随着Internet技术的兴起，对C/S结构的一种变化或者改进的结构。在这种结构下，用户工作界面是通过WWW浏览器来实现，极少部分事务逻辑在前端Browser实现，但是主要事务逻辑在服务器端Server实现，形成所谓三层3-tier结构)，完成表单的在线设计和应用展示，支持各主流浏览器使用，在此基础上，用户无需安装客户端，就能够方便的在浏览器界面上通过拖拽等可视化的方式完成表单设计和预览；完成设计的表单可供系统内部使用，也可提供API接口供第三方系统调用。

附图说明

图1为本发明第一实施例提供的表单实现装置的结构示意图；

图2为本发明第二实施例提供的表单实现方法的流程图；

图3为本发明第三实施例提供的表单实现方法的流程图。

具体实施方式

现通过具体实施方式结合附图的方式对本发明做出进一步的诠释说明。

第一实施例：

图1为本发明第一实施例提供的表单实现装置的结构示意图，由图1可知，在本实施例中，本发明提供的表单实现装置1包括：

设计模块11，用于采用浏览器及服务器BS架构，设计表单；

展示模块12，用于基于浏览器及服务器BS架构，展示表单。

在一些实施例中，上述实施例中的设计模块11用于创建表单、设计表单、保存表单。

在一些实施例中，上述实施例中的设计模块11在创建表单之前，还用于配置标签模板。

在一些实施例中，上述实施例中的设计模块11用于以html格式，将表单存入数据库。

在一些实施例中，上述实施例中的设计模块11用于拖入标签模板，生成标签实例，配置标签实例；配置验证规则，将标签实例插件化。

在一些实施例中，上述实施例中的展示模块12用于在需要展示表单的位置，放置占位标签，获取与占位标签的属性对应的表单数据，解析表单数据以展示表单。

第二实施例：

图2为本发明第二实施例提供的表单实现方法的流程图，由图2可知，在本实施例中，本发明提供的表单实现方法包括以下步骤：

S201：采用浏览器及服务器BS架构，设计表单；

S202：基于浏览器及服务器BS架构，展示表单。

在一些实施例中，上述实施例中的采用浏览器及服务器BS架构，设计表单包括：创建表单、设计表单、保存表单。

在一些实施例中，上述实施例中的方法在创建表单之前，还包括：配置标签模板。

在一些实施例中，上述实施例中的保存表单包括：以html格式，将表单存入数据库。

在一些实施例中，上述实施例中的设计表单包括：拖入标签模板，生成标签实例，配置标签实例；配置验证规则，将标签实例插件化。

在一些实施例中，上述实施例中的基于浏览器及服务器BS架构，展示表单包括：在需要展示表单的位置，放置占位标签，获取与占位标签的属性对应的表单数据，解析表单数据以展示表单。

现结合具体应用场景对本发明做进一步的诠释说明。

第三实施例：

图3为本发明第三实施例提供的表单实现方法的流程图，由图3可知，在本实施例中，本发明提供的表单实现方法包括以下步骤：

S301：配置标签模版。

html规范不断更迭的过程中，总伴随着新标签的引入，同时新标签也被主流浏览器逐渐支持并最终达到广泛使用；旧标签可能面临不再推荐使用或者最终会被浏览器弃用。为了适应这种变化，同时也考虑到自定义标签的需求，系统中提供了配置标签模版功能。

在实际应用中内，系统已经内置了常用的标签模版，例如：

文本模版：<label>％s</label>,内容＝“默认文本”；

单行文本输入框模版：<input type＝“text”/>；

多行文本输入框模版：<textarea rows＝“％s”cols＝“％s”></textarea>,行数＝“5”,列数＝“10”；

标签模版的第一段是标签主体部分，后面逗号分隔的依次是属性名称，＝号后面接着属性的默认值，例如上面的多行文本输入框模版拖入到设计器界面后，将生成<textarea rows＝“5”cols＝“10”></textarea>的标签，应用系统可自定义标签模版，如配置一个email标签模版：<input type＝“email”/>。

S302：创建表单。

录入表单名称、分类tag等基本信息后保存。

S303：设计表单。

使用表单设计器，先设计布局，即拖入布局标签，设置行数列数，然后将需要的标签模版拖拽到界面合适的位置上，标签模版拖拽到界面上后，生成了对应的标签实例；然后需要对标签实例进一步配置，需要配置具体的属性值、验证规则等，如设置id，class，name，数据源等。

具体的，选择需要编辑的表单，进入表单设计界面，可进行如下操作：

设计布局：拖入布局标签模版，根据实际情况编辑行列数，这样界面上形成了规则的单元格，可以对单元格进行合并和拆分操作，对布局进一步细化。

配置标签实例：标签模版拖拽到对应的单元格内，则生成了默认的标签实例；此时可对标签实例的属性进一步配置，可配置的属性是由标签模版的内容动态解析出来的，如多行文本输入框模版，除了公共属性id，class，name外，从标签模版上提取到的自定义的属性有行数和列数。

配置验证规则：将标签实例和一个或者多个验证规则绑定起来，如可将单行输入框和必填、email关联，标签实例上将对应生成属性值data-validate＝“required email”

配置插件化：为使表单应用系统达到更广泛的浏览器兼容程度，在配置相关标签实例时可以将其插件化，插件脚本采用Javascript语言编写，易于集成在浏览器环境中使用，比如将标签实例<input type＝“datetime”/>插件化后，将得到实例<input type＝“datetime”data-plugin＝“datetime”/>

为满足可定制化样式的需求，应用系统内置提供了多套设计好的样式表文件，这里采用css样式表。在设计界面中即可选择样式表文件，css样式本身并不直接嵌入到表单html界面中，而是在表单form标签中查找data-css属性名，如果没有该属性名则生成一个，在该属性名的值上添加值css-文件名。

S304：保存表单。

编辑设计完成后保存表单，表单内容采用html的形式存入数据库中。

在实际应用中，编辑设计表单的同时可以在右边栏中对表单效果进行实时预览。为满足表单系统样式的定制化需求，的系统中预先配置多个样式表文件，可将创建的表单与样式表文件关联起来。系统已经内置一些表单验证规则，比如必填，email，整数，小数等，用户可以根据需要在系统中添加验证规则。对于那些浏览器兼容性不是很好或者表现差异很大的表单元素，系统提供了插件化的机制，用户在配置标签实例时可以勾选是否插件化，插件化后的表单元素将得到更好的浏览器兼容性和表现一致性。

S305：展示表单。

在页面中需要展示表单的地方放置一个占位标签：

<div data-placeholder＝“form”name＝“表单名称”></div>。

表单页面会加载自定义好的脚本，对这种占位标签进行处理，提取标签相关属性，通过后台接口在数据库中取得该属性关联的表单的数据。具体的，表单页面加载自定义好的Javascript脚本，对带有data-placeholder＝”form”属性/值的div标签进行遍历处理，提取name属性，通过后台接口在数据库中取得该name关联表单的html数据。

解析表单数据，如果解析表单取到样式表信息，则动态加载对应的样式表文件，如果解析表单取到需要插件化的信息，则动态加载对应的插件关联脚本、样式文件，如果解析到有标签需要进行验证，则动态加载对应的验证脚本文件；等到这些文件加载完成后，再将对应表单数据插入到文档界面中进行展示。

具体的，解析表单的html数据，动态加载样式表、脚本文件：

如果解析取到data-css属性，则动态加载对应位置的css文件；

如果解析到表单元素含有data-plugin属性，则动态加载对应插件的javascript文件；

如果解析到表单元素含有data-validate属性，则动态加载对应的验证javascript文件。

等待脚本文件异步加载完成后，再将表单html插入到文档界面中，同时将占位标签从界面隐藏。

对需要插件化的表单元素执行插件提供的方法。

综上可知，通过本发明的实施，至少存在以下有益效果：

本发明提供了一种基于BS架构的在线表单设计器和表单应用展示系统，支持各主流浏览器使用。用户无需安装客户端，就能够方便的在浏览器界面上通过拖拽等可视化的方式完成表单设计和预览；完成设计的表单可供系统内部使用，也可提供API接口供第三方系统调用；

进一步的，增强了表单系统的扩展性和可移植性、以及兼容标准的能力。

以上仅是本发明的具体实施方式而已，并非对本发明做任何形式上的限制，凡是依据本发明的技术实质对以上实施方式所做的任意简单修改、等同变化、结合或修饰，均仍属于本发明技术方案的保护范围。

Claims (12)

1.一种表单实现方法，其特征在于，包括：

采用浏览器及服务器BS架构，设计表单；

基于所述浏览器及服务器BS架构，展示所述表单。

2.如权利要求1所述的表单实现方法，其特征在于，所述采用浏览器及服务器BS架构，设计表单包括：创建表单、设计表单、保存表单。

3.如权利要求2所述的表单实现方法，其特征在于，在创建表单之前，还包括：配置标签模板。

4.如权利要求2所述的表单实现方法，其特征在于，所述保存表单包括：以html格式，将所述表单存入数据库。

5.如权利要求2所述的表单实现方法，其特征在于，所述设计表单包括：拖入标签模板，生成标签实例，配置标签实例；配置验证规则，将标签实例插件化。

6.如权利要求1至5任一项所述的表单实现方法，其特征在于，所述基于所述浏览器及服务器BS架构，展示所述表单包括：在需要展示表单的位置，放置占位标签，获取与所述占位标签的属性对应的表单数据，解析所述表单数据以展示表单。

7.一种表单实现装置，其特征在于，包括：

设计模块，用于采用浏览器及服务器BS架构，设计表单；

展示模块，用于基于所述浏览器及服务器BS架构，展示所述表单。

8.如权利要求7所述的表单实现装置，其特征在于，所述设计模块用于创建表单、设计表单、保存表单。

9.如权利要求8所述的表单实现装置，其特征在于，所述设计模块在创建表单之前，还用于配置标签模板。

10.如权利要求8所述的表单实现装置，其特征在于，所述设计模块用于以html格式，将所述表单存入数据库。

11.如权利要求8所述的表单实现装置，其特征在于，所述设计模块用于拖入标签模板，生成标签实例，配置标签实例；配置验证规则，将标签实例插件化。

12.如权利要求7至11任一项所述的表单实现装置，其特征在于，所述展示模块用于在需要展示表单的位置，放置占位标签，获取与所述占位标签的属性对应的表单数据，解析所述表单数据以展示表单。