首页 > 代码库 > 进行独立于后台后端的前端开发——学习Mockjs
进行独立于后台后端的前端开发——学习Mockjs
Mockjs实现的功能
1.让前端攻城师独立于后端进行开发。
2.通过随机数据,模拟各种场景。增加单元测试的真实性
3.不需要修改既有代码,就可以拦截 Ajax 请求,返回模拟的响应数据。
4.用法简单
5.支持生成随机的文本、数字、布尔值、日期、邮箱、链接、图片、颜色等
6.支持支持扩展更多数据类型,支持自定义函数和正则。
语法
数据模版中,每个属性由3个部分组成:属性名,生成规则,属性值:‘name’|‘rule’:‘value’
注意:
- 属性名与生成规则之间用 ‘|’
- 生成规则是可选的
- 生成规则有其中格式:
‘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
- 生成规则的含义需要以来属性值才能确定
- 属性值中可以含有占位符
- 属性值还指定了最终值的初始值和类型
生成规则示例说明
- ‘name|min-max‘: ‘value‘ 通过重复 ‘value‘ 生成一个字符串,重复次数大于等于 min,小于等于 max。
- ‘name|count‘: ‘value‘ 通过重复 ‘value‘ 生成一个字符串,重复次数等于 count。
- ‘name|+1‘: 100 属性值自动加 1,初始值为 100
- ‘name|1-100‘: 100 生成一个大于等于 1、小于等于 100 的整数,属性值 100 只用来确定类型。
- ‘name|1-100.1-10‘: 100 生成一个浮点数,整数部分大于等于 1、小于等于 100,小数部分保留 1 到 10 位。
- ‘name|1‘: value 随机生成一个布尔值,值为 true 的概率是 1/2,值为 false 的概率是 1/2。
- ‘name|min-max‘: value 随机生成一个布尔值,值为 value 的概率是 min / (min + max),值为 !value 的概率是 max / (min + max)。
- ‘name|min-max‘: {} 从属性值 {} 中随机选取 min 到 max 个属性。
- ‘name|count‘: {} 从属性值 {} 中随机选取 count 个属性。
- ‘name|1‘: [{}, {} ...] 从属性值 [{}, {} ...] 中随机选取 1 个元素,作为最终值。
- ‘name|min-max‘: [{}, {} ...] 通过重复属性值 [{}, {} ...] 生成一个新数组,重复次数大于等于 min,小于等于 max。
- ‘name|count‘: [{}, {} ...] 通过重复属性值 [{}, {} ...] 生成一个新数组,重复次数为 count。
- ‘name‘: function(){} 执行函数 function(){},取其返回值作为最终的属性值,上下文为 ‘name‘ 所在的对象。
数据的占位符定义
占位符 只是在属性值字符串中占个位置,并不出现在最终的属性值中。占位符 的格式为:@占位符(参数 [,参数])
注意:
- 用 @ 来标识其后的字符串是 占位符。
- 占位符 引用的是 Mock.Random 中的方法。
- 通过 Mock.Random.extend() 来扩展自定义占位符。
- 占位符 也可以引用 数据模板 中的属性。
- 占位符 会优先引用 数据模板 中的属性
示例
{ name: { first: ‘@FIRST‘, middle: ‘@FIRST‘, last: ‘@LAST‘, full: ‘@first @middle @last‘ } } // => { "name": { "first": "Charles", "middle": "Brenda", "last": "Lopez", "full": "Charles Brenda Lopez" } }
用法:
jquery:
<script src="http://mockjs.com/dist/mock.js"></script>
Mock.mock(‘http://g.cn‘, {
‘name‘ : ‘@name‘,
‘age|1-100‘: 100,
‘color‘ : ‘@color‘
});
$.ajax({
url: ‘http://g.cn‘,
dataType:‘json‘
}).done(function(data, status, xhr){
console.log(
JSON.stringify(data, null, 4)
)
});
nodejs:
// 安装 npm install mockjs // 使用 var Mock = require(‘mockjs‘); var data =http://www.mamicode.com/ Mock.mock({ ‘list|1-10‘: [{ ‘id|+1‘: 1 }] }); console.log(JSON.stringify(data, null, 4))
官方文档:http://mockjs.com
进行独立于后台后端的前端开发——学习Mockjs
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。