文章目录

安装
Mock.mock()拦截与响应
- - rurl
  - rtype
  - template
- Mock.mock( template )
- Mock.mock( rurl, template )
Mock.setup() 配置项
Mock.Random 模拟数据
- 拓展
Mock.valid() 校验数据
Mock.toJSONSchema()

安装

npm install mockjs

Mock.mock()拦截与响应

Mock.mock( rurl?, rtype?, template|function( options ) )

rurl

可选。

表示需要拦截的 URL，可以是 URL 字符串或 URL 正则。例如 /\/domain\/list\.json/、'/domian/list.json'。

rtype

可选。

表示需要拦截的 Ajax 请求类型。例如 GET、POST、PUT、DELETE 等。

template

可选。

表示数据模板，可以是对象或字符串。例如 { ‘data|1-10’:[{}] }、‘@EMAIL’。

function(options)

可选。

表示用于生成响应数据的函数。

options

Mock.mock( template )

示例：根据数据模板生成模拟数据

Mock.mock({'resultCode': 200,'message': "请求成功","data": {"nickName": "火花","loginName": "spark","introduceSign": "万物之中，希望最美"}
})

let user =Mock.mock({'resultCode': 200,'message': "请求成功","data": {"nickName": "火花","loginName": "spark","introduceSign": "万物之中，希望最美"}
})
console.log(user)
// {//     resultCode: 200,
//     message: '请求成功',
//     data: { nickName: '火花', loginName: 'spark', introduceSign: '万物之中，希望最美' }
// }

Mock.mock( rurl, template )

记录数据模板。当拦截到匹配 rurl 的 Ajax 请求时，将根据数据模板 template 生成模拟数据，并作为响应数据返回

export let postRegister = Mock.mock(/\/user\/register/, 'post', {'resultCode': 200,'message': "请求成功","data": {"nickName": "火花","loginName": "spark","introduceSign": "万物之中，希望最美"}
})

Mock.setup() 配置项

Mock.setup({
timeout: 400; // 响应时间，也可以是一个范围
// timeout:‘200-600’
})

Mock.Random 模拟数据

// 随机邮箱
console.log(Mock.Random.email());
// 随机颜色
console.log(Mock.Random.color());

还有很多，下图（摘自官网）是比较完整的

拓展

也可以自定义随机数据，通过extend拓展方法

Mock.Random.extend({constellation: function(date) {var constellations = ['白羊座', '金牛座', '双子座', '巨蟹座', '狮子座', '处女座', '天秤座', '天蝎座', '射手座', '摩羯座', '水瓶座', '双鱼座']return this.pick(constellations)}
})
Mock.Random.constellation()
// => "水瓶座"
Mock.mock('@CONSTELLATION')
// => "天蝎座"
Mock.mock({constellation: '@CONSTELLATION'
})

Mock.valid() 校验数据

Mock.valid( template, data ) 校验真实数据 data 是否与数据模板 template 匹配。
template
必选。

表示数据模板，可以是对象或字符串。例如 { ‘list|1-10’:[{}] }、‘@EMAIL’。

data
必选。

表示真实数据。

var template = {name: '迪丽热巴'
}
var data = {name: '神奇龙'
}
Mock.valid(template, data);
// [
//     {//       path: [ 'ROOT', 'name' ],
//       type: 'value',
//       actual: '神奇龙',
//       expected: '迪丽热巴',
//       action: 'is equal to',
//       message: "[VALUE] Expect ROOT.name'value is equal to 迪丽热巴, but is 神奇龙"
//     }
// ]

Mock.toJSONSchema()

把 Mock.js 风格的数据模板 template 转换成 JSON Schema。
暂时对这一块没有什么理解，以后会补充上来

var template = {'key|1-10': '★'
}
Mock.toJSONSchema(template)
// =>
{"name": undefined,"path": ["ROOT"],"type": "object","template": {"key|1-10": "★"},"rule": {},"properties": [{"name": "key","path": ["ROOT","key"],"type": "string","template": "★","rule": {"parameters": ["key|1-10", "key", null, "1-10", null],"range": ["1-10", "1", "10"],"min": 1,"max": 10,"count": 3,"decimal": undefined,"dmin": undefined,"dmax": undefined,"dcount": undefined}}]
}

Mock.js详解(结合官网)相关推荐

Java命令详解(根据官网)
文章目录语法介绍 Options Standard Options -agentlib:libname[=options] -Dproperty=value -classpath -cp -jar ...
php Immutable,Immutable.js详解
这次给大家带来Immutable.js详解,使用Immutable.js的注意事项有哪些,下面就是实战案例,一起来看一下. Immutable.js在react + router + redux项目中 ...
新手入门 - 详解 frp 内网穿透 frpc.ini 配置
本文为 Stille 原创文章.经实践,测试,整理发布.如需转载请联系作者获得授权,并注明转载地址. 转载地址:新手入门 - 详解 frp 内网穿透 frpc.ini 配置 - 思有云 - IOIOX ...
树莓派安装python3.5_梦见树_周公解梦梦到树是什么意思_做梦梦见树好不好_周公解梦官网...
梦见树是什么意思?做梦梦见树好不好?梦见树有现实的影响和反应,也有梦者的主观想象,请看下面由(周公解梦官网www.zgjm.org)小编帮你整理的梦见树的详细解说吧. 树主健康,树笔直挺拔,象征着人的 ...
Grunt学习笔记002---Gruntfile.js详解
Gruntfile.js详解使用yeomen新建一个项目,里面会自动帮你创建一个完整项目的全部目录,这里针对新建出来的Gruntfile.js做一下简单说明,用作以后参考使用,由于还是菜鸟,很多东西 ...
微信小程序学习：（二）app.js及index.js详解
微信小程序学习:(二)app.js及index.js详解项目地址:https://github.com/leoricding/- 在用ide创建小程序项目时,系统默认为我们创建了一个hellowor ...
转载：详解Quartus导出网表文件：.qxp和.vqm
详解Quartus导出网表文件:.qxp和.vqm www.cnblogs.com 2013-12-31 17:38 当项目过程中,不想给甲方源码时,该如何?我们可以用网表文件qxp或者vqm对资源进 ...
让别人远程访问你的代码网站项目或临时演示你的项目给客户的方式详解即外网局域网访问自己的项目
让别人远程访问你的代码网站项目或临时演示你的项目给客户的方式详解文章目录让别人远程访问你的代码网站项目或临时演示你的项目给客户的方式详解引言一.创建一个你想要别人访问的项目二.明确你想要将这 ...
快玩未转变者连不了服务器,快玩游戏未转变者怎么联机详解 | 手游网游页游攻略大全...
发布时间:2015-09-16 剑灵俄服游戏下载安装以及注册教程详解剑灵俄服怎么玩?剑灵俄服已经于5月17日进行了公测,有内测包的玩家在5月13日就可以提前进入服务器了,下面奉上一点干货,剑灵俄服的 ...

Mock.js详解(结合官网)