Opprette en bloggingapp ved hjelp av Angular & MongoDB Legg til innlegg

I den forrige delen av Angular blog-opplæringsserien lærte du hvordan du opprettet ShowPostComponent for å vise listen over blogginnlegg på hjemmesiden. Du hentet postene som ble satt inn fra MongoDB-skjermen ved hjelp av det opprettede REST API-sluttpunktet.

I denne opplæringen vil du opprette en ny komponent som heter AddPostComponent å gi brukergrensesnittet for å legge til et nytt blogginnlegg i MongoDB-databasen.

Starter

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

git klone https://github.com/royagasthyan/ShowPost AddPost

Naviger til prosjektkatalogen og installer de nødvendige avhengighetene.

cd AddPost / client npm installere cd AddPost / server npm installere

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

cd AddPost / client npm start cd AddPost / server node app.js

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

Opprette Add-komponenten

La oss begynne med å lage AddPostComponent. Opprett en mappe som heter add-post inne i src / app mappe. Inne i add-post mappe, opprett en fil som heter add-post.component.ts og legg til følgende kode:

importer Komponent fra '@ vinkel / kjerne'; importer Post fra '... /models/post.model'; @Component (selector: 'app-add-post', templateUrl: './add-post.component.html', styleUrls: ['./add-post.component.css']) eksportklasse AddPostComponent constructor ()  

Opprett en fil som heter add-post.component.html og følgende HTML-kode:

 
 
 
 
Modal tittel
  x  
 
 
 
 Tittel  
 
 Beskrivelse   
 Legg til 
 
 
 
 

Du vil vise tilleggspostkomponenten som en popup.

Nå må du legge til AddPostComponent til NgModule. Importer AddPostComponent i app.module.ts fil.

importer AddPostComponent fra './add-post/add-post.component';

Legg komponenten til NgModule erklæringer liste. Slik ser det ut:

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'; importer AddPostComponent fra './add-post/add-post.component'; @NgModule (deklarasjoner: [RootComponent, LoginComponent, HomeComponent, ShowPostComponent, AddPostComponent], import: [BrowserModule, ROUTING, FormsModule, HttpClientModule], leverandører: [], bootstrap: [RootComponent]) eksportklasse AppModule  

For å utløse tilleggspost-popupen har du allerede lagt til data-target Tilordne knappen i home.component.html.

 Legg til 

Lagre endringene ovenfor og start programmet på nytt. Logg inn på søknaden og klikk på Legg til lenke på hjemmesiden. Du vil ha AddPostComponent vises som en popup.

Implementere Add Functionalitet

Legg til ngModel Direktivet til inngangselementene for tittel og beskrivelse.

Legg til en klikk Direktiv til knappen for å ringe metoden for å lagre blogginnlegget.

Legg til

Importer Post modell fra src / app / modeller / post.model.ts i add-post.component.ts fil.

importer Post fra '... /models/post.model';

Definer post variabel i add-post.component.ts fil.

Offentlig stilling: Post;

Definer addPost metode inne i add-post.component.ts fil. Fra addPost metode, vil du validere den angitte tittel og beskrivelse og ring til tjenestemetoden for å ringe til REST API. Slik ser metoden ut:

addPost () if (this.post.title && this.post.description) // ring servicemetoden for å legge til post else alert ('Tittel og beskrivelse kreves'); 

La oss lage servicefilen for komponenten AddPostComponent. Opprett en fil som heter add-post.service.ts og legg til følgende kode:

importer Injectable fra '@ vinkel / kjerne'; importer HttpClient fra '@ vinkel / vanlig / http'; importer Post fra '... /models/post.model'; @Injectable () eksportklasse AddPostService konstruktør (privat http: HttpClient) 

Inne i AddPostService, opprett en metode som kalles addPost for å gjøre REST API-anropet.

addPost (post: Post) return this.http.post ('/ api / post / createPost', tittel: post.title, beskrivelse: post.description)

Som vist i ovennevnte kode har du gjort bruk av Httpclient å gjøre API-anropet og returnere observer.

I add-post.component.ts fil inne i addPost metode, vil du abonnere på addPost metode fra add-post.service.ts fil.

this.addPostService.addPost (this.post) .subscribe (res => // svar fra REST API-anrop);

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

importer Komponent fra '@ vinkel / kjerne'; importer AddPostService fra './add-post.service'; importer Post fra '... /models/post.model'; @Component (selector: 'app-add-post', templateUrl: './add-post.component.html', styleUrls: ['./add-post.component.css'], leverandører: [AddPostService] ) eksportklasse AddPostComponent offentlig post: Post; konstruktør (privat addPostService: AddPostService) this.post = new Post ();  addPost () if (this.post.title && this.post.description) this.addPostService.addPost (this.post) .subscribe (res => console.log ('response is', res)) ;  else alert ('Tittel og beskrivelse kreves');  

Oppretter REST API for Legg til innlegg

La oss opprette et REST API-sluttpunkt for å legge blogginnlegget til MongoDB-databasen. I server / app.js fil, opprett et API-sluttpunkt som vist:

app.post ('/ api / post / createPost', (req, res) => // legg inn detaljene til MongoDB)

Først må du koble til MongoDB-databasen ved hjelp av Mongoose klient.

mongoose.connect (url, useMongoClient: true, funksjon (err) hvis (err) kaste err; console.log ('connection established'););

Når forbindelsen er etablert, må du opprette et modellobjekt ved hjelp av Post skjema definert i server / modell / post.js fil. 

const post = ny post (tittel: req.body.title, beskrivelse: req.body.description)

Som vist i koden ovenfor skapte du Post-objektet ved hjelp av tittel og beskrivelse sendt inn fra forespørselen req gjenstand.

Ring lagre Metode på Post-objektet for å lagre oppføringen til MongoDB.

post.save ((err, doc) => hvis (feil) kaste feil, returnere res.status (200) .json (status: 'suksess', data: doc))

Som vist i ovennevnte kode, når lagre Metode tilbakeringing kalles uten feil, det vil returnere suksess melding sammen med det returnerte objektet doc.

Slik ser REST API-sluttpunktet endelig ut:

app.post ('/ api / post / createPost', (req, res) => mongoose.connect (url, useMongoClient: true, funksjon (feil) hvis (feil) kaste err; const post = ny innlegg (tittel: req.body.title, beskrivelse: req.body.description) post.save ((err, doc) => hvis (feil) kaste err; return res.status (200) .json : 'suksess', data: doc)));)

Lagre endringene ovenfor og start begge Angular and Node-serverne på nytt. Logg inn på programmet og prøv å legge til et nytt blogginnlegg. Når du klikker på Legg til knappen, sjekk nettleserkonsollen, og du vil få suksessresponsen logget inn.

Når blogginnleggene blir lagt til databasen, må du lukke popup-vinduet. For å lukke popupen, er det en nær knapp som du må klikke programmatisk.

Du bruker den @ViewChild dekoratør for å få tilgang til lukkeknappen.

Importere ViewChild og ElementRef i AddPostComponent.

importer Komponent, ViewChild, ElementRef fra '@ vinkel / kjerne';

Inne i AddPostComponent, definer følgende variabel:

@ViewChild ('closeBtn') closeBtn: ElementRef;

Initiere closeBtn klikk ved å bruke følgende kode:

this.closeBtn.nativeElement.click ();

Legg til koden ovenfor til suksess tilbakeringing av addPost metode. Her er addPost metode fra add-post.component.ts.

addPost () if (this.post.title && this.post.description) this.addPostService.addPost (this.post) .subscribe (res => this.closeBtn.nativeElement.click (););  else alert ('Tittel og beskrivelse kreves'); 

Lagre endringene og start klientserveren på nytt. Logg inn på programmet og prøv å legge til et nytt blogginnlegg. Når blogginnleggets detaljer har blitt lagret, vil popup-filen lukkes.

Forfriskende blogglisten

En ting å merke seg er at det nylig lagt blogginnlegget ikke vises i bloggposten. Så du må legge til en utløser for å varsle når du skal oppdatere ShowPostComponent. Du vil benytte deg av en felles tjeneste for å kommunisere mellom de to komponentene.

Opprett en mappe som heter service inne i src / app mappe. Opprett en fil som heter common.service.ts med følgende kode:

importer Injectable fra '@ vinkel / kjerne'; importer Emne fra 'rxjs / Subject'; @Injectable () eksport klasse CommonService public postAdded_Observable = nytt Emne (); konstruktør ()  notifyPostAddition () this.postAdded_Observable.next (); 

Som vist i koden ovenfor har du erklært a Emne kalt postAdded_Observable for å holde oversikt over det nye blogginnlegget til databasen. Når et nytt blogginnlegg legges til databasen, vil du ringe til notifyPostAddition metode, som vil varsle abonnentene om oppdateringen.

Importer CommonService i app.module.ts og inkludere den i NgModule leverandørens liste. Slik ser det ut:

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'; importer AddPostComponent fra './add-post/add-post.component'; importer CommonService fra './service/common.service'; @NgModule (deklarasjoner: [RootComponent, LoginComponent, HomeComponent, ShowPostComponent, AddPostComponent], import: [BrowserModule, ROUTING, FormsModule, HttpClientModule], leverandører: [CommonService], bootstrap: [RootComponent]) eksportklasse AppModule  

Importere CommonService i show-post.component.ts filen og initialiser den i konstruktormetoden.

importer CommonService fra '... /service/common.service';

konstruktør (privat showPostService: ShowPostService, privat commonService: CommonService) 

Inne i ngOnInit metode, abonnere på postAdded_Observable variabel og last inn getAllPost metode. Her er hvordan ngOnInit metoden ser ut:

ngOnInit () this.getAllPost (); this.commonService.postAdded_Observable.subscribe (res => this.getAllPost ();); 

Importere CommonService i add-post.component.ts fil og ring til notifyPostAddition Metode når blogginnlegget er lagt til. Her er hvordan addPost metode fra AddPostComponent utseende:

addPost () if (this.post.title && this.post.description) this.addPostService.addPost (this.post) .subscribe (res => this.closeBtn.nativeElement.click (); this.commonService. notifyPostAddition (););  else alert ('Tittel og beskrivelse kreves'); 

Lagre endringene ovenfor og start klientserveren på nytt. Logg inn på søknaden og legg til et nytt blogginnlegg. Når det er lagt til, blir bloggpostlisten oppdatert med det nye blogginnlegget.

Pakke det opp

I denne opplæringen skapte du AddPostComponent å legge til blogginnleggets detaljer i MongoDB-databasen. Du opprettet REST API for å lagre et blogginnlegg til MongoDB-databasen ved hjelp av Mongoose klient.

I neste del av serien implementerer du funksjonaliteten for å redigere og oppdatere blogginnleggets detaljer.

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.