What are the Mock functions expected by a front end?

Hello everyone, I am a hard-working front-end development engineer. Why do I work so hard? No, the project will be launched next week, but the back-end has not given me an interface. If I don't move forward, I can only sit and do things in a hurry.

I reported it to my boss, Brother Shan: Boss, this backend is unreliable, it's almost online, and the interface hasn't come out yet .

Brother Shan replied, don't worry, isn't there a Mock ?

Mock, what is Mock? With a suspicious look on my face, I asked Xiang Shan.

Brother Shan said slowly, that is, the front-end starts an HTTP service by itself to simulate the data of the back-end interface, so that there is no need to wait for the development of the back-end interface to be completed, and your work process will not be blocked due to the delay of back-end development .

Well, what a nice note, I seem to have discovered a new world! In the future, I will no longer have to be dragged down by the back end, and I am secretly happy, but then I think about it, there is not enough time!

I got frustrated again, turned my head and said to Brother Shan: Mock is good, but time is running out. It will take me a lot of time to restart a Mock HTTP Server .

When my brother saw that I was enlightened, he hurriedly said: doesn't our team use the Apifox management API? Just click the button, and you can automatically Mock!

One-click Mock data, so simple, how to use Apifox automatic Mock?

Brother Shan next, slowly said.

Smart Mock

Apifox is a powerful tool that integrates API documentation, API debugging, API Mock, and API automated testing. It can be downloaded directly from the Apifox official website and can be used under Windows, Linux, and Mac.

After the download is successful, you can open the sample project , which is a project about a pet store. Open the pet store project, you can see four tabs in each tab: Documents, Modify Documents, Run, Advanced Mock.

Let's first look at the interface for querying pet details . The request interface is /pet/{petId} , and the response data is code and data , data is a custom data type of Pet .

In the data model tab, you can see Pet this custom data type, which has two fields id , name and photoUrls .

There is definitely no pet store project and interface in our local area, so we can now use the one-click Mock service to request the pet store data from the Mock, which is very convenient!

Switch the environment to Mock service . At this time, the prefix of the address bar is http://127.0.0.1:4523/mock/533840 , click the run button to send the request, the moment to witness the miracle has come, and the data is returned correctly!

When doing Mock in the project, use http://127.0.0.1:4523/mock/533840 instead of the API prefix of the backend, it is very easy to use, right?

But this is only the tip of the iceberg under Apifox 's powerful Mock!

Suppose, we have a user interface that has a field email that expects to return data in mailbox format, a field phone that expects to return data in mobile phone format, and a field avatar that expects to return an avatar, all of which can be done with zero configuration under Apifox !

This is Apifox 's powerful smart Mock rule: all you need to do is to define the response data in the API interface document, and then one-click Mock service, all the work can only be done by Apifox 's smart Mock .

Inside Apifox , when the data field of the interface response is not configured with mock rules, the system will automatically use intelligent mock rules to generate data, so that very user-friendly data can be mocked with zero configuration when used. The default configuration can be opened according to the project settings, function settings, and smart Mock settings.

In addition, Apifox can further restrict fields according to advanced settings, such as

1. String length limitation, and regular limitation
2. Maximum and minimum numbers
3. enum type

As an example, there are three pet sales status: on sale, pending, and sold. We can do it through the enumeration type of the advanced settings, as shown in the following figure:

Custom Mock

Automatic Mock in Apifox is very convenient, but we need to customize the Mock function. In the previous interface, the pet has a field which is name , which means the name of the pet, can we only locate the name of the pet as two characters.

We find the pet's data model in the Apifox data model settings, and configure its name field.

@cword(3) is the Mock syntax of Apifox, which is fully compatible with Mock.js (data placeholder method), and extends some syntaxes that Mock.js does not have (such as domestic mobile phone number @phone).

If the existing Mock syntax cannot meet the requirements, it is recommended to use regular expressions @regexp to achieve flexible customization. Regular expressions can basically meet the needs of various special scenarios.

And we limit the pet's name to two characters, you can use: @cword(2) instead.

Advanced Mock

Apifox 's Smart Mock and Custom Mock are powerful enough, but his functions are much more than that. Although we can use custom Mock to simulate each field of the data more finely, it is far from satisfying the diversity of complex business.

Taking the above interface for querying pet details as an example, there are inevitably examples where records do not exist. At this time, the interface responds to a completely different data type. At this point, we can use Apifox 's advanced Mock to simulate data.

When we query the pet's ID as 3, return the corresponding format with no data, and set the status code to 404.

In order to meet the diversity of the business, we can also use the template-based advanced Mock function combined with Apifox 's Mock syntax. Javascript's nunjucks template syntax is used here, which can generate any data you want.

summary

Today's sharing about Mock is here. Do you have any more complicated Mock requirements?

Apifox 's Mock function is very powerful, you can also try it.