Mock.js Simple tutorial, independent development from the back end, to realize the function of adding and deleting and changing

In our production practice, the backend interface is often late to come out, and also to write the interface document, so our front-end of many development will wait until the interface to us, so for our front-end is very passive, so there is no way to create false data to simulate the backend interface, the answer is yes. Someone should write a JSON file to simulate the background data, but very limited, such as add and delete to find out how to implement the interface, so today we introduce a very powerful plug-in mock.js, can be very convenient to simulate the back-end of the data, you can easily implement additions and deletions to change these operations.

1. A simple example:

Mock.mock (' http://123.com ', {    ' name|3 ': ' Fei ',// The template form of this definition data will introduce    ' age|20-30 ' below : +,}) $.ajax ({    URL:' http://123.com ',    dataType:' json ',    success:  function(e) {       console.log (e)    }})

In this example, we intercept that the data returned by the address http://123.com is an object with name and age, then the data returned by Ajax is the data of the mock definition, and the returned data is in the following format:

{     name:' Feifeifei ', age     :+,}

As for the format of the above definition template data, we will introduce the following.

2. Describe how to define data

Each property in the data template consists of 3 parts: The property name, the build rule, the property value:

Property name NameGenerate Rules RuleProperty values Value' Name|rule‘: Value
1.‘ Name|min-max ': string by repeatingstringGenerates a string that repeats more than or equalsmin, less than or equal tomax
Example: ' lastname|2-5 ': ' Jiang ', repeat jiang this string 2-5 times

2.‘ Name|count ': string by repeatingstringGenerates a string that repeats the number of times equal tocount
Example: ' firstname|3 ': ' Fei ', repeat FEI this string 3 times, print out is ' Feifeifei '.

3.‘ Name|min-max ': number generates a value greater than or equal tomin, less than equalsmaxThe integer, property valuenumberJust used to determine the type.
Example: ' age|20-30 ': 25, generates an integer greater than or equal to 20, less than or equal to 30, and the property value 25 is used only to determine the type

4.‘ Name|+1 ': Number attribute value is automatically added 1, the initial value isnumber
Example: ' big|+1 ': 0, the attribute value is automatically added 1, the initial value is 0, after each request on the previous basis +1

5.‘ Name|min-max.dmin-dmax ': number generates a floating-point, integer part greater than or equal tomin, less than equalsmax, the fractional part is reserveddminTodmax-bit
Example: ' weight|100-120.2-5 ': 110.24, generating a floating-point number, integer part greater than or equal to 100, less than or equal to 120, fractional portion reserved 2 to 5 bits

6.‘ Name|1 ': Boolean randomly generates a Boolean, the probability of a value of true is 1/2, and the probability of a value of false is also 1/2
Example: ' Likemovie|1 ': boolean, randomly generating a Boolean, the probability of a value of true is 1/2, and the probability of a value of false is also 1/2.

7The. Property value is an object:var obj={' host ': ' Www.baidu ', ' Port ': ' 12345 ', ' node ': ' Selector '}

7-1. ' Name|count ': Object object randomly selects a property from the property value count . 

　　Example: ' life1|2 ': obj,From the propertiesValueRandomly select 2 properties in obj

7-2. ' Name|min-max ': ObjectFrom the property valueobjectRandom Selection inminTomaxA property
　　Example : ' life1|1-2 ': obj, randomly picking 1 to 2 properties from the attribute value obj.

8. The attribute value is an array: var arr=[' Momo ', ' Yanzi ', ' Ziwei ']

8-1. ' name|1 ': array array randomly selects 1 elements from the attribute value as the final value
Example: ' friend1|1 ': arr, randomly selects 1 elements from the array arr as the final value.

8-2. ' name|+1 ': array array selects 1 elements in the order of the attribute values as the final value.
Example: ' friend2|+1 ': arr, which selects 1 elements sequentially from the attribute value arr, as the final value, the first time is ' Momo ', the second request is ' Yanzi '

8-3. ' Name|count ': Array array generates a new array with repeating attribute values, repeating the number of times count .
Example: ' friend3|2 ': arr, repeat arr this number 2 times as this attribute value, get data should be [' Momo ', ' Yanzi ', ' Ziwei ', ' Momo ', ' Yanzi ', ' Ziwei ']

8-4. ' Name|min-max ': Array array generates a new array by repeating attribute values, repetition times greater than min or equal, max
　　例子：‘friend3|2-3‘:arr,//通过重复属性值 arr 生成一个新数组，重复次数大于等于 2，小于等于 3

3.实际的ajax请求例子： less than or equal to 

vararr=[' Momo ', ' Yanzi ', ' Ziwei ']        varobj={            ' Host ': ' Www.baidu ',            ' Port ': ' 12345 ',            ' node ': ' selector '} mock.mock (' Http://www.bai.com ',{            ' Firstname|3 ': ' Fei ',//Repeat Fei this string 3 times, print out is ' Feifeifei '. ' lastname|2-5 ': ' Jiang ',//repeat Jiang this string 2-5 times. ' big|+1 ': 0,//attribute value is automatically added 1, initial value is 0' age|20-30 ': 25,//generates an integer greater than or equal to 20, less than or equal to 30, and the property value 25 is used to determine the type' weight|100-120.2-5 ': 110.24,//a floating-point number is generated, the integer part is greater than or equal to 100, less than or equal to 120, and the fractional portion remains 2 to 5 bits. ' likemovie|1 ': Boolean,//randomly generates a Boolean value, the probability of true is 1/2, and the probability of a value of false is also 1/2. ' friend1|1 ': arr,//randomly selects 1 elements from the array arr as the final value. ' friend2|+1 ': arr,//Select 1 elements in order from the attribute value arr as the final value' friend3|2-3 ': arr,//by repeating the property value arr generates a new array with a repeat count of greater than or equal to 2, less than or equal to 3. ' life1|2 ': obj,//randomly select 2 properties from the attribute value obj' Life1|1-2 ': obj,//randomly pick 1 to 2 properties from the attribute value obj. ' Regexp1 ':/^[a-z][a-z][0-9]$/,//The generated string that conforms to the regular expression}) $.ajax ({URL:' Http://www.bai.com ', DataType:' JSON ', Success:function(e) {Console.log (e)}})

4. How to achieve data deletion and modification of the analog data interface

Below I will simulate the interface implementation of back-end Delete function

/*simulate how data is deleted*/varArr=[{name:' Fei ', age:20,id:1}, {name:' Liang ', age:30,id:2}, {name:' June ', Age:40,id:3}, {name:' Ming ', age:50,id:4}]mock.mock (' http://www.bai.com ', ' delete ',function(options) {varid = parseint (options.body.split ("=") [1])//get the deleted ID    varindex;  for(varIincharr) {        if(Arr[i].id===id) {//find this ID in the array arrindex=I Break; }} arr.splice (Index,1)//delete the object corresponding to this ID from the array.    returnArr//returns the array, which returns the processed false data}) $.ajax ({URL:' Http://www.bai.com ', type:"DELETE", data:{ID:1//Suppose you need to delete Id=1 's data}, DataType:' JSON ', Success:function(e) {Console.log (e)}})

As for more detailed documents can go to the official website to view, Http://mockjs.com/,Mock.js easy to learn, can facilitate the rapid development of the front-end, you can also define the required format, so that the backend with you, in accordance with your format to write his back-end code.

Article reprint: https://www.cnblogs.com/zhenfei-jiang/p/7235339.html

Mock.js Simple tutorial, independent development from the back end, to realize the function of adding and deleting and changing