Mock.js + RAP 使用介绍

Mock.js + RAP 使用介绍

问题

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

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

什么是Mock

Mock.js + RAP 使用介绍_第1张图片

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.js + RAP 使用介绍_第2张图片

最终生成的Mock数据

Mock.js + RAP 使用介绍_第3张图片

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

你可能感兴趣的:(前端)