Skip to main content

Mockjs 模拟数据及请求

一、什么是 Mockjs​

Mockjs 可用于模拟各种场景（GET、POST）生成接口，拿到所需的随机数据，还可以对数据进行增删改查，可以在后端接口未开发完成时，手动模拟后端接口返回随机数据完成交互功能。

点击查看 Mockjs 文档

二、安装与使用​

1、安装​

yarn add mockjs

使用 TS 时可同时安装 @types/mockjs：

yarn add @types/mockjs -D

2、基本用法​

import { mock } from 'mockjs';

const data = mock({
  // 属性 list 的值是一个数组，其中含有 1 到 10 个元素
  'list|1-10': [
    {
      // 属性 id 是一个自增数，起始值为 1，每次增 1
      'id|+1': 1,
    },
  ],
});
console.log(data);
/* 输出
{
  "list": [
    {
      "id": 1
    },
    {
      "id": 2
    },
    {
      "id": 3
    }
  ]
}
*/

三、语法规则​

// 属性名   name
// 生成规则 rule（可选）
// 属性值   value
'name|rule': value

生成规则有 7 种格式：

  • '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

1、属性值是 String​

'name|min-max': string

通过重复 string 生成一个字符串，重复次数 >= min，<= max。

'name|count': string

通过重复 string 生成一个字符串，重复次数 = count。

2、属性值是 Number​

'name|+1': number

属性值自动加 1，初始值为 number。

'name|min-max': number

生成一个 >= min、<= max 的整数，属性值 number 只用来确定类型。

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

生成一个浮点数，整数部分 >= min、<= max，小数部分保留 dmin 到 dmax 位。

3、属性值是 Boolean​

'name|1': boolean

随机生成一个布尔值，值为 true 的概率是 1/2，值为 false 的概率同样是 1/2。

'name|min-max': value

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

4、属性值是 Object​

'name|count': object

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

'name|min-max': object

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

5、属性值是 Array​

'name|1': array

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

'name|+1': array

从属性值 array 中顺序选取 1 个元素，作为最终值。

'name|min-max': array

通过重复属性值 array 生成一个新数组，重复次数 >= min，<= max。

'name|count': array

通过重复属性值 array 生成一个新数组，重复次数为 count。

6、属性值是 Function​

'name': function

执行函数 function，取其返回值作为最终的属性值，函数的上下文为属性 name 所在的对象。

7、属性值是 RegExp​

'name': regexp

根据正则表达式 regexp 反向生成可以匹配它的字符串。用于生成自定义格式的字符串。

Mock.mock({
  'regexp1': /[a-z][A-Z][0-9]/,
  'regexp2': /\w\W\s\S\d\D/,
  'regexp3': /\d{5,10}/
})
// =>
{
  "regexp1": "pJ7",
  "regexp2": "F)\fp1G",
  "regexp3": "561659409"
}

四、常用随机数据​

1、生成指定字符串​

指定生成几个声明的字符串：

const data = mock({
  'string|2': '123！',
});

console.log(data);
// {string: '123！123！'}

在指定范围内生成个声明的字符串：

const data = mock({
  'string|1-5': '123！',
});

console.log(data);
// {string: '123！123！123！'}

2、生成文字​

生成一个随机文字：

const data = mock({
  string: '@cword',
});

console.log(data);
// {string: '实'}

在指定范围内生成随机个文字：

const data = mock({
  string: '@cword(7,10)',
});

console.log(data);
// {string: '工组产身水设用却收'}

3、生成标题和句子​

生成一个随机长度的标题和句子：

const data = mock({
  title: '@ctitle',
  sentence: '@csentence',
});

console.log(data);
// {title: '很并示中', sentence: '气内场段候准使北高书物号以说最育。'}

生成指定长度的标题和句子：

const data = mock({
  title: '@ctitle(3)',
  sentence: '@csentence(10)',
});

console.log(data);
// {title: '事五知', sentence: '常合情争名都路张回共。'}

生成指定长度范围的标题和句子：

const data = mock({
  title: '@ctitle(3,6)',
  sentence: '@csentence(10,20)',
});

console.log(data);
// {title: '京分然科领', sentence: '行级证里格革局条达角规斗际物。'}

4、生成段落​

const data = mock({
  content: '@cparagraph()',
});

console.log(data);
// {content: '除需转内别斯己克新我住调被商她局。育列拉即学律方分行放维律。更制已提具各亲北备元头老原领。然话代办回究干便织类难集说。然群容因四干反确花经老。着品确张义被同提铁断采油导。'}

5、生成数字​

生成指定数字：

const data = mock({
  'number|77': 1,
});

console.log(data);
// {number: 77}

生成指定范围的数字：

const data = mock({
  'number|1-999': 1,
});

console.log(data);
// {number: 768}

6、生成增量 ID​

const data = mock({
  id: '@increment()',
});

console.log(data);
// {id: 1}

7、生成姓名-出生日期-地址-身份证​

const data = mock({
  name: '@cname()',
  birthday: '@date(yyyy-MM-dd)',
  address: '@city(true)', // 如果@city(),只会生成市，如果@city(true)会生成省和市
  idCard: '@id()',
});

console.log(data);
// {name: '孔秀兰', birthday: '2000-11-01', address: '台湾 花莲县', idCard: '64000019850802582X'}

8、生成图片​

  • 参数1：图片可选大小
  • 参数2：图片背景色
  • 参数3：图片前景色
  • 参数4：图片格式
  • 参数5：图片文字
const data = mock({
  image: "@image('300x300', '#6f61ff', '#FFF', 'iDesign')",
});

console.log(data);
// https://dummyimage.com/300x300/6f61ff/FFF&text=iDesign

五、定义请求​

1、定义不携带参数的 GET 请求​

mock('/api/get/user', 'get', () => {
  return {
    status: 200,
    message: '获取用户列表数据成功',
  };
});

axios.get('/api/get/user').then(function (res) {
  console.log(res);
  // {data: {status: 200, message: '获取用户列表数据成功'}, status: 200, statusText: 'OK', headers: {…}, config: {…}, …}
});

2、定义 POST 请求​

mock('/api/post/user', 'post', () => {
  return {
    status: 200,
    message: '获取用户列表数据成功',
  };
});

axios.post('/api/post/user').then((res) => {
  console.log(res);
  // {data: {status: 200, message: '获取用户列表数据成功'}, status: 200, statusText: 'OK', headers: {…}, config: {…}, …}
});