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