[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) ```