在前后台共同進行一個項目的時候常會遇到一種情景, 后台定義好接口,前端按照接口進行開發, 當前端開發完成后台接口卻還沒有開發完成, 這個時候要進行接口測試, 只能等后台開發完成才能測試, 在這中間浪費了很多時間, 現在有個利器可以解決這個問題, 即使不用后台,只要提前制定好接口的報文,那么前端就可以自己模擬接口來進行接口測試了, 今天要講的東西就是mockjax和mockJSON
mockjax和mockJSON是兩套不同的Javascript Library, 它們都是基於JQuery來開發的,
mockjax主要是可以針對指定的網址進行mock, 當Ajax呼叫網址時攔截並回傳假的數據,
mockJSON則有點像是Json資料的Data Generater, 根據我們指定的格式隨機數生成回傳的Json資料.
首先我們來看個范例,
假設我們目前需要開發一個網站, 它會使用Ajax呼叫/WebApi/GetUserData.svc, 取得User資料,
並將所取得的數據顯示在畫面上, 我們可以很快速地完成這部分的程序代碼.
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <title>Mocking JQuery Ajax</title> 5 <script src="Scripts/jquery.1.7.2.js" type="text/javascript"></script> 6 <script src="Scripts/jquery.mockjax.js" type="text/javascript"></script> 7 <script src="Scripts/jquery.mockjson.js" type="text/javascript"></script> 8 <script type="text/javascript"> 9 $(function () { 10 $.ajax({ 11 url: '/WebApi/GetUserData.svc', 12 type: 'GET', 13 error: function (xhr) { 14 alert('無法取得資料!'); 15 }, 16 success: function (response) { 17 $("div#result").append(response); 18 } 19 }); 20 }); 21 </script> 22 </head> 23 24 <body> 25 <h1>User Data</h1> 26 <div id="result"> 27 28 </div> 29 </body> 30 </html>
執行網頁, 我們可以發現這段程序是無法成功執行的,
因為/WebApi/GetUserData.svc並不存在, 所以會跳出錯誤訊息.
這時候mockjax就派上用場了, 我們在呼叫ajax之前加上這段程序代碼
1 var isAjaxMocked = true; 2 if (isAjaxMocked) { 3 $.mockjax({ 4 url: '/WebApi/GetUserData.svc', 5 status: 200, 6 responseTime: 750, 7 responseText: 'User Information' 8 }); 9 }
這代表我們mock了JQuery的Ajax,
當使用Ajax呼叫/WebApi/GetUserData.svc這個網址時,
將會花費750ms的時間, 回傳status code 200, 以及'User Information'這個字符串
重新執行一次網頁, 可以看到執行成功了
當然, 實際上在呼叫WebService時並不會只回傳一個字符串,
那能不能支持Json格式的數據呢? 答案是可以的, 我們可以改寫我們的程序代碼
1 $(function () { 2 var isAjaxMocked = true; 3 if (isAjaxMocked) { 4 $.mockjax({ 5 url: '/WebApi/GetUserData.svc', 6 status: 200, 7 responseTime: 750, 8 responseText: { "user": [{ "id": "1", "name": "david", "birthday": "2001/01/26" }] } 9 }); 10 } 11 $.ajax({ 12 url: '/WebApi/GetUserData.svc', 13 type: 'GET', 14 error: function (xhr) { 15 alert('無法取得資料!'); 16 }, 17 success: function (response) { 18 var data = response.user; 19 for (var i = 0; i < data.length; i++) { 20 $("div#result").append( 21 "<ul>" + 22 "<li>ID: " + data[i].id + "</li>" + 23 "<li>Name: " + data[i].name + "</li>" + 24 "<li>Birthday: " + data[i].birthday + "</li>" + 25 "</ul>" + 26 "<hr />" 27 ); 28 } 29 } 30 }); 31 });
執行之后, 可以看到成功接收Json數據, 並且顯示在畫面上
一切看起來很完美, 但現在問題來了, 如果我們需要的是大量的數據,
我們光是拚好Json數據就會花費掉許多的時間, 該怎么辦呢?
這時候我們就需要mockJSON, 它可以根據我們所制定的規則, 來產生JSON數據,
我們修改mockjax的responseText部分使用mockJSON來產生數據
var isAjaxMocked = true; if (isAjaxMocked) { $.mockjax({ url: '/WebApi/GetUserData.svc', status: 200, responseTime: 750, responseText: $.mockJSON.generateFromTemplate({ "user|3-6": [{ "id|+1": 1, "name": "@MALE_FIRST_NAME", "birthday": "@DATE_YYYY/@DATE_MM/@DATE_DD" }] }) }); }
在這邊我使用了$.mockJSON.generateFromTemplate方法, 並設定了user數據產生的規則如下,
產生 3-6個user, 每個user之中有以下字段,
id從1開始依序增加, 每次+1,
name產生男生的名字,
birthday產生隨機的日期.
重新執行網頁, 我們可以發現每次重整網頁結果都不同, 這可以用來模擬查詢出不同的數據
是不是很輕松就可以產生大量的Json數據呢?
而一旦WebService開發完成, 我們只要將isAjaxMocked改成false, 就可以馬上實際呼叫WebService啰!
在這兩套Library幫忙之下, 就算Web Service完全還沒開發好, 也並不會影響到我們前端頁面的開發,
而這兩套Library在使用上也十分的簡單, 更進階的使用可以參考我所做的心智圖或是官方網站.
mockjax 設定:
mockJSON設定:
結語
透過這兩套Library, 不僅僅是可以方便進行Ajax的本機端模擬測試,
還可以用在Javascript部分的單元測試, 讓單元測試不會因為Ajax而難以進行,
這讓我們在前端開發的進行上更加的方便!