Mockjs ( 模拟数据 ) 快速入门

mockjs

根据规则生成随机数据, 通过拦截ajax 请求实现 模拟前端数据接口

安装

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

// npm
npm --save-dev mockjs

主要模块

• mock
  根据数据模板生成对应的随机数据

• Random
  工具函数, 调用具体的类型函数生成对应的数据

• valid
  检验数据是否与数据规则匹配

• toJSONSchema
  以 JSON Schanma 风格输出数据模板

语法

使用例子

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
}

作为mock 服务时, 是通过拦截浏览器的ajax请求实现的， 所以无法在node内通过 aixos 访问mock服务数据, mock数据的生成不受限制

基本模式

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

{ 'age|20-40': 1 }

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

使用

官方完整例子

官方例子已经很清晰， 查看础例子，参照写就没问题，数组重复数据的地方需要多尝试

Random 常用方法

• ==boolean== 随机布尔值

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

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

• ==natural== 随机正整数

Random.natural( min?, max?)

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

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

• ==float== 随机浮点数

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

// 不带区间
Random.float()

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

• ==string== 随机字符串

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

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

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

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

• ==time== 获取时间

Random.time( format? )

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

• ==new== 获取当前时间

Random.now( unit?, format? )

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

• ==dataImage== 随机Base64图片

Random.dataImage( size?, text? )

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

• ==image== 获取定制图片地址

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

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

• ==cparagraph== 随机中文文本

Random.cparagraph( min?, max? )

• ==ctitle== 随机中文标题

Random.ctitle( min?, max? )

对于文字类接口，存在英文版和中文版[c 开头], 例如：title(英文标题) ctitle(中文标题)

• ==cname== 获取中文名称

Random.cname()

• ==url== 链接地址

Random.url( protocol?, host? )

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

• ==email== 邮箱地址

Random.email( domain? )

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

• ==province== 省

Random.province()

• ==city== 市

Random.city( prefix? )

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

• ==guid== guid token

Random.guid()

• ==id== 身份证

Random.id()

• ==increment== 自增数

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
    }
)

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