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
'name': function
执行函数
function
,取其返回值作为最终的属性值,函数的上下文为属性'name'
所在的对象。
属性值是正则表达式 RegExp
'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
占位符 只是在属性值字符串中占个位置,并不出现在最终的属性值中。
占位符 的格式为:
@占位符
@占位符(参数 [, 参数])
注意:
- 用
@
来标识其后的字符串是 占位符。 - 占位符 引用的是
Mock.Random
中的方法。 - 通过
Mock.Random.extend()
来扩展自定义占位符。 - 占位符 也可以引用 数据模板 中的属性。
- 占位符 会优先引用 数据模板 中的属性。
- 占位符 支持 相对路径 和 绝对路径。
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
Mock.js + RAP 使用介绍相关推荐
- RAP、Mock.js、Vue.js、Webpack
最近做项目使用的是RAP1的接口,但是昨天开始,RAP1 出现了问题,接口都不能用了. 所以补充一下Mock.js的用法,以便在这种突发的情况时候时自己通过Mock的方式来处理接口. npm init ...
- RAP Mock.js语法规范
Mock.js 的语法规范包括两部分: 数据模板定义规范(Data Template Definition,DTD) 数据占位符定义规范(Data Placeholder Definition,DPD ...
- Mock.js 和Node.js详细讲解
原文地址:http://www.manongjc.com/article/10503.html <一统江湖的大前端>系列是自己的前端学习笔记,旨在介绍javascript在非网页开 ...
- mock模拟接口测试 vue_vue+mock.js实现前后端分离
之前都是介绍在普通项目中使用mock.js,那么本次就来介绍一下在vue中使用mock.js实现前后端分离. 安装: npm install mockjs 这里先写个小案例介绍一下具体使用,写法不规范 ...
- html网页中使用mock,关于Mock.js使用
目前在做一个个人网站,写了一半没有数据填充,也不知道写啥了,就顺带学习下mockjs这个东西,官网上主要介绍它是一个可以随机生成各种类型数据,拦截ajax请求等优点.接下来就近距离结束下mockjs吧 ...
- Vue+Mock.js模拟登录和表格的增删改查
有三类人不适合此篇文章: "喜欢站在道德制高点的圣母婊" -- 适合去教堂 "无理取闹的键盘侠" -- 国际新闻版块欢迎你去 "有一定基础但又喜欢逼逼 ...
- 一统江湖的大前端(2)—— Mock.js + Node.js 如何与后端潇洒分手
<一统江湖的大前端>系列是自己的前端学习笔记,旨在介绍javascript在非网页开发领域的应用案例和发现各类好玩的js库,不定期更新.如果你对前端的理解还是写写页面绑绑事件,那你真的是有 ...
- angelajs中ajax,前端测试数据怎么利用Mock.js进行生成
前端测试数据怎么利用Mock.js进行生成 发布时间:2020-12-14 14:17:47 来源:亿速云 阅读:108 作者:Leah 本篇文章为大家展示了前端测试数据怎么利用Mock.js进行生成 ...
- 详解vue-element-admin 使用mock.js动态模拟数据
大家好,我是一条肥鲶鱼. 提示:胆小慎入 文章目录 大家好,我是一条肥鲶鱼. 前言 一.mock.js 1.为什么使用mock.js 2.mock-server.js的出现 二.使用步骤 1.开发环境 ...
- dva ajax请求,dva框架使用mock.js模拟数据 + fetch请求数据
what DVA? Dva是基于Redux做了一层封装,对于React的state管理,有很多方案,我选择了轻量.简单的Dva. dva 可以很方便就使用mock.js进行数据的模拟. 只需要三步,即 ...
最新文章
- Debian中编译内核
- 快速编辑 Shell 命令行
- 在WPF程序中打开网页:使用代理服务器并可进行JS交互
- java的三大特性,封装,继承,多态
- 使用Configuration Manager部署及管理软件更新(2)
- (第九周)团队项目14
- appconfig文件中的配置节
- 上机练习 实现消费单的打印 需求不明确要补充
- JAVA8新特性Optional和Stream和Localdate用法
- Vivado 2019.1 生成bit文件报错解决
- 微课|中学生可以这样学Python(5.1.3节):列表常用方法
- 如何在eclipse中,为整个工程生成javadoc文档
- 从零学ELK系列(九):Nginx接入ELK(超详细图文教程)
- vue render 渲染html,详解vue渲染函数render的使用
- java怎么返回上一部,如何返回数据给上一个活动
- 考研数据结构中的代码如何写——线性表的顺序存储
- c语言线性链表的插入,线性链表的创建_插入_删除_操作_C语言
- 论文阅读笔记(Region Proposal by Guided Anchoring)
- [Mac软件推荐] paste - 好用的剪切板记录增强工具
- [Python3] Matplotlib —— (四) 可视化异常处理