Mock.js新手教程

1.什么是Mock.js?

  生成随机数据,拦截 Ajax 请求。
  通过随机数据,模拟各种场景;不需要修改既有代码,就可以拦截 Ajax 请求,返回模拟的响应数据;支持生成随机的文本、数字、布尔值、日期、邮箱、链接、图片、颜色等;支持支持扩展更多数据类型,支持自定义函数和正则。
  优点是非常简单方便, 无侵入性, 基本覆盖常用的接口数据类型。

2.安装

  使用npm安装:

npm install mockjs

  或直接:

<script src="http://mockjs.com/dist/mock.js"></script>

3.使用方式

1-基本语法

Mock.mock('地址',{ "dataname|rule":{"对应的值"} }) 

  说明:地址就是我们通过ajax获取数据时候填写的地址,这里填写的地址可以是任意不存在的地址,第二个参数是我们要模拟的数据,以及相应的规则。

2-语法规则

  参照官网实例即可:
  示例:

Mock.mock('https://www.test.com',{
      "userInfo|4":[{    //生成|num个如下格式名字的数据
      "id|+1":1,  //数字从当前数开始后续依次加一
      "name":"@cname",    //名字为随机中文名字
      "ago|18-28":25,    //年龄为18-28之间的随机数字
      "sex|1":["男","女"],    //性别是数组中的一个,随机的
      "job|1":["web","UI","python","php"]    //工作是数组中的一个
      }]
})

  最后通过ajax接收数据,形式如下:

//ajax接收数据,通过jq
$.get('https://www.test.com',function(data){
    console.log(JSON.parse(data));
})

  最终生成的数据为:


  注意:对于通过Random属性而来的一些随机数据-比如随机生成图片,使用方式如下。

Mock.mock('http://www.test.com',{
    "ListInfo|5":[{
      "img":Mock.Random.image('200x100')
    }]
});
//这里的图片数据就是随机生成的,只是大小被指定为200X100了
  • 3
    点赞
  • 16
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值