Need interface management you know?

preface

In daily development mode, the front end is responsible for the processing of pages and dynamic scripts, and the server is responsible for the implementation of business logic and interfaces. When the front end needs the interface provided by the server end to realize dynamic data display and interaction, the server end will provide an interface document to the front end for development according to the document specifications. In this mode, there are usually two situations: one is that the progress of the front-end development will not be completely synchronized with that of the server development, which will cause one party to wait for the other party, which will affect the overall project development progress; The other is that the current terminal connects to the interfaces developed by different server personnel. If there is no unified interface document specification, each person will output different interface documents, and it will be a great time cost to update and maintain the project interface in the later period.

Therefore, it is necessary to have a common interface management platform for the front and back ends to simplify the process of interface interconnection and maintenance. The front and back ends can use the interface management platform to formulate interface data and format, and then generate fake interfaces through simulated data. The front and back ends can be independently developed until the real interface data is fine-tuned after the development of both sides. And through the interface management platform, developers can more conveniently manage all the interface data of the project.

Here, this paper will mainly understand and learn the popular domestic open source interface management platform YApi, to see how to use it to help us improve the development efficiency and convenient interface management.

This article will not describe the installation and deployment process of YApi. For details on how to deploy YApi, please refer to the reference link provided at the end of this article: Install and deploy YApi, build YApi with Docker

YApi introduction

YApi is a visualized interface management platform that can be deployed locally, connecting the front and back ends and QA, aiming at providing more elegant interface management services for developers, products and testers. The project is open source and hosted on Github by qunar’s big front-end technology team, with more than 9000 stars.

As an API management platform, YApi mainly provides three major functions:

Project management: provide basic project grouping, project management, interface management functions, member rights management
Interface management: provides friendly interface documentation, supports multi-player interface editing, and postman-like testing tools for efficient interface debugging
Mock service: Based on mock. js, it simulates various interface data through random data generation to make full use of the advantages of front and back end separation.

What is the Mock. Js

Mock.js is a Mock data generator that helps to separate front-end development and prototyping from back-end schedules, reducing some of the monotony, especially when writing automated tests.

— Mock. Js (part 1)

Of course, YApi also has many powerful features, such as automated testing, plug-in mechanisms, secondary development and so on.

Below is the workflow of using YApi provided by YApi official, from which you can get a brief understanding of how to use YApi in daily development.

The first YApi

Log in to register

Before using YApi, you must have a login account first. Therefore, you need to register an account on the YApi website at the beginning, and you can log in with the user name or email after successfully registering.

After successful registration, you will automatically log in to YApi home page, and you can directly log in with your account if you use it again later.

It should be noted that as a newly registered user, you do not have any group or project rights, and can only search and browse the interface of “open project”. At this time, you need to contact the platform administrator to add you to the corresponding project.

The following figure shows the basic contents of a normal account login to YApi home page:

The head of the home page shows the current location, search box, new project, view documents and user information.
Group information is displayed on the left of the home page. Group information is a collection of items. Only the super administrator can manage groups.
The right side of the home page is the list of projects and members under the group. Click a group on the left, and the project and member information under the group will appear on the right side.
Click the star in the upper right corner of the project to follow the project, the project can be viewed in the “My Concerns” page.
Click on your avatar to enter the “Personal Center,” which allows you to view and modify your personal information.

Program interface

First, select a project from the project list to enter (if there is no available project, one way is to ask the administrator to assign the project permission, another way is to click “Add Project” in the upper left corner to create a new project). After entering the project, you can roughly see the following content:

Interface list, which displays the names of all interfaces of the project and classifies them by folder. By default, all interfaces are in the public category. You can also add user-defined categories.
The test set is used to store the data information and interface status of the normal operation of the interface, facilitating the subsequent use of interface tests in the test set.
By default, you need to specify the interface name, request mode, and interface path under the public category. After saving the information, the interface is automatically added to the interface list.
Import and export interface data, facilitating migration and archiving of interface data.
Basic Settings for project information, such as environment address, interface path, Mock Settings, etc.

Now let’s look at the next page display for a simple interface:

Interface information box contains four panels can switch, respectively for preview, edit, run, and advanced the Mock, we can pass the request of the interface in the edit panel, the request data and response data, interface description information such as edit, save after will clearly displayed in the preview pane, when need interface test will need to be in operation in the operation panel, Inside the operation mode is very similar to Postman, I believe that Postman users should be able to get started quickly.

Note: To use the interface test service, if you are using Chrome, you need to install the test enhancement plug-in. The official download address and installation tutorial are also provided.

Here is a small skill to share: every time you enter the interface running panel, the last time you used the request parameters will be the case, each time you need to fill in, if the request interface parameters more than one is very tedious; Here we can put the tested interface through the save button to join the test set, then you can directly find the recorded interface and effective request parameters in the test set, and can directly use.

The advanced Mock column is used to set up the interface’s Mock data, which will be explained in more detail later.

With this brief introduction to the use of YApi, basic interface testing and maintenance should not be a problem, and more advanced uses and best practices of YApi will follow.

The Mock interface

This section describes how to simulate the data of an interface through YApi’s Mock service.

Start by selecting the Advanced Mock column in the Interface panel and select Add Expectations to define the conditions and data to be simulated.

Adding expectations can be divided into two parts. One is to fill in basic information about expectations, such as name, whitelist IP, matched parameters, etc. The other is the response data simulated by expectations, such as response header information, response body data, and even response time can also be set.

When setting up the response body data here, instead of using the regular fixed fake data return, we can use the syntax supported by mock. js to generate fake data randomly. For example, the following example simulates a simple response data: code 200 or 400, message twice for a test that repeats 1 to 10 times.

{
"code": 200."message": "Test test test test"."data": {}} {"code": 400."message": "Test test test test test test test"."data": {}}Copy the code

Of course, there are plenty of other ways to define Mock data generation in this way. For details on the data definition syntax, see mock.js for an official example: mockjs.com/examples.ht…

Best practices

Interface classification

YApi manages interfaces on a project basis. Based on the classification function provided by YApi, all newly generated interfaces have default classification as public classification.

In order to be more clear, more intuitive management interface effectively, we can from the Angle of the project of business, business transformation in YApi interface classification, classification management under each business each related interfaces, and some of the common interface in the classification of public management, such as shown below, the order and payment business generates separate interface classification, Under this category are the interfaces closely related to their own business.

Environment configuration

When a program has different environmental requirements in daily development, the address of the interface request is also different. In order to facilitate the switch of multi-environment interfaces, we can configure an item in the environment of the project to add multiple environments of the interface under this item, and add the global header here, and set the global header value in the project.

In addition, the user can define the Name and value of global variables in each environment configuration item, and the interface run or test collection can access global variables defined under the current environment variable through {{global.name}}.

After the Settings are saved, we can switch the environment address in the operation panel of the next interface of the project, as shown below

Request configuration

YApi supports pre-script, which is to change the parameters of the request and the returned Response data by means of user-defined JS scripts. This function can meet the usage scenarios when the data of the request and Response are processed by encryption.

The location of the request configuration is also in the project Settings, which applies to all interfaces of the project and provides all data for the request and response contained in the public context object.

If we need to add a common token argument to the URL of a set of interfaces, we can write the following Script in the pre-request Script:

If we need to modify a value in the response data, we can fill in the following pre-response Script and write the following Script:

In addition, the global context variable also provides utility functions that let us use:

Combined with the tool function, we can carry out the encryption processing of the interface request and response. For example, we need to Base64 encryption of the data in the response body, we can define the following script:

Data Import and Export

In terms of data management, YApi provides a simple and effective solution to support data import and export.

YApi supports the rapid import of interface data in other formats to facilitate the rapid addition of interfaces. YApi currently supports Postman, Swagger, JSON data import and so on, which is convenient for us to carry out interface data migration.

When we need to share the interface with other people, we can use the data export function to export the project interface document data in HTML, Markdown or JSON format. We just need to give the document file to others.

conclusion

This paper mainly records the basic introduction and use of the open source interface management platform – YApi. In the face of multiple objective team development, a unified management platform for the management and maintenance of interface or very be necessary, also is very basic, efficiency of the project’s development also have great help, if you are using YApi have better use gestures or meet any pit, more or used in other interface management platform framework, Also welcome to leave a message exchange discussion 😃.

reference

YApi installation deployment: hellosean1025. Making. IO/YApi/conversation…
Use the Docker build Yapi: www.jianshu.com/p/a97d2efb2…
YApi official tutorial: hellosean1025. Making. IO/YApi/docume…
Github address: github.com/YMFE/yapi
Mock.js: juejin.cn/post/684490…

mo4tech.com (Moment For Technology) is a global community with thousands techies from across the global hang out!Passionate technologists, be it gadget freaks, tech enthusiasts, coders, technopreneurs, or CIOs, you would find them all here.

preface

YApi introduction