preface

Interested, you can star attention support, project address.

In daily development, it is an important step to mock the back-end API data on the front end. With the data, the actual operation process can be more real feedback, the interaction effect can be better implemented in the coding, and can also be very good to avoid the problems that will occur in the later joint adjustment.

There are a number of ways the front end can emulate API data.

1 Manual simulation

Write dead data in JS, release, the simulated data will be deleted. Or you can encapsulate a switch.

letGetData = (cb) => {// Return data without interface request during simulationreturnCb &&cb ({a: 1}) // The actual request http.get()'/api/test', (res) => {
        cb && cb(res)
    })
}
Copy the code

2 Local JSON file

This is more modular than the previous approach. Based on the backend interface path, the corresponding directories and files are generated in the development directory. The request is assigned to the local file by the specific URL, development environment. Modify the specific URL before commissioning or production release.

const config = {
	baseUrl: '/quxue',
	initialUrl: '.. / '}; // There are two request paths, one to the real project background, the other to the local JSON fileCopy the code

3 mockjs

This looks like a more advanced approach to manual emulation. With MockJS, you can produce more varied return data. The critical code also needs to be processed before the call is released, so that the request is actually sent to the back-end server rather than being intercepted by MockJS.

Load mockJS in RequireJs, for example

// Configure Mock path require.config({paths: {Mock:'http://mockjs.com/dist/mock'}}) // Load the Mock require(['mock'].function(Mock){// Use Mock var data = Mock. Mock ({'list|1-10': [{
            'id|+1': 1}]}) document.body.innerhtml +='<pre>' +
        JSON.stringify(data, null, 4) +
        '</pre>'
})
Copy the code

4 Mock Server

Mock Server should have the following features:

  • Friendly interface
  • Input/save interface data
  • Storage port data by project, suitable for different teams
  • In response to the request, return the corresponding data
  • Generate interface documents for front and back end access
  • Support for automated testing of interfaces

About QuickMock

Express based fast mock platform, no need to configure the database, after startup can implement local mock interface data. Json data of the corresponding interface is returned through the interface URL.

Start the

# install dependencies
npm install

# access localhost: 3000 / list
npm start
Copy the code

function

  • Support to save the interface data of multiple projects
  • The interface is queried by the interface name or URL
  • Support for re-editing to save the interface
  • After the interface is created, it is stored locally as A JSON file. The interface data of different projects is stored in different directories
  • Edit real-time interface data preview and error message

preview

The new project

Enter the project name, the project URL (which can be understood as a specific string to distinguish the different projects), and the project description.

A list of items

The Project panel displays all existing projects.

Project Add Interface

After selecting a project, you can view the interface information under the project and add interfaces for the project.

Editing interface

Enter the interface name and interface URL, enter the corresponding JSON data on the left, preview the VALID JSON data format on the right, and enter the remarks of the interface in the lower part.

The interface list

You can view the interfaces in the project. If there are too many interfaces, fuzzy query of interfaces is supported.

Postman verifies that the interface is valid

Using Postman, verify that Mock Server can return real and valid data

The last

Life is not lack of beauty, lack of eyes to find beauty.

Original address: Poke me