Opprette en bloggingapp ved hjelp av Angular & MongoDB Slett innlegg

I den forrige delen av denne opplæringsserien lærte du hvordan du implementerer funksjonaliteten for å redigere blogginnleggets detaljer.

I denne delen implementerer du funksjonaliteten for å slette et eksisterende blogginnlegg og implementere brukerloggfunksjonaliteten.

Starter

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

git klone https://github.com/royagasthyan/AngularBlogApp-EditUpdate DeletePost

Naviger til prosjektkatalogen og installer de nødvendige avhengighetene.

cd DeletePost / client npm installere cd DeletePost / server npm installere

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

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

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

Legge til Slett bekreftelse 

Du har allerede lagt til slettikonet til de oppførte blogginnleggene. Når brukeren klikker slettikonet som samsvarer med et blogginnlegg, må du vise en slettingsbekreftelsespopp. Hvis brukeren bekrefter slettingsprosessen, må bare blogginnlegget slettes.

La oss begynne med å legge til en modal popup-bekreftelse når brukeren klikker sletteknappen. Legg til følgende modal popup kode til show-post.component.html fil.

 
 
 
 
Slett innlegg
  x  
 
 Er du sikker ? 
 
 Avbryt Slett 
 
 
 

Endre slettikonet for å inkludere data-target attributt som vist:

Lagre endringene ovenfor og start klientserveren på nytt. Logg inn på søknaden og klikk på slettikonet som svarer til et blogginnlegg, og du vil få bekreftelsesmodalet dukket opp.

Opprett slett blogginnlegg-API

La oss opprette et REST API-endepunkt for å slette blogginnlegget. I server / app.js fil, opprett et sluttpunkt for REST API for å håndtere blogginnlegget basert på blogginnlegget id. Slik ser REST API-endepunktet ut:

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

Start med å koble til MongoDB-databasen ved hjelp av Mongoose klient.

mongoose.connect (url, useMongoClient: true, funksjon (err) // forbindelse etablert);

Du vil gjøre bruk av findByIdAndRemove metode for å finne blogginnlegget ved hjelp av id og slett den. Når blogginnlegget er slettet, returnerer du status som et svar. Slik ser REST API-endepunktet ut:

app.post ('/ api / post / deletePost', (req, res) => mongoose.connect (url, useMongoClient: true, funksjon (feil) hvis (feil) kaste err; Post.findByIdAndRemove .body.id, (err, doc) => hvis (feil) kaste feil, returnere res.status (200) .json (status: 'suksess', data: doc)));)

Ringe til Slett-API

Når brukeren klikker slettikonet, må du beholde postdetaljer i en variabel. Hvis brukeren fortsetter med slettingsalternativet etter bekreftelse, ringer du til slettet REST API.

Legg til en metode som kalles setDelete Klikk på sletteknappen show-post.component.html. Slik ser det ut:

Inne i show-post.component.ts fil, definer en variabel som heter post_to_delete.

Definer metoden som heter setDelete innsiden show-post.component.ts for å holde postopplysningene slettet.

setDelete (innlegg: Post) this.post_to_delete = post; 

Når brukeren klikker på avbryt-knappen i popup-vinduet, må du ringe en metode som heter unsetDelete å sette post_to_delete til null. Slik ser det ut:

unsetDelete () this.post_to_delete = null; 

Her er hvordan Avbryt knapp HTML kode for show-post.component.html utseende:

Avbryt

La oss nå definere servicemetoden som heter deletePost inne i show-post.service.ts fil. Slik ser det ut:

deletePost (id) return this.http.post ('/ api / post / deletePost', id: id)

For å ringe servicemetoden fra ShowPostComponent, definer en metode som kalles deletePost som vil abonnere på deletePost metode fra ShowPostService. Her er hvordan deletePost metode fra ShowPostComponent utseende:

deletePost () this.showPostService.deletePost (this.post_to_delete._id) .subscribe (res => this.getAllPost ();)

Når posten er slettet, må du oppdatere postlisten, derfor må du ringe til getAllPost metode. Du må også lukke popupen når slettingen er vellykket.

Først skal du importere en referanse til ViewChild og ElementRef i show-post.component.ts fil.

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

Definer en variabel closeBtn å opprette en referanse til popup-lukkeknappen. 

@ViewChild ('closeBtn') closeBtn: ElementRef;

Nå, når slettingssamtalen er vellykket, må du lukke slettingsbekreftelsesmenyen.

Her er hvordan den endrede deletePost metoden ser ut:

 deletePost () this.showPostService.deletePost (this.post_to_delete._id) .subscribe (res => this.getAllPost (); this.closeBtn.nativeElement.click ();)

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

importer Komponent, OnInit, ViewChild, ElementRef fra '@ vinkel / kjerne'; importer ShowPostService fra './show-post.service'; importer Post fra '... /models/post.model'; importer CommonService, fra '... /service/common.service'; @Component (selector: 'app-show-post', templateUrl: './show-post.component.html', styleUrls: ['./show-post.component.css'], leverandører: [ShowPostService] ) eksport klasse ShowPostComponent implementerer OnInit @ViewChild ('closeBtn') closeBtn: ElementRef; offentlige innlegg: noen []; offentlig post_til_delete; konstruktør (privat showPostService: ShowPostService, privat commonService: CommonService)  ngOnInit () this.getAllPost (); this.commonService.postAdded_Observable.subscribe (res => this.getAllPost (););  setDelete (post: Post) this.post_to_delete = post;  unsetDelete () this.post_to_delete = null;  getAllPost () this.showPostService.getAllPost (). abonner (resultat => console.log ('resultat er', resultat); this.posts = result ['data'];);  editPost (post: Post) this.commonService.setPostToEdit (post);  deletePost () this.showPostService.deletePost (this.post_to_delete._id) .subscribe (res => this.getAllPost (); this.closeBtn.nativeElement.click ();)

Lagre endringene ovenfor og start klient- og serverprogrammet på nytt. Logg inn på programmet og klikk på slettikonet som svarer til et blogginnlegg. Du vil få en bekreftelsesboks dukket opp. Bekreft blogginnlegget, og blogginnlegget blir slettet og bloggpostlisten vil bli oppdatert.

Håndtering av brukeresesjon under pålogging

Når brukeren logger på applikasjonen, holder du det loggede brukernavnet i en lokal lagring. Endre validateLogin metode inne i LoginComponent for å lagre det loggede brukernavnet i lokal lagring.

Når resultatet fra API-anropet er validert, legg til følgende kode for å lagre det loggede brukernavnet.

localStorage.setItem ('loggedInUser', this.user.username);

Her er hvordan validateLogin metoden ser ut:

validateLogin () if this.user.username && this.user.password this.loginService.validateLogin (this.user) .subscribe (result => if (resultat ['status'] === 'suksess' ) localStorage.setItem ('loggedInUser', this.user.username); this.router.navigate (['/ home']); else alert ('Feil brukernavn passord');, error =>  console.log ('feil er', feil););  ellers alert ('skriv inn brukernavn og passord'); 

Nå inne i home.component.html fil, legg til en metode som kalles Logg ut til utloggingsknappen.

 Logg ut 

Inne i home.component.ts fil, opprett en metode som kalles Logg ut. Inne i Logg ut metode, må du slette lokal lagring for logg. Slik ser metoden ut:

logout () localStorage.removeItem ('loggedInUser'); this.router.navigate ([ '/']); 

I HomeComponentKonstruktørmetoden, du må legge til en sjekk for logg lokal lagringsnøkkel. Hvis ikke funnet, må du omdirigere til påloggingssiden. Her er hvordan home.component.ts fil ser ut:

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

Lagre endringene ovenfor og start klientserveren på nytt. Prøv å få tilgang til hjemmesiden ved å laste inn URL http: // localhost: 4200 / home i nettleservinduet. Du blir omdirigert til påloggingssiden. 

Logg inn på søknaden og klikk på Logg ut-knappen. Du vil bli logget ut og omdirigert til påloggingssiden.

Pakke det opp

I denne delen av opplæringsserien lærte du hvordan du implementerer blogginnlegget ved å legge til et ikon på bloggposten. Du har også opprettet en REST-API for å slette blogginnleggsdetaljer fra MongoDB-databasen ved hjelp av Mongoose klient.

Du har bare implementert de aller grunnleggende funksjonene i et bloggprogram, og dette programmet kan utvikles videre for å inkludere mange flere funksjoner. 

Hvordan var din erfaring med å lære å lage en blogging-applikasjon ved hjelp av Angular og MongoDB? Gi oss beskjed om dine tanker og forslag i kommentarene nedenfor.

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

Og endelig husk at JavaScript er de språk på nettet. Det er ikke uten sine læringskurver, men hvis du leter etter flere ressurser for å studere eller bruke i arbeidet ditt, sjekk ut hva vi har tilgjengelig på Envato Market.