Mockjs ( 模拟数据 ) 快速入门

// yarn
yarn add mockjs // 注意 js前没有 . 分割

// npm
npm --save-dev mockjs

import { mock Random } from 'mockjs'

const data = mock({
    'name|1': ['Rogan', "Coco", "Park"],
    'age|20-40': 1,
    'date': Random.Date('yyyy-MM-dd'),
    'info': /\w{20, 30}/
})

/* 
    {
        "name": "Park",
        "age": 27,
        "date": "1975-10-04",
        "id": "ERJLRMGD3W"
    }
*/


// 作为mock服务
// mockData.js
mock('url', 'meth', 'template')
mock('/api/user', 'get', {
    "name": Random.cname(),
    'age|10-20': 1
})

// vue 中使用 aixos 调用mock接口
import './mockData.js'

async loadList(){

        let { data } = await http.get('/api/usser')
        this.list = data.list
}

// 基本模式
[属性名称] | [生成规则] : [初始值]/[配置值]/@[属性名]

{ 'age|20-40': 1 }

// 占位符, 表示使用已有结构的数据模式
 @[属性名]
 
 { 
    'fName': Random.first(),
    'lName': Random.last(),
    'fullName': '@fName @lName'
 }

Random.boolean( min?, max?, current? )

Random.boolean() // 50% 几率返回 true / false
Random.boolean( 10, 100, true ) // 10%几率返回true

Random.natural( min?, max?)

// 无取值范围
Random.natural()

// 有取值范围
Random.natural(1, 5)

Random.float( min?, max?, dmin?, dmax? )

// 不带区间
Random.float()

//带区间
Random.float(1,3,4,6)  // 2.5

Random.string( pool?, min?, max? )

// 固定长度
Random.string(2) // ab

// 长度区间
Random.string(2, 10) // aci@

// 根据字符集取值
Random.string("abcdefj", 1, 3) // cdf

Random.time( format? )

Random.time("yyyy-mm-dd hh:mm:ss")  // -> "1971-06-12 04:50:12"

Random.now( unit?, format? )

Random.now("yyyy-mm-dd") // 2019-02-27

Random.dataImage( size?, text? )

Random.dataImage("200x300", "Hello Wolrd") // png格式

Random.image( size?, background?, foreground?, format?, text? )

size: 尺寸 "100*200"
background: 背景色 "#000000"
foregroundv: 前景色 "#FFFFFF"
format: 格式为 png
text: 内容文字 

Random.cparagraph( min?, max? )

Random.ctitle( min?, max? )

Random.cname()

Random.url( protocol?, host? )

Random.url('http') // "http://emcmqmabcd.ne/onfr"

Random.email( domain? )

Random.email('nuysoft.com')
// => "h.pqpneix@nuysoft.com"

Random.province()

Random.city( prefix? )

Random.city()
// => "唐山市"
Random.city(true)
// => "福建省 漳州市"

Random.guid()

Random.id()

Random.increment( step? )

step: 自增步长

// 模式一
mock({

    "users|1-4": [
        {
            "id": Random.id(),
            "name": Random.cname()
        }
    ]
    
})


// 模式二
const user = mock({ 
        "id": Random.id(),
        "name": Random.cname()
})

const users = mock(
    {
        "users|1-4": user
    }
)

/*
    模式一与模式二的区别在于, 
    前者在生成多个数据时, 嵌套内容将多次生成.
    后者嵌套内容只是同一内容的拷贝
*/