一個移動開發者的Mock數據之路

一個移動開發者的Mock數據之路

1、始由

    在前端開發中，很大一部分工做都是將後臺數據獲取到後展現在前端界面上。若是接口是現成的，這個過程還相對容易一些，可是若是接口的開發和前端開發是同時進行的，在僅僅有接口文檔並沒有測試環境的狀況下，前端開發者就要痛苦了，所得非所見的盲寫方式不但效率低下，也有很大的遺漏風險。若是咱們有辦法本身根據接口文檔模擬這些數據，那開發過程當中的體驗就會好不少了。幸運的是，經過node.js，express和mock.js，咱們能夠很是容易的進行數據Mock。

2、準備工做

    1.node.js

    首先你須要安裝node.js，node.js是一個JavaScript運行環境，在其官網能夠十分方便的進行下載安裝：http://nodejs.cn/。

    2.express

    express是一個基於Node平臺的Web開發框架，使用它能夠十分方便的搭建本地的web服務，用來部署咱們的Mock數據，express能夠經過npm來進行安裝，官網以下：http://www.expressjs.com.cn/。其中的詳細的安裝方法。

    3.mock.js

    mock.js是一個模擬數據結構，生成隨機數據的js庫。其有一套語法規則用來模擬結構和生成數據。其官網以下，安裝過程也十分簡單：http://mockjs.com/。

3、Mock.js語法規則及範例

    對於Mock數據，最重要的是掌握和靈活運用Mock.js的語法規則，可以熟練的編寫出Mock數據結構必備的技能。在Mock.js中，語法規則主要分爲兩塊：數據模板和數據佔位符。

1.數據模板

    數據版本主要的做用是用來生成數據結構。數據模板的組成由以下三部分：屬性名，生成規則和屬性值。在語法上的結構以下：

屬性名|生成規則:屬性值

    最簡單的數據模板是不使用生成規則，直接用字面量來表示，代碼以下：

{
name:'琿少'
}

生成的mock數據以下所示：

對於模擬字符串類型的數據，有兩種模板能夠定義：

模板1：'屬性名|min-max':屬性值 

經過重複一個字符串min到max次之間來生成數據。示例：

{
'name|1-10':'琿少'
}

生成的mock數據以下：

模板2：'屬性名|count':屬性值

經過重複一個字符串count次來生成數據。示例：

{
'name|1-10':'琿少',
'moreName|10':'琿少'
}

生成數據以下圖所示：

    對於模擬數值類型的數據，有3種模板能夠定義：

模板1：'屬性名|+1':屬性值

屬性值自動自增，示例以下：

{
'array|1-10':[
    {
        'name|1-10':'琿少',
        'moreName|10':'琿少',
        'id|+1':0
    }
]
}

生成數據以下圖所示：

模板2：'屬性名|min-max':屬性值

生成在min到max之間的整數，代碼以下：

{
'array|1-5':[
    {
        'name|1-10':'琿少',
        'moreName|10':'琿少',
        'id|+1':0,
        'age|20-25':20
    }
]
}

效果以下圖所示：

模板3：'屬性名|min-max.dmin-dmax':屬性值

生成浮點數，整數部分在min到max之間，小數部分保留dmin到dmax位，示例以下：

{
'array|1-5':[
    {
        'name|1-10':'琿少',
        'moreName|10':'琿少',
        'id|+1':0,
        'age|20-25':20,
        'weight|60-70.1-4':60
    }
]
}

生成數據以下：

    對於模擬布爾類型的數據，有兩種模板能夠定義：

模板1：'屬性名|1':屬性值

隨機生成一個布爾值，例如：

{
'array|1-5':[
    {
        'name|1-10':'琿少',
        'moreName|10':'琿少',
        'id|+1':0,
        'age|20-25':20,
        'weight|60-70.1-4':60,
        'isWiner|1':true
    }
]
}

生成的數據以下：

模板2：'屬性名|min-max':屬性值

隨機生成一個布爾值，值和屬性值相同的機率爲min/(min+max)，值與屬性值不一樣的機率爲max/(min+max)。

    對於模擬對象類型的數據，有兩種模板能夠定義：

模板1：'屬性名|count':屬性值

最終生成的對象的屬性爲從屬性值中隨機取count個屬性，例如：

{
'array|1-5':[
    {
        'name|1-10':'琿少',
        'moreName|10':'琿少',
        'id|+1':0,
        'age|20-25':20,
        'weight|60-70.1-4':60,
        'isWiner|1':true,
        'job|3':{
              num:1234,
              address:'xxxxx',
              phone:12321,
              name:'cjj'
        }
    }
]
}

生成的數據以下：

模板2：'屬性名|min-max':屬性值

從屬性值的屬性中隨機取min到max個做爲最終生成的對象屬性。

    對於模擬數組類型的數據，有4種模板能夠定義：

模板1：'屬性名|1':屬性值

從屬性值數組中隨機取1個值做爲最終值。

模板2：'屬性名|+1':屬性值

從屬性值數組中依次取1個值做爲最終值。

模板3：'屬性名|min-max':屬性值

經過重複min到max此屬性值生成一個數組。

模板4：'屬性名|count':屬性值

經過重複count此屬性值生成數組。

    除了上面列舉的建立模板的方式外，還可使用函數值和正則表達式值做爲模板，若是是函數，則生成的值爲函數的返回值，若是是正則表達式，則生成的值爲可匹配的字符串。

2.數據佔位符

    數據佔位符實際上就是指定生成的隨機數據，它和Mock.Random庫中的生成隨機數據方法一一對應，其能夠模擬郵箱地址，電話號，姓名，行段等各類數據。數據佔位符格式以下：

@方法名 或 @方法名(參數)

模擬布爾類型數據：

1.無參：boolean隨機返回一個布爾值，示例以下：

{
'array|1-5':[
    {
        'name|1-10':'琿少',
        'moreName|10':'琿少',
        'id|+1':0,
        'age|20-25':20,
        'weight|60-70.1-4':60,
        'isWiner|1':'@boolean',
        'job|3':{
              num:1234,
              address:'xxxxx',
              phone:12321,
              name:'cjj'
        }
    }
]
}

2.有參：boolean(min,max,current)，指定current出現的機率。

模擬隨機天然數：

1.無參：natural隨機返回一個大於等於0的整數，示例以下：

{
'array|1-5':[
    {
        'name|1-10':'琿少',
        'moreName|10':'琿少',
        'id|+1':0,
        'age|20-25':20,
        'weight|60-70.1-4':60,
        'isWiner|1':'@boolean',
        'job|3':{
              num:'@natural',
              address:'xxxxx',
              phone:12321,
              name:'cjj'
        }
    }
]
}

生成數據以下：

2.有參數：natural(nim,max)，隨機生成一個在min與max之間的天然數。

模擬隨機整數：

1.無參：integer隨機生成一個整數。

2.有參：interger(min,max)，隨機生成一個在min到max之間的整數。

模擬隨機浮點數：

1.無參：float隨機生成一個浮點數。

2.有參：float(min,max,dmin,dmax)，隨機生成一個整數部分在min到max之間，小數位數爲dmin到dmax之間的浮點數。

模擬隨機字符：

1.無參：character隨機生成一個字符。

2.有參：character(cs),cs爲一個字符串，生成的字符從cs字符串中任取一個，若是傳入的cs字符串爲一下其中之一，則表示從內置字符集中選：

lower：小寫字母

upper：大寫字符

number：數值字符

symbol：系統字符

模擬隨機字符串：

1.無參：string隨機生成一個字符串。

2.有參：

格式1：string(length)生成指定長度的字符串。

格式2：string(cs,length)從cs字符池中生成指定長度字符串。

格式3：string(min,max)生成長度在min到max之間的字符串。

格式4：string(cs,min,max)從cs字符集中生成長度在min到max之間的字符串。

模擬整型數組：

有參：

格式1：range(stop)生成一個整型數組，stop爲數組中的數值結束邊界。

格式2：range(start,stop)start爲數值的起始邊界，stop爲數組中的數值結束邊界。

格式3：range(start,stop,step)start爲數值的起始邊界，stop爲數值的結束邊界，step爲步長。

示例：

{
'array|1-5':[
    {
        'name|1-10':'琿少',
        'moreName|10':'琿少',
        'id|+1':0,
        'age|20-25':20,
        'weight|60-70.1-4':60,
        'isWiner|1':'@boolean',
        'job|3':{
              num:'@natural',
              address:'xxxxx',
              phone:12321,
              name:'@string(3)'
        },
        node:'@range(3,5,1)'
    }
]
}

模擬日期字符串：

1.無參：date隨機生成一個日期字符串。

2.有參：date(format)format用來設置如期字符串的格式，例如：

{
    'data|3-5':[
     {
        time:'@date',
        ctime:'@date(yyyy-MM-dd HH-mm-ss A)'
     }
    ]
}

生成數據以下：

模擬時間字符串：

1.無參：time直接生成一個時間字符串。

2.有參：time(format)生成格式化的時間字符串。

模擬日期時間字符串：

1.無參：detetime生成默認格式的日期時間字符串。

2.有參：datetime(format)生成指定格式的日期時間字符串。

模擬當前日期字符串：

1.無參：now生成當前日期時間字符串。

2.有參：

格式1：now(unit,format)，unit設置時間單位，format設置格式化方式。時間單位可選：year，month，week，day，hour，minute，second。

格式2：now(format)

格式3：now（unit）

模擬圖片素材：

1.無參：iamge隨機生成一個尺寸的圖片地址，此地址能夠直接請求到圖像。例如：

{
    'data|3-5':[
     {
        time:'@date',
        expriseTime:'@datetime',
        image:'@image' 
    }
    ]
}

生成數據以下：

2.有參：

格式1：image(size,background,foreground,format,text)，size指定圖片的尺寸，格式爲300x250，background指定圖片的背景色，foreground指定圖片的前景色，format指定圖片的格式，可選png、gif、jpg，text參數指定圖片上的文字。

格式2：image(size)

格式3：image(size,background)

格式4：image(size,background,foreground)

格式5：image(size,background,foreground,text)

模擬圖片二進制素材數據：

1.無參：dataImage生成隨機的base64圖像編碼。

2.有參：

格式1：dataImage(size,text)，size參數這是圖片尺寸，text參數設置圖片上的文字。

格式2：dataImage(size)

模擬顏色字符串的相關佔位符：

1.color：隨機生成格式爲「#rrggbb」的顏色。

2.hex：隨機生成格式爲「#rrggbb」的顏色值。

3.rgb：隨機生成格式爲「rgb(r,g,b)」的顏色值。

4.rgba：隨機生成格式爲「rgba(r,g,b,a)」的顏色值。

5.hsl：隨機生成格式爲「hsl(h,s,l)」的顏色值。

模擬英文文本段落：

1.無參：paragraph隨機生成一段文本。

2.有參：

格式1：paragraph(min,max)隨機生成一段文本，句子個數在min於max之間。

格式2：paragraph(len)隨機生成一段文本，len設置句子個數，示例以下：

{
    'data|3-5':[
     {
        time:'@date',
        expriseTime:'@datetime',
        image:'@image("300x250","#222312","#f1f2f3","jpg","image")' ,
        content:'@paragraph(1,3)'
    }
    ]
}

生成的隨機數據以下：

模擬中文文本段落：

1.無參：cparagraph隨機生成中文段落

2.有參：

格式1：cparagraph(min,max)

格式2：cparagraph(len)

模擬英文句子：

1.無參：sentence隨機生成一句文本，首字母會大寫。

2.有參：

格式1：sentence(min,max)，隨機生成一句文本，文本中單詞個數爲min到max之間。

格式2：sentence(len)，隨機生成一句文本，文本中單詞個數爲len。

模擬中文句子：

1.無參：csentence隨機生成一句中文文本。

2.有參：

格式1：csentence(min,max)

格式2：csentence(len)

模擬英文單詞：

1.無參：word隨機生成一個單詞。

2.有參：

格式1：word(min,max)，生成單詞中字符個數爲min到max之間。

格式2：word(len)，生成單詞中字符個數爲len。

模擬中文詞：

1.無參：cword隨機生成一個漢字。

2.有參：

格式1：cword(pool)，pool爲漢字字符串，從pool字符池中選取一個漢字。

格式2：cword(length)，隨機生成一個詞，漢字個數爲length。

格式3：cword(min,max)，隨機生成一個詞，漢字個數爲min到max之間。

格式4：cword(pool,length)

格式5：cword(pool,min,max)

模擬標題：

1.無參：title隨機生成標題。

2.有參：

格式1：title(len)生成單詞個數爲len的標題。

格式2：title(min,max)生成單詞個數爲min到max之間的標題。

模擬中文標題：

1.無參：ctitle

2.有參：

格式1：ctitle(len)

格式2：ctitle(min,max)

模擬姓名相關的佔位符：

1.first隨機生成常見的英文名。

2.last隨機生成常見的英文姓。

3.name(middle)，隨機生成一個英文姓名，middle爲布爾參數，設置是否生成中間名。

4.cfirst隨機生成一箇中文姓。

5.clast隨機生成一箇中文名。

6.cname隨機生成一箇中文姓名。

模擬網址相關佔位符：

1.url(protocol,host)隨機生成一個url，protocol指定協議，host指定主機，也能夠無參。

2.protocol隨機生成一個url協議，例如http。

3.domain隨機生成一個域名。

4.tld隨機生成一個頂級域名。

5.email(domain)隨機生成一個email地址，domain指定域名，也能夠無參。

6.ip隨機生成一個ip地址。

模擬地址相關佔位符：

1.region隨機生成一箇中國區域，例如華北。

2.province隨機生成一箇中國省份。

3.city(pro)隨機生成一箇中國城市，pro爲布爾值，指定是否生成其所在的省份，也能夠無參。

4.county(all)隨機生成一箇中國縣，all爲布爾值，指定是否生成其所在的省市。也能夠無參。

5.zip隨機生成一個郵編。

模擬id相關佔位符：

1.guid隨機生成一個GUID。

2.id隨機生成一個18位身份證號。

4、一個用express搭建Mock服務的示例

var express = require('express');
var app = express();
var Mock = require('mockjs');

app.get('/mock', function(req, res){
	var data = Mock.mock({
		"name":'@cname', 
		"content":'@string(0, 5)',
	});
	response = {
		"data":data
	}
	res.end(JSON.stringify(response));
});


var server = app.listen(8082, function(){
	var host = server.address().address
	var port = server.address().port
})

上面代碼開啓了一個get請求，若是正確安裝了node，express，mock.js，使用node運行此文件後直接在瀏覽器經過127.0.0.1:8082/mock地址進行訪問便可看到生成的mock數據。

    Mock數據的初衷是在前端開發中進行接口的模擬使用，在接口結構和訪問url都已經肯定，只是沒開發完成是，可使用Charles結合Mock數據來仿真接口返回。Charles工具能夠將某個請求映射到另一個地址上，在Charles抓到的請求上郵件，彈出的菜單中選擇Map Remote選項。

在彈出的窗口中將映射到的主機設置爲127.0.0.1，端口設置爲8082，地址設置爲mock便可訪問上面文件生成的模擬數據。

5、一個方便易用的Java模擬數據客戶端

    有時候咱們須要mock的接口有不少，若是可以方便的對這些mock文件進行管理不用每次都經過終端來操做就更方便了。這裏有我寫的一個JAR小工具，能夠在Mac或Windows上擴平臺進行使用。下載地址以下：

http://zyhshao.github.io/EasyMock/welcome.html。

這個工具就是一個簡單的JAR包，在其中封裝了操做終端的命名，只須要在左右列表中建立相應的請求路徑，在右側直接編寫Mock.js模擬數據對象後，開啓服務便可，開啓服務後會將左右列表中全部的接口都開啓。以下圖：

還須要注意，這個工具不十分完善，若是有產生錯誤會被捕獲但並無任何提示，若是你沒正確安裝node或者express或者mock.js，再或者你的mock.js代碼有問題，服務都不能正確啓動。