調(diào)用后端接口是筋斗云框架提供的兩大核心功能之一。
[任務]
繼續(xù)hello頁面的例子，要求每次進入頁面時，不是固定的顯示”hello, world”，而是需要根據(jù)服務端的返回內(nèi)容來顯示hello的內(nèi)容，比如”hello, skys”或是”hello, jdcloud”。
我們先定義一個叫做”hello”的交互接口，由前端發(fā)起一個HTTP GET請求，比如：
http://myserver/myPRoject/api.php?ac=hello如果調(diào)用成功，后端返回JSON格式的數(shù)據(jù)如下：
[0, "jdcloud"]其中0是返回碼，表示調(diào)用成功。如果調(diào)用失敗，可返回：
[99, "對不起，服務器爆炸了"]以上就是一個符合筋斗云接口規(guī)范的簡單例子（稱為業(yè)務查詢協(xié)議-BQP），在成功調(diào)用時應返回[0, data]，在調(diào)用失敗時應返回[非0, 錯誤提示信息]。
有了清晰的接口定義，前后端就可以并行開發(fā)了。 在前端，我們把頁面稍作修改以動態(tài)顯示hello的內(nèi)容：
<div class="bd"> <p>Hello, <span id="what"></span></p> </div>再寫一段邏輯，每當進入頁面時調(diào)用hello接口并顯示內(nèi)容，我們選擇onBeforeShow回調(diào)來做這件事：
function initPageHello() { var jpage = $(this); jpage.on("pagebeforeshow", onBeforeShow); function onBeforeShow() { callSvr("hello", api_hello); } function api_hello(data) { jpage.find("#what").html(data); }}callSvr是框架提供的一個重要函數(shù)，它封裝了Ajax調(diào)用的細節(jié)，完整的函數(shù)原型為：
其中，ac是調(diào)用接口名，fn是回調(diào)函數(shù)，param和postParam分別是URL參數(shù)和POST參數(shù)。除ac外，其它參數(shù)均可省略。例如
callSvr("hello");callSvr("hello", {id: 1}); // URL: hello?id=1callSvr("hello", {id: 1}, api_hello); // function api_hello(data) {}callSvr("hello", api_hello, {name: "hello"});回調(diào)函數(shù)api_hello僅在成功時被調(diào)用，參數(shù)data是實際數(shù)據(jù)，即[0, data]中的data部分，不包括返回碼0。 當調(diào)用失敗時，框架會統(tǒng)一處理，顯示錯誤信息，無須操心。
上面代碼寫好了，后端接口還沒做好怎么測試？
筋斗云支持模擬接口返回數(shù)據(jù)。 在mockdata.js中，可以設(shè)置接口的模擬返回數(shù)據(jù)：
MUI.mockData = { ... "hello": [0, "jdcloud"]}此處還可以用函數(shù)做更復雜的基于參數(shù)的模擬，詳見API文檔，查詢MUI.mockData。
運行H5應用，進入hello頁面，看看是不是可以正常顯示了？
可以動態(tài)修改模擬數(shù)據(jù)，在控制臺中輸入：
MUI.mockData["hello"] = [0, "skys"]然后從hello頁返回首頁，再進入hello頁，看看顯示內(nèi)容是不是變了？
再改一個出錯的試試：
MUI.mockData["hello"] = [99, "對不起，服務器爆炸了"]進入hello頁，我們看到，調(diào)用失敗時，回調(diào)函數(shù)api_hello沒有執(zhí)行，而是框架自動接管過去，顯示出錯信息。
在后端接口開發(fā)好后，我們可去掉對這個接口的模擬，直接遠程調(diào)用服務端接口。這需要配置好后端接口的地址。
我們用php寫一個簡單的符合筋斗云接口規(guī)范的后端實現(xiàn)，通過名為”ac”的URL參數(shù)表示接口名，在server目錄中創(chuàng)建文件api.php如下：
<?php@$ac = $_GET['ac'];if ($ac == 'hello') { $what = "jdcloud @ " . time(); echo json_encode([0, $what]);}else { echo json_encode([1, "bad ac"]);}配置好php的調(diào)用環(huán)境后，訪問
http://localhost/myproject/api.php?ac=hello輸出類似這樣（根據(jù)時間動態(tài)變化）：
[0,"jdcloud @ 1483526151"]回到前端，我們在app.js中設(shè)置服務端接口地址：
$.extend(MUI.options, { serverUrl: "api.php", serverUrlAc: "ac" });serverUrl選項設(shè)置了服務端的URL地址，因為我們將”api.php”放在與”index.html”同一目錄下，所以直接用相對路徑就可以了。serverUrlAc選項定義了接口名對應的URL參數(shù)名稱，即?ac={接口名}. 在mockdata.js中去掉對”hello”接口的模擬，刷新應用就可以看到調(diào)用后端的效果了。
如果前后端不在同一臺服務器上，則要將URL寫完整，如
serverUrl: "http://myserver/myproject/api.php";注意：后端應設(shè)置好允許跨域請求。這里不做詳述。
以上講述的是符合筋斗云接口規(guī)范的接口調(diào)用設(shè)置，如果不符合該規(guī)范，請閱讀下一節(jié)“接口適配”。
在上例中，假定了后端接口兼容筋斗云接口規(guī)范，例如返回格式為[0, jsonData]及[非0, 錯誤信息]。 如果接口協(xié)議不兼容，則需要做接口適配。
接口適配的目標是通過callSvr函數(shù)更加簡練地調(diào)用后臺接口，同時達到：
[任務]
適配以下接口協(xié)議規(guī)范，約定接口返回格式為：{code, msg, data}， 例如上例中的hello接口，調(diào)用成功時返回：
失敗返回：
{ "code":"99", "msg":"對不起，服務器爆炸了"}這時需要對callSvr進行適配，可以在app.js中，設(shè)置 MUI.callSvrExt如下:
我們在mockdata.js中設(shè)置好模擬數(shù)據(jù)用于測試：
MUI.mockData = { "User.get": {code: 0, msg: "success", data: user}, "hello": {code: 0, msg: "success", data:"myworld"} ...}上例中，User.get接口在顯示首頁是會調(diào)用，所以和”hello”接口一并模擬下。
測試接口調(diào)用：
callSvr("hello", console.log);或callSvrSync("hello");callSvrSync是callSvr的同步調(diào)用版本，它直接等到調(diào)用完成才返回，且返回值就是調(diào)用成功返回的數(shù)據(jù)。
可以動態(tài)修改模擬數(shù)據(jù)：
MUI.mockData["hello"] = {code: 99, msg: "對不起，服務器爆炸了"}在接口適配完成后，應用層代碼不用去做任何修改。 進入頁面看看，是不是和上節(jié)的運行結(jié)果是一樣的。
新聞熱點
疑難解答
