Apache Eagle代码逻辑分析--WEB页面调用REST接口代码逻辑

 

以siteList.html页面为例梳理流程

1、页面调用来源main.html

E:\code\eagle\eagle-master-0.5.0-SNAPSHOT\eagle-server\src\main\webapp\app\dev\partials\integration\main.html

<li ng-class="{active: getState().indexOf('integration.site') !== -1}"><a href="#/integration/siteList">站点</a></li>

2、app.js定义url、html页面及control等

E:\code\eagle\eagle-master-0.5.0-SNAPSHOT\eagle-server\src\main\webapp\app\dev\public\js\app.js

关注第二段里的url: "siteList",templateUrl: "partials/integration/siteList.html，controller: "integrationSiteListCtrl",

// ==================================================================
// =                         Initialization                         =
// ==================================================================

var eagleApp = angular.module('eagleApp', ['ngRoute', 'ngAnimate', 'ui.router', 'eagleControllers', 'eagle.service'].concat(register.appList));

eagleApp.config(function ($stateProvider, $urlRouterProvider, $httpProvider, $animateProvider) {
   $urlRouterProvider.otherwise("/");
   $stateProvider
   .state('integration.siteList', {
   url: "siteList",
   templateUrl: "partials/integration/siteList.html?_=" + window._TRS(),
   controller: "integrationSiteListCtrl",
   resolve: routeResolve({ application: false })
})
;

// ===================================================================
// =                      Main Controller                                 =
// ===================================================================

eagleApp.controller('MainCtrl', function (
   $scope, $wrapState, $urlRouter, $notification, $authHttp,
   Server, PageConfig, Portal, Widget, Entity, CompatibleEntity,
   Site, Application, UI, Time, Policy, Alert, Auth) {
   window._WrapState = $scope.$wrapState = $wrapState;
   window._Server = $scope.Server = Server;
   window._PageConfig = $scope.PageConfig = PageConfig;
   window._Portal = $scope.Portal = Portal;
   window._Widget = $scope.Widget = Widget;
   window._Entity = $scope.Entity = Entity;
   window._CompatibleEntity = $scope.CompatibleEntity = CompatibleEntity;
   window._Site = $scope.Site = Site;
   window._Application = $scope.Application = Application;
   window._UI = $scope.UI = UI;
   window._Time = $scope.Time = Time;
   window._Policy = $scope.Policy = Policy;
   window._Notification = $scope.$notification = $notification;
   window._Alert = $scope.Alert = Alert;
   window._Auth = $scope.Auth = Auth;
   window._AuthHttp = $scope.$authHttp = $authHttp;
   $scope.common = common;

   $scope._TRS = window._TRS();

   Object.defineProperty(window, "scope", {
      get: function () {
         var ele = $("#content .nav-tabs-custom.ng-scope .ng-scope[ui-view], #content .ng-scope[ui-view]").last();
         return angular.element(ele).scope();
      }
   });

control定义integrationSiteListCtrl

E:\code\eagle\eagle-master-0.5.0-SNAPSHOT\eagle-server\src\main\webapp\app\dev\public\js\ctrls\integrationCtrl.js

eagleControllers.controller('integrationSiteListCtrl', function ($scope, $wrapState, PageConfig, UI, Entity, Site) {
   PageConfig.title = "系统配置";
   PageConfig.subTitle = "站点";

   $scope.deleteSite = function (site) {
      UI.deleteConfirm(site.siteId)
      (function (entity, closeFunc, unlock) {
         Entity.delete("sites", site.uuid)._then(function (res) {
            Site.reload();
            closeFunc();
         }, function (res) {
            $.dialog({
               title: "提示！",
               content: common.getValueByPath(res, ["data", "message"])
            });
            unlock();
         });
      });
   };

 

3、siteList.html中使用Site.list变量填充站点列表

<tr ng-repeat ="site in Site.list track by $index">
   <td>
      <a ui-sref="integration.site({id: site.siteId})">
         {{site.siteId}}
         <span ng-if="site.siteName">({{site.siteName}})</span>
      </a>
   </td>
   <td>{{site.description}}</td>
   <td>
      <span class="text-muted" ng-if="site.applicationList.length === 0">(尚未安装监控程序...)</span>
      <ul class="list-inline no-margin">
         <li ng-repeat="app in site.applicationList track by $index">
            <span class="label label-primary">
               {{app.descriptor.name}}
            </span>
         </li>
      </ul>
   </td>

   <td class="text-center">
      <div class="btn-group btn-group-xs">
         <a class="btn btn-default btn-sm" ui-sref="integration.site({id: site.siteId})">编辑</a>
         <button class="btn btn-danger btn-sm" ng-click="deleteSite(site)">删除</button>
      </div>
   </td>
</tr>

 

Site.list定义及初始化、数据库数据获取函数Site.reload

E:\code\eagle\eagle-master-0.5.0-SNAPSHOT\eagle-server\src\main\webapp\app\dev\public\js\services\siteSrv.js

重点部分加了下划线

var serviceModule = angular.module('eagle.service');
serviceModule.service('Site', function($q, $wrapState, Entity, Application) {
   var Site = {};
   var reloadListenerList = [];

   Site.list = [];

   // Link with application
   function linkApplications(siteList, ApplicationList) {
…………省略
   }

   // Load sites
   function notifyListener() {
      $.each(reloadListenerList, function (i, listener) {
         listener(Site);
      });
   }



   Site.reload = function () {
      var list = Site.list = Entity.query('sites');
      list._promise.then(function () {
         linkApplications(list, Application.list);
         notifyListener();
      });
      return Site;
   };

   Site.onReload = function (func) {
      reloadListenerList.push(func);
   };

   // Find Site
   Site.find = function (siteId) {
      return common.array.find(siteId, Site.list, 'siteId');
   };

   Site.current = function () {
      return Site.find($wrapState.param.siteId);
   };

   Site.switchSite = function (site) {
      var param = $wrapState.param;
      if(!site) {
         $wrapState.go("home");
      } else if(param.siteId) {
         $wrapState.go($wrapState.current.name, $.extend({}, param, {siteId: site.siteId}));
      } else {
         $wrapState.go("site", {siteId: site.siteId});
      }
   };



   Site.getPromise = function (config) {
      var siteList = Site.list;
      return $q.all([siteList._promise, Application.getPromise()]).then(function() {
         // Site check
         if(config && config.site !== false && siteList.length === 0) {
            $wrapState.go('setup', 1);
            return $q.reject(Site);
         }

         // Application check
         if(config && config.application !== false && Application.list.length === 0) {
            $wrapState.go('integration.site', {id: siteList[0].siteId}, 1);
            return $q.reject(Site);
         }
         return Site;
      });
   };

   // Initialization
    Site.reload();

   (function () {
      Application.getPromise().then(function () {
         Application.onReload(function () {
            Site.reload();
         });
      });

      // Call listener at first time when site & application is ready
      var siteList = Site.list;
      $q.all([siteList._promise, Application.getPromise()]).then(function() {
         linkApplications(siteList, Application.list);
         notifyListener();
      });
   })();

   return Site;
});

 

数据库数据调用Entity

E:\code\eagle\eagle-master-0.5.0-SNAPSHOT\eagle-server\src\main\webapp\app\dev\public\js\services\entitySrv.js

重点部分加了下划线

serviceModule.service('Entity', function($authHttp[c6] , $q) {
   function Entity() {}

   function wrapList(list, promise) {
…………省略
   }

   function withThen(list) {
      list._then = list._promise.then.bind(list._promise);
      return list;
   }

   // Dev usage. Set rest api source
   Entity._host = function (host) {
      console.warn("This function only used for development usage.");
      if(host) {
         _host = host.replace(/[\\\/]+$/, "");
         if(localStorage) {
            localStorage.setItem("host", _host);
         }
      }
      return _host;
   };

   Entity.query = function (url, param) {
      var list = [];
      list._refresh = function () {
         var config = {};
         if(param) config.params = param;
         return wrapList(list, $authHttp.get(_host + "/rest/" + url, config));
      };
      return list._refresh();
   };

   Entity.create = Entity.post = function (url, entity) {
      var list = [];
      return wrapList(list, $authHttp({
         method: 'POST',
         url: _host + "/rest/" + url,
         headers: {
            "Content-Type": "application/json"
         },
         data: entity
      }));
   };

   Entity.delete = function (url, uuid) {
      var list = [];
      return wrapList(list, $authHttp({
         method: 'DELETE',
         url: _host + "/rest/" + url,
         headers: {
            "Content-Type": "application/json"
         },
         data: {uuid: uuid}
      }));
   };

   /**
    * Merge 2 array into one. Will return origin list before target list is ready. Then fill with target list.
    * @param oriList
    * @param tgtList
    * @return {[]}
    */
   Entity.merge = function (oriList, tgtList) {
…………省略
   };


   // TODO: metadata will be removed
   Entity.queryMetadata = function (url, param) {
      var metaList = Entity.query('metadata/' +  url, param);
      var _refresh = metaList._refresh;

      function process() {
         metaList._then(function (res) {
            var data = res.data;
            if(!$.isArray(data)) {
               data = [data];
            }

            metaList.splice(0);
            Array.prototype.push.apply(metaList, data);
         });
      }

      metaList._refresh = function () {
         _refresh();
         process();
      };

      process();

      return metaList;
   };



   Entity.deleteMetadata = function (url) {
      return {
         _promise: $authHttp.delete(_host + "/rest/metadata/" + url)
      };
   };

   return Entity;
});

 

http接口调用服务$authHttp

E:\code\eagle\eagle-master-0.5.0-SNAPSHOT\eagle-server\src\main\webapp\app\dev\public\js\services\authSrv.js

serviceModule.service('$authHttp', function ($http, Auth) {
   function mergeConfig(config) {
      config = config || {};
      if (Auth.hash) {
         config.headers = config.headers || {};
         config.headers.Authorization = "Basic " + Auth.hash;
      }
      return config;
   }

   var $authHttp = function (config) {
      return $http(mergeConfig(config));
   };

   $authHttp.get = function (url, config) {
      return $http.get(url, mergeConfig(config));
   };

   $authHttp.post = function (url, data, config) {
      return $http.post(url, data, mergeConfig(config));
   };

   $authHttp.delete = function (url, config) {
      return $http.delete(url, mergeConfig(config));
   };

   return $authHttp;
});

---

 [c1]

 [c2]

 [c3]site in Site.list

 [c4]

 [c5]

 [c6]$authHttp与服务器后端交互的服务