Mock擺脫後端拖拉（借鑑官網）（一）

mock是一個模擬數據生成器，旨在幫助前端獨立於後端進行開發，幫助編寫單元測試。mock有以下功能

• 根據數據模板生成模板數據

• 模擬ajax請求，生成請求數據

• 基於html模板生成模擬數據

下載安裝

npm install mockjs 

//使用mock var Mock = require('mockjs'); var mcok = Mock.mock({ ... })

mock的語法

mock的語法規範包含兩層規範

• 數據模板 （DTD）

• 數據佔位符 （DPD）

數據模板DTD

末班規則：‘name|rule’:value

• name：屬性名

• rule：屬性規則

• value：屬性值

屬性名和規則之間用|隔開，規則是能夠選的。 
一共七個rule

1. ‘name|mix-max’:value

2. 'name|count':value

3. 'name|mix-max.dmix-dmax':value

4. 'name|min-max.dcount':value

5. 'name|count.dmin-dmax':value

6. 'name|count.dcount':value

7. 'name|+step':value

生成規則須要根據屬性值的類型才能肯定 
屬性值能夠含有@佔位符 
屬性值還能夠指定最終值的初始值和類型

屬性值是String

var data = Mock.mock({ 'name1|1-3':'a', //重複生成1到3個a 'name2|2':'b' //生成bb })

屬性值是Number

var data = Mock.mock({ 'name1|+1':4, //生成4，若是循環每次加1 ‘name2|1-7':2, //生成一個數字，1到7之間 'name3|1-4.5-8':1 //生成一個小數，整數部分1到4，小數部分5到8位 })

注意第三個是小數點以後的數位範圍，另外其實屬性值是Number的時候，value沒什麼用。

屬性值是Boolean

var data = Mock.mock({
    'name|1':true, //生成一個布爾值，各一半 'name1|1-3':true //1/4是true，3/4是false })

屬性值是Object

var obj = { a:1, b:2, c:3, d:4 } var data = Mock.mock({ 'name|1-3':obj, //隨機從obj中尋找1到3個屬性，新對象 'name|2':obj //隨機從onj中找到兩個屬性，新對象 })

屬性值是Array

var arr = [1,2,3]; var data = Mock.mock({ 'name1|1':arr, //從數組裏隨機取出1個值 'name2|2':arr, //數組重複count次，這裏count爲2 'name3|1-3':arr, //數組重複1到3次 })

屬性值是Function

var fun = function(x){ return x+10; } var data = Mock.mock({ 'name':fun(10) //返回函數的返回值20 })

屬性值爲RegExp

根據正則表達式反向生成對應的字符串，用於生成自定義格式的字符串

var data = Mock.mock({ ‘name1':/[a-z][A-Z]/, 'name2':/\d{1,3}/ })

會根據各自的正則表達式進行適配，而且隨機返回

數據佔位符DPD

關於佔位符，佔位符只是在屬性值是字符串的時候，在字符串裏佔個位置，並不會出如今最終的屬性值中。 
佔位符的格式爲：

@佔位符

關於佔位符須要知道如下幾點

1. 用@標識符標識後面的字符串是佔位符

2. 佔位符的值是從Mock.Random方法中引用的

3. 能夠經過Mock.Random.extend()來擴展自定義佔位符

4. 佔位符能夠引用數據模板中的屬性

5. 佔位符優先引用數據模板中的屬性

6. 佔位符支持相對路徑和決定路徑

var data = Mock.mock({ name:{ name1:'@FIRST', name2:'@LAST' } })

語法大概是這樣，random會重點分析的。

Mock.mock()

這是mock的核心方法，用於生成模擬數據，前邊的例子中咱們都已經見識過了。 
Mock.mock(rurl?,rtype?,template|function(opt))

• rurl:ajax請求的地址

• rtype:ajax請求的類型，如’GET','POST'

• template:數據模板，就是以前那些個例子

• function:生成相應數據的函數

具體的應用狀況在下邊：

1. Mock.mock(template)

2. Mock.mock(rurl,template)，模擬ajax,匹配接收到url的ajax請求，把template對應的數據返回返回

3. Mock.mock(rurl,function(opt)),模擬ajax,會把函數執行的結果做爲ajax回調返回

4. Mock.mock(rurl,rtype,template) 同上，只是對ajax的類型有要求

5. Mock.mock(rurl,rtype,function) 同上

Mock.setup(setting)

配置攔截ajax請求的行爲，支持的配置項有timeout。

Mock.setup({
    timeout:200 }) Mock.setup({ timeout:'200-500 })

這個如今僅用於配置ajax請求，之後可能會擴展

Mock.valid(template,data)

這個函數用來判斷，數據模板和數據是否同樣，

Mock.toJSONShema(template)

var template = Mock.mock({ 'name|1-3':5 }) var tjs = Mock.toJSONSchema(tempalte);

把template風格的模板轉成JSON Schema。具體的結果，本身看吧，不貼了。

---

接下來是最後一個方法

Mock.Random

這是一個工具類，用於生成各類類型的數據。 
Mock.Random的方法在模板數據中被稱爲佔位符，以前說過的

用法示例：

var Random = Mock.Random; var em1 = Mock.email(); var em2 = Mock.mock('@email'); var em3 = Mock.mock({ email:'@email' })

Mock.Random提供的完成方法

Type	Method
Basic	boolean natural integer float character string date datename now
Date	date datetime time now
Image	image dataImage
Color	color hex rgb rgba hsl
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 city county zip
Helper	capitalize upper lower pick shuffle
Miscellaneous	guid id

Basic

Random.boolean(min?max?current?)

隨機生成布爾值

var bool1 = Random.boolean(); //true false各一半 var bool2 = Random.boolean(1,2，false) //1/3的可能性是false 2/3是true

Random.natural(min?,max?)

隨機生成一個天然數，什麼叫天然數，就是大於等於0的

var natural1 = Random.natural(); //默認值最大爲 9007199254740992 var natural2 = Random.natural(4); //隨機出來的最小值是4 var natural3 = Random.natural(6,9);

Random.Integer(min?,max?)

生成一個隨機的整數，能夠是負數。

var integer1 = Random.integer(); var integer2 = Random.integer(-10); //隨機最小值是-10 var integer3 = Random.integer(-10,20);

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

隨機生成一個小數浮點數,四個參數分別爲，整數部分最小值最大值，小數部分最小值最大值。

var float1 = Random.float(); var float2 = Random.float(3,8); var float3 = Random.float(1,3,5,7)

Random.character(pool?)

隨機生成一個字符,pool的值能夠是：

• upper: 26個大寫字母

• lower: 26個小寫字母

• number: 0到9十個數字

• sympol: "!@#$%^&*()[]"

var character1 = Random.character(); var character2 = Random.character('lower'); var character3 = Random.character('upper'); var character4 = Random.character('symbol');

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

隨機生成一個字符串，pool的值同上邊四個。

var str1 = Random.string(); //長度3到7位 var str2 = Random.string(5); //長度5位 var str3 = Random.string('lower',7); //長度7位，小寫 var str4 = Random.string(4,6); //長度4到 var str5 = Random.string('新的字符串會從這裏選擇4到5位',4,6); //從第一個參數裏選擇4到5位

Random.range(start?,stop,step?)

返回一個整型數組

• start,可選，數組起始值，閉區間

• stop,必選，數據結束值，開區間

• step,可選，數據每一項間隔值

var range1 = Random.range(10); //[0,1,2,3,4,5,6,7,8,9] var range2 = Random.range(14,20); //[14,15,16,17,18,19] var range3 = Random.range(3,13,2); //[3,5,7,9,11]

Date

Random.date(format?)

返回一個隨機日期的字符串 
format的格式是‘yyyy-MM-dd’,能夠隨機組合

var date1 = Random.date(); var date2 = Random.date('yyyy-MM-dd'); var date3 = Random.date('y-M-d'); var date4 = Random.date('yy-MM-dd');

Random.time(format?)

返回時間字符串
format的格式是‘HH-mm-ss’

var time1 = Random.time(); var time2 = Random.time('HH-mm-ss'); var time3 = Random.time('J-m-s');

Random.datetime(format?)

上邊兩個的結合版

var dt1 = Random.datetime(); var dt2 = Random.datetime('yyyy-MM-dd HH-mm-ss');

Random.now(unit?,format?)

返回當前時間的字符串

Image

通常狀況下，使用dataImage更好,由於更簡單，可是若是要生成高度自定義的圖片，則最好用image。另外，dataImage生成的是base64編碼

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

• size 圖片寬高，格式是'寬x高'

• background:圖片的背景色，默認值#000000

• foreground：圖片的文字前景色，默認#FFFFFF

• format：圖片的格式，默認'.png'

• text:圖片上的默認文字，默認值爲參數size

其中size的取值範圍是

[
'300x250', '250x250', '240x400', '336x280', '180x150', '720x300', '468x60', '234x60', '88x31', '120x90', '120x60', '120x240', '125x125', '728x90', '160x600', '120x600', '300x600' ] 

圖片的格式能夠選擇.png .gif .jpg

var image1 = Random.image(); var image2 = Random.image('128x90'); var image3 = Random.image('120x660','#ccc'); //前景色#ccc var image4 = Random.image('226x280','#eee','第三個參數是文字不是前景色'); var image5 = Random.image('66x31','#ddd','#123456','四個參數的時候第三個參數是前景色'); var image6 = Random.image('240x400','#333','#1483dc','.gif','所有參數的狀況下'); 

Random.dataImage(size?,text?)

返回一段base64編碼，兩個參數同上。

var di1 = Random.dataImage(); var di2 = Random.datImage('300x600'); var di3 = Random.dataImage('180x150','hahahaha');

Color

Random.color()

有好幾個相關的方法

var color = Random.color(); 格式'#rrggbb' var hex = Random.hex(); //好像和color沒什麼不一樣 var rgb = Random.rgb(); //生成格式如rgb(133,233,244) var rgba = Random.rgba(); //生成個事如rgba(111,222,233,0.5) var hsl = Random.hsl(); //生成格式(345,82,71)

Text

Random.paragraph(in?,max?,len?)

隨機生成一段文本，

var para1 = Random.paragraph(); //隨機生成一短文本，範圍3到7 var para2 = Random.paragraph(10); //隨機生成長度是10的文本 var para3 = Random.paragraph(9,12); //隨機生成9到11位長度的文本

Random.sentence(min?,max?,len?)

隨機生成一個句子，第一個單詞的首字母大寫

var sen1 = Random.sentence(); //默認長度12到18 var sen2 = Random.sentence(10); //隨機生成一個單詞個數爲10的句子 var sen3 = Random.sentence(5,10); //隨機生成一個5到9單詞個數的句子

Random.word(min?,max?,len?)

隨機生成一個單詞

var word1 = Random.word(); //默認長度3到10 var word2 = Random.word(7); //隨機生成長度是7的單詞 var word3 = Random.word(2,12); //隨機生成2到11位長度的單詞

Random.title(min?,max?,len?)

隨機生成一段標題，每一個單詞的首字母大寫

var title1 = Random.title(); //title中的單詞個數 var title2 = Random.title(6); //title六個單詞 var title3 = Random.title(7,12); //title7到11個單詞

另外還有四個方法，四個方法前邊加一個

c,Random.cparagraph, 返回中文文本

Random.csentence, 返回中文句子

Random.cword, 返回中文文字

Random.ctitle. 返回中文標題

Name

var first = Random.first() 隨機生成常見英文名 var last = Random.last() 隨機生成常見英文姓 var name = Random.name() 隨機生成常見英文姓名 var cfirst = Random.cfirst() 隨機生成常見中文姓 var clast = Random.clast() 隨機生成常見中文名 var cname = Random.cname() 隨機生成一個常見中文姓名

Web

Random.url(protocol?,host?)

隨機生成一個url 
protocol可選參數，表示網絡協議，如http。 
host表示域名和端口號

var url1 = Random.url(); var url2 = Random.url('http'); var url3 = Random.url('http','58.com');

Random.protocol()

隨機生成一個域名

var protocol = Random.protocol()

protocol能夠選的值，'http'、'ftp'、'gopher'、'mailto'、'mid'、'cid'、'news'、'nntp'、'prospero'、'telnet'、'rlogin'、'tn3270'、'wais'。

Random.domin()

隨機生成一個域名

Random.tld()

隨機生成一個頂級域名

var domain = Random.domain() var tld = Random.tld()

Random.email(domain?)

隨機生成一個email地址，domain表示域名

var email1 = Random.email(); var email2 = Random.email('58.com') //生成xxxx@58.com

Random.ip()

隨機生成一個ip地址

var ip = Random.ip()

Address

Random.region()

隨機生成一箇中國的大區，如華北，西南

var region = Random.region();

Random.province()

隨機生成一箇中國省直轄市自治區特別行政區

var province = Random.province()

Random.city(prefix?)

隨機生成一箇中國城市，prefix布爾值，表示是否標註所在省

var city1 = Random.city(); var city2 = Random.city(ture);

Random.country(prefix?)

隨機生成一箇中國縣，prefix布爾值，表示是否顯示所屬的省市

var county1 = Random.county(); var county2 = Random.county(ture);

Random.zip()

隨機生成一個六位數郵政編碼

var zip = Random.zip();

Helper

Random.capitlize(word)

把第一個字母轉成大寫

var capitalize = Random.capitalize('hello')

Random.upper(str)

轉成大寫

var upper = Random.upper('zhang');

Random.lower(str)

轉成小寫

var lower = Random.lower('JINGWEI');

Random.pick(arr)

從數組中隨機選取一個元素

var arr = [1,4,5,6,7,8]; var pick = Random.pick(arr);

Random.shuffle(arr);

打亂數組的順序並返回

var arr  = [1,2,3,4,6]; var shuffle = Random.shuffle(arr);

Miscellaneous

Random.guid()

隨機生成一個GUID

Random.id()

隨機生成一個18位身份證id

var guid = Random.guid(); var id = Random.id();

參考文檔

官方網站
github資料
在線測試