Share
Nella parte precedente di questa serie di tutorial, hai imparato come implementare la funzionalità per modificare i dettagli del post del blog.
In questa parte, implementerai la funzionalità per eliminare un post esistente sul blog e implementare la funzionalità di disconnessione dell'utente.
Iniziamo clonando il codice sorgente dall'ultima parte della serie di tutorial.
git clone https://github.com/royagasthyan/AngularBlogApp-EditUpdate DeletePost
Passare alla directory del progetto e installare le dipendenze richieste.
cd DeletePost / client npm install cd DeletePost / server npm install
Dopo aver installato le dipendenze, riavviare l'applicazione client e server.
cd DeletePost / client npm start cd DeletePost / server node app.js
Puntare il browser su http: // localhost: 4200 e si avrà l'applicazione in esecuzione.
Hai già aggiunto l'icona di eliminazione ai post del blog elencati. Quando l'utente fa clic sull'icona di eliminazione corrispondente a qualsiasi post del blog, è necessario mostrare un popup di conferma dell'eliminazione. Se l'utente conferma la procedura di cancellazione, è necessario eliminare solo il post del blog.
Iniziamo con l'aggiunta di una conferma popup modale quando l'utente fa clic sul pulsante Elimina. Aggiungi il seguente codice popup modale a show-post.component.html file.
Modificare l'icona di eliminazione per includere il data-obiettivo attributo come mostrato:
Salvare le modifiche precedenti e riavviare il server client. Accedi all'applicazione e fai clic sull'icona di eliminazione corrispondente a qualsiasi post del blog, e apparirà il pulsante di conferma.
Creiamo un endpoint API REST per eliminare il post del blog. Nel server / app.js file, creare un endpoint dell'API REST per gestire l'eliminazione di post sul blog in base al post del blog id. Ecco come appare l'endpoint dell'API REST:
Accentsconagua
app.post ('/ api / post / deletePost', (req, res) => )Inizia collegandoti al database MongoDB usando il Mangusta cliente.
mongoose.connect (url, useMongoClient: true, function (err) // connection established);
Farai uso di findByIdAndRemove metodo per trovare il post del blog utilizzando il id ed eliminalo. Una volta che il post del blog è stato cancellato con successo, restituirai il stato come risposta. Ecco come appare l'endpoint dell'API REST:
app.post ('/ api / post / deletePost', (req, res) => mongoose.connect (url, useMongoClient: true, function (err) if (err) gettare err; Post.findByIdAndRemove (req .body.id, (err, doc) => if (err) throw err; return res.status (200) .json (status: 'success', data: doc)));)Quando l'utente fa clic sull'icona di eliminazione, è necessario mantenere i dettagli del post in una variabile. Se l'utente procede con l'opzione di cancellazione dopo la conferma, effettuerà una chiamata all'API REST di eliminazione.
Aggiungi un metodo chiamato setDelete sul pulsante Elimina fai clic su show-post.component.html. Ecco come appare:
Dentro il show-post.component.ts file, definire una variabile chiamata post_to_delete.
Definire il metodo chiamato setDelete dentro show-post.component.ts per mantenere i dettagli del post da eliminare.
setDelete (post: Post) this.post_to_delete = post;
Quando l'utente fa clic sul pulsante Annulla del popup, è necessario chiamare un metodo chiamato unsetDelete per impostare il post_to_delete a null. Ecco come appare:
unsetDelete () this.post_to_delete = null;
Ecco come Annulla pulsante codice HTML per show-post.component.html sembra:
Ora definiamo il metodo di servizio chiamato deletePost dentro il show-post.service.ts file. Ecco come appare:
deletePost (id) return this.http.post ('/ api / post / deletePost', id: id)Per chiamare il metodo di servizio da ShowPostComponent, definire un metodo chiamato deletePost che si iscriverà al deletePost metodo dal ShowPostService. Ecco come deletePost metodo dal ShowPostComponent sembra:
deletePost () this.showPostService.deletePost (this.post_to_delete._id) .subscribe (res => this.getAllPost ();)
Una volta eliminato il post, è necessario aggiornare l'elenco dei post, quindi è necessario effettuare una chiamata al getAllPost metodo. È inoltre necessario chiudere il popup una volta completata la cancellazione.
Innanzitutto, importa un riferimento a ViewChild e ElementRef nel show-post.component.ts file.
import Component, OnInit, ViewChild, ElementRef da '@ angular / core';
Definire una variabile closeBtn per creare un riferimento al pulsante di chiusura a comparsa.
@ViewChild ('closeBtn') closeBtn: ElementRef;Ora, quando la chiamata di eliminazione ha esito positivo, è necessario chiudere il popup di conferma dell'eliminazione.
Ecco come è stato modificato deletePost aspetto del metodo:
deletePost () this.showPostService.deletePost (this.post_to_delete._id) .subscribe (res => this.getAllPost (); this.closeBtn.nativeElement.click ();)
Ecco come show-post.component.ts aspetto del file:
import Component, OnInit, ViewChild, ElementRef da '@ angular / core'; import ShowPostService da './show-post.service'; importare Post da '... /models/post.model'; import CommonService, da '... /service/common.service'; @Component (selector: 'app-show-post', templateUrl: './show-post.component.html', styleUrls: ['./show-post.component.css'], provider: [ShowPostService] ) export class ShowPostComponent implementa OnInit @ViewChild ('closeBtn') closeBtn: ElementRef; post pubblici: any []; pubblico post_to_delete; costruttore (private showPostService: ShowPostService, commonService privato: 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 (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 ();)Salvare le modifiche precedenti e riavviare l'applicazione client e server. Accedi all'applicazione e fai clic sull'icona di eliminazione corrispondente a qualsiasi post del blog. Avrai una finestra di conferma spuntata. Conferma la cancellazione del post del blog e il post del blog verrà eliminato e l'elenco dei post del blog verrà aggiornato.
Quando l'utente accede all'applicazione, manterrai il nome utente registrato in a memoria locale. Modifica il validateLogin metodo all'interno del LoginComponent per memorizzare il nome utente registrato in memoria locale.
Quando il risultato della chiamata API viene convalidato, aggiungere il seguente codice per memorizzare il nome utente registrato.
localStorage.setItem ('loggedInUser', this.user.username);Ecco come validateLogin aspetto del metodo:
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 ('Password nome utente errato');, errore => console.log ('error is', error);); else alert ('inserire nome utente e password'); Ora, dentro il home.component.html file, aggiungi un metodo chiamato disconnettersi al pulsante di disconnessione.
Dentro il home.component.ts file, creare un metodo chiamato disconnettersi. Dentro il disconnettersi metodo, è necessario cancellare la memoria locale per il loggedInUser. Ecco come appare il metodo:
logout () localStorage.removeItem ('loggedInUser'); this.router.navigate ([ '/']); Nel HomeComponentIl metodo di costruzione, è necessario aggiungere un controllo per il loggedInUser chiave di archiviazione locale. Se non viene trovato, è necessario reindirizzare alla pagina di accesso. Ecco come home.component.ts aspetto del file:
import Component, ViewChild, ElementRef da '@ angular / core'; import CommonService da '... /service/common.service'; importare Router da '@ angular / router'; @Component (selector: 'app-home', templateUrl: './home.component.html', styleUrls: ['./home.component.css']) export class HomeComponent @ViewChild ('addPost') addBtn: ElementRef; costruttore (commonService privato: CommonService, router privato: 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 ([ '/']); Salvare le modifiche precedenti e riavviare il server client. Prova ad accedere alla pagina iniziale caricando l'URL http: // localhost: 4200 / home nella finestra del browser. Verrai reindirizzato alla pagina di accesso.
Accedi all'applicazione e fai clic sul pulsante di disconnessione. Sarai disconnesso e reindirizzato alla pagina di accesso.
In questa parte della serie di tutorial, hai imparato come implementare la cancellazione del post del blog aggiungendo un'icona all'elenco dei post del blog. È stata inoltre creata un'API REST per l'eliminazione dei dettagli dei post del blog dal database MongoDB utilizzando il Mangusta cliente.
Hai implementato solo le funzionalità di base di un'applicazione per blog e questa applicazione può essere ulteriormente sviluppata per includere molte altre funzionalità.
In che modo la tua esperienza ha imparato a creare un'applicazione di blogging utilizzando Angular e MongoDB? Fateci sapere i vostri pensieri e suggerimenti nei commenti qui sotto.
Il codice sorgente di questo tutorial è disponibile su GitHub.
E infine, ricorda che JavaScript è il lingua del web. Non è senza le sue curve di apprendimento, ma se stai cercando ulteriori risorse da studiare o da utilizzare nel tuo lavoro, dai un'occhiata a ciò che abbiamo a disposizione nel mercato Envato.
