[发明专利]一种可视化完成表单代码编写以及接口调试的方法

说明书

本发明提供了一种可视化完成表单代码编写以及接口调试的方法，包括如下步骤：S1：根据所在项目的实际情况，对表单项的html代码结构进行配置；S2：指定表单初始化接口地址或输入JSON格式数据源；S3：在数据展示区，以JSON格式展示整个初始化数据；S4：在图形展示区，呈现最终的表单项；S5：将表单输入项按照最初配置的数据格式，以JSON格式提交到接口；S6：根据最初配置的数据格式，生成对应的html代码，并直接补充到项目代码中。本发明提供的可视化完成表单代码编写以及接口调试的方法，可以可视化完成项目中表单的生成、表单与接口数据项的绑定以及接口调试工作，降低代码复杂度，提高编码效率。

技术领域

本发明涉及计算机技术领域，具体涉及一种可视化完成表单代码编写以及接口调试的方法。

背景技术

对于企业级web应用的前端来说，大多数的精力是放在数据处理上，其中，将用户数据封装传递给接口就是主要的数据处理过程之一。于是在企业级web应用项目的前端代码中，会有大量的表单处理工作要完成。这些代码的特点是：

1、表单样式统一，对于同一个web项目来说，会有专门的表单样式；

2、基本处理流程一致，都包括了表单html代码的编写，表单数据初始化，用户输入数据格式验证，表单数据封装以及调用接口传递数据；

3、不同功能的表单项可变性很强，无法用单一的模板完成表单的复用工作；

4、企业级web应用中的表单数据项有时很多，编码时参照接口参数完成表单项的编辑耗费的时间很多，并且存在一定的出错概率。

同时，现有的在线生成表单的工具有很多，比如JotForm，是一款比较成熟的在线表单生成工具。它内置了很多的表单主题，支持各种类型的表单输入项，在生成表单的工具中好用程度名列前茅。但包括JorForm在内的表单生成工具仅局限在页面范畴，重表单设计与排版，对于项目前期的设计工作有很大，对于真正的项目实现阶段帮助并不大。

并且，现有的技术还存在如下缺点：

1、无法进行数据关联：其只是方便了UI元素的排版布局，生成的表单更多的是一个设计稿，真正要用到实际中，还需要进行后续的改造，包括数据关联，输入数据验证等。

2、生成的代码可读性、可维护性都很差：自动生成的表单代码风格与项目中使用的代码风格差距很大，并且不讲究代码的优雅程度，后期维护的成本很高。

发明内容

为了解决现有技术存在的不足，提供一种能提高企业级web开发过程中表单的编码以及测试效率的表单代码编写及接口调试的方法，本发明提供了一种可视化完成表单代码编写以及接口调试的方法，包括如下步骤：

S1：根据所在项目的实际情况，对表单项的html代码结构进行配置，同时配置可能用到的输入项验证规则；

S2：指定表单初始化接口地址或输入JSON格式数据源；

S3：在数据展示区，以JSON格式展示整个初始化数据；

S4：在图形展示区，呈现最终的表单项；

S5：将表单输入项按照最初配置的数据格式，以JSON格式提交到接口；

S6：根据最初配置的数据格式，生成对应的html代码，并直接补充到项目代码中。

其中，所述步骤S1还包括：指定需要自定义的参数项。

其中，所述步骤S1还包括：指定项目中样式文件路径。

其中，所述步骤S4包括：

S41：在数据展示区，点击每个需要展示在表单中的数据项，从而出现属性选择区；