​

As a Web Front end developers spend most of their time in the development process in addition to writing business code API On the joint commissioning of. To solve this problem, most developers will choose Mock Interface scheme, but several commonly used in the front-end field Mock All schemes require a certain learning cost. So is there a more elegant and convenient solution that can improve developers' development efficiency and realize freedom from work.

An API management tool optimized for front-end developers

Suppose we want to develop a function to obtain user information. The general process is as follows:

Interface design.

Back end development interface(The front-end development page appears). 

The back-end interface development test is completed, and the front-end interface is delivered for development, debugging and test.

Now what if we use Apifox to participate in development?

1. interface design

In the aspect of interface design, we use apibox. Through apibox, we can design an interface in a completely visual form. Open apibox and create an interface:

After the interface document is designed, click save. Apifox will save the interface and generate an interface document:

1. Interface test

After the interface design is completed, Apifox will save the interface document, which contains the interface request and return information. At this time, you can use the built-in Mock service of Apifox for debugging:

It can be seen that the data returned by the interface is automatically Mock, and Apifox will name the data according to the common fields, intelligently obtain the humanized Mock data, and verify the data type of the field corresponding to the data returned by the interface according to the data type of each field during interface design.

{

"data": {
    "username": "Liao Lei",  // Chinese name
    "avatar": "http://dummyimage.com/100x100 "/ avatar URL
},
"code": 100, // Interface status code
"message": "occaecat aute proident non" // Interface returns additional information

}

1. Front end debugging

When Apifox is running, we can directly access the built-in Mock service externally, which means that front-end developers do not need to write Mock code alone, and can debug directly when the interface document design is completed!

We copy the URL we just debugged directly to the browser, which can directly return data! Then we can use it directly in the project.

Apifox also provides advanced Mock functions (see the specific documents). We expect the interface to return the data we want when id=1 is passed in, for example:

{

"data": {
    "username": "zh",
    "avatar": "http://dummyimage.com/100x100"
},
"code": 200,
"message": "success"

}

Add one using the advanced Mock feature of Apifox:

Initiate the request again. At this time, the parameter id is assigned as 1:

We can see that we have got the expected return!

In front-end development, we can directly use the Mock service of Apifox for interface joint debugging. After the back-end students complete the interface development, we can seamlessly switch to the real interface, because Apifox gives priority to interface design, and the front and rear ends are developed in strict accordance with the definition of interface files. This is such a friendly tool to the front end that you can't go back after using it!
What is Apifox

Apifox yes API Documents API Commissioning API Mock,API Automated testing, integrated collaboration platform, positioning Postman + Swagger + Mock + JMeter. Solve the problem of data synchronization between multiple systems through a set of systems and a copy of data. Just define it API file, API Commissioning API data Mock,API Automated testing can be used directly without redefining; API Documentation and API The same tool is used for development and debugging, API After commissioning, it can guarantee and API The document definition is completely consistent. Efficient, timely and accurate!

1. Apifox location

Apifox = Postman + Swagger + Mock + JMeter

Apifox is an integrated collaboration platform for API documentation, API debugging, API Mock, and API automated testing.

Solve the problem of data synchronization between multiple systems through a set of systems and a copy of data. As long as the interface document is defined, interface debugging, data Mock and interface test can be used directly without redefinition; The same tool is used for interface document and interface development and debugging. After interface debugging, it can be guaranteed to be completely consistent with the definition of interface document. Efficient, timely and accurate!

2. Apifox purpose

Save every minute of the R & D team!

3. Apifox function

Interface design: Apifox Interface document compliance OpenApi 3.0 (primary Swagger),JSON Schema At the same time, it provides a very easy-to-use visual document management function, zero learning cost and high efficiency. It also supports online sharing of interface documents.

Data model: reusable data structure, defining interface return data structure and request parameter data structure (only available) JSON and XML Mode) can be referenced directly. Supports direct nested reference of models JSON/XML Intelligent import, support oneOf,allOf And other advanced combination modes.

Interface commissioning: Postman Some functions, such as environment variables and prepositions/Post script Cookie/Session Global sharing and other functions, Apifox Both, and more than Postman More efficient and easy to use. After the interface is run, click Save as use case to generate interface use cases. Subsequently, you can directly run interface use cases without entering parameters, which is very convenient. Custom script 100% compatible Postman Syntax, and supports running javascript,java,python,php,js,BeanShell,go,shell,ruby,lua And other language codes.

Interface use cases: generally, there are many use cases for an interface, such as parameter correct use cases, parameter error use cases, data empty use cases, different data status use cases, etc. When running the interface use case, the data correctness will be automatically verified. It is very efficient to debug the interface with the interface use case.

Interface data Mock: built-in Mock.js Rule engine, very convenient mock A variety of data, and can be written while defining the data structure mock Rules. It supports adding "expectation", which returns different values according to the request parameters mock data most important of all Apifox Zero configuration is enough Mock A very user-friendly data, which is introduced later in this paper.

Database operation: it supports reading database data as interface request parameters. It supports reading database data for verification(Assert)Whether the interface request was successful.

Interface automated testing: provides interface set testing, which can be quickly created by selecting interfaces (or interface use cases). At present, more functions of interface automation test are still under development. Please look forward to it! The objectives are: JMeter Some functions are basically available and should be better used.

Quick debugging: similar Postman The main purpose is to temporarily debug some interfaces that do not need to be documented, and to quickly debug without defining the interface in advance.

Code generation: according to the definition of interface and data model, the system automatically generates interface request code, front-end business code and back-end business code.

Teamwork: Apifox Born for team collaboration, the interface is a mature team with real-time synchronous updates in the cloud/project/Member authority management to meet the needs of various enterprises.

Apifox does more than just get through the data

If you think apifox only does data communication to improve the efficiency of the R & D team, you are wrong. Apifox has also made many innovations to improve the efficiency of developers.

1. The interface supports "use case management"

Usually, an interface has many use cases, such as correct use case parameters, wrong use case data, empty use case, different data status use cases. When defining the interface, define these use cases in different states, and run them directly during interface debugging, which is very efficient.

2. Definition and reference of "data model"

Data models can be defined independently. When defining interfaces, data models can be directly referenced, and data models can also be referenced each other. The same data structure can be used in multiple places only by defining it once; When modifying, you only need to modify one place and update multiple places in real time to avoid inconsistency.

3. "Auto check" data structure during debugging

When using Apifox to debug the interface, the system will automatically verify whether the returned data structure is correct according to the definition in the interface document. There is no need to identify it with the naked eye or write an assertion script manually. It is very efficient!

Apifox auto check data structure

Apifox auto check data structure

4. Visualization settings assertion

Set assertion:

Apifox set assertion

Apifox set assertion

After running, view the assertion results:

5. Visualization settings extract variables

6. Support database operation

7. "Zero configuration" Mock provides very user-friendly data

First, put a picture to compare the data effect of Apifox and other similar tools' zero configuration mock:

Comparison of Apifox Mock data results with similar tools

Comparison of Apifox Mock data results with similar tools

It can be seen that the data from Apifox zero configuration mock is very close to the real situation. Front end development can be used directly without writing mock rules manually.

How does Apifox achieve high efficiency and zero configuration to generate very humanized mock data

Apifox Automatically generated according to the data structure and data type in the interface definition mock Rules.

Apifox Built in intelligence mock The rule base is intelligently optimized and automatically generated according to the field name and field data type mock Rules. For example, the name contains a string image of string Type field, automatic mock Give a picture address URL；Include string time of string Type field, automatic mock Output a time string; Include string city of string Type field, automatic mock Name a city.

Apifox According to the built-in rules, it can automatically identify the picture, avatar, user name, mobile phone number, website, date, time, timestamp, email, province, city, address IP And other fields, so Mock Very user-friendly data.

Except built-in mock Rules, users can also customize the rule library to meet various personalized needs. Supports the use of regular expressions and wildcards to match custom field names mock Rules.

8. Generate online interface document

Apifox project can "share" API documents online. The shared API documents can be set to be public or require password access, which is very convenient for collaboration with external teams.

Experience address: interface document online sharing - Apipark

9. Automatic code generation

Automatically generate business code (such as Model, Controller, unit test code, etc.) and interface request code of various languages / frameworks (such as TypeScript, Java, Go, Swift, ObjectiveC, Kotlin, Dart, C + +, c#, Rust, etc.) according to the interface Model definition. At present, Apifox supports automatic code generation in 130 languages and frameworks.

More importantly, you can generate code that meets your team's architectural specifications through custom code templates to meet various personalized needs.

10. Import, export

Support export OpenApi (Swagger),Markdown,Html And other data formats, because they can be exported OpenApi Format data, so you can use OpenApi (Swagger) Rich ecological tools to complete various interface related things.

Support import OpenApi (Swagger),Postman,HAR,RAML,RAP2,YApi,Eolinker,NEI,DOClever,ApiPost ,Apizza ,ShowDoc,API Blueprint,I/O Docs,WADL,Google Discovery And other data formats to facilitate the relocation of old projects

​