目前的大部分公司的项目都是采用的前后端分离, 后端接口的开发和前端人员是同时进行的. 那么这个时候就会存在一个问题, 在页面需要使用大量数据进行渲染生成前, 后端开发人员的接口也许并没有写完, 作为前端的我们也就没有办法获取数据. 所以 前端工程师就需要自己按照接口文档模拟后端人员提供的数据, 以此进行页面的开发.
这个时候, Mock.js的作用就体现出来了, 在数据量较大的情况下, 我们不用一个一个的编写数据, 只需要根据接口文档将数据的格式填入,Mock.js就能够自动的按需生成大量的模拟数据. 且Mock.js提供了大量的数据类型, 包括文本, 数字, 布尔值, 日期, 邮箱, 链接, 图片, 颜色等.

Mock.js

Mockjs是什么?

目前的大部分公司的项目都是采用的前后端分离, 后端接口的开发和前端人员是同时进行的. 那么这个时候就会存在一个问题, 在页面需要使用大量数据进行渲染生成前, 后端开发人员的接口也许并没有写完, 作为前端的我们也就没有办法获取数据. 所以 前端工程师就需要自己按照接口文档模拟后端人员提供的数据, 以此进行页面的开发.
这个时候, Mock.js的作用就体现出来了, 在数据量较大的情况下, 我们不用一个一个的编写数据, 只需要根据接口文档将数据的格式填入,Mock.js就能够自动的按需生成大量的模拟数据. 且Mock.js提供了大量的数据类型, 包括文本, 数字, 布尔值, 日期, 邮箱, 链接, 图片, 颜色等.

安装Mockjs

1
2
3
npm install mockjs -S 
or 
npm install mockjs -D

引用Mockjs

Mock.js暴露了一个全局的Mock对象, 我们只需要将Mock对象引入到文件中, 调用Mock对象的方法即可

  • CommonJS的引入方式
1
2
3
4
5
6
7
8
9
10
//CommonJS引入
let Mock = require('mockjs)
 
//调用Mock.mock()方法模拟数据
let data = Mock.mock({
'list|1-10': [{
  'id|+1': 1
}]
});
console.log(data);
  • ES6的引入方式
1
2
3
4
5
6
7
8
9
//ES6的引入方式
import Mock from 'mockjs'
 
let data = Mock.mock({
'list|1-10': [{
  'id|+1': 1
}]
});
console.log(data);

简单用法

Mock对象提供了4个方法, 分别是

  • Mock.mock()
  • Mock.setup()
  • Mock.valid
  • Mock.toJSONSchema()

以及一个工具库 Mock.Random. 其中我们经常使用到的就是Mock.mock()和Mock.Random.