​

I hope that one day we can learn from innovation

Write in front: this article is quite long, the first part focuses on the environment installation of Yapi, the second part introduces the detailed usage, if you focus on some part of the understanding, please choose your own way of browsing ！！！！！

Part one: Setting up the environment

With the development of front-end technology, more and more projects are separated from the front and back end. Interface management and standardized interface documentation can make the front and back end debugging process more time and effort saving.

Importantly, back-end interface projects generally lack elegant interface management tools. Once the project is completed for a long time or the interface is modified later, the loss of documents and the interface is not updated in a timely manner can become a major problem.

To save time and effort is to save time and effort… Become a big problem project.

So I recommend this interface management tool to my colleagues in my work environment, deploy one myself, and use it in the field: No blow, no black, compared to Apizza, open source software made like this to say: great

Page preview:

​

Because the Linux environment company did not give me, so HERE I use Windows to install one. There is basically no difference between the Linux and Windows installation environments except for the command difference during installation.

There are two ways to install, and I’ll mention them all here. Because considering that if you set up this in the company’s test environment, it seems to be basically without network, so HERE I would like to introduce the offline installation:

The installation package is prepared in advance:

Mongodb (Window or Linux) — depends on your environment

Node environment (Window or Linux) – Depending on your environment

YApi (Prepared for offline installation)

Mongodb download address (network caused download problems later I will share the link) :

www.mongodb.com/download-ce…

​

Start mongodb after installation. It is not recommended to check compass during installation, otherwise the installation failure due to network problems will waste a lot of time.

Click start project:

​

Check whether the startup is successful:

​

Online installation of Yapi:

After the Node environment is installed, run the NPM intall yapi-cli -g command

After the installation is complete, start Yapi server

Note: there will be a corresponding configuration page for Yapi command during online installation. If offline installation is used here, you need to download the corresponding installation file and start server/app.js.

Download address

github.com/YMFE/yapi

You can see the following message after starting yAPI Server:

​

The service is ready to start and we can browse the configuration page in the browser by accessing the IP address of the host and executing the port:

​​

Click Deploy and you’ll get a prompt if you’re not surprised

​

Remember the initial password as you remember the mission, if you forget to look at my picture, anyway, the initial password is this ！！！！！！！！！

Directory of successfully deployed projects:

​

If you are using an offline installation, the following operations are the same after downloading the Yapi installation package, provided that other environments are available

Start yAPI project:

You can start a project directly using Node:

node ./server/app.js
Copy the code

If you are offline, you can install pM2 and then copy it to the local node_modules. If you are running Linux, you can configure profile or lN-S soft connection

The official documentation also explains how to use:

NPM install PM2 -g // Install Pm2 CD {project directory} pm2 start "vendors/server/app.js" --name yapi // PM2 manages yAPI services pm2 info yapi // View service information Pm2 stop yapi // Stop the service pm2 restart yapi // Restart the serviceCopy the code

Update or maintain services

CD {project directory} yapi ls // View the Version list. Yapi update // Update to the latest Version. Yapi update -v {Version} // Update to the specified VersionCopy the code

The resource management page is displayed here, so that my articles always appear to be full of vitality

​

After startup, logged-in users can access basically without major problems:

​

Tips: If you have enough time and ability to learn, the official documentation of the instructions can be used almost immediately transparent, if some special operations do not understand, you can continue to read my article below.

Official introduction document address:

hellosean1025.github.io/yapi/documents/index.html

Part two: The use of Yai

Because I use the administrator account in this demonstration, ordinary user login invisible operation can be ignored ！！！！

Operations on the overview page

​

Create a project

​

Adding an Interface

​

​

Here is more humanized, you can see the corresponding status of the interface, if the front and back end are in this platform can see the real-time development progress of the interface.

Interface edit Settings:

​

Advanced mocks take time to learn

​

Mock addresses can be used to request access after the interface document definition is complete, but writing mock expectations can be a time-consuming operation, so it is recommended that the document be written in detail. If there is a strict process for separating the front end from the back end or the front end is good at mock, they can take the lead.

Data management

Data management is not mentioned here. Here I list the supported export types:

Export:

  • html
  • markdown
  • swaggerApi.json
  • json

Import:

  • postMan
  • swagger
  • har
  • json

Import and export not only eliminates cross-platform import problems, but also facilitates document sharing. It also supports regular backup and recovery, which is delicious.

Environment configuration:

​

List of environments:

It is generally defined as:

Development environment Test environment Local environment

It can be selected when the interface is invoked

Global introduction

You can define global parameters in global, for example.

In the test environment, each token needs to be sent in the request, but it is very troublesome to copy it to the request every time. You can define the value of the parameter here, and only need to modify the parameter in the global parameter to use when the parameter changes or needs to be updated. Use {{global.name}} in interface parameters. Screenshot details:

​

In order to implement this request, there are other ways to implement this request, which are also required to see the official documentation, which is a little difficult:

— — — — — — — — — — — — — — — — — — —

— — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — the key to the — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — —

Question:

The token data needs to be passed in the header each time the request is made, but the token does not need to be used every time. It only needs to be refreshed when the token is invalid. If the parameter in global is set to change every time, it still needs to be updated at intervals.

Solution:

When the token is invalid, 403 will be returned each time. Therefore, if 403 is returned, you can request the login operation to obtain the token data again and insert it into the header each time.

Some of the request parameters and return parameters can be found in context, and the code script is as follows.

​

/* Use script control before request execution */ var token = storage.getitem (" t-authorization "); context.requestHeader['T-Authorization'] = token;Copy the code

*/ var requestPath = context. pathName var statusCode = context.responseStatus var token = storage.getItem("T-Authorization"); If (403 = = statusCode) {const API = context. Utils. Axios. Post (' http://127.0.0.1:10001/bjDemographics/auth/getToken? account=admin&password=21232f297a57a5a743894a0e4a801fc3' ); api.then((resp) => { var codeResult = resp.status if (codeResult == 200) { var token = resp.data.obj.token Storage. SetItem (" t-authorization ", token) console.log(token)} else {console.error(" Please check whether the authentication interface is normal "); }});Copy the code

If you have any interest or questions, please pay attention to:

Public number — code nong technology sharing

Zhihu — Xi Xi spring breeze

​

​

\

​