Question

我正在研究MEANSTACK，我是新手。我的要求是我希望mongo db的内容显示在网页上。我相信这可以使用角度js来完成。我创建了一个名为'display'的模块以及MEAN堆栈的角度模块，其中包含服务器，客户端和测试文件夹。在客户端的config文件夹中，有两个文件，users.client.menus.js和users.client.routes.js

以下是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>

在服务器中，我有models文件夹， 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);

我只想知道完成任务所需的其他文件夹，以及如何完成要求。

提前谢谢。

Answer 1

要从数据库访问数据，您需要一台服务器和一些在该服务器上运行的API，这些API将从数据库获取数据，然后像本机客户端服务器体系结构一样在前端发送响应。因此，要从数据库获取数据，您需要编写API，如果您使用javascript编写代码，则需要一个与数据库交互的nodejs应用程序。您可以阅读this有关如何制作REST API并在前端Angularjs应用程序中使用它们的文章。快乐学习。干杯：）

如何在前端显示mongo db的内容？

1 个答案: