1分钟了解 rap2

前言
一、使用 rap2
二、rap2 中 mock 语法使用
三、附录

前言

现在大部分的 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/。