PS: The project is at the bottom, if you don’t want to read the article, directly drag to the last ↓

In the process of enterprise-level project development, the development method of front and back end separation is generally adopted. The front and back end communicate through API interface, so interface documents are very important.

Most companies today introduce Swagger to automatically generate documents, greatly improving the efficiency of front-end and back-end separated development.

However, there are still some problems in the front-end development process, such as:

  • As requirements change frequently, interfaces change accordingly
  • When multiple people collaborate, each person’s code style is different, resulting in a messy service file that is not easy to maintain
  • When the new employee takes over, it is not clear whether the interface has been defined, leading to repeated interface definitions
  • Each interface definition is repetitive work, consumption of mouse and keyboard durability

So, it would be nice to hand over this kind of repetitive work to a machine to ensure both speed and quality.

On Github, I found a plugin for umiJS called OpenAPI that can generate service files. However, after using this tool, I found that there are many problems, such as: the support for Chinese is not good, if there is Chinese in Swagger document, it will report an error. And it only supports the latest Swagger documentation specification (OAS3), the old OAS2 specification is still used in the company.

So, I decided to build my own wheel.

I’ve broken this tool down into three steps:

  1. Get OAS2/OAS3 data from Swagger document URL or JSON
  2. Generate a generic data structure from OAS2/OAS3 data
  3. Convert common data structures into Service files through the JS template library

Generating service steps

I named this tool Openapi-tool. As the name suggests, I don’t want it to just generate services. It should be a tool around OpenAPI. Therefore, I added the plug-in mechanism and referred to the design of Vue plug-in system to make learning cost lower. With the plug-in system, you can interconnect with Mock platforms and perform automated interface tests to further improve development efficiency.

Here is an example using openapi-tool:

The generated result is as follows:

└ ─ ─ service ├ ─ ─ API. Ts ├ ─ ─ the login. The ts ├ ─ ─ rule. T └ ─ ─ typings. TsCopy the code

As you can see, when the TS file is generated, the corresponding type file is automatically generated and dependencies are automatically introduced. If you want to generate JS files, simply set typescript to false.

Below is the github address of the project, welcome to mention the issue, if you like this project, please give me a star.

openapi-tool