Opprette en Blogging App ved hjelp av Angular & MongoDB Vis innlegg

I den siste delen av opplæringsserien så du hvordan du skriver REST API-sluttpunktet for brukerinnlogging. Du brukte Mongoose til å samhandle med MongoDB fra Node. Etter vellykket validering så du hvordan du bruker Angular Router for å navigere til HomeComponent.

I denne delen av opplæringsserien lager du en komponent for å vise blogginnleggsdetaljer på hjemmesiden.

Starter

La oss begynne med å klone kildekoden fra den siste delen av opplæringsserien.

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

Naviger til prosjektkatalogen og installer de nødvendige avhengighetene.

cd AngularBlogApp-Post / klient npm installere cd AngularBlogApp-Post / server npm installere

Når du har installert avhengighetene, må du starte klient- og serverprogrammet på nytt.

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

Pek nettleseren din til http: // localhost: 4200 og du bør ha programmet kjørt.

Opprette Vis postkomponent

Når brukeren blir logget inn i programmet, vil du vise HomeComponent. HomeComponent fungerer som en wrapper-komponent for alle komponentene som vises i den. Du vil vise listen over blogginnlegg lagt til av brukeren i HomeComponent.

For å vise blogginnlegg, la oss opprette en ny komponent som heter ShowPostComponent. Opprett en mappe som heter show-post inne i src / app mappe. Inne i show-post mappe, opprett en fil som heter show-post.component.html og legg til følgende HTML-kode:

  
 
Liste gruppepost overskrift
 3 dager siden 
 
Donec er ikke en av de eldste på egen måte. Maecenas sed som egen risus varius blandit.
 Donec id elit non mi porta.   
 
Liste gruppepost overskrift
 3 dager siden 
 
Donec er ikke en av de eldste på egen måte. Maecenas sed som egen risus varius blandit.
 Donec id elit non mi porta.   
 
Liste gruppepost overskrift
 3 dager siden 
 
Donec er ikke en av de eldste på egen måte. Maecenas sed som egen risus varius blandit.
 Donec id elit non mi porta.  

Opprett en fil som heter show-post.component.ts som vil inneholde ShowPostComponent klasse. Slik ser det ut:

importer Komponent, OnInit fra '@ vinkel / kjerne'; @Component (selector: 'app-show-post', templateUrl: './show-post.component.html') eksportklasse ShowPostComponent implementerer OnInit constructor ()  ngOnInit ()  

Importer ShowPostComponent i app.module.ts fil.

importer ShowPostComponent fra './show-post/show-post.component';

Legg til ShowPostComponent i NgModule i app.module.ts fil. 

importer BrowserModule fra '@ vinkel / plattform-nettleser'; importer NgModule fra '@ vinkel / kjerne'; importer ROUTING fra './app.routing'; importer FormModule fra '@ vinkler / skjemaer'; importer HttpClientModule fra '@ vinkel / vanlig / http'; importer RootComponent fra './root/root.component'; importer LoginComponent fra './login/login.component'; importer HomeComponent fra './home/home.component'; importer ShowPostComponent fra './show-post/show-post.component'; @NgModule (deklarasjoner: [RootComponent, LoginComponent, HomeComponent, ShowPostComponent], import: [BrowserModule, ROUTING, FormsModule, HttpClientModule], leverandører: [], bootstrap: [RootComponent]) eksportklasse AppModule  

Endre home.component.html fil for å inkludere ShowPostComponent velger.

Her er hvordan den endrede home.component.html fil ser ut:

  
Angular Blog App
  
  
 

Lagre endringene ovenfor og oppdater klientprogrammet. Ved å logge inn på søknaden, vil du kunne se de oppførte blogginnleggene.

Opprett Vis postkomponenttjenesten

Dataene som vises i ShowPostComponent tjenesten viser hardkodede data. Du trenger en tjeneste for å spørre blogginnlegglisten fra MongoDB-databasen. La oss skape en tjeneste for din ShowPostComponent.

Opprett en fil som heter show-post.service.ts i src / app / show-post og legg til følgende kode:

importer Injectable fra '@ vinkel / kjerne'; importer HttpClient fra '@ vinkel / vanlig / http'; @Injectable () eksport klasse ShowPostService konstruktør (privat http: HttpClient) 

Inne i ShowPostService, opprett en metode som kalles getAllPost, som vil gjøre REST API-anropet for å få blogginnleggslisten. Slik ser det ut:

getAllPost () return this.http.post ('/ api / post / getAllPost', )

Her er hvordan show-post.service.ts fil ser ut:

importer Injectable fra '@ vinkel / kjerne'; importer HttpClient fra '@ vinkel / vanlig / http'; importer Post fra '... /models/post.model'; @Injectable () eksportklasse ShowPostService konstruktør (privat http: HttpClient)  getAllPost () return this.http.post ('/ api / post / getAllPost', )

Deretter må du skrive ned REST API for å spørre MongoDB samlingen for å få listen over blogginnlegg.

På server siden, la oss komme i gang ved å lage modellen for innlegget. Inne i modeller mappe, opprett en fil som heter post.js. Krever Mongoose modul og lage et skjema for blogginnlegget og eksporter det. Her er hvordan /server/models/post.js utseende:

const mongoose = krever ('mongoose'); const Schema = mongoose. Schema; // lage et skjema const postSchema = nytt skjema (title: type: String, obligatorisk: true, beskrivelse: type: String, required: true, samling: 'innlegg'); const post = mongoose.model ("post", postskjema); module.exports = Post;

Eksporter den ovenfor definerte post.js filen inn app.js.

const post = krever ('./ modell / post');

Opprett et API-endepunkt / Api / post / getAllPost for å hente listen over blogginnlegg. Bruke Mongoose klient for å koble til MongoDB-databasen.

app.post ('/ api / post / getAllPost', (req, res) => mongoose.connect (url, useMongoClient: true, funksjon (feil) hvis (feil) kaste err; console.log tilkoblingen ble etablert ');;)

Når du har opprettet forbindelsen, kan du bruke Post modell for å finne listen over blogginnlegg.

Post.find (, [], , (err, doc) => hvis (feil) kaste err; console.log ('result is', doc);)

De .finne tilbakeringing returnerer listen over dokumenter.

Dokumentene som returneres vil være i stigende rekkefølge, så legg til en betingelse for å sortere blogginnleggene i synkende rekkefølge.

Post.find (, [], sorter: _id: -1, (err, doc) => hvis (feil) kaste err;)

Når du har listen over dokumenter forespurt fra databasen, returnerer du dataene sammen med status. Her ser du hvordan REST API ser ut:

app.post ('/ api / post / getAllPost', (req, res) => mongoose.connect (url, useMongoClient: true, funksjon (feil) hvis (feil) kaste err; Post.find ( , [], sorter: _id: -1, (err, doc) => hvis (err) kaste err; return res.status (200) .json (status: 'suksess' doc)));)

Gjøre API-anropet

I show-post.component.ts fil, definer en matriseliste for å holde resultatene av API-anropet.

offentlige innlegg: noen [];

Importer ShowPostService i ShowPostComponent.

importer ShowPostService fra './show-post.service';

Legg til ShowPostService som leverandør til ShowPostComponent.

@Component (selector: 'app-show-post', templateUrl: './show-post.component.html', styleUrls: ['./show-post.component.css'], leverandører: [ShowPostService] )

Definer en metode som kalles getAllPost å ringe til servicemetoden. Slik ser det ut:

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

Som vist i ovennevnte kode, blir resultatdataene satt til innlegg variabel.

Ringe til den ovenfor definerte metoden fra ngOnInit metode, slik at blogginnleggdetaljene hentes så snart komponenten er initialisert.

ngOnInit () this.getAllPost (); 

Her er hvordan show-post.component.ts fil ser ut:

importer Komponent, OnInit fra '@ vinkel / kjerne'; importer ShowPostService fra './show-post.service'; @Component (selector: 'app-show-post', templateUrl: './show-post.component.html', styleUrls: ['./show-post.component.css'], leverandører: [ShowPostService] ) eksportklasse ShowPostComponent implementerer OnInit offentlige innlegg: noen []; Konstruktør (privat showPostService: ShowPostService)  ngOnInit () this.getAllPost ();  getAllPost () this.showPostService.getAllPost (). abonnere (resultat => this.posts = result ['data'];);  

Gjengir blogginnleggene

MongoDB-samlingen kan ikke ha oppføringer som skal forespørres. Så la oss legge til noen få oppføringer i MongoDB fra mongo shell.

Skriv inn MongoDB-skallet ved å skrive inn følgende kommando:

mongo

Når du går inn i mongo shell, sjekk databasen som er tilgjengelig i MongoDB-databasen.

vise samlinger;

Velg blogDb database fra de oppførte oppføringene.

bruk blogdb

Opprett en samling som heter post.

db.createCollection ( 'innlegg')

Sett inn et par oppføringer i post samling.

db.post.insert (title: 'TutsPlus Python Entry', beskrivelse: 'Velkommen til offisiell oppføring av TutsPlus Python programmeringsøkt')

La oss nå binde vår innlegg variabel i ShowPostComponent til HTML-koden.

Du vil gjøre bruk av ngFor Direktivet for å lure over innlegg variabel og vise blogginnleggene. Endre show-post.component.html fil som vist:

  
 
Post.title
 3 dager siden 
 
Post.description
 Les mer…   

Lagre endringene ovenfor og start klienten og REST API-serveren på nytt. Logg inn på søknaden, og du vil ha de innførte postene fra MongoDB som vises på hjemmesiden.

Pakke det opp

I denne opplæringen skapte du ShowPostComponent for å vise blogginnleggets detaljer fra MongoDB database. Du opprettet REST API for å spørre MongoDB-databasen ved hjelp av Mongoose klient fra node-serveren.

I neste del av opplæringsserien lærer du hvordan du oppretter AddPostComponent for å legge til nye innlegg fra applikasjonsbrukergrensesnittet.

Kildekode for denne opplæringen er tilgjengelig på GitHub.

Hvordan var din erfaring så langt? Gi meg beskjed om dine verdifulle forslag i kommentarene nedenfor.