一种基于JSON对象进行接口可视化配置的方法与流程

本发明涉及计算机互联网研究领域，尤其是平台前后端技术特色功能类，具体涉及一种基于json对象进行接口可视化配置的方法。

背景技术：

前端的动态数据交互离不开服务端提供的接口，在一个前后端分离的中后台项目中，接口的请求和响应是必不可少的。目前前端开发中普遍在项目中配置接口文件，实现有效的接口管理和封装，提高项目接口调用的统一性、可维护性。在实现本发明过程中，发明人发现现有技术中至少存在如下问题：现有的本地配置接口文件的方法是直接将接口文档定义好的接口地址，接口描述信息等，录入本地配置文件，接口配置文件无法直观展示接口信息，随着时间的推移，接口数量的增多，在项目中查找某个接口，了解该接口对应的模块，具体的调用方式，字段对应的信息以及数据规则变得十分不便。后端未开发好接口时，本地模拟数据繁琐，降低了开发效率。

技术实现要素：

为了克服现有技术的不足，本公开实施例提供了一种基于json对象进行接口可视化配置的方法，实现了一个或多个项目的所有接口的统一可视化管理，降低了代码的复杂度，提高了编码效率。所述技术方案如下：

生成接口的配置文件，定义接口配置文件的json格式；

在接口管理页面，渲染接口配置信息，实现接口的可视化

在接口管理页面，对接口进行录入、搜索、修改、删除等操作，实现接口的统一可视化管理；

优选的，所述在接口管理页面，渲染接口配置信息，实现接口的可视化，具体为：添加接口管理页面，通过nodejs读取接口配置文件的信息，遍历配置文件，将文件信息按json对象，返回给接口管理页面；在接口管理页面中，获取接口的json对象，遍历json对象，将接口信息渲染到页面上的表格中，实现接口的可视化。

优选的，所述对接口进行录入、搜索、修改、删除等操作，实现接口的统一可视化管理，具体为：在接口管理页面中，按前后端定义的接口文档对接口进行录入，在页面表单中录入接口信息，在编辑中引入markdown编辑器，使mock规则的编辑更加简洁易读，对录入表单信息进行校验，确保录入的数据符合后续的使用要求，通过nodejs将表单添加的数据，写入到接口的配置文件中；在页面中根据接口方法，接口地址以及接口描述等参数进行接口搜索，快速定位到所需要查询的接口；对已录入的接口信息可进行再次编辑，修改接口配置信息，通过nodejs将修改的接口信息同步到接口配置文件；页面中对接口进行单个或者批量删除操作，通过nodejs删除接口配置文件中对应的接口；

录入，修改，删除操作完成时同步将配置文件中的接口信息渲染到页面上的表格中，从而实现了接口的统一的可视化的管理。

优选的，实现接口的统一可视化管理之后还包括步骤：根据每个接口的配置信息，统一生成基于mock数据和业务逻辑数据的调用方法，并判断后端业务逻辑接口是否已完成，完成接口调试。

优选的，所述统一生成基于mock数据和业务逻辑数据的调用方法，具体如下：在接口调用方法生成模块中，统一生成每个接口的调用方法；读取接口配置文件，根据接口fun字段，生成一个fun字段对应名称的调用函数，函数中根据接口url和method字段，生成和后端交互获取业务逻辑数据的方法，引入mockjs，根据接口的mock规则，生成获取mock数据的方法。

所述判断后端业务逻辑接口是否已完成，完成接口调试，具体为：在项目中调用接口方法，后端业务逻辑接口已完成，在方法中传入true，param参数获取业务逻辑数据，若后端接口未完成，在方法中传入false，param参数获取mock数据，完成接口调试。

与现有技术相比，上述技术方案中的一个技术方案具有如下有益效果：通过解析该json对象字段，渲染至接口管理页面，在接口管理页面中实现接口的新增，删除，修改，查看，搜索等操作，实现了一个或多个项目的所有接口的统一可视化管理，降低了代码的复杂度，提高了编码效率。同时提供了统一的不依赖后端开发进度的接口调用方法，开发人员无需单独编辑每个接口的调用方法，只需关注数据返回后的逻辑处理；引入mockjs前端无需等待后台完成真实的接口的开发，调试更加灵活。

附图说明

图1为本公开实施例提供的一种基于json对象进行接口可视化方法流程图。

图2为本公开实施例提供的一种接口调用方法生成图。

具体实施方式

为了阐明本发明的技术方案和工作原理，下面将结合附图对本公开实施方式做进一步的详细描述。

上述所有可选技术方案，可以采用任意结合形成本公开的可选实施例，在此不再一一赘述。

本申请的说明书和权利要求书及上述附图中的术语“步骤1”、“步骤2”、“步骤3”等类似描述是用于区别类似的对象，而不必用于描述特定的顺序或先后次序。应该理解这样使用的数据在适当情况下可以互换，以便这里描述的本申请的实施例例如能够以除了在这里描述的那些以外的顺序实施。

本公开实施例提供了一种基于json对象进行接口可视化配置的方法，附图1为本公开实施例提供的一种一种基于json对象进行接口可视化方法流程图，结合该流程图，主要包括以下步骤：

步骤1：生成接口的配置文件，定义接口配置文件的json格式；根据表1定义json对象的格式；

表1json对象格式说明

步骤2：在接口管理页面，渲染接口配置信息，实现接口的可视化

优选的，步骤2具体方法如下：添加接口管理页面，通过nodejs读取接口配置文件的信息，遍历配置文件，将文件信息按json对象，返回给接口管理页面；

在接口管理页面中，获取接口的json对象，遍历json对象，将接口信息渲染到页面上的表格中，实现接口的可视化；

步骤3，在接口管理页面，对接口进行录入、搜索、修改、删除等操作，实现接口的统一可视化管理

进一步的，步骤3具体方法如下：在接口管理页面中，按前后端定义的接口文档对接口进行录入，在页面表单中录入接口信息，在编辑中引入markdown编辑器，使mock规则的编辑更加简洁易读，对录入表单信息进行校验，确保录入的数据符合后续的使用要求，通过nodejs将表单添加的数据，写入到接口的配置文件中；在页面中根据接口方法，接口地址以及接口描述等参数进行接口搜索，快速定位到所需要查询的接口；对已录入的接口信息可进行再次编辑，修改接口配置信息，通过nodejs将修改的接口信息同步到接口配置文件；页面中对接口进行单个或者批量删除操作，通过nodejs删除接口配置文件中对应的接口。录入，修改，删除操作完成时同步将配置文件中的接口信息渲染到页面上的表格中，从而实现了接口的统一的可视化的管理。

优选的，还包括步骤4：根据每个接口的配置信息，统一生成基于mock数据和业务逻辑数据的调用方法；

在接口调用方法生成模块中，统一生成每个接口的调用方法。读取接口配置文件，根据接口fun字段，生成一个fun字段对应名称的调用函数，函数中根据接口url和method字段，生成和后端交互获取业务逻辑数据的方法，引入mockjs，根据接口的mock规则，生成获取mock数据的方法，如附图2所示，图2为本公开实施例提供的一种接口调用方法生成图。在一个接口的开发初期，前后端开发人员会先约定好接口文档。后端按照业务逻辑需求开发接口，接口开发完成后，按照接口文档中约定的规则格式给前端返回业务逻辑数据，前端调用接口获取业务逻辑数据，实现接口交互调试。本发明的一个实施例中前端开发人员可以根据约定的接口文档，直接定义接口的mock规则，在项目中引入mockjs，按照mock规则生成测试数据。前端开发人员无需等待后端开发人员的接口，可直接调用接口对应的mock数据进行调试和后续开发，降低了与后端开发的耦合性，提高了工作效率。

步骤5：判断后端业务逻辑接口是否已完成，完成接口调试

在项目中调用接口方法，后端业务逻辑接口已完成，在方法中传入true，param参数获取业务逻辑数据，若后端接口未完成，在方法中传入false，param参数获取mock数据，完成接口调试。

以上结合附图对本发明进行了示例性描述，显然，本发明具体实现并不受上述方式的限制，凡是采用了本发明的方法构思和技术方案进行的各种非实质性的改进；或者未经改进、等同替换，将本发明的上述构思和技术方案直接应用于其他场合的，均在本发明的保护范围之内。