Mockjs

为什么使用 Mockjs

前端可以独立于后端进行开发
不需要修改既有代码，就可以拦截 Ajax 请求，返回模拟的响应数据
可以产生随机数据，模拟各种场景
支持自定义函数和正则

Mockjs 安装

Angular 中的安装和引用

安装 npm install mockjs --save npm install mockjs --save-dev
引入在 angular.json 的 scripts 中添加,根据自己的目录层级取相对路径

node_modules/mockjs/dist/mock-min.js

在组件中引用

imoport * as Mock from 'mockjs';

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

React

//TBD

Mockjs 的使用（语法）

语法规范

'name | rule' : value

生成规则

`'name | min-max': value
'name | count: value'
'name | min-max.dmin-dmax: value'
'name | min-max.dcount: value'
'name | count.dmin-dmax: value'
'name | count.dcount: value'
'name | +step: value'

示例

属性值为 String

'name | min-max': string
通过重复 string 生成一个字符串，重复次数大于等于 min，小于等于 max

'name | count': string
通过重复 string 生成一个字符串,重复次数等于 count

属性值为 Number

'name | +1': number
属性值自动加 1，初始值为 number

'name | min-max': number
生成一个大于等于 min、小于等于 max 的整数，属性值 number 只是用来确定类型。

'name | min-max.dmin-dmax': number
生成一个浮点数，整数部分大于等于 min、小于等于 max，小数部分保留 dmin 到 dmax 位。

属性值为 Boolean

'name | 1': boolean
随机生成一个布尔值

'name | min-max': boolean
值为 boolean 的概率是 min / (min + max)

例子

testData(num = "") {
    
    
    let testUrl = "http://10.1.36.42:10161/oapi/laliga/grade/module/card/list";
    let type = 'post';
    let thirdData = {
      "code":"0",
      "msg": "成功",
      "data|9": [
       { 
        "cardName|2-5":"公司卡业务",
        "id|+1":0,
        "cardType":"K001",}
          ]
        };
    let searchData = {
      "code":"0",
      "msg": "成功",
      "data|4": [
       { 
        "cardName|2-5":"公司卡搜索",
        "id|+1":0,
        "cardType":"K001",}
          ]
        };
        let data = num == "1" ? thirdData : searchData;        
        return Mock.mock(testUrl, type, data);
  }

Mock.mock()

Mock.setup()

TBD

模拟后台接口 Mockjs