如何在前端顯示mongo db的內容？

我在MEANSTACK上工作，我對它很陌生。我的要求是我想讓mongo db的內容顯示在網頁上。我相信這可以使用角度js來完成。我已經創建了一個名爲'display'的模塊以及MEAN堆棧的角度模塊，其中包含服務器，客戶端和測試文件夾。在客戶端的config文件夾中，有兩個文件，users.client.menus.js和users.client.routes.js如何在前端顯示mongo db的內容？

以下是users.client.menus.js，

(function() { 
    'use strict'; 

    angular 
    .module('display') 
    .run(menuConfig); 

    menuConfig.$inject = ['menuService']; 

    function menuConfig(menuService) { 
    menuService.addMenuItem('topbar',{ 
     title: 'Display Table', 
     state: 'display', 
     type:'label', 
     roles: ['*'] 
    }); 
    } 
    }());

users.client.routes.js

(function() { 
    'use strict'; 

    angular 
    .module('display.routes') 
    .config(routeConfig); 

    routeConfig.$inject = ['$stateProvider']; 
    function routeConfig($stateProvider) { 
    $stateProvider 
    .state('display',{ 
     url: '/display', 
     templateUrl: 'modules/display/client/views/display.client.view.html', 
     controller: 'DisplayController', 
     controllerAs: 'vm', 
     data: { 
      roles: ['user','admin'], 
      pageTitle: 'Display' 
     } 
    }); 

    } 

    }());

控制器文件如下： display.client.controller

(function() { 
    'use strict'; 

    angular 
    .module('display') 
    .controller('DisplayController', DisplayController); 

    DisplayController.$inject = ['$scope', 'displays','Authentication']; 

    function DisplayController($scope,displays,Authentication) { 
     $scope.authentication = Authentication; 
     var vm = this; 
     vm.displays = displays; 
    } 

    }());

display.client.view.html

<section data-ng-controller="DisplayController"> 
    <div class="page-header"> 

    <h1>Display</h1> 
    </div> 
<form class="col-xs-12 col-md-offset-4 col-md-4"> 
    <fieldset class="row"> 
     <div class="panel panel-default" data-ng-init="find()"> 
      <table class="table table-hover table stripped"> 
       <thead> 
        <tr> 
         <th>Details</th> 
        </tr> 
       </thead> 
       <tbody> 
        <tr data-ng-repeat="displayNames in testData" data-ng-href="#!/display/{{displayNames.displayName}}"> 
         <h4 data-ng-bind="displayNames.displayName"></h4> 
         <td>{{displayNames.displayName}}</td> 
        </tr> 
       </tbody> 
      </table> 
     </div> 


    </fieldset> 
</form> 


</section>

在服務器上，我有模型的文件夾， display.server.model.js

'use strict'; 

var mongoose = require('mongoose'), 
    Schema = mongoose.Schema; 
var User = new mongoose.Schema({ 
    displayname:{ 
     type: String, 
     default:'' 
    }, 
    username:{ 
     type: String, 
     default:'', 
     unique: true, 
     required:'UserName Cannot be empty' 
    }, 
    email:{ 
     type: String, 
     default:'', 
     unique: true, 
     required:'Email cannot be empty' 
    }, 
    user:{ 
     type: Schema.ObjectId, 
     ref: 'User' 
    } 

}); 

mongoose.model('Display',User);

我只是想知道其他文件夾說需要完成這項任務，我該如何完成這項要求。

謝謝，提前。

來源

2017-07-28 SREELAKSHMI R

爲了訪問數據庫中的數據，您需要一臺服務器和一些在該服務器上運行的API，以便從數據庫獲取數據，然後像在本地客戶機服務器體系結構一樣在前端發送響應。因此，要從數據庫獲取數據，您需要編寫API，並且如果您正在使用JavaScript編寫代碼，則需要一個將與數據庫進行交互的nodejs應用程序。您可以閱讀this文章，瞭解如何製作REST API並在前端Angularjs應用程序中使用它們。快樂學習。歡呼聲:)

來源

2017-07-28 13:23:30

我已經這樣做了，但忍不住 –

你能解釋一下你究竟做了什麼嗎？ –

從客戶端控制器中，我已經調用了定義api的服務函數。這麼晚纔回復很抱歉。 –

如何在前端顯示mongo db的內容？

回答

相關問題