2016年9月28日。

昨天學習瞭如何用mongoose寫後端資料單一資料&組合資料的介面，今天便來講講如何根據後端寫好的介面，來寫前端資料介面，獲取資料並進行查詢。

查詢出來的資料大概就是這樣一個顯示方式，查詢也就是簡單的input輸入框

此時第一步需要在service中獲取資料：

getidnum: function (idnum) {
            var deferred = $q.defer();
            var url = 'http://localhost:3000/Wages/QueryWagesByIdnum';
            $http({
                method: 'POST',
                url: url,
                data: {idnum: idnum}
            }).success(function (data, status, headers, config) {
                // console.log('getProvince===='+JSON.stringify(data));
                deferred.resolve(data);
            }).error(function (data, status, headers, config) {
                deferred.reject(status);
            });
            return deferred.promise;
        }
 

第二步：路由router，寫入引數params

    .state('dashboard.wages',{
        templateUrl:'views/wages.html',
        url:'/wages'
    })
    .state('dashboard.wageslist',{
        templateUrl:'views/wageslist.html',
        url:'/wageslist',
        params:{data:null}
    })

第三步：點選函式search，傳遞引數

 $scope.search=function () {
        $state.go('dashboard.wageslist',{data:$scope.idnum});
    };
 

在表格資料顯示頁面做以下操作，其中getidnum就是寫好的資料介面

 $scope.idnum = $stateParams.data;
    $scope.loadData = function () {
        wages.getidnum($scope.idnum).then(function (data) {
            $scope.wagelist= data;
        });
    };
    $scope.loadData();

這樣，就已經根據傳遞的引數，來獲取到顯示在表格中的資料。

現在寫起來還覺得挺簡單的，不管是前端還是後端基本上所要處理的資料都差不多一樣~~~

還有一種組合的多個條件來查詢資料的，其實類似的寫法，只不過是需要傳遞多個引數

 getname: function (name,type,time) {
            var deferred = $q.defer();
            var url = 'http://localhost:3000/Budget/QueryBudgetByName';
            $http({
                method: 'POST',
                url: url,
                data: {name: name,
                    type:type,
                    time:time
                }
            }).success(function (data, status, headers, config) {
                // console.log('getProvince===='+JSON.stringify(data));
                deferred.resolve(data);
            }).error(function (data, status, headers, config) {
                deferred.reject(status);
            });
            return deferred.promise;
        }

router

    .state('dashboard.budgetlist',{
        templateUrl:'views/budgetlist.html',
        url:'/yusuanlist',
        params:{name:null,
                 type:null,
                 time:null
        }

search函式，傳遞三個引數

 $scope.search=function () {
        $state.go('dashboard.budgetlist',{name:$scope.name,type:$scope.type,time:$scope.time});
    };

表格顯示頁面，budgetslist為前端ng-repeat的陣列，我這裡從資料庫中得到的資料格式為YYYYMM，但h5中所提供的input type資料格式為date：YYYY-MM，所以使用到了js中的replace方法。

    $scope.name=$stateParams.name;
    $scope.type=$stateParams.type;
    $scope.time=$stateParams.time;
    $scope.loadData = function () {
        if (!$socpe.name || !$scope.type|| !$scope.time) return;
        var time = $scope.time.replace('-','');
        budget.getname($scope.name, $scope.type,time).then(function (data) {
            $scope.budgetslist = data;
        });
    };
    $scope.loadData();

前臺輸出{{}}繫結輸入即可。

好睏好睏，我要去衝杯咖啡