安装Mock
npm install mockjs
语法规范
数据模板
数据模板中的每个属性由 3 部分构成：属性名、生成规则、属性值：
生成规则 有 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
- 属性值是字符串 String
'name|min-max': string //通过重复 string 生成一个字符串，重复次数大于等于 min，小于等于 max。
'name|count': string //通过重复 string 生成一个字符串，重复次数等于 count。
- 属性值是数字 Number
'name|+1': number //属性值自动加 1，初始值为 number。
'name|min-max': number //生成一个大于等于 min、小于等于 max 的整数，属性值 number 只是用来确定类型。
'name|min-max.dmin-dmax': number //生成一个浮点数，整数部分大于等于 min、小于等于 max，小数部分保留 dmin 到 dmax 位。
- 属性值是布尔型 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 //同String
'name|count': array //同String
6.属性值是函数 Function
'name': function //执行函数 function，取其返回值作为最终的属性值，
7.属性值是正则表达式 RegExp
'name': regexp //根据正则表达式 regexp 反向生成可以匹配它的字符串。用于生成自定义格式的字符串。
数据占位符定义
占位符 的格式为：
@占位符
@占位符(参数 [, 参数])
注意：
占位符 引用的是 Mock.Random 中的方法。
通过 Mock.Random.extend() 来扩展自定义占位符。
占位符 也可以引用 数据模板 中的属性。
占位符 会优先引用 数据模板 中的属性。
占位符 支持 相对路径 和 绝对路径。
如何使用Mock
Mock.mock()
Mock.mock( rurl?, rtype?, template|function( options ) )
Mock.mock( template )
//api.js
function ***(data={},fn){
var res = Mock.mock({
'error_code': '',
'error_msg': '',
'data|10': [{
'id|+1': 1,
'name': "@cname()",
'title': "@csentence(15,26)",
'date': Random.date('MM-dd'),
'type|1-4': 1,//事件类型
}]
})
// 输出结果
// console.log(JSON.stringify(res, null, 2))
fn(res);
}
//某个组件
var API = require('../../utils/api.js');
API.****('', function (res) {
//这里既可以获取模拟的res
console.log(res)
that.setData({
list: res.data
})
});
Mock.mock( rurl, template )
这种是直接对你请求的的真实url进行拦截,平时怎么请求后台数据现在依然怎么请求
Mock.mock( rurl, function( options ) )
记录用于生成响应数据的函数。当拦截到匹配 rurl 的 Ajax 请求时，函数 function(options) 将被执行，并把执行结果作为响应数据返回。
主要用于当你请求的数据要根据传递参数值发生变化时使用
Mock.mock( rurl, rtype, template )
记录数据模板。当拦截到匹配 rurl 和 rtype 的 Ajax 请求时，将根据数据模板 template 生成模拟数据，并作为响应数据返回。
Mock.mock( rurl, rtype, function( options ) )
记录用于生成响应数据的函数。当拦截到匹配 rurl 和 rtype 的 Ajax 请求时，函数 function(options) 将被执行，并把执行结果作为响应数据返回。
注意：options 指向本次请求的 Ajax 选项集，含有 url、type 和 body 三个属性
学习到这里，你所掌握的Mock知识应该就够你使用了。下面介绍一些不常用到的工具
Mock工具类
Mock.setup( settings )
配置拦截 Ajax 请求时的行为。支持的配置项有：timeout。
Mock.setup({
timeout: 400
})
Mock.setup({
timeout: '200-600'
})
Mock.Random（是一个工具类，用于生成各种随机数据。）
Mock.Random 提供的完整方法。比如：Address、Web、Name、Text、Color
扩展方法：@扩展方法
Random.extend({
constellation: function(date) {
var constellations = ['白羊座', '金牛座', '双子座', '巨蟹座', '狮子座', '处女座', '天秤座', '天蝎座', '射手座', '摩羯座', '水瓶座', '双鱼座']
return this.pick(constellations)
}
})
Random.constellation()
// => "水瓶座"
Mock.mock('@CONSTELLATION')
// => "天蝎座"
Mock.mock({
constellation: '@CONSTELLATION'
})
// => { constellation: "射手座" }
Mock.valid()
校验真实数据 data 是否与数据模板 template 匹配
var template = {
name: 'value1'
}
var data = {
name: 'value2'
}
Mock.valid(template, data)
Mock.toJSONSchema()
把 Mock.js 风格的数据模板 template 转换成 JSON Schema。
百度百科：jsonschema是描述你的JSON数据格式；JSON模式（应用程序/模式+ JSON）有多种用途，其中之一就是实例验证。验证过程可以是交互式或非交互式的。例如，应用程序可以使用JSON模式来构建用户界面使互动的内容生成除了用户输入检查或验证各种来源获取的数据。
网友评论