SpringBoot e-commerce project mall (40K + STAR) address: github.com/macrozheng/…

Abstract

Swagger is often teased for not having a good-looking interface and powerful functions. In fact, there are many tools that can be combined with Swagger and become very useful after combination. Before I wrote an article “Swagger ugly interface, weak function how to break? Postman enhanced under the force!” , a friend commented that YApi is also very useful. Recently experienced a YApi, found really good, recommend to everyone!

YApi profile

YApi is an efficient, easy-to-use, 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 permissions management, Mock data, Swagger data import and other functions. In short, it is very powerful!

The installation

Environment to prepare

Deploying YApi locally requires nodeJS and MongoDB to be installed first, so let’s get those installed first.

  • To install nodeJS, download the installation package and double-click the installation package. The installation package is 12.14.0. ;

  • Install MongoDB, see MongoDB Quick Start, Just enough to Master! In this case, version 4.2.5 is installed.

Install yapi – cli

Yapi-cli is an installation tool provided by YAPI. You can deploy yAPI services on a visual interface.

  • Use the NPM command to installyapi-cli:
npm install -g yapi-cli --registry https://registry.npm.taobao.org
Copy the code
  • After the installation is successful, the console output is as follows.

  • Use after the installation is successfulyapi serverCommand to launch the visual deployment interface of YApi.
yapi server
Copy the code

Install YApi

  • To install the YApi service, visit http://localhost:9090

  • After the installation is complete, the following information is displayed, indicating the default administrator account password and access address of YApi.

  • Go to the YApi installation directory and run the node command to start the YApi service:
node vendors/server/app.js
Copy the code
  • The console output is as follows.

  • The default account password for accessing Yapi is[email protected]:ymfe.org, visit address:http://localhost:3000

use

Import data from Swagger

  • After you log in to the system using an administrator account, create onemall-tiny-groupGrouping;

  • After creating a group, click under the groupCreate a projectTo addmall-tiny-swaggerThe project;

  • And then we start our previous onemall-tiny-swaggerSwagger interface document access address:http://localhost:8088/swagger-ui/

  • Choose a good YApiData managementFunction, configure Swagger apI-docs path, then import data;

  • So far the API interface in Swagger has been successfully imported to YApi, clickinterfaceTAB to view all import interfaces.

Interface management

  • Open theAdd the goodsInterface to see, you can see very complete interface documentation information, annotations have;

  • To try the interface run function, we will find that the default interface request address does not meet our requirements, need to be inEnvironment configurationIn the Settings;

  • For cross-domain request, install the cross-domain request plug-in for Chrome. The download address is github.com/YMFE/cross-…

  • Since some of our interfaces can only be accessed by adding tokens in the request header, we first call the login interface to obtain tokens.

  • After theSettings -> Environment ConfigurationAdd Authorization header;

  • Call the interface that needs to log in again, you can 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.

A Mock function

  • When we call the POST interface to submit JSON data, the default Mock’s JSON data is a bit off our game;

  • You can use the interface informationEdit -> Advanced SettingsModify;

  • We can find that each interface information has a Mock address. When the backend interface has been formatted but not implemented, the front-end can use this address to debug the Mock data.

  • Call the Mock address to retrieve some test data. The return value of the data can be modified by the above Mock Settings.

Automatic synchronization from Swagger

  • When our interface changes, how do we synchronize the API documents that we can passSettings ->Swagger automatically synchronizesTo enable the automatic synchronization function. You can choose from three data synchronization modes.

Rights management

What if a new member joins and needs to see the API documentation?

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

  • Then log in using the administrator account and passMember List -> Add member, add users to corresponding groups;

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

conclusion

YApi combined with Swagger is really powerful! When using Postman and Swagger before, the problems of document viewing and automatic synchronization have been solved. In order to ensure the security of our API document access, the permission management function has also been provided. Once the API data format is defined, the Mock function allows the front end to debug the interface without a background implementation. However, support for JSON format is a bit weak, if you can collapse the JSON data display would be better!

The resources

The official document: hellosean1025. Making. IO/yapi/docume…

Project source code address

Github.com/macrozheng/…

In this paper, making github.com/macrozheng/… Already included, welcome everyone Star!