Mock.js + RAP 使用介绍

Mock.js + RAP 使用介绍

问题

前后端分离开发开发过程当中，经常会遇到以下几个尴尬的场景：

• 1、前端开发依赖于后端接口数据，需要与后端接口联调才能获得数据展示，从而拖慢了开发进度；
• 2、没有一个很好的结构化接口文档管理工具，能够对项目中所用到的接口进行管理。如一个请求的地址、有几个参数、参数名称及类型含义等等。同时支持项目、历史版本的切换。

什么是Mock

Mock = 生成模拟数据

Mock.js

引用官方的解释

Mock.js is a simulation data generator to help the front-end to develop and prototype separate from the back-end progress and reduce some monotony particularly while writing automated tests.

Mock.js 是一个模拟数据的生成器，用来帮助前端调试开发、进行前后端的原型分离以及用来提高自动化测试效率。

Features

• Generate simulated data according to the data template
• Provide request/response mocking for ajax requests
• Generate simulated data according to HTML-based templates

Mock.mock()

方法	含义
Mock.mock( template )	根据数据模板生成模拟数据。
Mock.mock( rurl, template )	记录数据模板。当拦截到匹配 rurl 的 Ajax 请求时，将根据数据模板 template 生成模拟数据，并作为响应数据返回。
Mock.mock( rurl, function( options ) )	记录用于生成响应数据的函数。当拦截到匹配 rurl 的 Ajax 请求时，函数 function(options) 将被执行，并把执行结果作为响应数据返回。
Mock.mock( rurl, rtype, template )	记录数据模板。当拦截到匹配 rurl 和 rtype 的 Ajax 请求时，将根据数据模板 template 生成模拟数据，并作为响应数据返回。
Mock.mock( rurl, rtype, function( options ) )	记录用于生成响应数据的函数。当拦截到匹配 rurl 和 rtype 的 Ajax 请求时，函数 function(options) 将被执行，并把执行结果作为响应数据返回。

Mock.Random

Mock.Random 是一个工具类，用于生成各种随机数据。

Basic

方法	含义
Random.boolean( min?, max?, current? )	返回一个随机的布尔值。
Random.natural( min?, max? )	返回一个随机的自然数（大于等于 0 的整数）。
Random.integer( min?, max? )	返回一个随机的整数。
Random.float( min?, max?, dmin?, dmax? )	返回一个随机的浮点数。
Random.character( pool? )	返回一个随机字符
Random.string( pool?, min?, max? )	返回一个随机字符串。

Date

方法	含义
Random.date(format)	返回一个随机的日期字符串。
Random.time( format? )	返回一个随机的时间字符串。
Random.datetime( format? )	返回一个随机的日期和时间字符串。
Random.now( unit?, format? )	返回当前的日期和时间字符串。

Image

方法	含义
Random.image( size?, background?, foreground?, format?, text? )	生成一个随机的图片地址。
Random.dataImage( size?, text? )	生成一段随机的 Base64 图片编码。

Text

方法	含义
Random.paragraph( min?, max? )	随机生成一段文本。
Random.cparagraph( min?, max? )	随机生成一段中文文本。
Random.sentence( min?, max? )	随机生成一个句子，第一个单词的首字母大写。
Random.csentence( min?, max? )	随机生成一段中文文本。
Random.word( min?, max? )	随机生成一个单词。
Random.cword( pool?, min?, max? )	随机生成一个汉字。
Random.title( min?, max? )	随机生成一句标题，其中每个单词的首字母大写。
Random.ctitle( min?, max? )	随机生成一句中文标题。

Name

方法	含义
Random.first()	随机生成一个常见的英文名。
Random.last()	随机生成一个常见的英文姓。
Random.name( middle? )	随机生成一个常见的英文姓名。
Random.cfirst()	随机生成一个常见的中文名。
Random.clast()	随机生成一个常见的中文姓。
Random.cname()	随机生成一个常见的中文姓名。

Web

方法	含义
Random.url( protocol?, host? )	随机生成一个 URL。
Random.protocol()	随机生成一个 URL 协议。
Random.domain()	随机生成一个域名。
Random.tld()	随机生成一个顶级域名（Top Level Domain）。
Random.email( domain? )	随机生成一个邮件地址。
Random.ip()	随机生成一个 IP 地址。

Address

方法	含义
Random.region()	随机生成一个（中国）大区。
Random.province()	随机生成一个（中国）省（或直辖市、自治区、特别行政区）。
Random.city( prefix? )	随机生成一个（中国）市。
Random.zip()	随机生成一个邮政编码（六位数字）。

语法规范

Mock.js 的语法规范包括两部分：

• 数据模板定义规范（Data Template Definition，DTD）
• 数据占位符定义规范（Data Placeholder Definition，DPD）

特点

• 语法规范基于JS对象字面量

数据模板定义规范 DTD

数据模板中的每个属性由 3 部分构成：属性名、生成规则、属性值：

// 属性名   name
// 生成规则 rule
// 属性值   value
'name|rule': value

示例：

var template = {
    "string|5": "*",
    "number|1-10.1-10": 1,
    "bool|1-2": true,
    "array|5": [{
        "id|+1": 1
    }],
    "object|1-3": {
        "p1": 1,
        "p2": 2,
        "p3": 3,
        "p11": 1,
        "p22": 2,
        "p33": 3
    }
}
Mock.mock(template)
// =>
{
  "string": "*****",
  "number": 6.677,
  "bool": false,
  "array": [
    {
      "id": 1
    },
    {
      "id": 2
    },
    {
      "id": 3
    },
    {
      "id": 4
    },
    {
      "id": 5
    }
  ],
  "object": {
    "p22": 2,
    "p1": 1
  }
}

属性值是函数 Function

1. 'name': function

   执行函数 function，取其返回值作为最终的属性值，函数的上下文为属性 'name' 所在的对象。

属性值是正则表达式 RegExp

1. 'name': regexp

   根据正则表达式 regexp 反向生成可以匹配它的字符串。用于生成自定义格式的字符串。

   Mock.mock({
       'regexp1': /[a-z][A-Z][0-9]/,
       'regexp2': /\w\W\s\S\d\D/,
       'regexp3': /\d{5,10}/
   })
   // =>
   {
       "regexp1": "pJ7",
       "regexp2": "F)\fp1G",
       "regexp3": "561659409"
   }

数据占位符定义规范 DPD

占位符 只是在属性值字符串中占个位置，并不出现在最终的属性值中。

占位符 的格式为：

@占位符
@占位符(参数 [, 参数])

注意：

1. 用 @ 来标识其后的字符串是 占位符。
2. 占位符 引用的是 Mock.Random 中的方法。
3. 通过 Mock.Random.extend() 来扩展自定义占位符。
4. 占位符 也可以引用 数据模板 中的属性。
5. 占位符 会优先引用 数据模板 中的属性。
6. 占位符 支持 相对路径 和 绝对路径。

Mock.mock({
    name: {
        first: '@FIRST',
        middle: '@FIRST',
        last: '@LAST',
        full: '@first @middle @last'
    }
})
// =>
{
    "name": {
        "first": "Charles",
        "middle": "Brenda",
        "last": "Lopez",
        "full": "Charles Brenda Lopez"
    }
}

演示

略

与RAP结合使用

什么是RAP

引用官方文档上的说明：

在前后端分离的开发模式下，我们通常需要定义一份接口文档来规范接口的具体信息。如一个请求的地址、有几个参数、参数名称及类型含义等等。RAP 首先方便团队录入、查看和管理这些接口文档，并通过分析结构化的文档数据，重复利用并生成自测数据、提供自测控制台等等… 大幅度提升开发效率。

RAP集中解决了两个问题：

• 1、出色的接口文档化处理；
• 2、完善mock接口数据，支持自定义拓展mock.js；

比如：

接口文档中的Mock规则

最终生成的Mock数据

RAP的Mock-Server服务

rap帮我们搭建了一个mock服务器，根据定义好的接口数据生成可以直接访问的接口，并返回相应的mock模版数据。

mock-plugin

RAP提供了 Mock插件（暂时仅支持Kissy和jQuery），使用只需要一步。

将以下代码写在KISSY或jQuery js代码之后即可：

<script type="text/javascript" src="http://{{domainName}}/rap.plugin.js?projectId={{projectId}}&mode={{mode}}"></script>

必选参数：

• {{projectId}}为用户所编辑的接口在RAP中的项目ID

可选参数：

• {{mode}}为RAP路由的工作模式, 默认值为3。
• {{disableLog}}为true时会禁止向控制台输出log，仅保留必要部分，默认为false

mode不同值的具体含义如下:

• 0 - 不拦截
• 1 - 拦截全部
• 2 - 黑名单中的项不拦截
• 3 - 仅拦截白名单中的项

白名单会根据RAP中已经编辑的接口文档，自动配置，RAP中未录入的接口不会做拦截

插件提供的JS API

您也可以通过调用RAP给出的JS API，手动设置黑名单、白名单及查看、设置工作模式

设置黑名单

RAP.setBlackList(arr);

设置白名单

RAP.setWhiteList(arr);

其中arr可以包含匹配字符串，或正则对象，例：[‘test’, /test/g]

查看当前模式

RAP.getMode();

设置当前模式

RAP.setMode(1);

后续：rap相关，包括，后端工具，自动化测试，rap开放的API