mock.js基础教程

开始&安装

# 安装
npm install mockjs

// 使用Mock
const Mock = require('mockjs')
let data = Mock.mock({
    //属性list的值是一个数组，其中含有1到10个元素
    'list|1-10': [{
        //属性 id是一个自增数组，其中含有1-10个元素
        'id|+1': 1
    }]
})
//输出结果
console.log(JSON.stringify(data,null,4))

语法规则

Mock.js的语法规范包括两部分

    1. 数据模板定义规范(Data Template Definition,DTD)
    1. 数据占位符定义规范(Data Placeholder Definition,DPD)

数据模板定义规范DTD

数据模板中的每个属性由3部分构成： 属性名、生成规则、属性值：

//属性名 name
//生成规则 rule
//属性值 value
'name|rule': value

注意：

  • 属性名和生成规则之间竖线|分隔.

  • 生成规则是可选的。

  • 生成规则有7种格式：

    • 'name|min-max': value
    • 'name|count': value
    • 'name|min-max'.dmin-dmax:value
    • 'name|min-max'.dcount:value
    • 'name|count.dmin-dmax':value
    • 'name|count.dcount':value
    • 'name|+step': value

  • 生成规则的含义需要依赖属性值的类型才能确定

  • 数值型含有@占位符。

  • 属性值还制定了最终指的初始值和类型。

生成规则和示例

1.属性值是字符串String

  1. 'name|min-max': string

通过重复string 生成一个字符串，重复次数大于等于min,小于等于max。

  1. 'name|count': string

通过重复string生成一个字符串，重复次数等于count

  1. 'name|min-max.dmin-dmax': number
    生成一个浮点数，整数部分大于min、小于等于max，小鼠部分保留dmin到dmax位。
Mock.mock({
  'number1|1-100.1-10': 1,
  'number2|123.1-10':1,
  'number3|123.3':1,
  'number4|123.10':1.123
})

3.属性值是布尔值Boolean

  1. 'name|1': boolean
    随机生成一个布尔值,值为true的概率是1/2,值为false的概率同样是1/2。
  2. 'name|min-max': value
    随机生成一个布尔值，值为value的概率是min/(min+max)，值为!value的概率是max/(min+max)
    随机生成一个布尔值，值为value的概率是min/(min+max),值为!value的概率max/(min+max)。

4.属性值是对象Object

  1. 'name|count': object
    从属性值object中随机选取count个属性。
  2. 'name|min-max': object
    从属性值object中随机选取min到max个属性。

5.属性值是数组Array

  1. 'name|1': array
    从属性值array中随机选取1个元素，作为最终值。
  2. 'name|+1': array
    从属性值array中顺序选取1个元素，作为最终值。
  3. 'name|min-max': array
    通过重复属性值array生成一个新数组，重复次数大于等于min，小于等于max。
  4. 'name|count': array
    通过重复属性值array生成一个新数组，重复次数为count。

6.属性值的函数Function

  1. 'name': function
    执行函数function,取其返回值作为最终的属性值，函数的上下文为属性name所在的对象

7.属性值是正则表达式RegExp

1.'name': regexp
根据正则表达式regexp反向生成可以匹配它的字符串。用于生成自定义格式的字符串。

Mock.mock({
  'regexp1': /[a-z][A-Z][0-9]/, //pJ7
  'regexp2': /\w\W\s\S\d\D/, //F)\fp1G
  'regexp3': /\d{5.10}/ //5612324
  })

数据占位符定义规范DPD

占位符只是在属性值字符串中占个位置，并不出现在最终的属性值中。
占位符的格式为:

  @ 占位符
  @占位符(参数,[,参数])

注意：

  1. 用@来标识其后的字符串是占位符。
  2. 占位符引用的是Mock.Random中的方法
  3. 通过Mock.Random.extend来扩展自定义占位符。
  4. 占位符也可以引用数组模板中的属性
  5. 占位符会优先引用数据模板中的属性
  6. 占位符支持相对路径和绝对路径。
Mock.mock({
  name: {
    first: '@FIRST', //"Charles"
    middle: '@FIRST', //Brenda
    last: '@LAST', //Lopez
    full: '@first @middle @last' //Charles Brenda Lopez
  }
})

Mock.mock()

Mock.mock(rurl?,rtype?,template|function(options))

根据数据模板生成模拟数据
Mock.mock(template)
根据数据模板生成模拟数据

Mock.mock(rurl,template)
记录数据模板。当拦截到匹配rurl的Ajax请求时，将根据数据模板template生成模拟数据，并作为响应数据返回

Mock.mock(rurl,function(options))
记录用于生成响应数据的函数。当拦截到匹配rurl的Ajax请求时，函数function(options)将被执行，并把执行结果作为响应数据返回

Mock.mock(rurl,function(options))
记录用于生成响应数据的函数。当拦截到匹配rurl的Ajax请求时，函数function将被执行，并把执行结果作为响应数据返回

Mock.mock(rurl,rtype,template)
记录数据模板。当拦截到匹配rurl和rtype的Ajax请求时，将根据数据模板template生成模拟数据，并作为响应式数据返回。

Mock.mock(rurl,rtype,function(options))
记录用于生成响应数据的函数。当拦截到匹配rurl和rtype的Ajax请求时，函数function(options)将被执行，并把执行结果作为响应数据返回

rurl
可选。
表示需要拦截的URL,可以时URL字符串或URL正则。例如/\/domain\/list\.json/、'/domian/list.json'。

rtype
可选。
表示需要拦截的Ajax请求类型。例如GET,POST,PUT,DELETE等。

template
可选。
表示数据模板,可以是对象或字符串。例如{'data|1-10':[{}]} ,@EMAIL。

function(options)
可选。
表示用于生成响应式数据的函数。
options
指向本次请求的Ajax选项集，含url、type和body 三个属性，参见 XMLHttpRequest规范

总1.0开始，Mock.js通过覆盖和模拟原生XMLHttpRequest的行为来拦截Ajax请求，不再依赖于第三方Ajax工具库

Mock.setup()

Mock.setup(settings)

  • Mock.setup(setting)
    配置拦截Ajax请求时的行为。支持的配置相有:timeout.
  • settings
    必选
    配置项集合。

timeout
可选。
执行被拦截的Ajax请求的响应时间,单位是毫秒。值可以是正整数，例如400，表示400毫秒后才会响应内容;也可以是横杠-风格的字符串,例如'200-600'，表示响应时间介于200和600毫秒之间。默认值是'10-100'。

Mock.setup({
    timeout: 400
})

Mock.setup({
    timeout: '200-600'
})

目前，接口Mock.setup(setting)仅用于配置Ajax请求，将来可能用于配置Mock的其他行为。

Mock.Random

Mock.Random是一个工具类，用于生成各种随机数据。

Mock.Random的方法在数据模板中称为【占位符】,书写格式为@占位符(参数[,参数]) 

const Random = Mock.Random
Random.email()
// => "n.clark@miller.io"
Mock.mock('@email')
// => "y.lee@lewis.org"
Mock.mock({email: '@email'})
// => {email:"v.lewis@hall.gov"}

注意

方法

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,cparagtaph,csentence,cword,ctitle
Name first,last,name,cfirst,clast,cname
Web url,domain,email,ip,tId
Address area,region
Helper capitalize,upper,lower,pick,shuffle
Miscellaneous guid,id

<script id="fixPlaceholderLink" type="text/javascript"> ('#fixPlaceholderLink').prev('table') .find('td:nth-child(1)').each(function(index, td) {(td).contents().wrapAll( ('').attr('href', '#' +(td).text()) ) }) .end() .find('td:nth-child(2)').each(function(index, td) { var methods = (td).text().split(' ') var links =() (methods).each(function(mindex, m) { links.push(('').attr('href', '#' + m).text(m)[0] ) if (mindex < methods.length - 1) { links.push( ('').text(', ')[0] ) } })(td).empty().append(links) }) .end() </script>

扩展

Mock.Random中的方法与数据模板的@占位符一一对应，在需要时还可以为Mock.Random扩展方法，然后在数据模板中通过@扩展方法引用，例如:

Random.extend({
   constellation: function(date){
      var constellations = ['白羊座', '金牛座', '双子座', '巨蟹座', '狮子座', '处女座', '天秤座', '天蝎座', '射手座', '摩羯座', '水瓶座', '双鱼座']
      return this.pick(constellations)
    }
})
Random.constellation()
//=>'水瓶座'
Mock.mock('@CONSTELLATION')
//=>"天蝎座"
Mock.mock({
   constellation: '@CONSTELLATION'
})

Mock.valid()

Mock.valid(template,data)

  • Mock.valid(template,data)
    校验真实数据data是否与数据模板template匹配。

template

必选。
表示数据模板，可以是对象或字符串。例如{'list|1-10':[{}]}、@EMAIL。

data

必选。
表示真实数据。

var template = {
   name:'value1'
}
var data = {
   name: 'value2'
}

Mock.valid(template,data)
//=>
[
   {
      "path": [
         "data",
         "name"
      ],
      "type": "value",
      "actual": "value2",
      "expected": "value1",
      "action": "equal to",
      "message": "[VALUE] Expect ROOT.name'value is equal to value1, but is value2"
   }
]

Mock.toJSONSchema()

MocktoJSONSchema(template)

  • Mock.toJSONSchema(template)
    把Mock.js风格的数据模板template转换成JSONSchema

template

必选。
表示数据模板，可以是对象或字符串。例如{'list|1-10':[{}]}、@EMAIL。

var template = {
    'key|1-10': '★'
}
Mock.toJSONSchema(template)
// =>
{
    "name": undefined,
    "path": [
        "ROOT"
    ],
    "type": "object",
    "template": {
        "key|1-10": "★"
    },
    "rule": {},
    "properties": [{
        "name": "key",
        "path": [
            "ROOT",
            "key"
        ],
        "type": "string",
        "template": "★",
        "rule": {
            "parameters": ["key|1-10", "key", null, "1-10", null],
            "range": ["1-10", "1", "10"],
            "min": 1,
            "max": 10,
            "count": 3,
            "decimal": undefined,
            "dmin": undefined,
            "dmax": undefined,
            "dcount": undefined
        }
    }]
}

Json Schema

var template = {
    'list|1-10': [{}]
}

Mock.toJSONSchema(template)
// =>
{
    "name": undefined,
    "path": ["ROOT"],
    "type": "object",
    "template": {
        "list|1-10": [{}]
    },
    "rule": {},
    "properties": [{
        "name": "list",
        "path": ["ROOT", "list"],
        "type": "array",
        "template": [{}],
        "rule": {
            "parameters": ["list|1-10", "list", null, "1-10", null],
            "range": ["1-10", "1", "10"],
            "min": 1,
            "max": 10,
            "count": 6,
            "decimal": undefined,
            "dmin": undefined,
            "dmax": undefined,
            "dcount": undefined
        },
        "items": [{
            "name": 0,
            "path": ["data", "list", 0],
            "type": "object",
            "template": {},
            "rule": {},
            "properties": []
        }]
    }]
}
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容

  • Mock.js 学习笔记
    学习目的 ①开发时，后端还没完成数据输出，前端只好写静态模拟数据。数据牵制与后端，前端页面无法很好的展示，...
    _1633_阅读 10,054评论 0赞 24
  • mock.js
    Mock 安装 生成随机数据，模拟ajax请求 # 安装 npm install mockjs # 引用 impo...
    把我当做一棵树叭阅读 5,123评论 0赞 1
  • 前端扩展 - 优秀的 Mock.js
    前端开发过程中免不了出现等接口的情况，而静态 JSON 不足以体现前端高大上的逼格，是时候拿出 mock.js 了...
    MrWelson阅读 5,789评论 0赞 0
  • Mock 的学习之路（一）
    安装Mock 语法规范 数据模板 数据模板中的每个属性由 3 部分构成：属性名、生成规则、属性值：生成规则 有 7...
    _花阅读 7,484评论 0赞 1
  • mockjs语法
    Mockjs依赖于Node (CommonJS)平台Node.js 是一个基于Chrome JavaScript ...
    _黑与白_阅读 6,476评论 0赞 1

友情链接更多精彩内容