基于YApi接口文档自动生成前端页面的方法与流程

基于yapi接口文档自动生成前端页面的方法
技术领域
1.本技术涉及前端技术领域，尤其涉及一种基于yapi接口文档自动生成前端页面的方法。


背景技术：

2.当前的前端框架为vue和react并驾齐驱，两者成为前后端分离项目前端框架的首选，发展到现在，各种后台管理系统结构大同小异。通常一个前端项目的结构通常与页面路由保持一致，在实际应用中，需要根据页面创建文件夹、文件，大多数成熟的前端项目都会对页面的组件进行二次封装，精简代码结构，尽量提高编码的效率。
3.但是，对于api文档相关内容，仍然需要相关工作人员进行重复编辑，无法根据api文档生成完整度高可用性强的的代码，导致在前端开发过程中，工作仍然重复率高，工作量仍然庞大。


技术实现要素：

4.本技术提供一种基于yapi接口文档自动生成前端页面的方法，以解决现有技术中，在进行前端开发时，无法根据api文档生成完整度高可用性强的的代码，导致工作重复率高，工作量庞大的问题。
5.本技术的上述目的是通过以下技术方案实现的：
6.本技术实施例提供一种基于yapi接口文档自动生成前端页面的方法，包括：
7.将前端代码中需要与yapi文档对接的部分用变量和语句替换，生成模板文件；
8.创建自定义命令；其中，所述自定义命令中包括需要创建文件夹的名称以及yapi接口文档分类id；
9.运行所述自定义命令，创建目标文件夹，并根据所述yapi接口文档分类id请求yapi提供的开放接口，获取yapi接口文档信息；
10.通过预设模板语法，用所述yapi接口文档信息替换所述模板文件中的变量，在所述目标文件夹中生成代码文件。
11.进一步的，所述需要与yapi文档对接的部分包括：查询条件、列表接口名称、列表表头和添加编辑页；
12.其中，所述查询条件包括纯输入组件、选择组件、输入搜索组件和日期组件；所述添加编辑页包括模态框表单。
13.进一步的，所述yapi接口文档分类id中的分类包括增删改查以及导出的接口。
14.进一步的，所述创建自定义命令包括：
15.在局部创建自定义命令；
16.注册所述自定义命令到全局。
17.进一步的，所述根据所述yapi接口文档分类id请求yapi提供的开放接口，获取yapi接口文档信息，包括：
18.根据所述yapi接口文档分类id请求yapi提供的开放接口，再根据返回的api接口集合的id，分别获取增删改查的信息。
19.进一步的，所述通过预设模板语法，用所述yapi接口文档信息替换所述模板文件中的变量，在所述目标文件夹中生成代码文件，包括：
20.解析增删改查接口返回的信息，构建变量，保存增删改查导出接口名、查询接口请求头配置、查询接口响应头配置和新增编辑接口请求配置；
21.通过预设模板语法，读取模板文档内容，解析变量，用所述yapi接口文档信息进行替换；
22.在所述目标文件夹中生成经过变量替换的代码文件。
23.本技术的实施例提供的技术方案可以包括以下有益效果：
24.本技术的实施例提供的技术方案中，首先将前端代码中需要与yapi文档对接的部分用变量和语句替换，生成模板文件；然后通过自定义命令创建目标文件夹，并根据yapi接口文档分类的id请求yapi提供的开放接口，获取接口的信息，经解析后，利用预设模板语法读取模板文件，将模板文件中变量进行替换，最后在目标文件夹中生成代码文件。如此，利用现有的代码创建模板，结合yapi接口文档，动态生成文件和代码，完整度高，可直接运行，大大提高前端开发效率。
25.应当理解的是，以上的一般描述和后文的细节描述仅是示例性和解释性的，并不能限制本技术。
附图说明
26.此处的附图被并入说明书中并构成本说明书的一部分，示出了符合本技术的实施例，并与说明书一起用于解释本技术的原理。
27.图1为本技术实施例提供的一种基于yapi接口文档自动生成前端页面的方法的流程示意图。
具体实施方式
28.这里将详细地对示例性实施例进行说明，其示例表示在附图中。下面的描述涉及附图时，除非另有表示，不同附图中的相同数字表示相同或相似的要素。以下示例性实施例中所描述的实施方式并不代表与本技术相一致的所有实施方式。相反，它们仅是与如所附权利要求书中所详述的、本技术的一些方面相一致的装置和方法的例子。
29.一个后台管理系统的前端单元页面通常包括查询头、按钮、表格体以及底部分页，组件都是经过封装，页面风格统一的，代码结构基本相同，前端程序员在构建新的页面都需要创建文件夹、文件以及复制结构代码，然后根据后端提供的yapi文档替换增删改查接口、查询条件、列表表头，过程复杂工作量大，且重复工作较多，导致开发过程效率低。虽然现有技术中，有一些自动生成文件的插件，但只是生成简单的文件，无法根据api文档生成完成度高、可用的前端页面代码，无法真正解放前端程序员的生产力。
30.而实际上，如果能将yapi文档和文件结构、代码模板结合起来，通过命令行携带参数直接生成文件和代码，有利于前端程序员节省重复性操作，减轻前端工作量，避免对接文档产生的bug，把精力专注于代码差异化的地方，大大提高编码的效率。
31.为了解决上述问题，本技术提供一种基于yapi接口文档自动生成前端页面的方法，以解决现有技术中，在进行前端开发时，无法根据api文档生成完整度高可用性强的的代码，导致工作重复率高，工作量庞大的问题。具体实现方案通过以下实施例进行详细说明。
32.实施例
33.参照图1，图1为本技术实施例提供的一种基于yapi接口文档自动生成前端页面的方法的流程示意图，如图1所示，该方法至少包括以下步骤：
34.s101、将前端代码中需要与yapi文档对接的部分用变量和语句替换，生成模板文件。
35.具体的，首先进行创建模板。基于项目中风格统一的代码，把其中需要与文档对接的部分用变量和语句替换，通常包括查询条件，分为几类(纯输入组件、选择组件、输入搜索组件、日期组件等)；列表接口名称，通常以下划线分割；列表表头，通常是一个配置文件；添加编辑页，通常是一个模态框表单。
36.s102、创建自定义命令；其中，所述自定义命令中包括需要创建文件夹的名称以及yapi接口文档分类id。
37.具体的，创建自定义命令。定义命令和需要接收参数，要创建文件夹的名称及对应yapi接口文档分类的id。需要说明的是，该分类下分别有增删改查以及导出的接口。
38.另外，创建自定义命令后，还可以注册自定义命令到全局，方便在任何目录下运行。
39.s103、运行所述自定义命令，创建目标文件夹，并根据所述yapi接口文档分类id请求yapi提供的开放接口，获取yapi接口文档信息。
40.具体的，首先运行自定义命令，命令后面携带参数，文件夹名称和yapi分类id。自动创建目标文件夹，而且当该目录下有同名文件夹则报错提示。然后根据yapi分类id请求yapi提供的开放接口，再根据返回的api接口集合的id，分别获取增删改查的信息。
41.s104、通过预设模板语法，用所述yapi接口文档信息替换所述模板文件中的变量，在所述目标文件夹中生成代码文件。
42.具体的，首先解析增删改查接口返回的信息，构建变量，保存增删改查导出接口名、查询接口请求头配置、查询接口响应头配置、新增编辑接口请求配置。然后利用预设模板语法，读取模板内容，解析变量，与获得的接口信息进行替换。最后在自动创建的文件夹即上述提到的目标文件夹中生成经过变量替换的代码文件。完成上述过程后，可直接运行代码以及查看页面效果。
43.本发明通过创建模板文件，将其中需要替换的部分代码转换为变量和语句，以及通过解析yapi接口文档，读取模板内容进行变量替换，直接生成高可用的代码，从而节省大量与文档的对接时间，提升前端开发效率。具体基于前端模板文件和代码，通过开放接口获取yapi文档接口信息，解析出接口名、入参、出参，借助模板语法，将代码模板的变量进行替换，直接生成项目结构和代码，包含查询页，表头配置，新增编辑页以及子文件夹，一键即可完成页面的增删改查，代码可用性强，可直接运行，帮助前端程序员直接生成增删改查页面，节省大量与文档对接的时间，减轻前端工作量，避免因对接文档产生的bug，解放前端生产力。
44.可以理解的是，上述各实施例中相同或相似部分可以相互参考，在一些实施例中未详细说明的内容可以参见其他实施例中相同或相似的内容。
45.需要说明的是，在本技术的描述中，术语“第一”、“第二”等仅用于描述目的，而不能理解为指示或暗示相对重要性。此外，在本技术的描述中，除非另有说明，“多个”的含义是指至少两个。
46.流程图中或在此以其他方式描述的任何过程或方法描述可以被理解为，表示包括一个或更多个用于实现特定逻辑功能或过程的步骤的可执行指令的代码的模块、片段或部分，并且本技术的优选实施方式的范围包括另外的实现，其中可以不按所示出或讨论的顺序，包括根据所涉及的功能按基本同时的方式或按相反的顺序，来执行功能，这应被本技术的实施例所属技术领域的技术人员所理解。
47.应当理解，本技术的各部分可以用硬件、软件、固件或它们的组合来实现。在上述实施方式中，多个步骤或方法可以用存储在存储器中且由合适的指令执行系统执行的软件或固件来实现。例如，如果用硬件来实现，和在另一实施方式中一样，可用本领域公知的下列技术中的任一项或他们的组合来实现：具有用于对数据信号实现逻辑功能的逻辑门电路的离散逻辑电路，具有合适的组合逻辑门电路的专用集成电路，可编程门阵列(pga)，现场可编程门阵列(fpga)等。
48.本技术领域的普通技术人员可以理解实现上述实施例方法携带的全部或部分步骤是可以通过程序来指令相关的硬件完成，所述的程序可以存储于一种计算机可读存储介质中，该程序在执行时，包括方法实施例的步骤之一或其组合。
49.此外，在本技术各个实施例中的各功能单元可以集成在一个处理模块中，也可以是各个单元单独物理存在，也可以两个或两个以上单元集成在一个模块中。上述集成的模块既可以采用硬件的形式实现，也可以采用软件功能模块的形式实现。所述集成的模块如果以软件功能模块的形式实现并作为独立的产品销售或使用时，也可以存储在一个计算机可读取存储介质中。
50.上述提到的存储介质可以是只读存储器，磁盘或光盘等。
51.在本说明书的描述中，参考术语“一个实施例”、“一些实施例”、“示例”、“具体示例”、或“一些示例”等的描述意指结合该实施例或示例描述的具体特征、结构、材料或者特点包含于本技术的至少一个实施例或示例中。在本说明书中，对上述术语的示意性表述不一定指的是相同的实施例或示例。而且，描述的具体特征、结构、材料或者特点可以在任何的一个或多个实施例或示例中以合适的方式结合。
52.尽管上面已经示出和描述了本技术的实施例，可以理解的是，上述实施例是示例性的，不能理解为对本技术的限制，本领域的普通技术人员在本技术的范围内可以对上述实施例进行变化、修改、替换和变型。