The front-end and back-end can be developed at the same time without affecting each other. However, sometimes the back-end development interface is slower than the front-end, leading to the front-end need to wait for the completion of the back-end interface to complete the front-end and back-end docking. In order to solve this pain point, a scheme to simulate interface data has been developed. Currently, there are four main solutions in the industry to simulate the data put back by the back end:

  • Violent, directly in the front-end code to write simulation data, but this shortcoming is very obvious, change the original logic of the code, embedded too deep, coupling
  • Intercepting, which is the main recommended approach in this article, intercepts Ajax requests and then redirects them to a JS file in the project, from which they can retrieve various forged data
  • Mock Server is to set up a Mock Server to simulate data and produce interface data according to this Server. Obviously, this kind of cost is a little high, which is not suitable for anyone, especially for large teams. It costs a lot to write documents and notify everyone of interface changes
  • Mock platforms, such as RAP on the market, require backend users to use them, and not all backend users will want to use them

Mock.js: Mock. Js blocks Ajax requests by overwriting and emulating the behavior of native XMLHttpRequest and “forwarding” them to local files. By forwarding, we mean reading local Mock files. It is returned to the browser in JSON or script format.



Mock.js has the following features:

  • Let the front end siege be developed independently of the back end, both front and back end can be developed simultaneously.
  • You can intercept Ajax requests and return simulated response data without modifying the existing code.
  • Supports the generation of random text, numbers, booleans, dates, mailboxes, links, pictures, colors, etc.
  • Simulate various scenarios with random data.

The installation

Install NPM install MockJS via NPMCopy the code

Use the sample

/ / in the first place in the js file to introduce var Mock = the require (' mockjs) var data = Mock the Mock ({/ / the list of attribute values is an array, containing 1 to 10 elements' list | 1-10 ': [{/ / attribute id is the one from the number, the initial value is 1, each time to add 1 'id | + 1:1}]})Copy the code

grammar

It can be divided into the following two aspects:

  • Data template definition specification
  • Define specifications according to placeholders

Data in the template each property consists of three parts: the property name, generate rules and attribute value: ‘name |’ rule: the value

  • ‘name | min – Max’ : string = > by repeating the string to generate a string, repeat number greater than or equal to the min, less than or equal to Max)
  • ‘name | count’ : string = > by repeating string to generate a string, repetition frequency is equal to the count
  • ‘name | + 1’ : number automatically add 1 = > attribute value and the initial value for the number
  • ‘name | min – Max’ : number = > generate a greater than or equal to min, an integer less than or equal to Max, the attribute value number is used to determine the type
  • ‘name | count’ : object = > object randomly select two data,
Mock. Mock ({" object | 2 ": {" 310000", "Shanghai", "320000", "jiangsu province", "330000", "zhejiang province", "340000", "anhui province"}})Copy the code

The output is:

{" object ": {" 320000", "jiangsu province", "330000", "zhejiang province"}}Copy the code



Data placeholder definition specification DPD

Placeholders simply take a place in the attribute value string and do not appear in the final attribute value.

  • To identify the string that follows as a placeholder.
  • The Mock.Random character refers to a method in Mock.
  • Mock.random.extend () to extend custom placeholders.
  • Characters can also reference properties in data templates.
  • The character preferentially references attributes in the data template.
  • The symbol supports both relative and absolute paths.

Mock. Setup (Settings) allows you to configure the behavior when intercepting Ajax requests. The following configuration items are supported: timeout Specifies the response time of the intercepted Ajax request, in milliseconds. The value can be a positive integer, for example, 400, indicating that the response will be returned after 400 milliseconds. It can also be a string in the style of a slash ‘-‘, such as ‘200-600′, indicating a response time between 200 and 600 milliseconds. The default value is ’10-100’.

Mock.setup({
    timeout: 400
})
Mock.setup({
    timeout: '200-600'
})Copy the code

Scan the public account, there are more wonderful articles waiting for you