溯翎的博客

前端虚拟接口Mock.js项目实践

2017-09-03

前言

最近在实践个人项目F-Rent时大量使用了模拟数据,包括随机返回接口数据、img等…

带着需求寻找到Mock.js时让我眼前一亮,Mock.js可以拦截并模拟ajax请求 但是项目是线上所以带着需求又寻找到了线上接口服务easy-Mock支持Mock.js语法,搭配使用简直棒棒的!

关于本地模拟数据的配置和安装我就不做介绍了,网上有很多案例。

我下面会直接用我已经mock好的数据进行解剖详解

语法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
{
"success": true,
"data": {
"list|5-20": [{
"id|100-10000": 10000,
"name": "@cname",
"type": "求租",
"label|1": ["独卫", "男室友", "女室友", "晒房", "反馈", "闲聊", "闲置", "交友", "独卫", ],
"labeltype|1": ["singwei", "manchum", "girlchum", "sumroom", "feedback", "gossip", "lieidle", "makefriends", "singwei", ],
"title": "@csentence(5)",
"source": "@csentence",
"icon": "https://unsplash.it/244/132/?random&id=",
"url|1-3": [{
"name|+1": ["https://unsplash.it/244/132/?random&id=", "https://unsplash.it/244/132/?random&type=", "https://unsplash.it/244/132/?random&data="]
}],
"urlid|1-100": 100,
"date": "@datetime",
"see|100-10000": 10000,
"fabulous|100-10000": 10000,
"comment|100-10000": 10000,
}]
}
}

我们可以先到Mock.js查看语法,此Mock.js语法的json数据是F-Rent首页的综合数据,最后输出的数据为:

简单解剖

首先list|5-20指的是再五到二十中随机生成N条list数据,这样就可以实现首页批量生成N条数据!

id|100-10000:10000指的是从100到10000中随机取一个数字输出

label|1:["独卫", "男室友", "女室友", "晒房", "反馈"]最后可以输出从字符串中随机取一个数据来输出


url|1-3最后输出的数据为从name中随机取1-3条数据输出,我们可以看到数据的格式为:

@cname、@csentence、@datatime这些就不做介绍了,具体可以看Mock.js语法

Mock数据

由于内容过多,我会发布到F-Rent项目仓库中提供大家参考,有什么问题可以留言或者在F-Rent项目仓库中提Issues

使用支付宝打赏
使用微信打赏

若你觉得我的文章对你有帮助,欢迎点击上方按钮对我打赏

扫描二维码,分享此文章