In our actual development process, the backend interface will tend to be relatively late, and will write interface document, so we many of the front end of the development had to wait for the interface can be to us, so that for our front is very passive, so the front need to write the json fraud data, but relatively limited, such as how to add and delete these interface implementation? So today we will introduce a very powerful plug-in mock. js, which can easily simulate the backend data, and also easily implement the operation of adding, deleting, changing and checking.

The Mock. Js

Generate random data to intercept Ajax requests -> mock.js

How to define data

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

  • ‘name | min – Max’ : a string, through repeated string to generate a string, repeat number greater than or equal to the min, less than or equal to Max

Example: “lastName | 2-5 ‘:’ jiang, repeat jiang this string 2-5 times

  • ‘name | count’ : a string, through repeated string to generate a string, repetition frequency is equal to the count

Example: “firstName | 3 ‘:’ fei ‘repeated fei, the string 3 times, print is’ feifeifei

  • ‘name | min – Max’ : number generated 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.

‘age | 20-30’ : 25, generate a greater than or equal to 20, the integer less than or equal to 30, 25 is used to determine the type attribute value

  • ‘name | + 1’ : automatically add 1 number attribute values, the initial value for the number

Example: “big | + 1 ‘: 0, automatically add 1 attribute values, the initial value of 0, since each request on the basis of the front + 1

  • ‘name | min – Max. Dmin -‘ on3dmax, generated a floating-point number, the integer part is greater than or equal to less than Max, min, the decimal part dmin to on3dmax digits.

Example: ‘weight | 100-120.2-5’ : 110.24, generates a floating point number, the integer part is greater than or equal to 100, less than or equal to 120, the decimal part 2 to 5 digits

  • The name ‘| 1’ : Boolean randomly generated a Boolean value, the probability that the value is true is 1/2, the probability of a false value also is 1/2

LikeMovie example: ‘| 1’ : Boolean, randomly generated a Boolean value, the value is true of the probability is 1/2, the probability of a false value also is 1/2.

  • Attribute values are objects: var obj = {‘ host ‘:’ www.baidu ‘, ‘port’ : ‘12345’, ‘node’ : ‘selector’}
‘name | count’ : the object property values count a randomly selected in the object properties.

Example: ‘life1 | 2’ : obj, property values in the obj randomly selected two properties

‘name | min – Max’ : the object in the object property values randomly selected to Max min properties

Example: ‘life1 | 1-2’ : obj, property values in the obj randomly selected from 1 to 2 properties.

  • Var arr=[‘momo’,’yanzi’,’ziwei’]
The name ‘| 1’ : an array property values randomly selected one element in an array, as the final value

Friend1 example: ‘| 1’ : arr, randomly selected from the array arr one element, as the final value.

‘name | + 1’ : array order to select one element in an array property values, as the final value.

Example: ‘friend2 | + 1′ : arr, arr property values in order to select an element, as the final value, is “momo” for the first time, the second request is’ yanzi

‘name | count’ : array by repeating array to generate a new array attribute values, repetitions for the count.

Example: ‘friend3 | 2’ : arr, repeat arr the number 2 times as the attribute value, get the data should be [‘ momo ‘, ‘yanzi, “ziwei”, “momo, yanzi,” ziwei “]

‘name | min – Max’ : array by repeating array to generate a new array attribute values, repeat number greater than or equal to the min, less than or equal to Max

Example: ‘friend3 | 2-3’ : arr, arr / / by repeating attribute value to generate a new array, repeat number greater than or equal to 2 and less than or equal to 3

A real-world Ajax request example

var arr=['momo'.'yanzi'.'ziwei']
        var obj={
            'host':'www.***'.'port':'12345'.'node':'selector'
        }
        Mock.mock('http://www.***.com', {'firstName|3':'fei'// Repeat the string fei three times to print it out'feifeifei'.'lastName|2-5':'jiang',// Repeat the string jiang 2-5 times.'big|+1':0, // The attribute value is automatically incremented by 1, starting with 0'age|20-30':25,// Generates an integer greater than or equal to 20 and less than or equal to 30. The attribute value 25 is used only to determine the type'weight | 100-120.2-5':110.24,// Generates a floating point number with an integer part greater than or equal to 100, less than or equal to 120, and a decimal part reserved for 2 to 5 digits.'likeMovie|1':Boolean,// Generate a random Boolean value with a value oftrueThe probability of omega is 1/2, and the value is omegafalseThe probability of theta is also 1/2.'friend1|1':arr,// Selects a random element from the array arr as the final value.'friend2|+1':arr,// Selects 1 element from the attribute value arr sequentially as the final value'friend3|2-3':arr,// Generate a new array by repeating the property value arr more than 2 times, less than or equal to 3 times.'life1|2':obj,// Randomly select two attributes from the attribute value obj'life1|1-2':obj,// Randomly select 1 or 2 attributes from the attribute value obj.'regexp1': / ^ [a-z] [a-z] [0-9] $/, / / generated in accordance with the regular expression string}) $. Ajax ({url:'http://www.***.com',
            dataType:'json',
            success:function(e){
                console.log(e)
            }
        })
Copy the code