When swagger meets Yapi, he is tall in an instant!

Time:2021-1-20

Swagger is often not good enough to make complaints about the interface of tucking up, and its functions are not strong enough. Actually, many tools can be combined with Swagger, and it will become very useful after it is combined. I wrote an article beforeHow to break the ugly interface and weak function of swagger? Awesome with Postman! 》A friend left a message saying that Yapi is also easy to use. Recently experienced a Yapi, found really good, recommend to you!

Springboot real e-commerce project Mall (40K + star) address:https://github.com/macrozheng/mall

Introduction to Yapi

Yapi is an efficient, easy-to-use and powerful API management platform, which aims to provide more elegant interface management services for developers, products and testers. Yapi has accumulated 18K + star on GitHub and has excellent interactive experience. Yapi not only provides common interface management functions, but also provides permission management, mock data, swagger data import and other functions. In a word, the functions are very powerful!

install

Environmental preparation

To deploy Yapi locally, we need to install nodejs and mongodb first. Let’s install them first.

Install Yapi cli

yapi-cliYapi is the official installation tool, you can deploy Yapi services through the visual interface, very convenient!

  • Use the NPM command to installyapi-cli
npm install -g yapi-cli --registry https://registry.npm.taobao.org
  • After successful installation, the console outputs the following contents:;

When swagger meets Yapi, he is tall in an instant!

  • Use after successful installationyapi serverCommand to start the visual deployment interface of Yapi.
yapi server

Install Yapi

  • Install Yapi service through visual deployment interface, visit address:http://localhost:9090

When swagger meets Yapi, he is tall in an instant!

  • After the installation, the following information will be output to prompt Yapi’s default administrator account password and access address;

When swagger meets Yapi, he is tall in an instant!

  • Enter the Yapi installation directory and start the Yapi service with the node command
node vendors/server/app.js
  • After successful startup, the console outputs the following information:;

When swagger meets Yapi, he is tall in an instant!

When swagger meets Yapi, he is tall in an instant!

use

Import data from swagger

  • After successful login with the administrator account, create one firstmall-tiny-groupgrouping;

When swagger meets Yapi, he is tall in an instant!

  • After creating a group, clickCreate project, addmall-tiny-swaggerProjects;

When swagger meets Yapi, he is tall in an instant!

  • And then start our previousmall-tiny-swaggerAfter the project is successfully started, the swagger interface document access address:http://localhost:8088/swagger-ui/

When swagger meets Yapi, he is tall in an instant!

  • Choose a good Yapidata managementFunction, configure swagger’s API doc path, and then import the data;

When swagger meets Yapi, he is tall in an instant!

  • So far, the API interface in swagger has been successfully imported into Yapi. ClickInterfaceTab to view all import interfaces.

When swagger meets Yapi, he is tall in an instant!

Interface management

  • openAdd productYou can see very complete interface document information and comments;

When swagger meets Yapi, he is tall in an instant!

  • Let’s try the interface running function. We will find that the default interface request address does not meet our requirements. We need toEnvironment configurationSet in;

When swagger meets Yapi, he is tall in an instant!

When swagger meets Yapi, he is tall in an instant!

  • Because some of our interfaces can only be accessed by adding a token to the request header, we call the login interface to get the token first;

When swagger meets Yapi, he is tall in an instant!

  • After thatSettings > environment configurationAdd the authorization header to the database;

When swagger meets Yapi, he is tall in an instant!

  • Call the login interface again to get the data normally. Although the returned data is formatted, there is no folding function. If the data is too long, it will not look good;

When swagger meets Yapi, he is tall in an instant!

Mock function

  • When we call the post interface to submit JSON data, the default mock’s JSON data does not meet our requirements;

When swagger meets Yapi, he is tall in an instant!

  • You can use theEdit > Advanced SettingsModification;

When swagger meets Yapi, he is tall in an instant!

  • We can find that there is a mock address in every interface information. When the background interface has been defined but not implemented, the front end can use this address to debug the mock data;

When swagger meets Yapi, he is tall in an instant!

  • Some test data can be obtained by calling the mock address, and the data value return can be modified by the above mock settings;

When swagger meets Yapi, he is tall in an instant!

Automatic synchronization from swagger

  • When our interface is modified, how can we synchronize API documentsSetup > swagger auto syncTo start the automatic synchronization function, there are three data synchronization modes to choose from;

When swagger meets Yapi, he is tall in an instant!

Authority management

If new members join in, what should I do if I need to check the API documents?

  • First, you can register a member account through the registration interface, where the account is[email protected]:123456

When swagger meets Yapi, he is tall in an instant!

  • After that, log in with the administrator account, and then log in through theMember list > add memberTo add users to corresponding groups;

When swagger meets Yapi, he is tall in an instant!

  • Finally, log in with the member account to access the corresponding API documents.

When swagger meets Yapi, he is tall in an instant!

summary

Yapi combined with swagger is really powerful! Before using postman with swagger, the problems of document viewing and automatic synchronization have been solved. In order to ensure the security of our API document access, permission management function is also provided. When the API data format is defined, the mock function allows the front end to debug the interface without background implementation. However, the support for JSON format is a little weak. It would be better to collapse and display the JSON data!

reference material

Official document:https://hellosean1025.github….

Project source address

https://github.com/macrozheng…

This article is about GitHubhttps://github.com/macrozheng/mall-learningHas been included, welcome to star!