Mockjs

Why Mockjs

  1. The front-end can be developed independently of the back-end
  2. You can intercept Ajax requests and return simulated response data without modifying the existing code
  3. Random data can be generated to simulate various scenarios
  4. Supports custom functions and regex

Mockjs installation

Install and reference in Angular

  1. The installation

npm install mockjs --save npm install mockjs --save-dev

  1. The introduction of

Add it to the scripts of angular.json, taking the relative path according to its own directory hierarchy

node_modules/mockjs/dist/mock-min.js

  1. Reference in the component
imoport * as Mock from 'mockjs';

ngOnInit() {
const data = Mock.mock({
    'list|1-10': [{'id|+1':1}}]);console.log(data);
}
Copy the code

React

//TBD

Use of Mockjs (syntax)

Grammar specification

'name | rule' : value

Generate rules

  1. `’name | min-max’: value
  2. 'name | count: value'
  3. 'name | min-max.dmin-dmax: value'
  4. 'name | min-max.dcount: value'
  5. 'name | count.dmin-dmax: value'
  6. 'name | count.dcount: value'
  7. 'name | +step: value'

The sample

  1. The property value is String

‘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

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

  1. The property value is Number

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

‘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.

‘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.

  1. The property value is Boolean

The name ‘| 1’ : Boolean randomly generated a Boolean value

‘name | min – Max’ : the probability of a Boolean value to a Boolean, min / + Max (min)

example

testData(num = "") {
    
    
    let testUrl = "http://10.1.36.42:10161/oapi/laliga/grade/module/card/list";
    let type = 'post';
    let thirdData = {
      "code":"0"."msg": "Success"."data|9": [{"cardName|2-5":"Corporate card business"."id|+1":0."cardType":"K001",}};let searchData = {
      "code":"0"."msg": "Success"."data|4": [{"cardName|2-5":"Company Card Search"."id|+1":0."cardType":"K001",}};let data = num == "1" ? thirdData : searchData;        
        return Mock.mock(testUrl, type, data);
  }
Copy the code

Mock.mock()

Mock.setup()

TBD