1分钟了解 rap2
前言
现在大部分的 web 应用都使用前后端分离的方式。即明确前后端需求之后,前后端可以独自开发。这时候前端一般会模拟一些接口数据来填充页面。前面在博客 告别等待后端接口,前端使用在线mock数据 中有介绍到关于模拟数据的工具 mockjs 。 今天来介绍一个由淘宝团队开发的类似工具 rap2。
一、使用 rap2
-
打开链接 http://rap2.taobao.org/account/login,注册或者登陆账号。
-
根据页面提示创建仓库,新建接口。可视化界面,操作都比较简单,就不在此赘述。有问题可留言。
二、rap2 中 mock 语法使用
rap2 也符合 mockjs 语法。可在【生成规则】或者【初始值】中定义字段规则。
- 案例
假如要编写 getProducts 接口,生成如下格式的10条数据。
{
"result": {
"list": [
{
"id": 1,
"img": "http://dummyimage.com/200x200/ed79f2",
"desc": "这个东西好好看的",
"price": 161,
"url": "prospero://paopyt.bn/nvedo"
},
{
"id": 2,
"img": "http://dummyimage.com/200x200/79f2ca",
"desc": "八成新",
"price": 139,
"url": "nntp://jnqjd.mn/ixupy"
},
{
"id": 3,
"img": "http://dummyimage.com/200x200/f2a679",
"desc": "这个东西好好看的",
"price": 152,
"url": "mailto://nsqachjf.gn/cqn"
},
{
"id": 4,
"img": "http://dummyimage.com/200x200/8379f2",
"desc": "八成新",
"price": 126,
"url": "rlogin://owkbmzppu.id/seeg"
},
{
"id": 5,
"img": "http://dummyimage.com/200x200/92f279",
"desc": "貂皮大衣",
"price": 173,
"url": "mid://gyfoskugv.sg/gkoyjn"
},
{
"id": 6,
"img": "http://dummyimage.com/200x200/f279b5",
"desc": "貂皮大衣",
"price": 124,
"url": "cid://cdcvezd.pe/lca"
},
{
"id": 7,
"img": "http://dummyimage.com/200x200/79d8f2",
"desc": "这个东西好好看的",
"price": 192,
"url": "news://rsmtit.org/bpl"
},
{
"id": 8,
"img": "http://dummyimage.com/200x200/f2e879",
"desc": "貂皮大衣",
"price": 152,
"url": "prospero://qkjnxlv.ai/gto"
},
{
"id": 9,
"img": "http://dummyimage.com/200x200/c479f2",
"desc": "貂皮大衣",
"price": 174,
"url": "telnet://vwbv.sj/dfhr"
},
{
"id": 10,
"img": "http://dummyimage.com/200x200/79f2a1",
"desc": "貂皮大衣",
"price": 187,
"url": "mid://qojikotu.at/vylnm"
}
],
"total": 10
}
}
- 规则说明
-
result 对象规则
result 对象中包含 10 条随机的 list 数据和 total 总数(即 list 的长度)。 -
list 数组对象规则
在 list 数组对象中,每个对象有 id、img、desc、price、url 5个字段。 -
list 数组对象字段规则
id 为自增主键。
img 为随机生成的 200*200的图片。
desc 在四段文本(“九成新哦,先到先得”, “貂皮大衣”, “八成新”, “这个东西好好看的”)中任选一个。
price 为100-200以内的数字。
url 为随机生成的一个 url 地址。
- 实现
定义 result 并选择类型,点击 result 左边的“+”,添加 list 字段和 total 字段并分别选择类型。
其中 list 想要随机生成多少条数据,就在 【生成规则】中写多少,如本案例中想要生成10条数据,生成规则即是 10。
其中 total 表示的是 list 的长度。可以使用函数类型,即选择‘Function’。然后再【初始值】中编写函数 function(){return this.list.length}
。该函数中的 this 即指整个上下文对象 result。
定义 list 数组中的对象。
点击 list 左边的 “+”,分别添加 id、img、desc、price、url 字段。
id 为自增1,在 【生成规则】中写上 +1
。
img 为尺寸 200*200的随机图片,在【初始值】中写上 @image(200x200,@color)
。
desc 为某个数组对象中的其中一个。在 【生成规则】中写上 1
,在 【初始值】中添加数组 ["九成新哦,先到先得","貂皮大衣","八成新","这个东西好好看的"]
。
price 为 100-200之间的随机数。在 【生成规则】中写上 100-200
。【初始值】可写可不写。
url 为随机生成的 url。在【初始值】中 写上 @url
。
三、附录
以上通过一个简单的案例说明了 rap2 的用法,可以看出 rap2 也是依赖于 mockjs 语法。更多 mockjs 语法规则请参考 http://mockjs.com/。