實戰使用Axure設計App,使用WebStorm開發(6) – 邁向後端

 系列文章

實戰使用Axure設計App,使用WebStorm開發(1) – 用Axure描述需求 

實戰使用Axure設計App,使用WebStorm開發(2) – 建立 Ionic 項目  

實戰使用Axure設計App,使用WebStorm開發(3) – 構建頁面架構 

實戰使用Axure設計App,使用WebStorm開發(4) – 實現頁面UI

實戰使用Axure設計App,使用WebStorm開發(5) – 實現頁面功能

實戰使用Axure設計App,使用WebStorm開發(6) – 邁向後端

 

 

接上一篇系列文章，在本文中，將鏈接後端服務，實現用戶登陸功能，並去掉前端的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