1分钟了解 rap2

前言

现在大部分的 web 应用都使用前后端分离的方式。即明确前后端需求之后，前后端可以独自开发。这时候前端一般会模拟一些接口数据来填充页面。前面在博客 告别等待后端接口，前端使用在线mock数据 中有介绍到关于模拟数据的工具 mockjs 。 今天来介绍一个由淘宝团队开发的类似工具 rap2。

一、使用 rap2

1. 打开链接 http://rap2.taobao.org/account/login，注册或者登陆账号。

2. 根据页面提示创建仓库，新建接口。可视化界面，操作都比较简单，就不在此赘述。有问题可留言。

二、rap2 中 mock 语法使用

rap2 也符合 mockjs 语法。可在【生成规则】或者【初始值】中定义字段规则。

1. 案例
   假如要编写 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
  }
}

2. 规则说明

• 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 地址。

3. 实现
   定义 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/。