Share
În partea anterioară a acestei serii de tutorial, ați învățat cum să implementați funcția de editare a detaliilor postării de blog.
În această parte, veți implementa funcționalitatea pentru a șterge o postare de blog existentă și pentru a implementa funcția de deconectare a utilizatorului.
Să începem prin clonarea codului sursă din ultima parte a seriei tutorial.
git clone https://github.com/royagasthyan/AngularBlogApp-EditUpdate DeletePost
Navigați la directorul proiectului și instalați dependențele necesare.
cd DeletePost / client npm instalare cd DeletePost / server npm instalare
Odată ce aveți dependențele instalate, reporniți aplicația client și server.
cd DeletePost / client npm începe cd DeletePost / server nod app.js
Punctați browser-ul dvs. la http: // localhost: 4200 și veți avea aplicația care rulează.
Ați adăugat deja pictograma ștergerii la postările de blog listate. Când utilizatorul face clic pe pictograma de ștergere care corespunde oricărei postări de blog, trebuie să afișați un popup de confirmare a ștergerii. În cazul în care utilizatorul confirmă procesul de ștergere, este necesară ștergerea numai a postului de blog.
Să începem cu adăugarea unei confirmări pop-up modale atunci când utilizatorul face clic pe butonul de ștergere. Adăugați următorul cod pop la modal spectacol-post.component.html fişier.
Modificați pictograma ștergerii pentru a include date-țintă atributul așa cum este arătat:
Salvați modificările de mai sus și reporniți serverul client. Conectați-vă la aplicație și dați clic pe pictograma de ștergere care corespunde oricărei postări de blog și veți primi opțiunea de confirmare modală.
Să creați un punct final pentru API-ul REST pentru a șterge postarea pe blog. În Server / app.js fișier, creați un punct final pentru API-ul REST pentru a gestiona ștergerea postărilor de pe blog pe baza postării pe blog id. Iată cum arată aspectul final al API-ului REST:
Accentsconagua
app.post ('/ api / post / deletePost', (req, res) => )Începeți prin conectarea la baza de date MongoDB folosind Mangustă client.
mongoose.connect (url, useMongoClient: true, funcția (err) // conexiunea stabilită);
Veți face uz de findByIdAndRemove pentru a găsi postarea pe blog folosind id și ștergeți-l. După ce postarea pe blog a fost șters cu succes, veți reveni stare ca răspuns. Iată cum arată aspectul final al API-ului REST:
app.post ('/ api / post / deletePost', (req, res) => mongoose.connect (url, useMongoClient: true, funcția (err) if (err) () () () () () () () () ()Când utilizatorul face clic pe pictograma ștergerii, trebuie să păstrați detaliile postului într-o variabilă. Dacă utilizatorul avansează cu opțiunea de ștergere după confirmare, veți efectua un apel la ștergerea API-ului REST.
Adăugați o metodă numită setDelete pe butonul de ștergere faceți clic pe spectacol-post.component.html. Iată cum arată:
În interiorul show-post.component.ts fișier, definiți o variabilă numită post_to_delete.
Definiți metoda numită setDelete interior show-post.component.ts pentru a menține detaliile postului pentru a fi șterse.
setDelete (postare: Post) this.post_to_delete = post;
Când utilizatorul face clic pe butonul de anulare a pop-up-ului, trebuie să apelați o metodă numită unsetDelete pentru a seta post_to_delete la nul. Iată cum arată:
unsetDelete () this.post_to_delete = null;
Iată cum Anulare pentru codul HTML pentru spectacol-post.component.html arată:
Acum, să definim metoda de serviciu numită deletePost în interiorul show-post.service.ts fişier. Iată cum arată:
id: id return return.http.post ('/ api / post / deletePost',Pentru a apela metoda de serviciu de la ShowPostComponent, definiți o metodă numită deletePost care va subscrie la deletePost metoda de la ShowPostService. Iată cum deletePost metoda de la ShowPostComponent arată:
deletePost () this.showPostService.deletePost (this.post_to_delete._id) .subscribe (res => this.getAllPost ();
Odată ce postarea a fost ștearsă, trebuie să actualizați lista postărilor, prin urmare trebuie să faceți un apel către getAllPost metodă. De asemenea, trebuie să închideți fereastra de tip popup după ce ștergerea a reușit.
Mai întâi, importați o referință la ViewChild și ElementRef în show-post.component.ts fişier.
import Component, OnInit, ViewChild, ElementRef din '@ angular / core';
Definiți o variabilă closeBtn pentru a crea o referință la butonul de închidere a ferestrei pop-up.
@ViewChild ('closeBtn') closeBtn: ElementRef;Acum, când apelul de ștergere are succes, trebuie să închideți fereastra de confirmare a ștergerii.
Iată cum a fost modificat deletePost metoda arată:
this.showPostService.deletePost (this.post_to_delete._id) .subscribe (res => this.getAllPost (); this.closeBtn.nativeElement.click ();
Iată cum show-post.component.ts file looks:
import Component, OnInit, ViewChild, ElementRef din '@ angular / core'; import ShowPostService de la "./show-post.service"; import Post de la "... /models/post.model"; import CommonService, de la "... /service/common.service"; @Component (selector: 'app-show-post', templateUrl: './show-post.component.html', styleUrls: ['./show-post.component.css'], furnizori: [ShowPostService] ) clasa de export ShowPostComponent implementează OnInit @ViewChild ('closeBtn') closeBtn: ElementRef; posturi publice: orice []; publice 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 = post; unsetDelete () this.post_to_delete = null; getAllPost () this.showPostService.getAllPost () subscribe (rezultat => console.log ('rezultat este', rezultat); this.posts = result ['data']; editPost (postare: Post) this.commonService.setPostToEdit (postare); deletePost () this.showPostService.deletePost (this.post_to_delete._id) .subscribe (res => this.getAllPost (); this.closeBtn.nativeElement.click ();)Salvați modificările de mai sus și reporniți aplicația client și server. Conectați-vă la aplicație și dați clic pe pictograma de ștergere corespunzătoare oricărei postări pe blog. Veți avea o casetă de confirmare afișată. Confirmați ștergerea mesajului de pe blog, iar postarea de pe blog va fi ștearsă, iar lista postărilor pe blog va fi actualizată.
Când utilizatorul se conectează la aplicație, veți păstra numele de utilizator conectat într-o localStorage. Modificați validateLogin în interiorul metodei LoginComponent pentru a stoca numele de utilizator înregistrat în localStorage.
Când rezultatul apelului API este validat, adăugați următorul cod pentru a stoca numele de utilizator conectat.
localStorage.setItem ('loggedInUser', acest.user.username);Iată cum validateLogin metoda arată:
validateLogin () if (this.user.username && this.user.password) this.loginService.validateLogin (this.user) .subscribe (rezultat => if (result ['status'] === ' , eroare => localStorage.setItem ('loggedInUser', this.user.username); this.router.navigate (['/ home']) console.log ("eroare este", eroare);); altceva alert ('introduceți numele de utilizator și parola'); Acum, în interiorul home.component.html fișier, adăugați o metodă numită logout la butonul de deconectare.
În interiorul home.component.ts fișier, creați o metodă numită logout. În interiorul logout , trebuie să ștergeți spațiul de stocare local pentru loggedInUser. Iată cum arată metoda:
logout () localStorage.removeItem ("loggedInUser"); this.router.navigate ([ '/']); În HomeComponent's constructor metoda, trebuie să adăugați un cec pentru loggedInUser cheie de stocare locală. Dacă nu este găsit, trebuie să redirecționați pagina de conectare. Iată cum home.component.ts file looks:
import Component, ViewChild, ElementRef de la '@ angular / core'; import CommonService de la "... /service/common.service"; import Router de la '@ unghiular / router'; @Component (selector: 'app-home', templateUrl: './home.component.html', styleUrls: ['./home.component.css']) clasa de export HomeComponent @ViewChild ('addPost') addBtn: ElementRef; constructor (privat commonService: CommonService, router privat: 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 ([ '/']); Salvați modificările de mai sus și reporniți serverul client. Încercați să accesați pagina de pornire prin încărcarea adresei URL http: // localhost: 4200 / home în fereastra browserului. Veți fi redirecționați către pagina de conectare.
Conectați-vă la aplicație și dați clic pe butonul Deconectați-vă. Veți fi deconectat și redirecționat către pagina de conectare.
În această parte a seriei de tutorial, ați învățat cum să implementați ștergerea mesajului de pe blog prin adăugarea unei pictograme în lista postărilor de pe blog. De asemenea, ați creat un API REST pentru ștergerea detaliilor postărilor de pe blog din baza de date MongoDB folosind Mangustă client.
Ați implementat doar caracteristicile de bază ale unei aplicații de blog și această aplicație poate fi dezvoltată în continuare pentru a include mai multe funcții.
Cum a fost experiența dvs. de învățare pentru a crea o aplicație de blogging folosind Angular și MongoDB? Spuneți-ne gândurile și sugestiile în comentariile de mai jos.
Codul sursă din acest tutorial este disponibil pe GitHub.
Și, în sfârșit, amintiți-vă că JavaScript este limba web. Nu este fără curbele sale de învățare, dar dacă căutați resurse suplimentare pentru a studia sau a utiliza în munca dvs., verificați ce avem disponibil în piața Envato.
