Opprette en bloggingapp ved hjelp av Angular & MongoDB Rediger innlegg

I den forrige delen av denne opplæringsserien lærte du hvordan du oppretter legge til komponenten for å legge til nye blogginnlegg. Du lærte hvordan du oppretter REST API-endepunktet for å legge til et nytt innlegg i MongoDB-databasen.

I denne delen av opplæringsserien lærer du hvordan du implementerer funksjonaliteten for å redigere et eksisterende blogginnlegg fra bloggposten.

Starter

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

git klone https://github.com/royagasthyan/AngularBlogApp-Post EditPost

Naviger til prosjektkatalogen og installer de nødvendige avhengighetene.

cd EditPost / client npm installere cd EditPost / server npm installere

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

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

Pek nettleseren din til http: // localhost: 4200 og du vil få programmet til å kjøre.

Legge til Rediger innleggsvisning

I ShowPostComponent, Du legger til to ikoner for redigering og sletting av blogginnlegget. Du vil bruke Font Awesome til å vise redigerings- og slettikonene.

Last ned og ta med fontens kjempemappe i eiendeler mappe.

I src / app / index.html side, inkludere en referanse til fonten awesome CSS stil.

Endre nå show-post / show-post.component.html fil for å inkludere HTML for redigering og sletning av ikoner.

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

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

Lagre endringene ovenfor og start klientprogrammet på nytt. Logg inn på programmet, og du vil kunne se redigerings- og slettikonene som svarer til hvert oppført blogginnlegg.

Populere Rediger detalj i en popup

Når brukeren klikker på redigeringsikonet som samsvarer med et blogginnlegg, må du fylle ut blogginnleggets detaljer i tilleggspopup-vinduet for å oppdatere.

Legg til en klikkmetode på redigeringsikonet.

Inne i CommonService, du må definere en observerbar å holde styr på når redigeringsknappen er klikket. Definer det observerbare som vist:

offentlig postEdit_Observable = nytt emne ();

Definer en annen variabel for å holde oversikt over innlegget som skal redigeres.

offentlig post_til_be_edited; constructor () this.post_to_be_edited = nytt innlegg (); 

Når redigeringsknappen er klikket, vil du beholde innlegget som skal redigeres i CommonService og utløse det observerbare å varsle om post redigering. Definer to metoder for å angi innlegget som skal redigeres og for å varsle innleggsredigering.

notifyPostEdit () this.postEdit_Observable.next ();  setPostToEdit (innlegg: Post) this.post_to_be_edited = post; this.notifyPostEdit (); 

Inne i klikkmetoden, vil du ringe til setPostToEdit metode fra CommonService. Her er hvordan editPost metoden ser ut:

editPost (post: Post) this.commonService.setPostToEdit (post); 

Du vil få postdetaljene i den vanlige tjenesten når brukeren klikker på redigeringsknappen. For å vise add-popup-vinduet for oppdatering, må du klikke på Legg til post-knappen programmatisk.

Inne i home / home.component.html fil, legg til en # identifikator til legg til post-knappen.

  Legg til 

Importere ViewChild og ElementRef inne i home.component.ts fil.

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

Definer en referanse til tilleggsknappen inne i home.component.ts fil.

@ViewChild ('addPost') addBtn: ElementRef;

Inne i HomeComponent konstruktør, abonnere på postEdit_Observable fra CommonService. Ved å ringe postEdit_Observable abonnement tilbakeringing, påkall legg til-knappen for å vise popup-vinduet. Her er hvordan home.component.ts fil ser ut:

importer Komponent, ViewChild, ElementRef fra '@ vinkel / kjerne'; importer CommonService fra '... /service/common.service'; @Component (selector: 'app-home', templateUrl: './home.component.html', styleUrls: ['./home.component.css']) eksportklasse HomeComponent @ViewChild ('addPost') addBtn: ElementRef; Konstruktør (privat commonService: CommonService) this.commonService.postEdit_Observable.subscribe (res => this.addBtn.nativeElement.click (););  

Du må abonnere på postEdit_Observable i add-post.component.ts fil for å angi innlegget som skal redigeres på post variabel. Her er hvordan ngOnInit metode i add-post.component.ts utseende:

ngOnInit () this.commonService.postEdit_Observable.subscribe (res => this.post = this.commonService.post_to_be_edited;); 

Lagre endringene ovenfor og start klientserveren på nytt. Logg inn på søknaden og klikk på redigeringsknappen mot et blogginnlegg. Du vil kunne se postopplysningene som er fylt ut i tilleggspost-popup-vinduet.

Opprette oppdateringsruten REST API

Innsiden server / app.js, la oss definere et annet REST API-endepunkt for å oppdatere innleggsdetaljer basert på postens ID. Slik ser det ut:

app.post ('/ api / post / updatePost', (req, res) => )

La oss først bruke Mongoose å koble til MongoDB-databasen.

app.post ('/ api / post / updatePost', (req, res) => mongoose.connect (url, useMongoClient: true, funksjon (err) console.log ('forbindelse etablert');) ;)

Når forbindelsen er etablert, bruker du Oppdater metode på Post-modellen.

Post.update (_id: req.body.id, title: req.body.title, beskrivelse: req.body.description, (err, doc) => hvis (err) kaste err;)

Du oppdaterer innlegget basert på ID av innlegget bestått. Som vist i koden ovenfor har du spesifisert innlegget _id å være oppdatert. I det andre alternativet har du angitt feltene som skal oppdateres, som er tittel og beskrivelse.

Når detaljene blir oppdatert, returnerer du status sammen med antall rader som er berørt under oppdateringen. Slik ser REST API-sluttpunktet for innleggsoppdateringen ut:

app.post ('/ api / post / updatePost', (req, res) => mongoose.connect (url, useMongoClient: true, funksjon (err) hvis (feil) kaste err; Post.update  _id: req.body.id, title: req.body.title, beskrivelse: req.body.description, (err, doc) => hvis (feil) kaste feil, return res.status (200). json (status: 'suksess', data: doc)));)

Gjør REST API-anropet til oppdatering

De ID returnert for hvert innlegg fra MongoDB er _id, så du må endre id av modellen vår src / app / modeller / post.model.ts. Slik ser det ut:

eksporter klasse Post constructor () this._id = "; this.title ="; this.description = "; offentlig _id; offentlig tittel; offentlig beskrivelse;

Når du klikker på Legg til post-knappen, vil metoden som heter, være addPost. Inne i addPost metode i add-post.component.ts, Du vil sjekke om post objektet har en _id. Hvis en _id er tilstede, må du ringe oppdateringsmetoden fra tjenesten, ellers vil du ringe til tjenesten for tilleggstjeneste.

Opprett en metode som kalles updatePost inne i add-post.service.ts fil.

UpdatePost (post: Post) return this.http.post ('/ api / post / updatePost', id: post._id, tittel: post.title, beskrivelse: post.description)

Her er hvordan den endrede addPost metode fra add-post.component.ts fil ser ut:

addPost () if (this.post.title && this.post.description) if (this.post._id) this.addPostService.updatePost (this.post) .subscribe (res => this.closeBtn.nativeElement .click (); this.commonService.notifyPostAddition (););  annet 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 begge Angular and Node-serveren på nytt. Logg inn på programmet og prøv å redigere et innlegg. Du vil få en popup som vises for å redigere detaljene ved å klikke på redigeringsknappen. Klikk på add-knappen, og detaljene vil bli oppdatert og vises i bloggposten.

Pakke det opp

I denne opplæringen implementerte du funksjonaliteten for å oppdatere eksisterende blogginnleggsdetaljer. Du opprettet REST API-endepunktet for å avslutte endringer for å oppdatere blogginnleggene basert på blogginnlegget. Du har gjort bruk av Mongoose klient for å oppdatere detaljene i blogginnlegget i MongoDB-databasen.

I neste del implementerer du slettingsinnlegget og logger ut funksjonaliteten.

Hvordan var din erfaring så langt? Gi oss beskjed om dine tanker, forslag eller eventuelle rettelser i kommentarene nedenfor.

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