Mock.js + RAP 使用介绍_一MasonChen的博客-CSDN博客_mockjs + rap
Mock.js + RAP 使用介绍
一MasonChen
于 2017-09-03 19:49:46 发布
10148
收藏
分类专栏：
前端
文章标签：
MockJS
rap
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u014293306/article/details/77804264
版权
前端
专栏收录该内容
3 篇文章
0 订阅
订阅专栏
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 templateProvide request/response mocking for ajax requestsGenerate 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
一MasonChen
关注
关注
点赞
收藏
打赏
评论
Mock.js + RAP 使用介绍
Mock.js + RAP 使用介绍问题前后端分离开发开发过程当中，经常会遇到以下几个尴尬的场景：1、前端开发依赖于后端接口数据，需要与后端接口联调才能获得数据展示，从而拖慢了开发进度；2、没有一个很好的结构化接口文档管理工具，能够对项目中所用到的接口进行管理。如一个请求的地址、有几个参数、参数名称及类型含义等等。同时支持项目、历史版本的切换。什么是Mock Mock = 生成模拟数据M
复制链接
扫一扫
专栏目录
RAP Mock 工具模拟数据
weixin_33997389的博客
09-21
415
这是一个 帮助前端开发 模拟ajax请求数据的工具，在官网有很详细的视频教程。这里用最简单的总结帮你快速入门。
首先点击链接进行注册
http://rapapi.org/org/group.action?plid=16929
1 按照引导顺序 依次 登录创建团队-创建产品线 创建分组 接下来...
评论 1
您还未登录，请先
登录
后发表或查看评论
RAP:Web接口管理工具，开源免费，接口自动化，MOCK数据自动生成，自动化测试，企业级管理。阿里妈妈MUX团队出品！阿里巴巴都在用！1000+公司的选择！RAP2已发布请移步至https
03-12
移民行动计划
阿里妈妈THX团队新项目GoGoCode： : 给批量修改项目代码缓解痛苦！
该项目已暂停维护，请移步至RAP2
该项目已弃用，请移至RAP2
什么是RAP？
RAP是一个Web工具，允许Web应用程序开发人员快速定义和记录在典型的基于RESTful-API的Web应用程序中使用的Web API。 RAP还可以用于生成API模拟数据并运行API服务，以使前端开发人员能够编写和测试其前端代码，从而消耗了加载了模拟数据的预定义Web API，从而减少了来自后端开发的依赖性工作。 同时，后端开发人员可以根据API的定义按照自己的节奏实现自己的后端代码，从而满足质量和时间要求。 借助RAP，您实际上可以事半功倍。
RAP通过GUI工具帮助WEB工程师更高效的管理接口文档，同时通过分析接口结构自动生成模拟数据，校正真实接口的正确性，使接口文档成为开发流程中的强依赖。 ，RAP可以
Mock.mock()生成模拟数据
最新发布
Amouzy的博客
11-10
81
在做前端项目时，如果没有测试数据，可以通过mock来生成模拟数据。记录数据模板。当拦截到匹配 rurl 和 rtype 的 Ajax 请求时，将根据数据模板 template 生成模拟数据，并作为响应数据返回。记录用于生成响应数据的函数。当拦截到匹配 rurl 和 rtype 的 Ajax 请求时，函数 function(options) 将被执行，并把执行结果作为响应数据返回。根据数据模板生成模拟数据。记录数据模板。
RAP接口管理工具
u013090676的博客
06-06
9099
RAP是阿里开源的接口管理工具，主要包括开发团队/项目的管理，编写API接口，MOCK服务，接口测试，生成接口文档等功能。并且RAP是可以在本地环境中进行部署使用的（linux，windows皆可），这里也建议本地部署，第一不受网络限制，第二数据放在自己的数据库中便于后续的功能扩展或分析。关于RAP的部署，网络上有较多的教程，这里就不再重复，主要需要java1.8，mysql5.6（mysql5....
mockjs的使用
qq_40409143的博客
03-28
539
mockjsmockjs是什么为什么要使用mockjs（背景）具体怎么使用使用后带来的效果可以使用哪些协助工具哪些地方可以突破，可以做的更好还有其他的类似工具吗可以提高使用的效率吗设计的思想是什么为什么可以模拟后端接口呢，为什么不会导致跨域问题呢你从中收获到了什么
mockjs是什么
为什么要使用mockjs（背景）
具体怎么使用
使用后带来的效果
可以使用哪些协助工具
rap2
可以使用rap2工具来管理自己的API，RAP是一个接口管理平台。
注册登入之后可以写自己的接口。如图：
通过使用这个工具，可
使用mock.js生成前端测试数据
仗剑天涯，从摘要开始
11-01
182
image.png
概述：
Mock.js是一个模拟数据生成器，可以让前端独立于后端进行开发。如果你正在开发一个前端页面，可是后台还没有完成供你调用的API，并且数据格式已经确定，那么你就可以使用Mock.js模拟相关的接口，生成假数据来查看页面的效果。Mock.js的功能，生成随机数据，拦截Ajax请求。
如何mock数据？
1. 安装Node.js，通过http-server...
Mock.js 数据模拟、Rap2 接口可视化管理平台
Lyrelion的博客
10-19
485
目录
1.新建仓库
2.新建模块
3.新建接口
4.设置请求参数
​5.设置响应结果
6.接口访问地址
7.生成规则 / 初始值
基于 Mock.js，根据约定接口，自动生成 模拟数据
1.新建仓库
一个项目建立一个仓库，仓库中存放这个项目的所有接口
操作说明：
新建仓库：发起仓库新建操作
仓库名称（必填）：建议与项目名称保持一致
简介（非必填）：对仓库名称补充描述
成员（非必填）：一般为项目的前后端开发人员，拥有这个仓库内接口的操作权限
团队（非必填）：被添加的团队，...
实际项目开发-Mock服务-RAP
蓝星花
07-16
760
1.前言
RAP 是一个可视化接口管理工具， 通过分析接口结构，动态生成模拟数据，校验真实接口正确性， 围绕接口定义，通过一系列自动化工具提升我们的协作效率。
在 RAP 中，您可定义接口的 URL、请求和响应细节格式等等。通过分析这些数据，RAP 提供 MOCK 服务、测试服务等自动化工具。自己可以搜一个教程去搭建。
2.为什么要使用mock
在前后端分离的开...
前端的date类型后台接收_前端mock数据(超级详细)
weixin_39583222的博客
11-19
951
在实际的项目研发过程中，我们经常会遇到如下的尴尬场景：前端开发依赖于后端接口数据，但是后台人员不足或者无法立即到位，前端迟迟不能开工，或者前端小伙子自己参照ui设计图，完成对应的静态页面（没有数据交互），待后台人员到位，再进行二次开发，协助完成接口对接。1.什么是mock数据？前后端同时开发的时候，后端接口数据没有出来，前端可以mock假数据，模拟开发；2.mock数据的优势？A 团队可以并行...
前后端分离--构建前端Mock Server--windows部署rap
weixin_33714884的博客
04-07
137
mock：模拟的，虚假的
mock server：模拟服务，模拟请求，模拟虚假数据
为了前后端更好的分工，接口文档是必须的，前后端都根据接口文档写代码，然后对接接口就行了。
但是，后端跟不上前端节奏，接口跟不上来怎么办？即便接口跟上来了，大后端数据跟不上又怎么办？
第一种想到的方法就是模拟返回数据，根据接口文档定义好的返回数据格式，新建一个json文件夹，里面放一堆*.json文件，像这样...
mockJs文档（二）
Start2019
12-21
1960
mockJs官方文档
1. Mock.mock()：根据数据模板生成模拟数据。
2. Mock.setup()：配置拦截 Ajax 请求时的行为。支持的配置项有：timeout。
3. Mock.Random：是一个工具类，用于生成各种随机数据。
4. Mock.valid(template, data)：校验真实数据 data 是否与数据模板 template 匹配。
5. Mock.toJSONSchema()：把 Mock.js 风格的数据模板 template 转换成 JSON Schema。
Mock.js数据模拟，rap2、postman可视化接口平台，Vue框架的接口链接应用
图南zzz
09-14
5042
前言：
作为一名前端程序员，其工作不仅仅是制作出精美的界面，实现页面之间的顺利转跳，各种交互。最主要的工作就是将后端所提供的数据通过合理地接收，应用在页面上，呈现在用户面前，从而使用户能够得到完善的界面信息。而在现实开发中，前后端的工作、搭建往往是同步进行的，因此在前端的开发过程中，后端所提供数据的接口往往不一定已经实现，前端不可能将工作停下来去等待后端接口的完成，因此，使用模拟数据接口就十分重要了。而rap2模拟数据接口就是一种简单使用的方法。
rap2使用方法
注册登录
rap2的一大优势在于它的在
Mock.random常见用法
weCat_s的博客
02-20
4303
模拟Web数据：
生成随机域名(每次运行结果不同)：
var Random = Mock.Random
Random.domain() // "nhou.org.cn"
生成随机IP(每次运行结果不同)
var Random = Mock.Random
Random.ip() // "74.97.41.159"
生成随机URL(每次运行结果不同)
Random.url() // ...
前端如何mock数据
Sun_blog
08-16
462
在工作中总会遇到，临近开发结束了后端才出接口，造成了前端的狼狈加班，搞不还要因此背锅。因此，我们前端一定要学会如何mock数据。什么是mock数据？mock数据就是我们接入交互逻辑用的假数据。当然，在开工之前，我们一定要先和后端确定好接口的数据格式，最好可以确定到字段。本文到此结束如果大家还有什么其他想法，欢迎在评论区交流！...
Rap部署本地服务器
dalter的博客
03-31
2947
RAP是一个可视化接口管理工具 通过分析接口结构，动态生成模拟数据，校验真实接口正确性， 围绕接口定义，通过一系列自动化工具提升我们的协作效率。我们的口号：提高效率，回家吃晚饭！rap网页版 http://rapapi.org/org/index.do然而RAP网页版中的数据毕竟是在别人的服务器上,为防止数据泄露的问题Rap提供了本地demo我们只需down下来放到自己的Tomcat服务器上用局域...
在rap2中模拟数据以及用mock.js模拟数据
lm13420109892的博客
02-25
732
在rap2中模拟数据
规则
直接使用mock.js模拟数据
rap2接口mock数据初始值和常用属性设置
qq_630354780的博客
12-18
1123
常用mock数据初始值
id: “@id()”,//得到随机的id,对象
name: “@cname()”,//随机生成中文名字
username:/[a-z]{2}[0-9]{6}/, //随机用户名
tel: /^1(5|3|7|8)[0-9]{9}$/, //随机手机号码
password: /[0-9]{6}/, //6位0-9的密码
sex|0-1:0, //性别
date: “@date()”,//随机生成日期
avatar: “@image(‘200x200’,‘red’,’#fff’,‘av
前端mock数据
weixin_45045252的博客
05-28
329
在后端接口没有写完，保证不影响前端开发进度的情况，可以前端自行模拟数据进行页面联调，直接上代码！
官网：Mock.js
Mock.js
生成随机数据，拦截 Ajax 请求
安装
npm install mockjs
在main.js里
// 测试用的代码
import axios from 'axios'
Vue.prototype.$http = axios
在vue.config.js里的
devServer: {
before: require('./mock/in..
身为前端，你真的会mock数据吗
H的博客
08-25
703
前端如何mock数据，真的都能满足需求吗？
前端用Mockjs模拟数据
m0_45219210的博客
04-21
1090
mockjs可以模拟数据，可以使我们更快的得到较为真实的数据，且可以拦截axios的接口调用，让我们的代码实现了调用接口的逻辑且得到模拟的数据，保存业务完整度。
使用步骤：
1、安装
npm i mockjs
2、配置 src/mock/index.js
这里的setup是配置，跟vue3的setup不一样。
import Mock from 'mockjs'
// mock的配置
Mock.setup({
// 随机延时200-300毫秒，模拟网络延时
timeo...
“相关推荐”对你有帮助么？
非常没帮助
没帮助
一般
有帮助
非常有帮助
提交
©️2022 CSDN
皮肤主题：大白
设计师：CSDN官方博客
返回首页
一MasonChen
CSDN认证博客专家
CSDN认证企业博客
码龄9年
暂无认证
78
原创
14万+
周排名
10万+
总排名
12万+
访问
等级
2037
积分
28
粉丝
28
获赞
14
评论
81
收藏
私信
关注
热门文章
RecordRTC总结
12145
Mock.js + RAP 使用介绍
10148
EditText+ListPopupWindow实现可编辑的下拉列表
9160
使用cocos2d-android做最简单的飞机大战
6604
ZigBee入门之Socket----TCP/IP、Http与Socket
6443
分类专栏
设计模式
9篇
ZigBee
6篇
算法
29篇
usaco
19篇
android开发
6篇
javaWeb
1篇
java
3篇
其它
1篇
cocos2dx
1篇
android逆向
1篇
C-C++
5篇
数据结构
8篇
BigData
2篇
Network
1篇
LeetCode
3篇
JavaScript
2篇
前端
3篇
运维
1篇
最新评论
Java线程池ExecutorService 的理解与使用
小学生造句:
写的非常好
Java线程池ExecutorService 的理解与使用
小学生造句:
写的非常清楚，谢谢大佬
Java线程池ExecutorService 的理解与使用
狂奔的黑驴:
很不错
RecordRTC总结
baidu_19510369:
打扰了 老哥 这个RecordRTC 分片上传您那边做了么 我想请教个问题
设计模式学习之备忘录模式：象棋中“悔棋”操作
qq_43116927:
有没有完整的象棋代码啊？给个链接也好
您愿意向朋友推荐“博客详情页”吗？
强烈不推荐
不推荐
一般般
推荐
强烈推荐
提交
最新文章
Web视频播放与数据安全
Vue移动端开发问题纪要
RecordRTC总结
2022年1篇
2018年3篇
2017年1篇
2016年19篇
2015年23篇
2014年40篇
目录
目录
分类专栏
设计模式
9篇
ZigBee
6篇
算法
29篇
usaco
19篇
android开发
6篇
javaWeb
1篇
java
3篇
其它
1篇
cocos2dx
1篇
android逆向
1篇
C-C++
5篇
数据结构
8篇
BigData
2篇
Network
1篇
LeetCode
3篇
JavaScript
2篇
前端
3篇
运维
1篇
目录
评论 1
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
查看更多评论
打赏作者
一MasonChen
你的鼓励将是我创作的最大动力
¥2
¥4
¥6
¥10
¥20
输入1-500的整数
余额支付
(余额：-- )
扫码支付
扫码支付：¥2
获取中
扫码支付
您的余额不足，请更换扫码支付或充值
打赏作者
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额
抵扣说明：
1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。 2.余额无法直接购买下载，可以购买VIP、C币套餐、付费专栏及课程。
余额充值