安装mockjs

起步

路径必须是完整的URL

Mock.mock(`${config.baseUrl}/login`, login)
export const login = options => {
  console.log(options)
  return {
    code: 0,
    data: {
      msg: '登录成功'
    }
  }
}
if (process.env.NODE_ENV !== 'production') {
  require('./mocks')
}

路径使用正则表达式,不需要完整路径

Mock.mock(/\/login/, login)

可以直接返回对象

Mock.mock(/\/login/, { code: 0, data: { msg: '登录成功' } })

数据模板

定义:属性名|生成规则:属性值

示例代码

String

'name|min-max': string

Mock.mock({
  "string|1-10": ""
})

'name|count': string

"string|3": "★★★"

Number

'name|+1': number

"number|+1": 202

'name|min-max': number

"number|1-100": 100

'name|min-max.dmin-dmax': number

"number|1-100.1-10": 1
"number|123.10": 1.123

Boolean

'name|1': boolean

"boolean|1": true

Object

'name|count': object

"object|2": {
    "310000": "上海市",
    "320000": "江苏省",
    "330000": "浙江省",
    "340000": "安徽省"
  }

'name|min-max': object

 "object|2-4": {
    "110000": "北京市",
    "120000": "天津市",
    "130000": "河北省",
    "140000": "山西省"
  }

Array

'name|1': array

'name|+1': array

'name|min-max': array

区别:'name|1'是随机选中一个值,'name|+1'是顺序选中一个值

"array|1-10": [
    {
      "name|+1": [
        "Hello",
        "Mock.js",
        "!"
      ]
    }
  ]

Function

'name': function

'foo': 'Syntax Demo',
  'name': function() {
    return this.foo
  }

RegExp

'name':'regexp

'regexp': /[a-z][A-Z][0-9]/

setup

模拟5000ms延迟

Mock.setup({ timeout: 5000 })

数据占位符定义

Basic

// Random.boolean()
Random.boolean()
Mock.mock('@boolean')
Mock.mock('@boolean()')

// Random.boolean( min, max, current )
Random.boolean(1, 9, true)
Mock.mock('@boolean(1, 9, true)')
// Random.natural( min, max )
Random.natural(60, 100)
Mock.mock('@natural(60, 100)')
// Random.integer( min, max )
Random.integer(60, 100)
Mock.mock('@integer(60, 100)')
// Random.float( min, max, dmin )
Random.float(60, 100, 3)
Mock.mock('@float(60, 100, 3)')

// Random.float( min, max, dmin, dmax )
Random.float(60, 100, 3, 5)
Mock.mock('@float(60, 100, 3, 5)')
// Random.character( 'lower/upper/number/symbol' )
Random.character('lower')
Random.character('upper')
Random.character('number')
Random.character('symbol')

Mock.mock('@character("lower")')
Mock.mock('@character("upper")')
Mock.mock('@character("number")')
Mock.mock('@character("symbol")')

// Random.character( pool )
Random.character('aeiou')
Mock.mock('@character("aeiou")')
View Code
// Random.string()
Random.string()
Mock.mock('@string')
Mock.mock('@string()')

// Random.string( length )
Random.string(5)
Mock.mock('@string(5)')

// Random.string( pool, length )
Random.string('lower', 5)
Random.string('upper', 5)
Random.string('number', 5)
Random.string('symbol', 5)
Random.string('aeiou', 5)

Mock.mock('@string("lower", 5)')
Mock.mock('@string("upper", 5)')
Mock.mock('@string("number", 5)')
Mock.mock('@string("symbol", 5)')
Mock.mock('@string("aeiou", 5)')

// Random.string( min, max )
Random.string(7, 10)
Mock.mock('@string(7, 10)')

// Random.string( pool, min, max )
Random.string('lower', 1, 3)
Random.string('upper', 1, 3)
Random.string('number', 1, 3)
Random.string('symbol', 1, 3)
Random.string('aeiou', 1, 3)

Mock.mock('@string("lower", 1, 3)')
Mock.mock('@string("upper", 1, 3)')
Mock.mock('@string("number", 1, 3)')
Mock.mock('@string("symbol", 1, 3)')
Mock.mock('@string("aeiou", 1, 3)')
View Code
// Random.range( start, stop, step )
Random.range(1, 10, 2)
Random.range(1, 10, 3)

Mock.mock('@range(1, 10, 2)')
Mock.mock('@range(1, 10, 3)')

Date

// Random.date()
Random.date()
Mock.mock('@date')
Mock.mock('@date()')

// Random.date( format )
Random.date('yyyy-MM-dd')
Random.date('yy-MM-dd')
Random.date('y-MM-dd')
Random.date('y-M-d')

Mock.mock('@date("yyyy-MM-dd")')
Mock.mock('@date("yy-MM-dd")')
Mock.mock('@date("y-MM-dd")')
Mock.mock('@date("y-M-d")')

Mock.mock('@date("yyyy yy y MM M dd d")')
View Code

Image

// Random.image()
Random.image()
// Random.image( size )
Random.image('200x100')
// Random.image( size, background )
Random.image('200x100', '#FF6600')
// Random.image( size, background, text )
Random.image('200x100', '#4A7BF7', 'Hello')
// Random.image( size, background, foreground, text )
Random.image('200x100', '#50B347', '#FFF', 'Mock.js')
// Random.image( size, background, foreground, format, text )
Random.image('200x100', '#894FC4', '#FFF', 'png', '!')

dataImage

// Random.dataImage( size, text )
Random.dataImage('200x100', 'Hello Mock.js!')

Color

// Random.color()
Random.color()
Mock.mock('@color')
Mock.mock('@color()')

Text

// Random.paragraph( min, max )
Random.paragraph(1, 3)

Mock.mock('@paragraph(1, 3)')

 

 

 

 

 

posted on 2019-05-04 15:03  苏荷酒吧  阅读(370)  评论(0编辑  收藏  举报