1.Mock.js · funlee的知識庫

### 什么是Mock.js Mock.js 是一款模擬數據生成器，旨在幫助前端攻城師獨立于后端進行開發，幫助編寫單元測試。 ### Mock.js能做什么 - 根據數據模板生成模擬數據 - 基于 HTML 模板生成模擬數據 - 模擬 Ajax 請求，生成并返回模擬數據 ### 為什么要用Mock.js - 數據太長了，將數據寫在一個個json文件里，完成后挨個改url，接口多了表示很累 - 某些邏輯復雜的代碼，加入或去除模擬數據時得小心翼翼 - 處理數組數據的js代碼老是出現初始化的時候沒有清空數組，當數據更新了的時候就發現bug了，如果在開發時就能實現數據更新，這個問題或許會早點發現 - 想要盡可能還原真實的數據，要么編寫更多代碼，要么手動修改模擬數據 - 特殊的格式，例如IP,隨機數，圖片，地址，需要去收集。 - 分頁顯示、涉及請求傳參的數據和**部署版本與本地版本**的切換是個很痛的痛點。 ### 如何正確使用Mock.js #### 開始使用：支持Node、bower、RequireJS、Sea.js #### 核心方法 Mock.mock() - 根據數據模板生成模擬數據; - 記錄數據模板;當攔截到匹配 rurl 的 Ajax 請求時，將根據數據模板 template 生成模擬數據，并作為響應數據返回。 #### 語法規范： - 數據模版定義規范：屬性名|生成規則：屬性值，如：‘value|10-100’ : 10 - 數據占位符定義規范:@占位符或者 @占位符(參數 [, 參數])，如：‘value’ : ‘@cname’ ### 數據模版定義了屬性值是String、Number、Boolean、Object、Array、Function和RegExp類型數據的數據格式 - 屬性名和生成規則之間用豎線 | 分隔 - 生成規則的含義需要依賴屬性值的類型才能確定 - 屬性值中可以含有 @占位符 - 屬性值還指定了最終值的初始值和類型 - 共有七種規則 1. 'name|min-max': value 2. 'name|count': value 3. 'name|min-max.dmin-dmax': value 4. 'name|min-max.dcount': value 5. 'name|count.dmin-dmax': value 6. 'name|count.dcount': value 7. 'name|+step': value #### 數據占位符 Mock.random() Mock.Random 是一個工具類，用于生成各種隨機數據，有如下十種，還可以自行擴展 #### 擴展方法： ~~~ Mock.Random.extend({ hyStaff:function(data) { var hy = ['zhanning','banghui','xiaoqiao','shuman','decai','xieyang','yuheng','liwei'] return this.pick(hy) } }) var data = Mock.mock({ 'hyfe|1-8':[{'name':'@hystaff'}] }) console.log(JSON.stringify(data,null,2)) ~~~ 下面是基本方法 #### Basic ~~~ var data = Mock.mock({ 'range':Mock.Random.range(10,20,2),//返回一個整型數組 'boolean':'@boolean',//返回一個隨機的布爾值 'natural':'@natural',//返回一個隨機的自然數（大于等于 0 的整數） 'integer':'@integer',//返回一個隨機的整數 'float':'@float',//返回一個隨機的浮點數 'character':'@character',//返回一個隨機字符,未傳參默認3-7位 'string':'@string'//返回一個隨機字符串 }) console.log(JSON.stringify(data,null,2)) ~~~ #### Date ~~~ var data = Mock.mock({ 'date':'@date',//返回一個隨機的日期字符串默認值為 yyyy-MM-dd 'time':'@time',//指示生成的時間字符串的格式,默認值為 HH:mm:ss 'datetime':'@datetime',//返回一個隨機的日期和時間字符串,默認值為 yyyy-MM-dd HH:mm:ss 'now':'@now'//返回當前的日期和時間字符串 }) console.log(JSON.stringify(data,null,2)) ~~~ #### Image ~~~ var data = Mock.mock({ 'image':'@image',//生成一個隨機的圖片地址 --- 高度自定義 'dataImage':'@dataImage',//生成一段隨機的 Base64 圖片編碼 -- 更簡潔 'testImage':Mock.Random.dataImage('250x250','hydata') }) console.log(JSON.stringify(data,null,2)) ~~~ #### Color ~~~ var data = Mock.mock({ 'color':'@color', 'hex':'@hex', 'rgb':'@rgb', 'rgba':'@rgba', 'hsl':'@hsl' }) console.log(JSON.stringify(data,null,2)) ~~~ #### Text var data = Mock.mock({ 'paragraph':'@paragraph',//隨機生成一段文本 'cparagraph':'@cparagraph',//隨機生成一段中文文本 'sentence':'@sentence',//隨機生成一個句子，第一個單詞的首字母大寫 'csentence':'@csentence',//隨機生成一段中文文本 'word':'@word',//隨機生成一個單詞 'cword':'@cword',//隨機生成一個漢字 'title':'@title',//隨機生成一句標題，其中每個單詞的首字母大寫 'ctitle':'@ctitle'//隨機生成一句中文標題 }) console.log(JSON.stringify(data,null,2)) #### Name ~~~ var data = Mock.mock({ 'first':'@first',//隨機生成一個常見的英文名 'last':'@last',//隨機生成一個常見的英文姓 'name':'@name',//隨機生成一個常見的英文姓名 'cfirst':'@cfirst',//隨機生成一個常見的中文名 'clast':'@clast',//隨機生成一個常見的中文姓 'cname':'@cname'//隨機生成一個常見的中文姓名 }) console.log(JSON.stringify(data,null,2)) ~~~ #### Web ~~~ var data = Mock.mock({ 'url':'@url',//隨機生成一個 URL 'protocol':'@protocol',//URL協議：'http'、'ftp'、'gopher'、'mailto'、'mid'、'cid'、'news'、'nntp'、'prospero'、'telnet'、'rlogin'、'tn3270'、'wais' 'domain':'@domain',//隨機生成一個域名 'tld':'@tld',//隨機生成一個頂級域名 'email':'@email',//隨機生成一個郵件地址 'ip':'@ip'//隨機生成一個IP }) console.log(JSON.stringify(data,null,2)) ~~~ #### Address ~~~ var data = Mock.mock({ 'region':'@region',//隨機生成一個（中國）大區 'province':'@province',//隨機生成一個（中國）省（或直轄市、自治區、特別行政區） 'city':'@city',//隨機生成一個（中國）市 'county':'@county',//隨機生成一個（中國）縣 'zip':'@zip'//隨機生成一個郵政編碼（六位數字） }) console.log(JSON.stringify(data,null,2)) ~~~ #### Helper ~~~ var data = Mock.mock({ 'capitalize':Mock.Random.capitalize('hyfe'),//把字符串的第一個字母轉換為大寫 'upper':Mock.Random.upper('hyfe'),//把字符串轉換為大寫 'lower':Mock.Random.lower('hyfe'),//把字符串轉換為小寫 'pick':Mock.Random.pick([1,2,3,4,5,6]),//從數組中隨機選取一個元素，并返回 'shuffle':Mock.Random.shuffle([1,2,3,4,5,6])//打亂數組中元素的順序，并返回 }) console.log(JSON.stringify(data,null,2)) ~~~ #### Miscellaneous ~~~ var data = Mock.mock({ 'guid':'@guid',//隨機生成一個 GUID,啊？GUID? 'id':'@id',//隨機生成一個 18 位身份證 'increment':'@increment'//生成一個全局的自增整數 }) console.log(JSON.stringify(data,null,2)) ~~~ ### Mock.valid() 校驗真實數據 data 是否與數據模板 template 匹配 ~~~ var template = { 'value|2-4':[ { 'name':'@cname' } ] } var data = { value:[ { name:'周杰倫' } ] } console.log(JSON.stringify(Mock.valid(template,data),null,2)) ~~~ ### 經驗總結總結使用中遇到的問題和解決方案 - 解決模擬websocket實時推送數據，采用定時器發ajax請求，但是出現了每次請求返回的數據都是一樣的的問題，具體問題及解決辦法直接上代碼： ~~~ //API接口部分 var isOnline = false // http host var onlineApiHost = isOnline ? 'http://111.111.1.11:8080/' : 'http://test.com/' // websokcet host var onlineWsHost = isOnline ? 'ws://111.111.1.11:8080/': 'http://test.com/' //本地還是用的http，不是ws，因為采用定時器發ajax請求 //websocket請求數據方法 sendWebSocket: function(url, callback) { var protocol = url.split(':')[0] if(protocol == 'ws') { //線上版本 window.WS = new WebSocket(url) WS.onmessage = function(response) { if (response) { var data = response.data callback && callback(data) } } WS.onclose = function() { WS.close() } window.onunload = function() { WS.close() } } else { //本地版本，采用定時器發ajax請求 request.sendAjax(url,callback) setInterval(function() { request.sendAjax(url,callback) //ajax方法代碼不再展示 },5000) } } //Mock數部分 //正確寫法1 Mock.mock(util.urlReg('timewebsocket/time'), { 'code': 1, 'msg': 'success', 'result': '@datetime("yyyy-MM-dd HH:mm")' }) //正確寫法2 Mock.mock(util.urlReg('timewebsocket/time'), { 'code': 1, 'msg': 'success', 'result': function() { return Mock.Random.datetime("yyyy-MM-dd HH:mm") } }) //錯誤寫法 Mock.mock(util.urlReg('timewebsocket/time'), { 'code': 1, 'msg': 'success', 'result': Mock.Random.datetime("yyyy-MM-dd HH:mm") }) ~~~