Crearea unui App Blogging folosind unghiulare și MongoDB Editați postarea

În partea anterioară a acestei serii de tutorial ați învățat cum să creați componenta postare pentru a adăuga noi postări în blog. Ați învățat cum să creați punctul final al API-ului REST pentru a adăuga un nou post la baza de date MongoDB.

În această parte a seriei de tutorial, veți învăța cum să implementați funcția de editare a unei postări de blog existente din lista de postări pe blog.

Noțiuni de bază

Să începem prin clonarea codului sursă din ultima parte a seriei tutorial.

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

Navigați la directorul proiectului și instalați dependențele necesare.

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

Odată ce aveți dependențele instalate, reporniți aplicația client și server.

cd EditarePost / client npm start cd EditPost / server nod app.js

Punctați browser-ul dvs. la http: // localhost: 4200 și veți avea aplicația care rulează.

Adăugarea editării Vizualizării postărilor

În ShowPostComponent, veți adăuga două pictograme pentru editarea și ștergerea postării pe blog. Veți utiliza Font Awesome pentru a afișa pictogramele de editare și ștergere.

Descărcați și includeți folderul minunat pentru fonturi din bunuri pliant.

În src / app / index.html pagina, include o referință la font minunat CSS stil.

Acum modificați Arată-post / spectacol-post.component.html fișier pentru a include codul HTML pentru editarea și ștergerea icoanelor.

Iată cum spectacol-post.component.html file looks:

  
 
Post.title
 acum 3 zile 
 
Post.description
 
 Citeste mai mult…  
   
 
  

Salvați modificările de mai sus și reporniți aplicația client. Conectați-vă la aplicație și veți putea vizualiza pictogramele de editare și ștergere corespunzătoare fiecărui post de blog listat.

Populația detaliilor de editare într-un popup

Când utilizatorul dă clic pe pictograma de editare corespunzătoare oricărei postări de pe blog, trebuie să completați detaliile postării de blog în fereastra de adăugare a pop-ului pentru actualizare.

Adăugați o metodă de clic pe pictograma de editare.

În interiorul CommonService, trebuie să definiți o observabilă pentru a ține evidența când se face clic pe butonul de editare. Definiți observabil după cum se arată:

public postEdit_Observable = Subiect nou ();

Definiți o altă variabilă pentru a urmări postarea care urmează să fie editată.

publice post_to_be_edited; constructor () this.post_to_be_edited = mesaj nou (); 

De fiecare dată când se face clic pe butonul de editare, veți păstra postarea pentru a fi editată în CommonService și declanșează observabilul de a notifica post editarea. Definiți două metode pentru a seta postarea care trebuie editată și pentru a notifica editarea postării.

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

În interiorul metodei de clic, veți apela setPostToEdit metoda de la CommonService. Iată cum editează postarea metoda arată:

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

Veți avea detaliile postului în serviciul comun atunci când utilizatorul face clic pe butonul de editare. Pentru a afișa opțiunea de adăugare a pop-up-ului pentru actualizare, trebuie să faceți clic pe butonul de adăugare post programat.

În interiorul acasă / home.component.html fișier, adăugați a # identificatorul butonului pentru adăugarea postului.

  Adăuga 

Import ViewChild și ElementRef în interiorul home.component.ts fişier.

import Component, ViewChild, ElementRef de la '@ angular / core';

Definiți o trimitere la butonul de adăugare în interiorul home.component.ts fişier.

@ViewChild ('addPost') addBtn: ElementRef;

În interiorul HomeComponent constructor, abonați la postEdit_Observable din CommonService. La apelarea postEdit_Observable abonare apel invers, invoca butonul de add click pentru a afișa pop-up. Iată cum home.component.ts file looks:

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

Trebuie să vă abonați postEdit_Observable în add-post.component.ts fișier pentru a seta postul de editat pe post variabil. Iată cum ngOnInit metoda în add-post.component.ts arată:

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

Salvați modificările de mai sus și reporniți serverul client. Conectați-vă la aplicație și faceți clic pe butonul de editare în funcție de orice postare pe blog. Veți putea vizualiza detaliile postate populate în fereastra pop-up adăugare post.

Crearea API-ului Update REST Post

Interior Server / app.js, să definim un alt punct final pentru API-ul REST pentru a actualiza detaliile postului pe baza ID-ului postului. Iată cum arată:

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

Să folosim mai întâi Mangustă pentru a vă conecta la baza de date MongoDB.

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

Odată ce conexiunea este stabilită, utilizați Actualizați pe modelul Post.

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

Veți actualiza postarea în funcție de ID-ul a postului trecut. După cum se vede în codul de mai sus, ați specificat postarea _id a fi tinut la curent. În a doua opțiune, ați specificat câmpurile care trebuie actualizate, care sunt titlu și Descriere.

Odată ce detaliile se actualizează, veți reveni stare împreună cu numărul de rânduri afectate în timpul actualizării. Iată cum arată punctul final pentru API-ul REST pentru actualizarea postului:

(rr, res) => mongoose.connect (url, useMongoClient: true, funcția (err) if (err) _id: req.body.id, title: req.body.title, descriere: req.body.description, (err, doc) => if (err) throw err; retur res.status (200). json (status: 'succes', date: doc);)

Efectuarea apelului API REST pentru actualizare

ID-ul returnat pentru fiecare post din MongoDB este _id, astfel încât trebuie să modificați id a modelului nostru src / app / modele / post.model.ts. Iată cum arată:

clasa de export Postați constructor () this._id = "; this.title ="; this.description = "; public _id; titlu public; descriere publică;

Când faceți clic pe butonul de adăugare a postului, va fi apelată metoda addPost. În interiorul addPost metoda în add-post.component.ts, veți verifica dacă post obiect are un _id. Daca un _id este prezent, atunci trebuie să apelați metoda de actualizare din serviciu, altfel veți apela metoda de adăugare a serviciului post.

Creați o metodă numită updatePost în interiorul add-post.service.ts fişier.

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

Iată cum a fost modificat addPost metoda de la add-post.component.ts file looks:

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 (););  altceva this.addPostService.addPost (this.post) .subscribe (res => this.closeBtn.nativeElement.click (); this.commonService.notifyPostAddition (););  altceva alert ('Titlul și descrierea necesare'); 

Salvați modificările de mai sus și reporniți serverul Angular și Node. Conectați-vă la aplicație și încercați să editați o postare. Veți avea un popup afișat pentru a edita detaliile făcând clic pe butonul de editare. Faceți clic pe butonul Adăugați, iar detaliile vor fi actualizate și afișate în lista de postări pe blog.

Înfășurați-o

În acest tutorial, ați implementat funcționalitatea pentru actualizarea detaliilor existente în postarea pe blog. Ați creat sfârșitul final al API-ului REST pentru a actualiza detaliile postării de blog pe baza ID-ului postului de blog. Ai folosit Mangustă client pentru a actualiza detaliile postării pe blog în baza de date MongoDB.

În partea următoare, veți implementa funcția de ștergere post și deconectare.

Cum a fost experiența dvs. până acum? Spuneți-ne gândurile, sugestiile sau corecțiile din comentariile de mai jos.

Codul sursă din acest tutorial este disponibil pe GitHub.