Usually, during the project process, the data returned by the api you need may not be completed at the back end, but only documents. At this time, you need to use mock to intercept ajax requests, generate random data, and complete the data rendering of the page

There are different deployment schemes for mock.js, so I won't list them one by one. Different deployment schemes have different advantages and disadvantages, which can be selected by self-study. I recommend a blog mock's perfect solution

Basic usage: (scheme 1)

1. Installation       yarn   add   mockjs

2. Import       In the mock.js file   import   Mock   from 'mockjs'

3. Registration       Mock.mock('url address to be intercepted ', {generated random data})

4. Introduction       In main.js   import   ' 'path address'

Mock data generation specification

There are two ways to tell Mock how to generate data, one is the data template of custom rules, and the other is the placeholder, which provides some common random values, such as · picture, mailbox, person name, etc

1. Data Template Definition (DTD)

Each attribute in the data template consists of three parts: attribute name, generation rule and attribute value:

'attribute name | generation rule': attribute value

'name|rule': value

The property name is the parameter name

For different attribute value types, the meaning of generation rules is also different. Some generation rules are Boolean and some generation rules are repetitive

Mock.mock({
 "string|1-10": "★",//Randomly generate 1-10 strings "★"
 "string2|3": "★",//Fixed generation of 3 strings "★"
 "number|+1": 202,//Each request is incremented by 1, and the initial value is 202
 "number2|1-100.1-10": 1,//A floating-point number is generated. The integer part is 1-100, and the decimal part is reserved for 1-10 digits. The attribute value number is only used to determine the type.
 "boolean|1-2": true,//The probability of true is 1 / (1 + 2), and the probability of false is also 2 / 3.
 "regexp": /[a-z][A-Z][0-9]/,//Randomly generate regular strings
 "object|2": {
   "310000": "Shanghai",
   "320000": "Jiangsu Province",
   "440000":"Guangdong Province"
 },//Two properties are randomly selected from the object to generate the object
 "array|1": [ "AMD","CMD"],//Select one element randomly from the array to generate the final value
 "arrayRepeat|3": ["AMD","CMD"],//Repeat the array elements 3 times to finally generate the array
 "date":"@date"//Generate random date
})

Generated results:

{
 "string": "★★",
 "string2": "★★★",
 "number": 202,
 "number2": 71.73566,
 "boolean":true,
 "regexp": "qS8",
 "absolutePath": "★★ demo",
 "object": {
   "310000": "Shanghai",
   "440000": "Guangdong Province"
 },
 "array": "AMD",
 "arrayRepeat": ["AMD","CMD", "AMD","CMD",AMD","CMD"],
 "date":"1980-12-19"
}

2. Data Placeholder Definition (DPD)

Placeholders are used by mock to provide some commonly used random data, such as randomly generated pictures, mailboxes, person names, etc

Usage 1: direct use

Mock.mock('@date')//1982-10-15
Mock.Random.date()//1997-12-31

Usage 2: use in data template

 Mock.mock({
  "date":"@date",//Random date
  "float":"@float",//Random floating point number
  "name":"xxxx",//Fixed value
  "quoteStrin1": "@name",//Reference other properties
  "user": {
    "name": "demo"
  },//Fixed value
  "quoteString": "@user/name",//Reference other properties
 })

{
    "date":"2020-06-29",
    "float":2202285915843574.5,
    "name":"xxxx",
    "quoteStrin1":"xxxx",
    "user ":{
       "name":"demo"
    },
    "quoteString":"demo"
}

Note that if the referenced property name is the same as the Mock placeholder name (quoteStrin1 in the above example), the reference value has higher priority than the placeholder, so the final quoteStrin1 property value is consistent with the property value of the property name, not the value generated by the placeholder (Paul Miller).  

Mock function

1.Mock.mock     Intercept the request and generate simulation data

import Mock from 'mockjs'
Mock.mock('http://xxxx/channels', {
  data: {
    'channels|1-10': [
      {
        name: 'test mockjs',
        'id|+1': 0,
        title: 'test'
      }
    ]
  }
})

2.Mock.Random

Mock.Random is a tool class used to generate various random data

type	method	remarks
Basic	boolean, natural, integer, float, character, string, range
Date	date,time, datetime, now
Image	image, dataImage	Generate picture address
Color	color,hex,rgb,rgba,hsl
Text	paragraph, sentence, word, title, cparagraph, csentence, cword, ctitle
Name	first, last, name, cfirst, clast, cname
Web	url, domain,protocol, email, ip, tld
Address	region,province,city,county,zip
Helper	capitalize, upper, lower, pick, shuffle	Method, Mock.mock('@ lower("HELLO")') - > HELLO
Miscellaneous	uuid,guid, id,increment