The awkwardness of front-end mock data

As a front-end developer, to get the product demand, and the back-end after discussing the definition of interface and data structure, you can start the front-end development work, but the back-end generally unable to finish the interface development in a very short period of time, provide for the use of the front, the front in order to simulate real interface in the process of development request, often need to implement the interface mock data. Mock data is a very troublesome thing, although there are ready-made mock repository can be used, to generate the mock data, but need to learn the mock grammar, learning cost is high, spend more time, greatly reduce the development efficiency, although before tried many interface mock platform on the Internet, but most of them are simple interface, a lack of visual interface, Mock syntax also requires the same amount of time and effort, and there is resistance every time you use these platforms and tools…..

Later, I happened to find Apifox on the Internet. At first, I thought it was similar to the interface mock platform I had used before, so I installed this software with the mentality of trying it out. In the process of using it, I found its mock function was very simple and easy to use, and gradually fell in love with this software.I have to admire the thinking of Apifox product, which solves the pain points in daily development through a software, allowing programmers to focus on development work and greatly improving development efficiency. Next, I will share how I use the mock function of Apifox software.

The first thing to do is go to Apifoxwww.apifox.cnDownload the software and you will find it is a domestic Chinese software, and it is cross-platform, supporting widnow, MacOS and Linux platforms.

Find your computer platform corresponding software, and then download and install, the first time to use the need to register, registration completed login can be happy to use.

Create new teams and projects

To create a new team, for example, to create a “Run pig” team, the team can invite people, but at present only for their own use, do not need to invite others, then click the new project button, create a “personal Project”, enter “personal Project”, you can see the main interface of the software

The new interface

If front-end development requires an interface to display user information, the interface looks something like this:The interface displays information such as name, age, gender, phone, email, and avatar. If the data is obtained through the request interface /getUserInfo, the interface should return a data structure similar to the following:

{code: 200, success: true, data: {id: 5364 name:' zhang SAN ', age: 25, gender: 'man', phone: '19856281845', avatar: 'http://example.com/xxx.png', } }Copy the code

Interface path and parameters: /getUserInfo? Id = XXXX With this information, the front-end developer can create a new interface on Apifox to mock requests for mock data.

1. Click ➕ to create a new interface, and a drop-down menu will appear
2. Enter basic information Enter basic interface information on the blank interface page

• Path: / getUserInfo
• Request method: GET (select required request method by dropdown selection)
• Name: Obtain user information
• Group: root directory (do not want to put in the root directory, you can create a group)
• State: under development (there are various interface states to choose from, according to their own needs)
• Tag: for filter filter interface, you can fill in freely, in this case user
• Description: Describes the functions of the interface
• Service: Address requested, default Settings can be used

3. Filling in request Parameters Information There are four different types of request parameters: Params, Body, Header, and Cookie are entered by the developer according to the type of request. Currently, the getUserInfo interface only needs Params parameter, whose name is ID, mandatory, and example value is 1234. If the interface has other request Header information, You can fill in the request Header parameters in the Header Tab
4. After filling in the request parameters, if you want to return mock data, you need to fill in the return response. In the module that returns Response, fill in the mock configuration below the panel of the Success 200 Tab with the following information:Typing the @ symbol in the mock input box will automatically list the mock options and filter the appropriate mock statements based on the input. It is very user-friendly and is a great way to mock. If you want to see more details about mock operations, you can refer to the official documentationwww.apifox.cn/help/app/mo…”, which lists many mock examples. Copy the mock statements you need to use and click the save button in the upper right corner.
5. The next step is to run the interface and see if we can get the mock data we want. Select the environment first and select the Mock serviceClick the Run button to jump to Run TABThen hit Send to get the mock data, observe the returned data, and as expected, the front end can now call the interface and get the mock dataIn the interface documentation interface, clicking the Mock link in the Mock table automatically copies the linkPaste the copied link into your browser’s address bar, press Enter, and you will see the JSON data displayed on the web pageThe mock server runs on a local computer, and other devices connected to the same LAN can access the IP request /getUserInfo interface to retrieve mock data

Sharing interface

When you create an interface and want to share it with others, you can use the interface sharing function of Apifox. There are two types of interface sharing: public and private. The public interface does not require a password, and the private interface requires a password

Write in the last

In addition to mock data, Apifox has many other functions that can improve development efficiency, which are not listed here. Apifox is a free software. If you are interested in it, you can download it from the official website and experience it yourself to feel its power.