MOCK.JS 生成随机数据,拦截 Ajax 请求
mock.js 的用处
- 前后端分离 :让前端攻城师独立于后端进行开发。
- 增加单元测试的真实性 :通过随机数据,模拟各种场景。
- 开发无侵入 :不需要修改既有代码,就可以拦截 Ajax 请求,返回模拟的响应数据。
- 用法简单 :符合直觉的接口。
- 数据类型丰富 :支持生成随机的文本、数字、布尔值、日期、邮箱、链接、图片、颜色等。
- 方便扩展 :支持支持扩展更多数据类型,支持自定义函数和正则。
配置模拟数据案例
Mock.mock('http://g.cn', {
'name' : '@name',
'age|1-100': 100,
'color' : '@color'
});
发送Ajax请求:
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="http://mockjs.com/dist/mock.js"></script>
<script type="text/javascript" src="data.js"></script>
<script type="text/javascript">
$.ajax({
url: 'http://g.cn',
dataType:'json'
}).done(function(data, status, xhr){
console.log(
JSON.stringify(data, null, 4)
)
});
</script>
返回json数据
{
"name": "William Garcia",
"age": 74,
"color": "#f27c79"
}
mock.js 语法
Mock.js 的语法规范包括两部分:
- 数据模板定义规范(Data Template Definition,DTD)
- 数据占位符定义规范(Data Placeholder Definition,DPD)
数据模板定义规范 DTD
数据模板中的每个属性由 3 部分构成:** 属性名、生成规则、属性值:**
// 属性名 name
// 生成规则 rule
// 属性值 value
'name|rule': value
Mock.Random
方法
Mock.Random 提供的完整方法(占位符)如下:
** Type ** | ** Method** |
---|---|
Basic | boolean, natural, integer, float, character, string, range, date, time, datetime, now |
Image | image, dataImage |
Color | color |
Text | paragraph, sentence, word, title, cparagraph, csentence, cword, ctitle |
Name | first, last, name, cfirst, clast, cname |
Web | url, domain, email, ip, tld |
Address | area, region |
Helper | capitalize, upper, lower, pick, shuffle |
Miscellaneous | guid, id |
参考文档
MOCK.JS 生成随机数据,拦截 Ajax 请求的更多相关文章
- 来,我们手写一个简易版的mock.js吧(模拟fetch && Ajax请求)
预期的mock的使用方式 首先我们从使用的角度出发,思考编码过程 M1. 通过配置文件配置url和response M2. 自动检测环境为开发环境时启动Mock.js M3. mock代码能直接覆盖g ...
- JS获取页面数据执行Ajax请求
下面这个例子展示了如何使用js获取页面中元素的值,并且将这些值作为参数执行Ajax请求. $("#submit-task").bind("click", fun ...
- Mock拦截ajax请求
//mock拦截ajax请求 ,生成随机数据Mock.mock('./servlet/UserServlet?method=getUser',{ 'list|1-5':[{ 'username':'@ ...
- 如何用python抓取js生成的数据 - SegmentFault
如何用python抓取js生成的数据 - SegmentFault 如何用python抓取js生成的数据 1赞 踩 收藏 想写一个爬虫,但是需要抓去的的数据是js生成的,在源代码里看不到,要怎么才能抓 ...
- JS 点击元素发ajax请求 打开一个新窗口
JS 点击元素发ajax请求 打开一个新窗口 经常在项目中会碰到这样的需求,点击某个元素后,需要发ajax请求,请求成功以后,开发需要把链接传给前端(或者说请求成功后打开新窗口),前端需要通过新窗口打 ...
- JS生成随机字符串的多种方法
这篇文章主要介绍了JS生成随机字符串的方法,需要的朋友可以参考下 下面的一段代码,整理电脑时,记录备查. <script language="javascript"> ...
- js生成随机固定长度字符串的简便方法
概述 碰到一个需求:用js生成固定长度的字符串.在网上查了很多资料,网上的方法都比较麻烦.我自己灵光一现,实现了一个比较简单的方法.记录下来,供以后开发时参考,相信对其他人也有用. js生成随机字符串 ...
- 前端开发:mock.js的简单应用(生成随机数据,拦截 Ajax 请求)
摘要 在前端开发过程中,后端接口还没有完全开发完成时,前端开发人员就需要学会自己模拟后端接口数据,更快更好的完成开发任务.模拟后端接口数据的js库有很多,今天就简单就简单的分享下mock.js在前端开 ...
- mockjax MOCK.js的拦截ajax请求
今天看了下 mock.js的拦截请求 .https://github.com/nuysoft/Mock/blob/master/src/mockjax.js //覆盖(拦截) Ajax 请求,目前内置 ...
随机推荐
- hdu 1251 统计拼图
二手tire木: Basic应用程序 谈到很具体的 点击打开链接 #include<cstdio> #include<cstring> #include<iostream ...
- TCP拥塞控制 (1)
Basic: TCP,传输控制协定,它是目前最广泛使用的网络传输协议.SMTP.SSH.FTP.HTTP等因特网底层协议均是TCP. TCP面向连接,提供端到端的数据可靠传输.连接时三次握手.断开是四 ...
- js“分享到”侧边框伸缩实现
思路: 1,临界值是 -150 和 0 如果大于临界值,就要隐藏 2,隐藏:速度为负 显示:速度为正 3,如果与临界值相等,就清空定时器 否则,就运动 ------------------------ ...
- 北邮iptv用WindowsMediaplayer打不开的解决的方法
前言:之前我的iptv能够用,可是有次我安装了realplayer,它就偷偷把iptv文件的默认打开方式给篡改了,卸载了 realplayer之后,iptv不能直接用 ...
- 自定义错误页面mvc用法
原谅我这个新手,对大神们来说这么简单的问题,竟折腾了我一个上午,仅此文章做个记录,供以后备用. 自定义错误页面(custom error pages)在asp.net webform里的配置请看htt ...
- 华为编程大赛汇总----java
以下华为编程比赛题目都是网上整理得到的,代码都是自己调试过的,由于网上java答案较少,欢迎大家批评指正,也希望对准备华为上机的童鞋们有一点点帮助.在练习的过程中成长,加油!~~ 1. ...
- poj 3225 间隙(横截面和填充操作)
http://poj.org/problem?id=3225 一道题又做了一天. .这道题对我来说起初有N多难点. 1:区间的开闭怎样解决. . 2:如何把区间的交并补.对称差转化为对线段树的操作. ...
- Spark里面:获取图Spark有多少行代码
Spark1.0.0公布一个多月,有多少行代码就(Line of Code, LOC)? watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvYW56aHNvZn ...
- 【Android基础】Activity之间进行参数传递的三种方式
1.使用Intent进行传输 //发送数据的Activity class button implements OnClickListener{ @Override public void onClic ...
- V离MWare至Openstack至FDIO
离VMWare至Openstack 至FDIO --软件虚拟化和硬件虚拟化相结合 作者:廖恒 以VMWare为代表的软件虚拟化技术在企业IT中已是耳熟能详的不争现实.据在HPISS任职的好友告知,V ...