[TOC] > [github](https://github.com/nuysoft/Mock/wiki/Getting-Started) ## 概述 ### node ``` npm install mockjs // 使用 Mock var Mock = require('mockjs') var data = Mock.mock({ // 属性 list 的值是一个数组，其中含有 1 到 10 个元素 'list|1-10': [{ // 属性 id 是一个自增数，起始值为 1，每次增 1 'id|+1': 1 }] }) // 输出结果 console.log(JSON.stringify(data, null, 4)) ``` 结果 ``` // ==> { "list": [ { "id": 1 }, { "id": 2 }, { "id": 3 } ... ] } ``` ### Bower ``` npm install -g bower bower install --save mockjs <script type="text/javascript" src="./bower_components/mockjs/dist/mock.js"></script> ``` ### RequireJS (AMD) ``` // 配置 Mock 路径 require.config({ paths: { mock: 'http://mockjs.com/dist/mock' } }) // 加载 Mock require(['mock'], function(Mock){ // 使用 Mock var data = Mock.mock({ 'list|1-10': [{ 'id|+1': 1 }] }) // 输出结果 document.body.innerHTML += '<pre>' + JSON.stringify(data, null, 4) + '</pre>' }) ``` ## 语法规范 ### 字符串 ``` '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 位 ``` demo ``` Mock.mock({ 'number1|1-100.1-10': 1, 'number2|123.1-10': 1, 'number3|123.3': 1, 'number4|123.10': 1.123 }) // => { "number1": 12.92, "number2": 123.51, "number3": 123.777, "number4": 123.1231091814 } ``` ### 布尔型 ``` 'name|1': boolean 随机生成一个布尔值，值为 true 的概率是 1/2，值为 false 的概率同样是 1/2。 'name|min-max': value 随机生成一个布尔值，值为 value 的概率是 min / (min + max)，值为 !value 的概率是 max / (min + max) ``` ### 对象 ``` 'name|count': object 从属性值 object 中随机选取 count 个属性 'name|min-max': object 从属性值 object 中随机选取 min 到 max 个属性 ``` demo ``` var data = Mock.mock( { 'name|1-2':{ "aaa":"AAA", "bbb":"BBB", } }) //{"name":{"aaa":"AAA"}} ``` ### 数组 ``` 'name|1': array 从属性值 array 中随机选取 1 个元素，作为最终值。 'name|+1': array 从属性值 array 中顺序选取 1 个元素，作为最终值。 'name|min-max': array 通过重复属性值 array 生成一个新数组，重复次数大于等于 min，小于等于 max。 'name|count': array 通过重复属性值 array 生成一个新数组，重复次数为 count。 ``` ### 函数 ``` 'name': function 执行函数 function，取其返回值作为最终的属性值，函数的上下文为属性 'name' 所在的对象 ``` ### 正则表达式 ``` 'name': regexp 根据正则表达式 regexp 反向生成可以匹配它的字符串。用于生成自定义格式的字符串。 Mock.mock({ 'regexp1': /[a-z][A-Z][0-9]/, 'regexp2': /\w\W\s\S\d\D/, 'regexp3': /\d{5,10}/ }) { "regexp1": "pJ7", "regexp2": "F)\fp1G", "regexp3": "561659409" } ``` ## Mock.Random 占位符 ``` var 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" } ``` ### 扩展 ``` var Mock = require('mockjs') var Random = Mock.Random Random.extend({ constellation: function(date) { var constellations = ['白羊座', '金牛座', '双子座', '巨蟹座', '狮子座', '处女座', '天秤座', '天蝎座', '射手座', '摩羯座', '水瓶座', '双鱼座'] return this.pick(constellations) } }) Random.constellation() // => "水瓶座" Mock.mock('@CONSTELLATION') // => "天蝎座" Mock.mock({ constellation: '@CONSTELLATION' // => { constellation: "射手座" } }) ``` ### 占位符类型 | 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 | 占位符的用法 demo ``` Random.float) // => "6660628374798240" Mock.mock('@float') // => "6660628374798240座" Mock.mock({ float: '@float' // => { float: "6660628374798240" } }) ``` ### 接口demo ``` Random.integer(1,100) //1-100 的值 Random.boolean() //随机布尔值 Random.color() //#f2b679 Random.rgb() //rgb(242, 174, 121) Random.image( '300x250') // https://dummyimage.com/120x600 一张图片url Random.string( 'upper', 5 ) //大写的 5个字母 Random.date('yyyy-MM-dd') Random.datetime('yyyy-MM-dd HH:mm:ss') //1972-12-05 00:32:01 Random.now('yyyy-MM-dd HH:mm:ss') //当前时间 2019-10-08 15:12:54 Random.paragraph(10,100) //10-100 长度的英文 Random.cparagraph(10,100) //10-100 长度的中文 Random.name(true) //true 带中间名 的英文名 Random.cname() //中文名 Random.url('http') //指定协议为 http 的url Random.domain() //生成一个域名 Random.email() //生成一个邮箱 Random.ip() //生成一个ip 200.213.119.114 Random.province() //生成一个省份 河北省 Random.city(true) //生成一个省份城市名 台湾 连江县 Random.city() //生成一个城市名 龙岩市 Random.zip() //生成一个邮政编码 368136 Random.guid() //生成一个guid "662C63B4-FD43-66F4-3328-C54E3FF0D56E" Random.id() //生成一个id 生成身份证 "420000200710091854" ``` ## 接口 ### Mock.mock() 格式 :`Mock.mock( rurl?, rtype?, template|function( options ) ) ` ``` var template = { 'title': 'Syntax Demo', 'string1|1-10': '★', 'string2|3': 'value', 'number1|+1': 100, 'number2|1-100': 100, 'number3|1-100.1-10': 1, 'number4|123.1-10': 1, 'number5|123.3': 1, 'number6|123.10': 1.123, 'boolean1|1': true, 'boolean2|1-2': true, 'object1|2-4': { '110000': '北京市', '120000': '天津市', '130000': '河北省', '140000': '山西省' }, 'object2|2': { '310000': '上海市', '320000': '江苏省', '330000': '浙江省', '340000': '安徽省' }, 'array1|1': ['AMD', 'CMD', 'KMD', 'UMD'], 'array2|1-10': ['Mock.js'], 'array3|3': ['Mock.js'], 'function': function() { return this.title } } var data = Mock.mock(template) ```