1分钟了解 rap2

小灰灰 2022-12-22 09:29 386阅读 0赞

### 1分钟了解 rap2 ###

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

### 前言 ###

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

### 一、使用 rap2 ###

1.  打开链接 [http://rap2.taobao.org/account/login][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
      }
    }

1.  规则说明

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

1.  实现  
    定义 result 并选择类型，点击 result 左边的“+”，添加 list 字段和 total 字段并分别选择类型。  
    其中 list 想要随机生成多少条数据，就在 【生成规则】中写多少，如本案例中想要生成10条数据，生成规则即是 10。

其中 total 表示的是 list 的长度。可以使用函数类型，即选择‘Function’。然后再【初始值】中编写函数 `function(){return this.list.length}` 。该函数中的 this 即指整个上下文对象 result。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDEzNTEyMQ_size_16_color_FFFFFF_t_70_pic_center]  
定义 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`。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDEzNTEyMQ_size_16_color_FFFFFF_t_70_pic_center 1]

### 三、附录 ###

以上通过一个简单的案例说明了 rap2 的用法，可以看出 rap2 也是依赖于 mockjs 语法。更多 mockjs 语法规则请参考 [http://mockjs.com/][http_mockjs.com]。

[mock]: https://blog.csdn.net/weixin_44135121/article/details/99558304?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522160620801919724842907572%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fblog.%2522%257D&request_id=160620801919724842907572&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~blog~first_rank_v1~rank_blog_v1-1-99558304.pc_v1_rank_blog_v1&utm_term=mock&spm=1018.2118.3001.4450
[http_rap2.taobao.org_account_login]: http://rap2.taobao.org/account/login
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDEzNTEyMQ_size_16_color_FFFFFF_t_70_pic_center]: /images/20221120/bc07187b145742e2aa9106b72d6b67f9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDEzNTEyMQ_size_16_color_FFFFFF_t_70_pic_center 1]: https://img-blog.csdnimg.cn/20201124173335735.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDEzNTEyMQ==,size_16,color_FFFFFF,t_70#pic_center
[http_mockjs.com]: http://mockjs.com/