Een blog-app maken met Angular & MongoDB bericht bewerken

In het vorige deel van deze tutorialserie hebt u geleerd hoe u de add-postcomponent kunt maken om nieuwe blogposts toe te voegen. U hebt geleerd hoe u het REST API-eindpunt maakt om een nieuw bericht aan de MongoDB-database toe te voegen.

In dit deel van de zelfstudiereeks leert u hoe u de functionaliteit implementeert om een bestaand blogbericht uit de lijst met blogberichten te bewerken.

Ermee beginnen

Laten we beginnen door de broncode uit het laatste deel van de zelfstudiereeks te klonen.

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

Navigeer naar de projectdirectory en installeer de vereiste afhankelijkheden.

cd EditPost / client npm install cd EditPost / server npm install

Nadat de afhankelijkheden zijn geïnstalleerd, start u de client- en servertoepassing opnieuw op.

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

Richt uw browser op http: // localhost: 4200 en de toepassing wordt uitgevoerd.

De bewerkte berichtweergave toevoegen

In de ShowPostComponent, je voegt twee pictogrammen toe voor het bewerken en verwijderen van de blogpost. U gebruikt Font Awesome om de pictogrammen voor bewerken en verwijderen weer te geven.

Download en voeg de lettertype awesome map toe in de middelen map.

In de src / app / index.html pagina bevat een verwijzing naar het lettertype awesome CSS stijl.

Pas nu het Show-post / Show-post.component.html bestand om de HTML op te nemen voor de pictogrammen bewerken en verwijderen.

Hier is hoe het Show-post.component.html bestand ziet er:

    Post.title
 3 dagen geleden 
  Post.description
  Lees verder…

Sla de bovenstaande wijzigingen op en start de clienttoepassing opnieuw. Meld u aan bij de toepassing en u kunt de pictogrammen voor bewerken en verwijderen weergeven die overeenkomen met elk vermeld blogbericht.

Het bewerken van details in een pop-up

Wanneer de gebruiker op het bewerkingspictogram klikt dat hoort bij een blogbericht, moet u de details van de blogpost invullen in de popup voor het toevoegen van updates..

Voeg een klikmethode toe aan het bewerkpictogram.

Binnen in de CommonService, u moet een waarneembaar punt definiëren om bij te houden wanneer op de knop Bewerken wordt geklikt. Definieer de waarneembare zoals getoond:

public postEdit_Observable = new Subject ();

Definieer een andere variabele om het bericht dat moet worden bewerkt bij te houden.

public post_to_be_edited; constructor () this.post_to_be_edited = new Post ();

Wanneer op de knop Bewerken wordt geklikt, houdt u het bericht dat moet worden bewerkt in de CommonService en activeer de waarneembare om te melden dat er na de bewerking is gewerkt. Definieer twee methoden om de post die moet worden bewerkt in te stellen en om berichtbewerking te melden.

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

Binnen de klikmethode belt u de setPostToEdit methode van CommonService. Hier is hoe het bericht bewerken methode lijkt:

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

U zult het bericht in de algemene service hebben wanneer de gebruiker op de knop Bewerken klikt. Om de pop-up van het toevoegen van een post te tonen voor het updaten, moet u op de knop Post toevoegen op programmatische wijze klikken.

Binnen in de home / home.component.html bestand, voeg een toe # ID voor de knop voor het toevoegen van berichten.

Importeren ViewChild en ElementRef binnen in de home.component.ts het dossier.

importeer Component, ViewChild, ElementRef van '@ angular / core';

Definieer een verwijzing naar de knop Toevoegen in de home.component.ts het dossier.

@ViewChild ('addPost') addBtn: ElementRef;

Binnen in de HomeComponent constructor, abonneren op de postEdit_Observable van CommonService. Over het bellen van de postEdit_Observable abonnement terugbellen, roep de knop Toevoegen aan om de pop-up te tonen. Hier is hoe het home.component.ts bestand ziet er:

importeer Component, ViewChild, ElementRef van '@ angular / core'; import CommonService van '... /service/common.service'; @Component (selector: 'app-home', templateUrl: './home.component.html', styleUrls: ['./home.component.css']) exportklasse HomeComponent @ViewChild ('addPost') addBtn: ElementRef; constructor (private commonService: CommonService) this.commonService.postEdit_Observable.subscribe (res => this.addBtn.nativeElement.click (););

U moet zich abonneren op postEdit_Observable in de add-post.component.ts bestand om het bericht in te stellen dat moet worden bewerkt post variabel. Hier is hoe het ngOnInit methode in add-post.component.ts ziet:

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

Sla de bovenstaande wijzigingen op en start de clientserver opnieuw op. Log in op de applicatie en klik op de knop Bewerken voor elk blogbericht. Je zult in staat zijn om de postdetails te bekijken die zijn ingevuld in de popup voor het toevoegen van berichten.

De Update Post REST API maken

Binnen server / app.js, laten we een ander REST API-eindpunt definiëren om postdetails bij te werken op basis van de ID van het bericht. Hier is hoe het eruit ziet:

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

Laten we het eerst gebruiken Mangoest om verbinding te maken met de MongoDB-database.

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

Zodra de verbinding tot stand is gebracht, maakt u gebruik van de bijwerken methode op het Post-model.

Post.update (_id: req.body.id, title: req.body.title, description: req.body.description, (err, doc) => if (err) go err;)

Je zult de post bijwerken op basis van de ID kaart van het bericht gepasseerd. Zoals te zien is in de bovenstaande code, hebt u het bericht gespecificeerd _ID kaart worden bijgewerkt. In de tweede optie hebt u de velden opgegeven die moeten worden bijgewerkt titel en Omschrijving.

Zodra de details zijn bijgewerkt, retourneert u de staat samen met het aantal rijen dat tijdens de update is aangetast. Hier ziet u hoe het REST API-eindpunt voor de post-update eruitziet:

app.post ('/ api / post / updatePost', (req, res) => mongoose.connect (url, useMongoClient: true, function (err) if (err) gooi fout; Post.update ( _id: req.body.id, title: req.body.title, description: req.body.description, (err, doc) => if (err) gooi err; return res.status (200). json (status: 'success', data: doc)));)

De REST-API maken om te updaten

De ID kaart terug voor elke post van de MongoDB is _ID kaart, dus je moet het wijzigen ID kaart van ons model src / app / modellen / post.model.ts. Hier is hoe het eruit ziet:

export class Post constructor () this._id = "; this.title ="; this.description = "; public _id; public title; public description;

Wanneer u op de knop voor het toevoegen van berichten klikt, wordt de methode genoemd addPost. Binnen in de addPost methode in add-post.component.ts, je zult controleren of het post object heeft een _ID kaart. Als een _ID kaart is aanwezig, dan moet u de updatemethode vanuit de service bellen, anders belt u de methode voor het toevoegen van postservice.

Maak een methode genaamd updatePost binnen in de add-post.service.ts het dossier.

updatePost (plaatsen: plaatsen) retourneer this.http.post ('/ api / post / updatePost', id: post._id, titel: post.title, description: post.description)

Hier is hoe de gemodificeerde addPost methode van de add-post.component.ts bestand ziet er:

addPost () if (this.post.title && this.post.description) if (this.post._id) this.addPostService.updatePost (this.post) .subscribe (res => this.closeBtn.nativeElement .klik (); this.commonService.notifyPostAddition (););  else this.addPostService.addPost (this.post) .subscribe (res => this.closeBtn.nativeElement.click (); this.commonService.notifyPostAddition (););  else alert ('Titel en omschrijving vereist');

Sla de bovenstaande wijzigingen op en start de beide hoek- en knoopserver opnieuw op. Log in op de applicatie en probeer een bericht te bewerken. U krijgt een pop-upvenster om de details te bewerken door op de knop Bewerken te klikken. Klik op de knop Toevoegen en de details worden bijgewerkt en weergegeven in de blogberichtenlijst.

Inpakken

In deze zelfstudie hebt u de functionaliteit geïmplementeerd om de bestaande details van uw blogpost bij te werken. U hebt het back-end REST API-eindpunt gemaakt om de details van de blogpost bij te werken op basis van de ID van het blogbericht. U hebt gebruik gemaakt van de Mangoest klant om de details van de blogpost in de MongoDB-database bij te werken.

In het volgende deel implementeert u de verwijderingspost en uitlogfunctionaliteit.

Hoe was je ervaring tot nu toe? Laat ons uw gedachten, suggesties of eventuele correcties in de onderstaande opmerkingen weten.

Broncode van deze tutorial is beschikbaar op GitHub.

Code