mock.js的基本使用

mock.js用于拦截Ajax请求，产生随机数据并返回

引入

npm install mockjs//安装

import Mock from 'mockjs'//引入

基本使用

//根据数据模板生成模拟数据
//Mock.mock( template )
let data=Mock.mock({'evaluate|1-5': '★'})// { evaluate: "★★★" }
//data=> { evaluate: "★★★" }


/**
 * 拦截相应 url 的 Ajax 请求时，并根据数据模板生成模拟数据，
 *并作为响应数据返回。
 */

//Mock.mock( url, template )
Mock.mock('/api/evaluate', {
  'evaluate|1-5': '★'
})


//Mock.mock( url, function( config) )
Mock.mock('/api/evaluate', config => {
  return {'evaluate|1-5': '★'}
})//当匹配后执行一个函数


//Mock.mock( url, type, template )
Mock.mock('/api/evaluate', 'post', {
  'evaluate|1-5': '★'
})//拦截post请求


//Mock.mock( url, type, function( config ) )
Mock.mock('/api/evaluate', 'post', config => {
  return {'evaluate|1-5': '★'}
})//当匹配后执行一个函数

配置拦截 Ajax 请求时的行为

//指定被拦截的 Ajax 请求的响应时间，单位是毫秒
Mock.setup({
    timeout: 400//表示 400 毫秒 后才会返回响应内容；
})
Mock.setup({
    timeout: '200-600'//表示响应时间介于 200 和 600 毫秒之间
})
//默认值是'10-100'

数据模板定义规范

数据模板定义规范
	'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

常用规则
'name|min-max': string
//通过重复 string 生成一个字符串，重复次数大于等于 min，小于等于 max

'name|count': string
//通过重复 string 生成一个字符串，重复次数等于 count

'name|+1': number
//属性值自动加 1，初始值为 number

'name|min-max': number
//生成一个大于等于 min、小于等于 max 的整数，属性值 number 只是用来确定类型

'name|min-max.dmin-dmax': number
//生成一个浮点数，整数部分大于等于 min、小于等于 max，小数部分保留 dmin 到 dmax 位

数据占位符定义规范 官网示例

数据占位符定义规范
	用 @ 来标识其后的字符串是 占位符
	占位符 引用的是 Mock.Random 中的方法
	通过 Mock.Random.extend() 来扩展自定义占位符

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

Mock.mock({
  first: '@FIRST',
  middle: '@FIRST',
  last: '@LAST',
  full: '@first @middle @last'
})
//输出
{
  'first': 'Charles',
  'middle': 'Brenda',
  'last': 'Lopez',
  'full': 'Charles Brenda Lopez'
}

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.Random.extend({
    constellation: function(date) {
        let constellations = ['白羊座', '金牛座', '双子座', '巨蟹座', '狮子座', '处女座', '天秤座', '天蝎座', '射手座', '摩羯座', '水瓶座', '双鱼座']
        return this.pick(constellations)
    }
})

//在数据模板中通过 @扩展方法 引用
Mock.Random.constellation()//水瓶座

Mock.mock('@CONSTELLATION')//天蝎座

Mock.mock({
    constellation: '@CONSTELLATION'
})// { constellation: "射手座" }

官方教程