Een app voor bloggen maken met Angular & MongoDB Post weergeven

In het laatste deel van de zelfstudieserie zag je hoe je het REST API-eindpunt schrijft voor gebruikersaanmelding. Je hebt Mongoose gebruikt om te communiceren met MongoDB vanaf het knooppunt. Na succesvolle validatie, zag u hoe u Angular moest gebruiken router voor het navigeren naar de HomeComponent.

In dit deel van de zelfstudiereeks maakt u een component om de details van de blogpost op de startpagina weer te geven.

Ermee beginnen

Laten we beginnen door de broncode uit het laatste deel van de zelfstudiereeks te klonen.

git clone https://github.com/royagasthyan/AngularBlogApp-Home AngularBlogApp-Post

Navigeer naar de projectdirectory en installeer de vereiste afhankelijkheden.

cd AngularBlogApp-Post / client npm cd installeren AngularBlogApp-Post / server npm install

Nadat de afhankelijkheden zijn geïnstalleerd, start u de client- en servertoepassing opnieuw op.

cd AngularBlogApp-Post / client npm start cd AngularBlogApp-Post / server node app.js

Richt uw browser op http: // localhost: 4200 en u zou de applicatie moeten laten draaien.

Postcomponent maken

Nadat de gebruiker is aangemeld bij de toepassing, wordt het HomeComponent. HomeComponent fungeert als een wikkelcomponent voor alle componenten die erin worden weergegeven. Je toont de lijst met blogberichten die door de gebruiker zijn toegevoegd in de HomeComponent.

Om de blogposts te tonen, maken we een nieuw onderdeel genaamd ShowPostComponent. Maak een map met de naam Show-bericht binnen in de src / app map. Binnen in de Show-bericht map, maak een bestand aan met de naam Show-post.component.html en voeg de volgende HTML-code toe:

  
 
Lijst van groepsitems weergeven
 3 dagen geleden 
 
Donec id elit non mi porta gravida bij eget metus. Maecenas sed diam eget risus varius blandit.
 Donec id elit non mi porta.   
 
Lijst van groepsitems weergeven
 3 dagen geleden 
 
Donec id elit non mi porta gravida bij eget metus. Maecenas sed diam eget risus varius blandit.
 Donec id elit non mi porta.   
 
Lijst van groepsitems weergeven
 3 dagen geleden 
 
Donec id elit non mi porta gravida bij eget metus. Maecenas sed diam eget risus varius blandit.
 Donec id elit non mi porta.  

Maak een bestand met de naam Show-post.component.ts welke de ShowPostComponent klasse. Hier is hoe het eruit ziet:

importeer Component, OnInit uit '@ angular / core'; @Component (selector: 'app-show-post', templateUrl: './show-post.component.html') exportklasse ShowPostComponent implementeert OnInit constructor ()  ngOnInit ()  

Importeer de ShowPostComponent in de app.module.ts het dossier.

import ShowPostComponent vanuit './show-post/show-post.component';

Toevoegen ShowPostComponent in de NgModule in de app.module.ts het dossier. 

import BrowserModule vanuit '@ angular / platform-browser'; import NgModule uit '@ angular / core'; importeer ROUTING van './app.routing'; importeer FormsModule vanuit '@ angular / forms'; importeer HttpClientModule van '@ angular / common / http'; importeer RootComponent van './root/root.component'; importeer LoginComponent van './login/login.component'; importeer HomeComponent uit './home/home.component'; import ShowPostComponent vanuit './show-post/show-post.component'; @ NgModule (verklaringen: [RootComponent, LoginComponent, HomeComponent, ShowPostComponent], import: [BrowserModule, ROUTING, FormsModule, HttpClientModule], providers: [], bootstrap: [RootComponent]) exportklasse AppModule  

Wijzig de home.component.html bestand om de ShowPostComponent keuzeschakelaar.

Hier is hoe de gemodificeerde home.component.html bestand ziet er:

  
Angular Blog-app
  
  
 

Sla de bovenstaande wijzigingen op en vernieuw de clienttoepassing. Wanneer u zich aanmeldt bij de toepassing, kunt u de blogposts die worden vermeld, bekijken.

De service Postcomponent weergeven maken

De gegevens die worden weergegeven in de ShowPostComponent service geeft hard-gecodeerde gegevens weer. U hebt een service nodig om de lijst met blogberichten in de MongoDB-database te doorzoeken. Laten we een service voor je maken ShowPostComponent.

Maak een bestand met de naam Show-post.service.ts in src / app / tonen achteraf en voeg de volgende code toe:

Injectable importeren vanuit '@ angular / core'; importeer HttpClient van '@ angular / common / http'; @Injectable () exportklasse ShowPostService constructor (privé http: HttpClient) 

Binnen in de ShowPostService, maak een methode genaamd getAllPost, waarmee de REST API-aanroep wordt gedaan om de lijst met blogberichten te krijgen. Hier is hoe het eruit ziet:

getAllPost () retourneer dit.http.post ('/ api / post / getAllPost', )

Hier is hoe het Show-post.service.ts bestand ziet er:

Injectable importeren vanuit '@ angular / core'; importeer HttpClient van '@ angular / common / http'; importeer Post van '... /models/post.model'; @Injectable () exportklasse ShowPostService constructor (privé http: HttpClient)  getAllPost () retourneer dit.http.post ('/ api / post / getAllPost', )

Vervolgens moet u de REST-API noteren om de MongoDB-verzameling te doorzoeken om de lijst met blogberichten te bekijken.

Aan de serverkant beginnen we met het maken van het model voor de post. Binnen in de modellen map, maak een bestand aan met de naam post.js. Vereist de Mangoest module en maak een schema voor de blogpost en exporteer het. Hier is hoe het /server/models/post.js ziet:

const mongoose = vereisen ('mongoose'); const Schema = mangoeste.Schema; // maak een schema const postSchema = nieuw Schema (title: type: String, required: true, description: type: String, required: true, collection: 'post'); const Post = mongoose.model ('Post', postSchema); module.exports = Plaatsen;

Exporteer het hierboven gedefinieerde post.js bestand in app.js.

const Post = require ('./ model / post');

Maak een API-eindpunt / Api / post / getAllPost voor het ophalen van de lijst met blogberichten. Gebruik de mangoest client om verbinding te maken met de MongoDB-database.

app.post ('/ api / post / getAllPost', (req, res) => mongoose.connect (url, useMongoClient: true, function (err) if (err) gooi err; console.log (' verbinding succesvol tot stand gebracht '););)

Zodra u de verbinding tot stand hebt gebracht, kunt u de Post model om de lijst met blogberichten te vinden.

Post.find (, [], , (err, doc) => if (err) gooi err; console.log ('result is', doc);)

De .vind callback retourneert de lijst met documenten.

De geretourneerde documenten zijn in stijgende volgorde, dus voeg een voorwaarde toe om de blogberichten in aflopende volgorde te sorteren.

Post.find (, [], sort: _id: -1, (err, doc) => if (err) go go err;)

Zodra u de lijst met documenten uit de database hebt opgevraagd, stuurt u de gegevens samen met de staat. Hier ziet u hoe de REST API eruitziet:

app.post ('/ api / post / getAllPost', (req, res) => mongoose.connect (url, useMongoClient: true, function (err) if (err) go errr; Post.find ( , [], sort: _id: -1, (err, doc) => if (err) gooi err; return res.status (200) .json (status: 'success', data: doc)));)

De API-oproep plaatsen

In de Show-post.component.ts bestand, definieer een arraylijst om de resultaten van de API-aanroep te behouden.

openbare berichten: alle [];

Importeer de ShowPostService in de ShowPostComponent.

import ShowPostService van './show-post.service';

Voeg de toe ShowPostService als een provider voor de ShowPostComponent.

@Component (selector: 'app-show-post', templateUrl: './show-post.component.html', styleUrl: ['./show-post.component.css'], providers: [ShowPostService] )

Definieer een methode genaamd getAllPost om een ​​oproep te doen naar de servicemethode. Hier is hoe het eruit ziet:

getAllPost () this.showPostService.getAllPost (). subscribe (result => this.posts = result ['data'];); 

Zoals te zien is in de bovenstaande code, worden de resultaatgegevens ingesteld op de posts veranderlijk.

Voer een oproep uit naar de hierboven gedefinieerde methode vanuit de ngOnInit methode, zodat de details van de blogpost worden opgehaald zodra het onderdeel is geïnitialiseerd.

ngOnInit () this.getAllPost (); 

Hier is hoe het Show-post.component.ts bestand ziet er:

importeer Component, OnInit uit '@ angular / core'; import ShowPostService van './show-post.service'; @Component (selector: 'app-show-post', templateUrl: './show-post.component.html', styleUrl: ['./show-post.component.css'], providers: [ShowPostService] ) exportklasse ShowPostComponent implementeert OnInit openbare berichten: alle []; constructor (private showPostService: ShowPostService)  ngOnInit () this.getAllPost ();  getAllPost () this.showPostService.getAllPost (). subscribe (result => this.posts = result ['data'];);  

Het weergeven van de blogberichten

De MongoDB-verzameling bevat mogelijk geen in te voeren gegevens. Dus laten we een paar ingangen in de MongoDB toevoegen vanuit de mongo schelp.

Voer de MongoDB-shell in door de volgende opdracht te typen:

mongo

Zodra u de mongo shell, controleer de database die beschikbaar is in de MongoDB-database.

collecties tonen;

Selecteer de blogDb database uit de vermelde vermeldingen.

gebruik blogDb

Maak een verzameling met de naam post.

db.createCollection ( 'post')

Voeg een paar ingangen in de post verzameling.

db.post.insert (title: 'TutsPlus Python Entry', beschrijving: 'Welkom bij de officiële invoer van de TutsPlus Python-programmeersessie')

Laten we ons binden posts variabele in de ShowPostComponent naar de HTML-code.

Je zult gebruik maken van de ngFor richtlijn om te itereren over de posts verander en toon de blogposts. Wijzig de Show-post.component.html bestand zoals getoond:

  
 
 Post.title
 3 dagen geleden 
 
 Post.description
 Lees verder…   

Sla de bovenstaande wijzigingen op en start de client- en REST API-server opnieuw. Meld u aan bij de toepassing en de geplaatste records van MongoDB worden weergegeven op de startpagina.

Inpakken

In deze zelfstudie hebt u de gemaakt ShowPostComponent om de details van de blogpost weer te geven van de MongoDB database. U hebt de REST API gemaakt om de MongoDB-database te raadplegen met behulp van de Mangoest client van de Node-server.

In het volgende deel van de zelfstudiereeks leert u hoe u het maakt AddPostComponent voor het toevoegen van nieuwe berichten vanuit de gebruikersinterface van de toepassing.

Broncode voor deze tutorial is beschikbaar op GitHub.

Hoe was je ervaring tot nu toe? Laat me uw waardevolle suggesties weten in de onderstaande opmerkingen.