Mock.js
一. Mock.js 是什么?
目前的大部分公司的项目都是采用的前后端分离, 后端接口的开发和前端人员是同时进行的. 那么这个时候就会存在一个问题, 在页面需要使用大量数据进行渲染生成前, 后端开发人员的接口也许并没有写完, 作为前端的我们也就没有办法获取数据. 所以 前端工程师就需要自己按照接口文档模拟后端人员提供的数据, 以此进行页面的开发.
这个时候, Mock.js 的作用就体现出来了, 在数据量较大的情况下, 我们不用一个一个的编写数据, 只需要根据接口文档将数据的格式填入, Mock.js 就能够自动的按需生成大量的模拟数据. 且 Mock.js 提供了大量的数据类型, 包括文本, 数字, 布尔值, 日期, 邮箱, 链接, 图片, 颜色等.
本文就简单的介绍一下 Mock.js 提供的语法, 并介绍一下我平时在项目中是如何使用 Mock.js 去更方便的进行开发的.
二. 下载和引入 Mock.js
1. 下载 Mock.js
Mock.js 提供多种下载方式, 本文以目前国内最常用的 npm 举例, 只需要在命令行输入 npm install mockjs
即可完成 Mock.js 的下载.
2. 引入 Mock.js
Mock.js 暴露了一个全局的 Mock 对象, 我们只需要将 Mock 对象引入到文件中, 调用 Mock 对象的方法即可
CommonJS 的引入方式
//CommonJS 引入
let Mock = require('mockjs)
// 调用 Mock.mock() 方法模拟数据
let data = Mock.mock({
'list | 1 - 10 ': [{
'id | +1 ': 1
}]
});
console.log(data);'
ES6 的引入方式
//ES6 的引入方式
import Mock from 'mockjs'let data = Mock.mock({
'list|1-10': [{
'id|+1': 1
}]
});
console.log(data);
三. Mock.js 的简单语法
Mock 对象提供了 4 个方法, 分别是 Mock.mock(), Mock.setup(), Mock.valid, Mock.toJSONSchema(), 一个工具库 Mock.Random. 其中我们经常使用到的就是 Mock.mock() 和 Mock.Random.
1. Mock.js 的规范
第二部分引入 Mock.js 的代码中的以下部分就可以体现 Mock.js 的语法规范
'list|1-10': [{
'id|+1': 1
}]
上面的代码被称为数据模板, 用于告诉 Mock.js 生成什么样的数据, 其中数据模板中的每个属性由三部分构成: 属性名, 生成规则, 属性值:
list 为数据模板中的属性名;
1-10 为生成规则 (表示生成最少 1 个, 最多 10 个重复数据)
[{'id|+1': 1}] 是属性值, 属性值中可以嵌套使用属性名和生成规则.
具体的生成规则参见: https://github.com/nuysoft/Mock/wiki/Syntax-Specification
2. Mock.mock()
Mock.mock() 方法是用来根据数据模板生成模拟数据, 我常用到的是以下两种传参方式:
Mock.mock(template): 根据数据模板 template 生成模拟数据
let data = Mock.mock({
data: {
'products|10-20': [{
name: '手机',
price: 1000
}]
}
}) console.log(data);
Mock.mock(url, template)
: 拦截请求地址为 url 的 ajax 请求, 并根据数据模板 template 生成模拟数据
let data = Mock.mock('api/products', {
data: {
'products|10-20': [{
name: '手机',
price: 1000
}]
}
})
// 使用 jquery Ajax 发送请求
$.ajax({
url: 'api/products',
type: 'GET',
success: function(res) {
console.log(res);
}
}) 3.Mock.Random
Mock.Random 是 Mock.js 提供一个工具类, 用于生成常用的几种数据.
生成布尔值
// 使用 @占位符的方式
let data = Mock.mock({
data: {
boolean: '@boolean'
}
})
console.log(data);
// 使用 Mock.Random 调用函数的方式
let data = Mock.mock({
data: {
boolean: Mock.Random.boolean()
}
})
console.log(data);
生成日期
let data = Mock.mock({
data: {
date: Mock.Random.date('yyyy-MM-dd')
}
})
console.log(data);
Mock.js 支持丰富的日期格式的自定义: https://github.com/nuysoft/Mock/wiki/Date
生成图片
let data = Mock.mock({
data: {
// 用于生成高度自定义的图片地址
imgURL: Mock.Random.image()
}
})
console.log(data);
生成名字
let data = Mock.mock({
data: {
// 生成一个英文名字
name: Mock.Random.name(),
// 生成一个中文名字
chineseName: Mock.Random.cname()
}
}) console.log(data);
更多 Mock.Random 工具库提供的数据: https://github.com/nuysoft/Mock/wiki/Mock.Random
四. 在 vue 项目中使用 Mock.js
以模拟一个登陆接口的数据为例:
1. 单独写一个 mockData.js 文件作为虚拟数据的生成文件.
//mockData.js
import Mock from 'mockjs'let Random = Mock.Random;
// 用户登陆信息
let userInfo = Mock.mock({
data: {
responseCode: 200,
responseMessage: 'success',
userMessage: {
email: Random.email(),
'id|1-10': 1,
realName: Random.cname(),
roleCodes: 'admin',
username: Random.first()
}
}
}) let mockData = {
userInfo: userInfo
}
export
default mockData;
2. 使用 vuex 去控制是否使用 mock.js 的数据
// src/store/index.js
import Vue from 'vue'
import Vuex from 'vuex'
import mutations from './mutations'
import actions from './actions'
Vue.use(Vuex);
const state = {
// 使用模拟数据, 只是开发时使用, 如果不是开发时, 请务必设置为 false
useMock: true
}
export default new Vuex.Store({
state,
mutations,
actions
})
3. 在 Login.vue 中去实现请求登陆方法
//Login.vue
import mockData from '../utils/mockData.js'exwport
default {...methods:
{
fetchUserInfo() {
// 如果 vuex 中 userMock 为 true
if (this.$store.state.useMock) {
// 使用延时器模拟异步
window.setTimeout(() = >{
let res = mockData.userInfo;
// 业务逻辑
},
1000);
return;
}
// 如果 vuex 中 userMock 为 false
this.$axios.post('api/login', params).then(res = >{
// 业务逻辑
});
}
}
}
可以看出在 Login.vue 的 fetchUserInfo() 方法中, 如果 userMock 为 true, 将使用的是 mock.js 中的模拟数据; 如果 useMock 为 false, 使用的是通过 Ajax 请求的数据. 这么写的好处是, 你只需要在 vuex 中修改一下, 就可以控制所有请求接口函数中是使用 Ajax 请求数据, 还是使用模拟数据. 这样在进行和后台联调的时候, 就可以自由的切换数据了!
参考链接
Mock.js 官网: http://mockjs.com/
来源: http://www.jianshu.com/p/5de230d31a4f