【Mock.js】前端模拟假数据,不用在手拼了

时间:2017-03-16 16:56:05
作者:zhongxia

一、背景

前后端分离开发的时候,前端和后端是并行开发的,前端往往刚开始不能拿到测试的数据,都需要自己写测试数据。 编写测试数据还是比较浪费时间的,虽然简单,但是都是体力活。

那么是否有工具可以帮我们生成数据,生成API接口,让前端能够爽爽的开发。

Mock.js 正是这样一款类库,可以帮我们模拟生成一堆数据。

二、使用

2.1 前端使用

引入引入mock.js的包,然后生成数据。

<pre>
</pre>
<!-- (必选)加载 Mock -->
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<!-- (必选)加载 Mock -->
<script src="http://mockjs.com/dist/mock.js"></script>
<script>
// 使用 Mock
var data = Mock.mock({
    'list|1-10': [{
        'id|+1': 1
    }]
});
$('<pre>').text(JSON.stringify(data, null, 4))
.appendTo('body')
</script>

生成的数据(数据的个数,1-10个中随机个数)

{
"list": [
    {
        "id": 1
    },
    {
        "id": 2
    },
    {
        "id": 3
    }
    ]
}

2.2 Jquery中,模拟API接口

配置模拟数据

Mock.mock('http://g.cn', 'GET' , {
    'name'     : '@name',
    'age|1-100': 100,
    'color'    : '@color'
});

发送Ajax请求:

$.ajax({
    url: 'http://g.cn',
    dataType:'json'
    }).done(function(data, status, xhr){
    console.log(
    JSON.stringify(data, null, 4)
    )    
});

返回数据:

// 结果1
{
"name": "Elizabeth Hall",
"age": 91,
"color": "#0e64ea"
}

// 结果2
{
"name": "Michael Taylor",
"age": 61,
"color": "#081086"
}

2.3 Node.js 中使用

// 安装
npm install mockjs

// 使用
var Mock = require('mockjs');
var data = Mock.mock({
    'list|1-10': [{
        'id|+1': 1
    }]
});

console.log(JSON.stringify(data, null, 4))

三、Mock.js语法

  • 数据模板定义(Data Temaplte Definition,DTD)
  • 数据占位符定义(Data Placeholder Definition,DPD)

3.1 模板定义

// 属性名   name
// 生成规则 rule
// 属性值   value
'name|rule': value

注意:

属性名 和 生成规则 之间用 | 分隔。生成规则 是可选的。生成规则 有 7 种格式:

 'name|min-max': value    //随机取min-max之间的值
 '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    //自增的值

生成规则 的 含义 需要依赖 属性值 才能确定。
属性值 中可以含有 @占位符。
属性值 还指定了最终值的初始值和类型。

3.2 占位符

Type Method
Basic boolean, natural, integer, float, character, string, range, date, time, datetime, now
Image image, dataImage
Color color
Text paragraph, sentence, word, title, cparagraph, csentence, cword, ctitle
Name first, last, name, cfirst, clast, cname
Web url, domain, email, ip, tld
Address area, region
Helper capitalize, upper, lower, pick, shuffle
Miscellaneous guid, id
//使用方式
Mock.mock('http://g.cn', 'GET' , {
    'name'     : '@name',
    'age|1-100': '@ctitle',
    'color'    : '@color'
});

四、Mock.js 模拟Ajax请求响应时间

Mock.setup({
    timeout: 400
})
Mock.setup({
    timeout: '200-600'
})

五、参考地址

  1. 《使用Mock.js进行独立于后端的前端开发》
  2. 《Mock.js》
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 144,247评论 1 305
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 61,830评论 1 258
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 95,531评论 0 214
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 41,345评论 0 183
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 49,160评论 1 260
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 38,936评论 1 178
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 30,538评论 2 275
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 29,291评论 0 168
  • 想象着我的养父在大火中拼命挣扎,窒息,最后皮肤化为焦炭。我心中就已经是抑制不住地欢快,这就叫做以其人之道,还治其人...
    爱写小说的胖达阅读 29,162评论 6 237
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 32,654评论 0 214
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 29,401评论 2 217
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 30,747评论 1 232
  • 白月光回国,霸总把我这个替身辞退。还一脸阴沉的警告我。[不要出现在思思面前, 不然我有一百种方法让你生不如死。]我...
    爱写小说的胖达阅读 24,297评论 1 33
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 27,206评论 2 213
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 31,670评论 3 213
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 25,661评论 0 9
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,089评论 0 169
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 33,677评论 2 233
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 33,819评论 2 237

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,007评论 18 139
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 170,394评论 25 707
  • 午后流云飞,晴空两相随。 烈日渐西垂,暮至红霞追。 弦月未满杯,早起与争辉。 不及骄阳媚,自有清风陪。 蟾宫露华坠...
    星尘梦羽阅读 427评论 0 8
  • 偕芳草,被清风,目涵空。一瞬流光冬已远,再邀同。 今世但循张敞,来生不慕韩冯。两蕊渚莲春作主,并头丛。
    肇英阅读 340评论 1 1
  • 心也江湖阅读 102评论 0 0