Mock.js前端模拟数据

89 阅读1分钟

一、mockjs介绍

mockjs可以生成随机数据,模拟原生 XMLHttpRequest 的行为拦截 Ajax 请求,实现前后端分离。

二、安装

1.如果项目已经用webpack打包了,直接使用nodejs(CommonJS)的方式安装:


npm install mockjs

2.如果是想在js文件中测试,可以使用nodejs提供依赖包的方式:

npm install mockjs --save -dev

三、使用方式

Mock.mock有四个参数:

1.rurl(可选,AJAX请求要拦截的url地址,可以是字符串或者正则)

2.rtype(可选,要拦截的请求类型,get,post等)

3.templete(要mock的数据模板,和function可替换,可以是对象或字符串)

4.function(当拦截了AJAX请求之后,执行function,并把执行结果作为响应数据返回)

Mock.mock(
    rurl(option) rtype(option) (templete){'name|rule':value} function(option)
)

四、模板(templete)规则

数据模板中每个属性由三部分构成:

  • 名字(name)可以自己设定要生成的名字
  • 属性值(value) 覆盖了JS的数据类型以及Data,Color,Adress等类型

详见:mockjs.com/examples.ht…

  • 生成规则(rule) 有7种格式(以Number类型为例)

    • 'name|min-max': value 如:number|1-10,随机生成长度为1-10的对应数据,value此时仅用来确定
    • 'name|count': value 如:3 生成3,生成确定的数字
    • 'name|min-max.dmin-dmax': value 如:1-100.1-10 生成23.23214,前面的是整数,后面是小数的位数
    • 'name|min-max.dcount': value 如:1-10.3 生成22.933,前面是整数,后面是3位随机小数
    • 'name|count.dmin-dmax': value 如:3.1-10
    • 'name|count.dcount': value 如:4.2
    • 'name|+step': value 如:"number|+1": 202 生成 203或402或1230 属性值自动加1,加1的个数随机