Wie wird der Inhalt von mongo db im Frontend angezeigt?

Question

Ich arbeite an MEANSTACK und ich bin neu dazu. Meine Anforderung ist, dass der Inhalt von Mongo db auf der Webseite angezeigt werden soll. Ich glaube, das könnte mit angular js gemacht werden. Ich habe ein Modul namens 'display' zusammen mit den eckigen Modulen von MEAN Stack mit Server, Client und Test-Ordner erstellt. im Ordner Config des Client gibt es zwei Dateien, users.client.menus.js und users.client.routes.js

Die folgende users.client.menus.js ist,

(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' 
     } 
    }); 

    } 

    }()); 

Der Controller-Datei ist wie folgt: 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> 

Im Server habe ich die Modelle Ordner, 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); 

Ich möchte nur die zusätzlichen Ordner wissen, dass sind erforderlich, um die Aufgabe zu erledigen und wie kann ich die Anforderung erfüllen.

Danke, im Voraus.

Answer 1

Für den Zugriff auf Daten aus der Datenbank benötigen Sie einen Server und einige APIs auf diesem Server, die Daten aus der Datenbank erhalten und dann die Antwort auf dem Frontend genau wie native Client-Server-Architektur senden. Um also die Daten aus der Datenbank zu erhalten, müssen Sie APIs schreiben und wenn Sie Code in JavaScript schreiben, benötigen Sie eine Nodejs-Anwendung, die mit der Datenbank interagieren wird. Sie können this Artikel lesen, wie man REST-APIs erstellt und sie auf der Frontend Angularjs-Anwendung verwendet. Glücklich lernen. Prost :)