Creazione di un'applicazione per blogging utilizzando Angular & MongoDB Modifica post

Nella parte precedente di questa serie di tutorial hai appreso come creare il componente Aggiungi post per aggiungere nuovi post del blog. Hai imparato come creare l'endpoint dell'API REST per aggiungere un nuovo post al database MongoDB.

In questa parte della serie di tutorial, imparerai come implementare la funzionalità per modificare un post di blog esistente dall'elenco dei post del blog.

Iniziare

Iniziamo clonando il codice sorgente dall'ultima parte della serie di tutorial.

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

Passare alla directory del progetto e installare le dipendenze richieste.

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

Dopo aver installato le dipendenze, riavviare l'applicazione client e server.

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

Puntare il browser su http: // localhost: 4200 e si avrà l'applicazione in esecuzione.

Aggiungere la vista Modifica post

Nel ShowPostComponent, aggiungerai due icone per la modifica e l'eliminazione del post del blog. Farai uso di Font Awesome per visualizzare le icone di modifica ed eliminazione.

Scarica e includi la fantastica cartella dei font nel risorse cartella.

Nel src / app / index.html pagina, includi un riferimento al font fantastico CSS stile.

Ora modifica il spettacolo-post / show-post.component.html file per includere l'HTML per la modifica e l'eliminazione delle icone.

Ecco come show-post.component.html aspetto del file:

  
 
titolo del post
 3 giorni fa 
 
 Post.description
 
 leggi di più…  
   
 
  

Salvare le modifiche precedenti e riavviare l'applicazione client. Accedere all'applicazione e sarà possibile visualizzare le icone di modifica ed eliminazione corrispondenti a ciascun post del blog elencato.

Compilazione del dettaglio di modifica in una finestra popup

Quando l'utente fa clic sull'icona di modifica corrispondente a qualsiasi post del blog, è necessario popolare i dettagli del post del blog nel popup di aggiunta per l'aggiornamento.

Aggiungi un metodo di clic all'icona di modifica.

Dentro il CommonService, è necessario definire un osservabile per tenere traccia di quando si fa clic sul pulsante di modifica. Definisci l'osservabile come mostrato:

pubblico postEdit_Observable = new Subject ();

Definisci un'altra variabile per tenere traccia del post da modificare.

pubblico post_to_be_edited; costruttore () this.post_to_be_edited = new Post (); 

Ogni volta che si fa clic sul pulsante di modifica, si manterrà il post da modificare nel CommonService e attivare l'osservabile per notificare la modifica post. Definire due metodi per impostare il post da modificare e per notificare la modifica del post.

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

All'interno del metodo click, chiamerai il setPostToEdit metodo da CommonService. Ecco come modifica post aspetto del metodo:

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

Avrai i dettagli sul post nel servizio comune quando l'utente fa clic sul pulsante di modifica. Per mostrare il popup di aggiunta post per l'aggiornamento, è necessario fare clic sul pulsante Aggiungi post programmaticamente.

Dentro il home / home.component.html file, aggiungi a # identificatore al pulsante Aggiungi post.

  Inserisci 

Importare ViewChild e ElementRef dentro il home.component.ts file.

import Component, ViewChild, ElementRef da '@ angular / core';

Definire un riferimento al pulsante Aggiungi all'interno del home.component.ts file.

@ViewChild ('addPost') addBtn: ElementRef;

Dentro il HomeComponent costruttore, iscriviti al postEdit_Observable a partire dal CommonService. Alla chiamata del postEdit_Observable richiamo dell'abbonamento, richiama il pulsante Aggiungi per mostrare il popup. Ecco come home.component.ts aspetto del file:

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

Devi iscriverti a postEdit_Observable nel add-post.component.ts file per impostare il post da modificare sul inviare variabile. Ecco come ngOnInit metodo in add-post.component.ts sembra:

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

Salvare le modifiche precedenti e riavviare il server client. Accedere all'applicazione e fare clic sul pulsante Modifica su qualsiasi post del blog. Sarai in grado di visualizzare i dettagli del post popolati nel popup di aggiunta post.

Creazione dell'API di REST post di aggiornamento

Dentro server / app.js, definiamo un altro endpoint dell'API REST per aggiornare i dettagli dei post in base all'ID del post. Ecco come appare:

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

Iniziamo Mangusta per connettersi al database MongoDB.

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

Una volta stabilita la connessione, fai uso di aggiornare metodo sul modello Post.

Post.aggiornamento (_id: req.body.id, titolo: req.body.title, descrizione: req.body.description, (err, doc) => if (err) throw err;)

Aggiornerai il post in base a ID del post passato. Come visto nel codice sopra, hai specificato il post _ID essere aggiornato. Nella seconda opzione, hai specificato i campi da aggiornare, quali sono titolo e descrizione.

Una volta aggiornati i dettagli, restituirai il stato insieme al numero di righe interessate durante l'aggiornamento. Ecco come appare l'endpoint dell'API REST per l'aspetto dell'aggiornamento:

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

Effettuare la chiamata dell'API REST all'aggiornamento

Il ID è restituito per ogni post dal MongoDB _ID, quindi è necessario modificare il id del nostro modello src / app / models / post.model.ts. Ecco come appare:

export class Post constructor () this._id = "; this.title ="; this.description = "; _id pubblico; titolo pubblico; descrizione pubblica;

Quando fai clic sul pulsante aggiungi post, il metodo chiamato sarà addPost. Dentro il addPost metodo in add-post.component.ts, controllerai se il inviare l'oggetto ha un _ID. Se uno _ID è presente quindi devi chiamare il metodo di aggiornamento dal servizio, altrimenti chiamerai il metodo aggiungi servizio post.

Crea un metodo chiamato updatePost dentro il add-post.service.ts file.

updatePost (post: Post) return this.http.post ('/ api / post / updatePost', id: post._id, titolo: post.title, descrizione: post.description)

Ecco come è stato modificato addPost metodo dal add-post.component.ts aspetto del file:

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 (););  else this.addPostService.addPost (this.post) .subscribe (res => this.closeBtn.nativeElement.click (); this.commonService.notifyPostAddition (););  else alert ('Titolo e descrizione richiesti'); 

Salvare le modifiche precedenti e riavviare entrambi i server Angolare e Nodo. Accedi all'applicazione e prova a modificare un post. Verrà visualizzato un popup per modificare i dettagli facendo clic sul pulsante di modifica. Fare clic sul pulsante Aggiungi e i dettagli verranno aggiornati e visualizzati nell'elenco dei post del blog.

Avvolgendolo

In questo tutorial, hai implementato la funzionalità per aggiornare i dettagli del post del blog esistente. È stato creato l'endpoint dell'API REST back-end per aggiornare i dettagli del post del blog in base all'ID del post del blog. Hai fatto uso di Mangusta client per aggiornare i dettagli del post del blog nel database MongoDB.

Nella parte successiva, implementerai il post di eliminazione e la funzionalità di disconnessione.

Com'è stata la tua esperienza finora? Fateci sapere i vostri pensieri, suggerimenti o eventuali correzioni nei commenti qui sotto.

Il codice sorgente di questo tutorial è disponibile su GitHub.