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 的语法规范包括两部分:

  1. 数据模板定义规范(Data Template Definition,DTD)
  2. 数据占位符定义规范(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 请求的更多相关文章

  1. 来,我们手写一个简易版的mock.js吧(模拟fetch && Ajax请求)

    预期的mock的使用方式 首先我们从使用的角度出发,思考编码过程 M1. 通过配置文件配置url和response M2. 自动检测环境为开发环境时启动Mock.js M3. mock代码能直接覆盖g ...

  2. JS获取页面数据执行Ajax请求

    下面这个例子展示了如何使用js获取页面中元素的值,并且将这些值作为参数执行Ajax请求. $("#submit-task").bind("click", fun ...

  3. Mock拦截ajax请求

    //mock拦截ajax请求 ,生成随机数据Mock.mock('./servlet/UserServlet?method=getUser',{ 'list|1-5':[{ 'username':'@ ...

  4. 如何用python抓取js生成的数据 - SegmentFault

    如何用python抓取js生成的数据 - SegmentFault 如何用python抓取js生成的数据 1赞 踩 收藏 想写一个爬虫,但是需要抓去的的数据是js生成的,在源代码里看不到,要怎么才能抓 ...

  5. JS 点击元素发ajax请求 打开一个新窗口

    JS 点击元素发ajax请求 打开一个新窗口 经常在项目中会碰到这样的需求,点击某个元素后,需要发ajax请求,请求成功以后,开发需要把链接传给前端(或者说请求成功后打开新窗口),前端需要通过新窗口打 ...

  6. JS生成随机字符串的多种方法

    这篇文章主要介绍了JS生成随机字符串的方法,需要的朋友可以参考下 下面的一段代码,整理电脑时,记录备查. <script language="javascript"> ...

  7. js生成随机固定长度字符串的简便方法

    概述 碰到一个需求:用js生成固定长度的字符串.在网上查了很多资料,网上的方法都比较麻烦.我自己灵光一现,实现了一个比较简单的方法.记录下来,供以后开发时参考,相信对其他人也有用. js生成随机字符串 ...

  8. 前端开发:mock.js的简单应用(生成随机数据,拦截 Ajax 请求)

    摘要 在前端开发过程中,后端接口还没有完全开发完成时,前端开发人员就需要学会自己模拟后端接口数据,更快更好的完成开发任务.模拟后端接口数据的js库有很多,今天就简单就简单的分享下mock.js在前端开 ...

  9. mockjax MOCK.js的拦截ajax请求

    今天看了下 mock.js的拦截请求 .https://github.com/nuysoft/Mock/blob/master/src/mockjax.js //覆盖(拦截) Ajax 请求,目前内置 ...

随机推荐

  1. openstack dhcp调试

    openstack的dhcpserver默认值dnsmasq软件实施,经ps -ef | grep dnsmasq 查看.当虚拟机启动过程启动dhcp求,日志可以是在主机系统日志: May 23 22 ...

  2. C# List使用District去重复数据

    class ListDistinctDemo { static void Main(string[] args) { List<Person> personList = new List& ...

  3. FTP文件操作之删除文件

    上面我已经介绍了利用ftp进行上传跟下载,接下来跟大家分享的是删除ftp服务器上的文件的部分.有了上传,有了下载,那么删除自然也是不能少的. 删除相对于上传跟下载更简单一些,它不需要进行文件的传输,只 ...

  4. 2014年CCNU-ACM暑期集训总结

    2014年CCNU-ACM暑期集训总结 那个本期待已久的暑期集训居然就这种.溜走了.让自己有点措手不及.很多其它的是对自己的疑问.自己是否能在ACM这个领域有所成就.带着这个疑问,先对这个暑假做个总结 ...

  5. cocos2d-x路~使得第一个字游戏(一个)

    前言 去年的回忆.另外,在第三.他们开发了他们的第一场比赛四月,它是游戏.所以我决定走上独立开发的道路上.了.第一款游戏达到它应有的盈利水平.然而这款游戏开发后的时间里.都没再取得还有一款令自己惬意的 ...

  6. Java基金会——JUnit

    JUnit 測试的重要性毋庸质疑.但怎样使測试更加准确和全面.而且独立于项目之外而且避免硬编码,JUnit给了我们一个非常好的解决方式. 能够说JUnit是为单元測试而生的,一个Java语言的单元測试 ...

  7. 【C语言探索之旅】 第一部分第四课第二章:变量的世界之变量声明

    内容简介 1.课程大纲 2.第一部分第四课第二章:变量的世界之变量声明 3.第一部分第四课第三章预告:变量的世界之显示变量内容 课程大纲 我们的课程分为四大部分,每一个部分结束后都会有练习题,并会公布 ...

  8. 未能加载文件或程序集“Common”或它的某一个依赖项。试图加载格式不正确的程序

    原因:操作系统是64位的,但发布的程序引用了一些32位的ddl,所以出现了兼容性的问题解决方案一:如果是64位机器,IIS——应用程序池——高级设置——启用32位应用程序 :true.解决方案二:修改 ...

  9. ListView的操作模式的选择的更详细的解释CHOICE_MODE_MULTIPLE与CHOICE_MODE_MULTIPLE_MODAL

    本文介绍了我们将如何取得具体ListView多选择操作.本文将正确使用ListViewCHOICE_MODE_MULTIPLE要么CHOICE_MODE_MULTIPLE_MODAL时间easy误区. ...

  10. UVA 439 Knight Moves(BFS)

    Knight Moves option=com_onlinejudge&Itemid=8&category=11&page=show_problem&problem=3 ...