MockJs学习&React+Axios+MockJs实战例子

现在都着重于前后端分离以提高工作效率。当前端开发的时候，如果后端的接口没有写完，为了不影响工作效率，可以手动模拟后端接口。现在有许多数据模拟的库，但是许多都有所不足，比如json可以模拟后台数据，但却难以模拟数据的增删改。。。

MockJs

MockJs可以生成随机数据，拦截 Ajax 请求。

MockJs优点

• 前后端分离：让前端攻城师独立于后端进行开发。
• 增加单元测试的真实性：通过随机数据，模拟各种场景。
• 开发无侵入：不需要修改既有代码，就可以拦截Ajax 请求，返回模拟的响应数据。
• 用法简单：符合直觉的接口。
• 数据类型丰富：支持生成随机的文本、数字、布尔值、日期、邮箱、链接、图片、颜色等。
• 方便扩展：支持支持扩展更多数据类型，支持自定义函数和正则。

Hello MockJs

//新建项目
mkdir mockjs-study
cd mockjs-study

//初始化项目
npm init -y

//安装
npm i mockjs -D

新建index.js文件，当前文件目录结构：

📌入门例子，现在看不懂没关系，继续看下文

// index.js
const Mock = require("mockjs");

let data=Mock.mock({
   
    //对象有一个list属性，list是一个数组，包含有1到3个元素，每次运行生成的元素个数都在这个范围内
    'list|1-3':[{
   
        //list数据里面是对象，对象里面有id属性，是一个自增数，起始值为 1，每次增 1
        'id|+1':1
    }]
})

console.log(data);

运行结果：

语法规范

Mock.js 的语法规范包括两部分：

• 数据模板定义规范（Data Template Definition，DTD）
• 数据占位符定义规范（Data Placeholder Definition，DPD）

数据模板定义规范

数据模板中的每个属性由 3 部分构成：属性名、生成规则、属性值：

// 属性名   name
// 生成规则 rule
// 属性值   value
'name|rule': value

• 属性名 和 生成规则 之间用竖线 | 分隔。

• 生成规则是可选的，默认是'name|1': value 。

• 生成规则有以下格式：（dmin表示小数位最少有几位）

  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

• 生成规则 的 含义 需要依赖 属性值的类型 才能确定。

• 属性值 中可以含有 @占位符。

• 属性值 还指定了最终值的初始值和类型。

属性值是字符串 String

☄ 'name|min-max': string

重复拼接 string 生成一个字符串，min<=重复次数<=max

'name|1-3':'hello' 
// name: 'hello' or name: 'hellohello'  or name: 'hellohellohello'

☄ 'name|count': string

重复拼接 count 次 string 生成一个字符串

'name|2':'hello' 
// name: 'hellohello'

属性值是数字 Number

☄ 'name|+step': number

初始值为 number，下一次该属性值自动加 step。

let data=Mock.mock({
   
    'list|2':[{
   
        'id|+2':1,
    }]
})
console.log(data);//{ list: [ { id: 1 }, { id: 3 } ] }

☄ 'name|min-max': number

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

'name|1-3':10  //你可以写其他数字 效果都一样
//name: 1 or name: 2  or name: 3

☄ 'name|min-max.dmin-dmax': number

生成一个浮点数，整数部分大于等于 min、小于等于 max，小数部分保留 dmin 到 dmax 位。

'name|1-2.1-2':10
//name: 1.1 or name: 1.2 or name: 2.1 or name: 2.2

属性值是布尔型 Boolean

☄ 'name|count': boolean

随机生成一个布尔值，值为 boolean 的概率是 count/(count+1)，值为 !boolean 的概率是 1/(count+1)。

let data=Mock.mock({
   
    'list|10':[{
   
        'name|4':false
    }]
})

console.log(data);

生成false值的概率是4/5 生成true值的概率是1/5

☄ 'name|min-max': value

随机生成一个布尔值，值为 value 的概率是 min / (min + max)，值为 !value 的概率是 max / (min + max)。

let data=Mock.mock({
   
    'list|10':[{
   
        'name|1-5':false
    }]
})

属性值是对象 Object

☄ 'name|count': object

从属性值 object 中随机选取 count 个属性。

let data=Mock.mock({
   
    'list|2':[{
   
        'name|2':{
   a:1,b:2,c:3}
    }]
})

console.log(JSON.stringify(data));
//{"list":[{"name":{"c":3,"b":2}},{"name":{"b":2,"a":1}}]}

☄ 'name|min-max': object

从属性值 object 中随机选取 min 到 max 个属性。

let data=Mock.mock({
   
    'list|2':[{
   
        'name|2':{
   a:1,b:2,c:3}
    }]
})

console.log(JSON.stringify(data));
//{"list":[{"name":{"a":1,"b":2}},{"name":{"b":2,"a":1}}]}

属性值是数组 Array

☄ 'name|count': array

从属性值 array 中随机选取 count 个元素，作为最终值。

'name|1':[1,2,3,4]
// name: 1 or name: 2 or name: 3 or name: 4

☄ 'name|+step': array

下一个属性从 array 当前 index 按顺序走 step 位，取该元素，作为下一个属性值。

let data=Mock.mock({
   
    'list|4':[{
   
        'name|+3':[1,2,3,4]
    }]
})

console.log(data);
//{ list: [ { name: 1 }, { name: 4 }, { name: 3 }, { name: 2 } ] }

☄ 'name|min-max': array

重复拼接 min-max 次 array 生成一个新数组

let data=Mock.mock({
   
    'list|4':[{
   
        'name|1-3':[1,