mock.js

1. Use the environment

The back-end API has been slow to come online, simulating JSON data

2. Use

  • Start by installing NPM I MockJS.
  • Then write code using the relevant syntax above mock.js
	const Mock = require('mockjs');
	const data = Mock.mock({
		'list|1-10': [{
		'id|+1': 1
		}]
	})
	console.log(data)
Copy the code

3. Change the code slightly if you want it to display in the browser

<script src="http://mockjs.com/dist/mock.js"></script>
    <script>
        const data = Mock.mock({
            'list|1-10': [{
                'id|+1': 1
            }]
        })
        console.log(data)
    </script>
Copy the code

4. The mock. Js syntax

It is by the attribute name | generate rules: attribute values

For example of the above is’ list | 1-10 ‘: 1-10 random array [] said’ id | + 1:1 from 1 began to add 1

There are also several examples

One: String

‘STR | 1-2’ : ‘KKK KKK’, repeat number 1-2 times

2: digital

1-10.1-8: ‘id | 1’ is an integer between 1-10 Numbers, the decimal is 1-8

Three: Boolean value

‘flag | 1: true “yeal probability to true

Four: Boolean value

‘Flag :1-10’ : true probability is 1/ (1+10)

Object of five.

const obj = {
	name: 'sasa',
	age: '17',
	sex: '1'
}
Copy the code

‘obj | 1-3’ : obj random print obj 1-3 properties

An array of six.

Const arr =,3,4,8 [2]Copy the code

Arr ‘| 1′ : arr random print arr 1 values’ arr | 2 ‘: arrarr repeat 2 (2) with the front, merged into a new array’ arr | 1-2 ‘: arrarr random repeated once or twice, merged into a new array

7. Placeholders

Name: ‘@name’ city: ‘@city’ city: ‘@city—-@cname’

8. Placeholder

Two randomly generated placeholders:

Mock.mock('@url') Mock.Random.image

Expand your own placeholders

Mock. Random. The extend ({store () {return this. Pick ({' flower ', 'dry cleaners',' hotpot restaurant '})}})Copy the code

5. Mock. js- Syntax that is not commonly used

A function.

‘fn’: function(){return ‘wxy’

2. Regular

‘reg’: /[a-z]/ random reg between A-z

6. The mock intercept

Mock. Mock (‘xxxx.com’,{state: 200, data: {}}) starts with the intercepting interface and writes the replacement data as the second argument

Fast – use the mock

Fast – the work siteClick Create project after registering and logging in

Click small eyes to jump to a page click Add Interface as follows:Click small Eyes preview to see details

Note: fast – mock array should be written directly in “sex | 1″ : [” female “, “male”] should write an array variable does not support alone

call

The interface splicing here is the root address of the interface + the interface address

data

Personal summary

Regarding mock and fast-mock, the back-end interface is not connected, and the fields and structure have been given, which is convenient for everyone to use for self-testing. Besides, some projects written by ourselves can be separated from the back-end first, which is more suitable for self-development. I think it is very convenient to separate the front and back ends, no matter in individual projects or team cooperation