​

Mockjs generates random mock data, intercepts Ajax requests, and allows you to add, delete, change, and review data. When generating data, we need to be comfortable with the syntax of mock.js.

The Mockjs syntax specification consists of two parts: the data template definition specification and the data placeholder definition specification.

I. Data template definition specification

Each attribute in a data template consists of: attribute name, generation rule, and attribute value.

The syntax is:

"name|rule": value
Copy the code

Notable ones are:

  • The attribute name and generate rules between using | division.
  • The generation rule is optional.
  • There are seven forms of generation rules.
  • The meaning of the generated rule depends on the type of the attribute value.
  • Property values can specify an initial value and type.

The generated rules are in the following formats:

1.1. The attribute value is of type String

The number of repetitions of a variable is a random value.

'name | min - Max' : a string by generating a string repeat between min and Max. A string. / / use 'name | 1-3' : 'a' running results: generate an a number into a string variable between 1-3. The possible outcomes are a, AA, and AAACopy the code

Specify the number of repetitions directly.

'name | count' : a string by generating a string a string repeat count.. / / to use 'name | 3' : 'a' running results: aaaCopy the code

1.2. The attribute value is Number

Generate numbers that keep adding up.

'name | + 1' : the initial value of num num, automatically generated attribute value plus oneCopy the code

Generates an interval value.

'name | min - Max' : generated a between min and Max num numerical, num is used to specify the type / / use 'name | 1-3:1 run results: generate a number between 1-3. The possible outcomes are: 1, 2, 3Copy the code

Generates a number with a decimal point.

'name | min - Max. Dmin -' on3dmax, num generates a floating point number, the integer part between min and Max, the decimal dmin to on3dmax digits. Num is used to specify the type. / / use 'num1 | 1-10.1-2' : 1 run results: generated between 1-10 of floating-point Numbers with 1 to 2 decimal places. Such as: 2.1, 3.12, "num2 | 5.1-2 ': 1 generates an integer part is 5, reserves the floating point number 1 to 2 decimal places. Such as: 5.1, 5.33, 5.09, 'num3 | 5.2' : generate integer 1 to 5, retain two decimal floating point number. For example: 5.11, 5.67, etcCopy the code

1.3. The attribute value is Boolean

The name '| 1' : a Boolean to generate a random value, true false probability is half. IsLike / / use '| 1' : true generate isLike values may to true and false. The probabilities are the same.Copy the code

'name | min - Max' : the value randomly generated a Boolean value, the value of the value of the probability is min / + Max (min), value of! The probability of value is Max over min plus Max. / / use 'like | 1-5' : true to generate the true probability is 1/6. The probability of generating false is 5/6Copy the code

1.4. The attribute value is Object

Generates an object with the specified number of attributes.

'obj | num' : the object in the object property values, random num attribute. / / use 'obj | 2' : {a: '1', b: '2', c: '3'} run results may be: {a: "3", b: "2"} {c: "3," b: "2"} {a: "3," c: "2"}Copy the code

Generates an object with a random number of attributes.

'obj | min - Max' : the object from the object in random min to the Max attribute, to generate an object. / / use 'obj | 1-2' : {a: '1', b: '2', c: '3'} run results may be: {a: "3"} {b: "3"} {c: "3"} {a: "3", b: "2"} {c: "3", b: "2"} {a: "3", c: "2"}Copy the code

1.5. The property value is Array Array

Take an element of the array as the result.

Arr '| 1' : an array property values randomly selected one element in an array as the results back / / 'arr | 1' : [1, 2, 3] run results as follows: 1, 2, 3, three kinds of resultsCopy the code

Generates a new array.

'arr | min - Max' : array by repeating array elements, generating new array, repetitions min to the Max. / / use 'arr | 1-2' : [1, 2, 3] run results as follows: [1, 2, 3] or [1,2,3,1,2,3]Copy the code

'arr | num' : array by repeating array elements, generating new array, repetitions num. / / use 'arr | 2' : [1, 2, 3] run results as follows:,2,3,1,2,3 [1]Copy the code

1.6. The attribute value is Function

'name':function Function returns the value as the final property value. // Run web Learn with 'name': ()=>{return 'web Learn '}Copy the code

In data placeholders, it is important that attribute values are functions. I’ll focus on that later.

1.7. The attribute value is regular RegExp

'Name ': regexp Generates a matching string based on the regular expression regexp. Use to generate strings in custom formats // Use 'reg':/ [A-za-z0-9]2/ to generate arbitrary strings of length 2 of upper and lower case letters and digits 'reg':/\d{5,10}/ to generate arbitrary strings of 5 to 10 digitsCopy the code

Data placeholder definition specification

Data placeholders only occupy a place in the property string and do not appear in the final property value.

Use format:

@placeholder @placeholder (parameter [, parameter]) // Use 'name': "@name" to generate an English name, such as Edward Rodriguez // With the argument 'first':"@name(middle)" to generate an English name with a middle name. For example, Ruth Paul Robinson 'name': "@cname", generates the Chinese nameCopy the code

Note:

  • Use @ to indicate that the following string is an identifier.
  • Placeholders refer to methods in mock.Random.
  • If you need to extend custom placeholders, you can use mock.random.extend ().
  • Placeholders can also refer to content in the Data template.
  • Placeholders refer to attributes in the data template in preference.
  • Relative and absolute paths are supported.
Mock. Mock ('@string("number", 5)') generates a five-digit string Mock. Mock ('@color') generates a Random color // equivalent to random.color ()Copy the code

Three, use examples

Create an API that returns a randomly generated array:

export default [ { url: "/api/list", method: "post", response: ({url, body}) => {// body is the data passed in the post method // URL is the request interface, return {code: 200, message: "Ok", / / / / an array length between 10 to 20 'list | 10-20' : [{name: '@ cname / / generated name}]};}}]Copy the code

The placeholders refer to methods in Mock. Random, so we can change the above code to:

'list | 10-20' : [{name: Random. The cname () / / generated name}]Copy the code

And when we look it up again, we see that all of the names in the array are the same. What if we want to generate different names?

Workaround: Change the property value to a function, with the return value of the function as the final result.

'list|10-20': [{
 name:()=>{
  Random.cname()
 } 
}]
Copy the code

Well xiaobian today’s article is over, like me can point a concern oh!