文章出處

系列文章

接上一篇系列文章，在本文中，將連接后端服務，實現用戶登錄功能，并去掉前端的MockDB，使用服務器端的數據。在邁向后端的同時，同時介紹如何使用Chrome跨域插件，在瀏覽器中請求跨域數據，模擬App的數據請求。服務器端選擇了NodeJS的Express框架，很方便的就把原來的MockDB變成了服務器端的RESTful Service。

App服務端

咱們選擇了Express作為App的服務端技術，Express需要先安裝NodeJS，在之前的Ionic安裝部分，已經安裝好了NodeJS。接下來就是安裝Express了，Express的官方地： http://expressjs.com/ 安裝方法非常簡單，新建一個Server端的項目文件夾，比如DeliverAppServer，然后控制臺 cd 進入這個文件夾，執行 npm install express -–save 就可以了。這里咱們主要去搭建一個模擬的Server端，這個Server端沒有訪問數據庫，沒有具體的業務邏輯，只是返回靜態的JSON，目的是讓App得到Http請求過來的數據。完成所有App的開發工作。

npm install express –-save

接下來測試一下，新建一個 app.js 寫一個簡單的 HelloWorld

var express = require(express);
var app = express();

app.get(/, function (req, res) {
  res.send(Hello World!);
});

var server = app.listen(3000, function () {
  var host = server.address().address;
  var port = server.address().port;

  console.log(Example app listening at http://%s:%s, host, port);
});

然后執行：

node app.js

可以看到App的Server端已經開啟了。接下來就可以開始實現Server端的RESTful API了。Express 框架非常的簡單易用，使用 app.get app.post 就可以實現一個Http的Method定義。如 login 這個定義：

app.post("/login", function (req, res) {
    res.json({success: true, data: {authenticationToken: "abc01234567890defgh"}});
});

Http的Post方法，請求的Url是 /login，直接返回登陸成功信息。在實際的項目中，這個地方是后端的業務邏輯，根據請求中的用戶名和密碼去檢查用戶信息，這里是模擬后端服務，所以直接返回了登陸成功。authenticationToke 是用戶登陸成功的令牌，在后面的每次Http請求中，都會帶在Http請求的Header中，由于Http協議是無狀態的，所以在每次請求中都帶上 authenticationToken，服務器就知道當前訪問的用戶是誰了。如果Http Header中沒有有效的 authenticationToken 也就是說明Http請求的是非法用戶，需要返回403 等其它狀態碼。

所有的Server端RESTful API已經寫好了，主要是把原來前端的MockDB，搬移到了后端，然后配置了URL路由信息，基本沒有改動，已經放在了本文最后的下載鏈接里了，你可以直接下載，使用 node app.js 開啟服務。

前端重構

services.js 需要大的改動，需要刪除MockDB，使用 $http 從后端取得數據，在CommonService中有一個buildUrl方法，只要填寫相對Url就可以了，當Server端發布以后，可以方便的指向Server端實際的域名。

OrderService 中的請求如all 方法，直接使用:

return $http.get(CommonService.buildUrl(orders));

就可以將原來的MockDB請求轉向了Http的Server端請求。如果你使用 ionic emulate ios

ionic emulate ios

是可以直接訪問的:

但是如果你使用瀏覽器來調試，你會在控制臺看到瀏覽器的跨域請求攔截：

由于W3C的安全標準，Web的HttpRequest跨域請求，需要設置Allow-Control-Allow-Origin，由于咱們最后會發布一個單獨的應用，所以沒有瀏覽器的跨域限制。但是為了在瀏覽器里進行調試，所以需要暫時添加這個Http Header設置，Chrome 的插件可以解決這個問題：

安裝好以后，在瀏覽器上會出現圖標，打開此功能。

這樣數據就可以請求到后端了。其它html的代碼和controller的代碼基本不用變化，主要是吧 services.js 里的代碼修改一下，直接使用$http去取得數據。為了實現需要登錄后，才能看到頁面的需求，要在 app.run 的里加入限定：

$rootScope.$on("$stateChangeStart", function (event, toState, toParams, fromState, fromParams) {
      if (AuthenticationService.isNeedLogin(toState.data) && !AuthenticationService.isLogin()) {
          event.preventDefault();
          $state.go("login");
      }
  });

這樣當用戶沒有登錄的時候，是不能訪問其它頁面的，會被重定向到 login，到這里本系列文章就全部完結了。最終代碼在：https://github.com/zhangsichu/DeliveryApp/releases/tag/Final 可以下載到。也可以使用 git checkout Final

git checkout Final

代碼倉庫的 github 地址：https://github.com/zhangsichu/DeliveryApp

原文鏈接：http://zhangsichu.com/blogview.asp?Content_Id=160

文章列表