Introduction:

As a front-end developer, we are all familiar with Swagger-UI. We use it almost every day as an API document for the front and back end interface, and the swagger-UI tool is so convenient for us

BUT, BUT, BUT

As the saying goes, “nothing under the sun is perfect.” Even a perfect thing has its drawbacks

As a front-end developer who has a great pursuit of development efficiency, how can I not find something wrong with it

Found the problem

  • Finding the interface is time-consuming and laborious

    • Scenario 1: The backend sends us an interface that needs to add some fields, we need to know the controller of that interface, and then we need to scroll down to the controller layer to find that interface.

    • Scenario 2: There is a large turnover of employees in the company. When a new employee takes over the maintenance of the project, the corresponding controller and interface need to be found according to the interface path when some interface fields are changed.

  • Request/Response parameters are numerous, manual copy and paste, hard work

    • Scene: interface for the new alignment, front end need to be copied back end json string as a front-end request parameters, if you need to add comments to each parameter (after all, is the pursuit of the front of the person and nature can be inherited by later reading into account), a CTRL + c CTRL + v, this also calculate, once the backend change some fields, cry haw ~ ~ ~

  • Developed for Android /IOS/Flutter, using third party jsonToEntity tool, poor control

    • Scene:FlutterWhen developing a project, usejsonToDartTo generate an entity, you need to copy the JSON from The Swagger and then convert it using a plug-in in the IDEA tool. The converted code is entirely up to the jsonToDart developer and cannot be customized.
    • Supplement: ActuallyJavaScript TypeScriptAnd so on front-end language development projects will have the above problems.

  • During the development phase of the project, there are too many Swagger-UI addresses that need to be coordinated to be managed centrally

    • Scene: This believe everybody feels, need not say more.

    So far, that’s all that bothers me. I don’t know if any other friends have any problems. Please add your comments in the comments section.

To solve the problem

As an aspiring front-end developer, how can you be bothered by these little problems?

With that in mind, the blogger took the time off to build a highly available tool for front-end developers to replace Swagger UI

swagger-ui-replace

The name is not easy to read, Swagger- UI replacement

Here to skip the realization of ideas, directly on the effect (ideas in the back, interested in children’s shoes can be consulted by themselves) first on a wave of effect diagram

rendering

Interface data display (compared to the native Swagger-UI page, does it feel like each field gets more attention than ever, after all, each field is a little life ~)

Click More Server configuration to save multiple Swagger addresses

The interface path and interface name are fuzzy

Request Body/Response Body preview

Another close-up! Support for tree level structure preview, support for code generation at each level

Next comes code generation: Vue

JavaScript

Flutter Dart

So much for code generation

Knock on the board, underline. Look here

All code generation can be configured freely, for example the React code generation is not shown above, you can use the code template configuration function to configure the React code you want, all languages are common!!

The powerful template syntax configuration is shown below

All you need to do is write the code template and let the generator do all the work. The detailed template syntax can be seen in the readme.md file in the project

The project address

Swagger-ui-replace tool: Swagger-UI-Replace Tool: Swagger-UI-Replace Tool: Swagger-UI-Replace Tool: Swagger-UI-Replace Tool

  • Gitee:gitee.com/XieTS/swagg…
  • Github:github.com/xietianshen…

Online out-of-the-box address

It’s not over yet?

With the open source project above, pull it down and run it locally. Well, boy, it’s a hassle, and every time you use it you have to run the project locally. This kind of repetitive and pointless work should not be in our programmer’s life.

Based on the above problems, the blogger moved out of his own savings and spent a lot of money (9.9/ month) to buy the server, the project has been packaged and run on the server, you can directly use the online address (support cross-domain solution, support HTTPS oh)

  • Xietiansheng. Cn/swagger – rep…

About online project cross-domain: For the most convenient cross-domain solution, the Swagger -ui-replace tool will prioritize the local request, and in the case of cross-domain discovery, will use the Node server to do a layer relay, which perfectly solves the cross-domain front and back end problem.

Alright

Summary of implementation ideas

About data

Opening our Swagger-UI F12 shows that the Swagger-UI website requests an API-docs interface

If you look at what this interface returns, you can see that this interface returns all the interfaces under the current Swagger project

About Code Generation

The most difficult part of the project was the code generation. The blogger was working on JavaScript projects, TypeScript projects, and now the Flutter project, so how can you do that? So if you want to be versatile, why not just let the user configure the code template, but again, how can you let the user configure the template, and I can generate the code based on the user’s template? Echarts is one of the first things to come to my mind. In order to improve flexibility and scalability, some apis are provided that use specified variables instead of the content the user wants to display to achieve dynamic use effect! This way is used in this project, absolutely!!

The article ends here, record the whole project from 0 to birth process, our actual development process in fact, there are many points worth us to create, more ideas, mull over, all in order to write code more efficiently!

Please feel free to comment below to discuss your thoughts on the project, and I will respond as soon as possible

— the end —