Mock.js的使用

p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 17.0px Consolas }
p.p2 { margin: 0.0px 0.0px 0.0px 0.0px; font: 17.0px Consolas; min-height: 20.0px }
span.Apple-tab-span { white-space: pre }

MOCK.js 安装及使用

一、mock.js 简介

生产随机数据,拦截ajax请求。

1、前后端分离:让前端工程师独立于后端进行开发

2、开发无入侵:不需要修改既有代码,就可以拦截Ajax请求,返回模拟的响应数据。

3、数据类型丰富:支持生成随机的文本、数字、布尔值、日期、邮箱、链接、图片、等等

4、增加单元测试的真实性:通过随机数据,模拟各种场景。

5、用法简单:符合直觉的接口

6、方便扩展:支持扩展更多数据类型,支持自定义函数,和正则。

二、mock.js 的下载与安装

  Mock.js 官方网站:http://mock.js.com

  npm 安装

npm install mockjs

或者直接引用在 <script>

三、数据模板格式

“name | rule “: value

“属性名| 生成规则”: 属性值

四、get请求用法

Ajax发起get请求

// 减少代码量使用jquery ajax请求方法

$.ajxa({

url: "http://test.com",

type: "get",

dataType : "json" 

}).done(function (data,status,xhr){

 //JSON.stringfy(value[,replacer[,space]])

 // value 将要序列化成一个JSON字符串的值

 //如果该参数是一个函数,则在序列化的过程中,被序列化的值的每个属性都会经过该函数的转化和处理,如果该参数是一个数组,

 //则只有包含在这个数组中的属性名才会被序列化到最终的字符串参数中,如果该参数的为null或者未提供,则对象所有的属性都会被序列化

 //space(可选)指定缩进的空白字符串,用于美化输出,如果参数没有提供将没有空格

 console.log(JSON.stringify(data,null,4));

})
//Mock.js响应

Mock.mock(‘http://test.com‘,{

 ‘user|1-3‘:[{

  ‘name‘:‘@name‘,//中文名称

  ‘id|+1‘:23, //id 初始值为23自动加1

  ‘age|18-43‘:0,//age 18-43之间的随机书

  ‘birthday‘:‘@date("yyyy-MM-dd")‘,

  ‘city‘:‘@city(true)‘,//中国城市

  ‘color‘:‘@color‘,//16进制颜色

 },{

  ‘gf‘:‘@name‘

 }]

});

生成样式

其中响应时也是可以使用function

Mock.mock(‘http://test.com‘,‘get‘,function() {

 return.Mock({

  "user|1-3": [{

   ‘name‘:‘@name‘,

   ‘id‘:88

  }]

 });

});
//结果:

{

 "user":[

  {

   "name":"徐超",

   "id":88

  }

 ]

}

五、post 请求

Post请求和get请求类似。

六、其他用法与工具

1、自定义响应时间

//设置4秒再响应

Mock.setup({timeout :4000 });

//设置1到4秒间响应

Mock.setup({timeout :‘1000-4000‘ });

2、数据集

Mock.Random 是一个工具类,用于生成各种格式的随机数据。有两种写法:

//生成一个email格式的字符串

console.log(Mock.mock(‘@email‘));

//第二种:

var Random = Mock.random;

console.log(Random.email());

提供的数据类型

如果没有可以自行自定义扩展

Random.extend({

 weekday: function(date) {

  var weekdays = [‘周一‘,‘周二‘,‘周三‘,‘周四‘,‘周五‘];

  return this.pick(weekdays);

 }

});

console.log("输出你看下就知道了");

3、校验

Mock.valid(template, data)

用来校验真实数据data和模板数据template匹配

var tempObj = {

 "user|1-3" : [{‘name‘:‘@name‘,‘id|28-338‘} ]

};

var realData = { "user":[{‘name‘: ‘张三‘,‘id‘:90 }]};

console.log(Mock.valid(tempObj,realData));

4、JSON Schema

Mock.toJSONSchema(template)

用来把Mock.js风格的的数据模板template转换成JSON Schema

时间: 2024-11-05 22:56:13

Mock.js的使用的相关文章

mockjax MOCK.js的拦截ajax请求

今天看了下 mock.js的拦截请求 .https://github.com/nuysoft/Mock/blob/master/src/mockjax.js //覆盖(拦截) Ajax 请求,目前内置支持 jQuery.Zepto.KISSY 拦截请求的前提是基于各类库的 内置方法来进行拦截. 比如jquery. 在$.ajax() 之前 会有一个前置过滤器$.ajaxPrefilter() 先进行处理,然后根据参数的不同来分发请求(模拟或者直接发送请求). 在模拟的时候 可以根据给出的参数 返

mock.js使用总结

基本使用: 1 引入mock.js 2 var data = Mock.mock({ // 属性 list 的值是一个数组,其中含有 1 到 10 个元素 'list|1-10': [{ // 属性 id 是一个自增数,起始值为 1,每次增 1 'id|+1': 1 }] }) // ==> { "list": [ { "id": 1 }, { "id": 2 }, { "id": 3 } ] } 语法说明: 见官方文档

Mock.js 与 fiddler 前端模拟数据与拦截请求

最近 工作需要  接触了Mock.js. Mock.js 是一款模拟数据生成器,旨在帮助前端攻城师独立于后端进行开发,帮助编写单元测试.提供了以下模拟功能: 根据数据模板生成模拟数据 模拟 Ajax 请求,生成并返回模拟数据 基于 HTML 模板生成模拟数据 http://mockjs.com/ 什么入门之类的 看官网就会~~~ Fiddler   web调试利器 便于我们调试前后端数据等. Fiddler是一个web调试代理.它能够记录所有客户端和服务器间的http请求,允许你监视,设置断点,

mock.js的真实数据模拟

哈哈,怎么说,这应该是我的第一个随笔了,毕竟前端之路上一直在学习并且各位大神们的经验,虽然也有不少的坑,但是总是收获比较多,所以我也想把一些收获记录下来,有需要的可以参考参考. 网上看了不少大神很多例子很好,但是介绍模糊,看了不知道具体做法,所以我会介绍的详细一点. 今天是主要分享一下mock.js 的插件,我觉得很不哦错,实用性很强,它可以在后端数据没写好的情况下,模拟真实数据,拦截ajax请求并作出迅速的反馈 mock.js官网上有下载,不过注意下载完以后只需要提取一个有用的js文件就行 然

【mock.js】后端不来过夜半,闲敲mock落灯花 (附Vue + Vuex + mockjs的简单demo)

mock的由来[假] 赵师秀:南宋时期的一位前端工程师 诗词背景:在一个梅雨纷纷的夜晚,正处于项目编码阶段,书童却带来消息:写后端的李秀才在几个时辰前就赶往临安度假去了,!此时手头仅有一个简单的数据接口文档的赵师秀慨叹一声:"好吧,那还是我自己先模拟一下后端的接口吧" _(:3 」∠)_  再后来,就有了那句千古名句啦~~( 为了表示对赵师秀先生的歉意,文末我将附上原文)   如果我说这就是前后端分离思想和mock.js的由来,你会信么?(?´ω`?) mock的由来[真] 我们在Vu

Mock.js简易教程,脱离后端独立开发,实现增删改查功能

在我们的生产实际中,后端的接口往往是较晚才会出来,并且还要写接口文档,于是我们的前端的许多开发都要等到接口给我们才能进行,这样对于我们前端来说显得十分的被动,于是有没有可以制造假数据来模拟后端接口呢,答案是肯定的.应该有人通过编写json文件来模拟后台数据,但是很局限,比如增删改查这些接口怎么实现呢,于是今天我们来介绍一款非常强大的插件Mock.js,可以非常方便的模拟后端的数据,也可以轻松的实现增删改查这些操作. 1.一个简单的例子: Mock.mock('http://123.com',{

使用 mock.js 让前端开发与后端独立

直接上代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="http://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script> <scrip

微信小程序 + mock.js 实现后台模拟及调试

一.创建小程序项目 mock.js 从 https://github.com/nuysoft/Mock/blob/refactoring/dist/mock.js 下载 api.js:配置模拟数据和后台接口数据,通过 DEBUG = true;//切换数据入口 let API_HOST = "http://xxx.com/xxx"; let DEBUG = true;//切换数据入口 var Mock = require('mock.js') function ajax(data =

axios + mock.js模拟数据实现前后端分离开发的实例代码

首先就是必须安装axios和mock.js npm install axios npm install mockjs 1. 然后在文档src中新建一个mock.js文件,如图 2. 在main.js中全局引入axios插件和mock.js文件如图 3. 在组件中用axios获取mock.js文件 4. 在mock.js mockjs的用法可以到官网了解:http://mockjs.com(小生初学mock.js有不当之处请指出) 原文地址:https://www.cnblogs.com/mei1