Share
In het vorige deel van deze tutorialserie hebt u geleerd hoe u de functionaliteit implementeert om de details van de blogpost te bewerken.
In dit deel implementeert u de functionaliteit om een bestaande blogpost te verwijderen en de gebruikersuitlogfunctionaliteit te implementeren.
Laten we beginnen door de broncode uit het laatste deel van de zelfstudiereeks te klonen.
git clone https://github.com/royagasthyan/AngularBlogApp-EditUpdate DeletePost
Navigeer naar de projectdirectory en installeer de vereiste afhankelijkheden.
cd DeletePost / client npm install cd DeletePost / server npm install
Nadat de afhankelijkheden zijn geïnstalleerd, start u de client- en servertoepassing opnieuw op.
cd DeletePost / client npm start cd DeletePost / server node app.js
Richt uw browser op http: // localhost: 4200 en de toepassing wordt uitgevoerd.
U hebt het verwijderpictogram al toegevoegd aan de vermelde blogposts. Wanneer de gebruiker op het verwijderpictogram klikt dat hoort bij een blogbericht, moet u een pop-up voor het verwijderen van de pagina weergeven. Als de gebruiker het verwijderingsproces bevestigt, hoeft alleen de blogpost te worden verwijderd.
Laten we beginnen met het toevoegen van een modale pop-upbevestiging wanneer de gebruiker op de knop Verwijderen klikt. Voeg de volgende modale pop-upcode toe aan de Show-post.component.html het dossier.
Wijzig het verwijderpictogram om de data-target attribuut zoals getoond:
Sla de bovenstaande wijzigingen op en start de clientserver opnieuw op. Log in op de toepassing en klik op het verwijderpictogram dat hoort bij een blogpost en je krijgt de bevestigingsmodal te zien.
Laten we een REST API-eindpunt maken om de blogpost te verwijderen. In de server / app.js bestand, maak een REST API-eindpunt om de verwijdering van blogberichten af te handelen op basis van de blogpost ID kaart. Hier ziet u hoe het REST API-eindpunt eruitziet:
Accentsconagua
app.post ('/ api / post / deletePost', (req, res) => )Begin met het verbinden met de MongoDB-database met behulp van de Mangoest cliënt.
mongoose.connect (url, useMongoClient: true, function (err) // connection established);
U zult gebruik maken van de findByIdAndRemove methode om de blogpost te vinden met behulp van de ID kaart en verwijder het. Nadat het blogbericht met succes is verwijderd, retourneert u het staat als een reactie. Hier ziet u hoe het REST API-eindpunt eruitziet:
app.post ('/ api / post / deletePost', (req, res) => mongoose.connect (url, useMongoClient: true, function (err) if (err) gooi err; Post.findByIdAndRemove (req .body.id, (err, doc) => if (err) gooi err; return res.status (200) .json (status: 'success', data: doc)));)Wanneer de gebruiker op het pictogram voor verwijderen klikt, moet u de postdetails in een variabele bewaren. Als de gebruiker na de bevestiging doorgaat met de verwijderoptie, belt u naar de REST-API voor verwijderen.
Voeg een methode toe genaamd setDelete klik op de delete-knop Show-post.component.html. Hier is hoe het eruit ziet:
Binnen in de Show-post.component.ts bestand, definieer een variabele genaamd post_to_delete.
Definieer de methode genaamd setDelete binnen Show-post.component.ts om de postdetails te verwijderen.
setDelete (post: Post) this.post_to_delete = bericht;
Wanneer de gebruiker op de knop Annuleren klikt in de pop-up, moet u een methode met de naam bellen unsetDelete om de post_to_delete naar nul. Hier is hoe het eruit ziet:
unsetDelete () this.post_to_delete = null;
Hier is hoe het annuleren knop HTML-code voor Show-post.component.html ziet:
Laten we nu de gebruikte servicemethode definiëren Verwijder gepost bericht binnen in de Show-post.service.ts het dossier. Hier is hoe het eruit ziet:
deletePost (id) retourneer this.http.post ('/ api / post / deletePost', id: id)Om de servicemethode vanuit de ShowPostComponent, definieer een methode genaamd Verwijder gepost bericht die zich abonneren op de Verwijder gepost bericht methode van de ShowPostService. Hier is hoe het Verwijder gepost bericht methode van de ShowPostComponent ziet:
deletePost () this.showPostService.deletePost (this.post_to_delete._id) .subscribe (res => this.getAllPost ();)
Nadat het bericht is verwijderd, moet u de lijst met berichten vernieuwen, vandaar dat u het nummer moet bellen getAllPost methode. U moet ook de pop-up sluiten nadat de verwijdering is gelukt.
Importeer eerst een verwijzing naar ViewChild en ElementRef in de Show-post.component.ts het dossier.
importeer Component, OnInit, ViewChild, ElementRef van '@ angular / core';
Definieer een variabele closeBtn om een verwijzing naar de pop-upknop Sluiten te maken.
@ViewChild ('closeBtn') closeBtn: ElementRef;Nu, als het verwijderen is gelukt, moet u de pop-up voor het verwijderen van de verwijdering sluiten.
Hier is hoe de gemodificeerde Verwijder gepost bericht methode lijkt:
deletePost () this.showPostService.deletePost (this.post_to_delete._id) .subscribe (res => this.getAllPost (); this.closeBtn.nativeElement.click ();)
Hier is hoe het Show-post.component.ts bestand ziet er:
importeer Component, OnInit, ViewChild, ElementRef van '@ angular / core'; import ShowPostService van './show-post.service'; importeer Post van '... /models/post.model'; import CommonService, van '... /service/common.service'; @Component (selector: 'app-show-post', templateUrl: './show-post.component.html', styleUrl: ['./show-post.component.css'], providers: [ShowPostService] ) exportklasse ShowPostComponent implementeert OnInit @ViewChild ('closeBtn') closeBtn: ElementRef; openbare berichten: alle []; public post_to_delete; constructor (private showPostService: ShowPostService, private commonService: CommonService) ngOnInit () this.getAllPost (); this.commonService.postAdded_Observable.subscribe (res => this.getAllPost ();); setDelete (post: Post) this.post_to_delete = bericht; unsetDelete () this.post_to_delete = null; getAllPost () this.showPostService.getAllPost (). subscribe (result => console.log ('result is', result); 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 ();)Sla de bovenstaande wijzigingen op en start de client- en servertoepassing opnieuw. Meld u aan bij de toepassing en klik op het verwijderpictogram dat overeenkomt met een blogbericht. Er verschijnt een bevestigingsvenster. Bevestig het verwijderen van het blogbericht en de blogpost wordt verwijderd en de blogberichtenlijst wordt bijgewerkt.
Wanneer de gebruiker inlogt bij de applicatie, bewaart u de ingelogde gebruikersnaam in a lokale opslag. Wijzig de validateLogin methode binnen de LoginComponent om de ingelogde gebruikersnaam op te slaan lokale opslag.
Wanneer het resultaat van de API-oproep is gevalideerd, voegt u de volgende code toe om de ingelogde gebruikersnaam op te slaan.
localStorage.setItem ('loggedInUser', this.user.username);Hier is hoe het validateLogin methode lijkt:
validateLogin () if (this.user.username && this.user.password) this.loginService.validateLogin (this.user) .subscribe (result => if (result ['status'] === 'success' ) localStorage.setItem ('loggedInUser', this.user.username); this.router.navigate (['/ home']); else alert ('Wrong username password');, error => console.log ('error is', error);); else alert ('gebruikersnaam en wachtwoord invoeren'); Nu, binnen de home.component.html bestand, voeg een methode toe genaamd uitloggen naar de uitlogknop.
Binnen in de home.component.ts bestand, maakt u een methode genaamd uitloggen. Binnen in de uitloggen methode, moet u de lokale opslagruimte voor de loggedInUser. Hier ziet u hoe de methode eruitziet:
logout () localStorage.removeItem ('loggedInUser'); this.router.navigate ([ '/']); In de HomeComponent's constructormethode, je moet een vinkje plaatsen voor de loggedInUser lokale opslagsleutel. Als dit niet wordt gevonden, moet u doorverwijzen naar de inlogpagina. Hier is hoe het home.component.ts bestand ziet er:
importeer Component, ViewChild, ElementRef van '@ angular / core'; import CommonService van '... /service/common.service'; importeer Router van '@ angular / router'; @Component (selector: 'app-home', templateUrl: './home.component.html', styleUrls: ['./home.component.css']) exportklasse HomeComponent @ViewChild ('addPost') addBtn: ElementRef; constructor (private commonService: CommonService, private router: Router) if (! localStorage.getItem ('loggedInUser')) this.router.navigate (['/']); this.commonService.postEdit_Observable.subscribe (res => this.addBtn.nativeElement.click ();); logout () localStorage.removeItem ('loggedInUser'); this.router.navigate ([ '/']); Sla de bovenstaande wijzigingen op en start de clientserver opnieuw op. Probeer de startpagina te openen door de URL http: // localhost: 4200 / home in het browservenster te laden. U wordt doorgestuurd naar de inlogpagina.
Meld u aan bij de toepassing en klik op de knop Uitloggen. U wordt uitgelogd en doorgestuurd naar de inlogpagina.
In dit deel van de tutorialserie hebt u geleerd hoe u de verwijdering van een blogpost implementeert door een pictogram toe te voegen aan de blogberichtenlijst. U hebt ook een REST-API gemaakt om de details van de blogpost uit de MongoDB-database te verwijderen met behulp van de Mangoest cliënt.
U hebt alleen de basisfuncties van een blogtoepassing geïmplementeerd en deze toepassing kan verder worden ontwikkeld met nog veel meer functies.
Hoe was je ervaring met het leren maken van een blogtoepassing met Angular en MongoDB? Laat ons uw mening en suggesties weten in de opmerkingen hieronder.
Broncode van deze tutorial is beschikbaar op GitHub.
En tot slot, onthoud dat JavaScript dat is de taal van het web. Het is niet zonder zijn leercurves, maar als je op zoek bent naar extra middelen om te studeren of om te gebruiken in je werk, bekijk dan wat we beschikbaar hebben op de Envato-markt..
