如何在前端显示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的内容？

回答

相关问题