Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Angular
Code

Creare un App per Blogging Utilizzando Angular e MongoDB: Cancellare i Post

by
Difficulty:BeginnerLength:ShortLanguages:
This post is part of a series called Creating a Blogging App Using Angular & MongoDB.
Creating a Blogging App Using Angular & MongoDB: Edit Post

Italian (Italiano) translation by Francesco (you can also view the original English article)

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, verranno implementate le funzionalità per eliminare un post esistente e per implementare la funzionalità di disconnessione utente.

Iniziamo

Cominciamo duplicando il codice sorgente dall'ultima parte della serie di esercitazioni.

Spostiamoci nella directory di progetto e installiamo le dipendenze richieste.

Una volta che avete le dipendenze installate, riavviare l'applicazione client e server.

Puntiamo il browser su http://localhost:4200 e avremo l'esecuzione dell'applicazione.

Aggiunta di conferma eliminazione

È già stato aggiunta l'icona Elimina per i post del blog elencati. Quando l'utente fa clic sull'icona Elimina corrispondente a qualsiasi post del blog, è necessario mostrare un popup di conferma di eliminazione. Se l'utente conferma il processo di eliminazione solo un post del blog deve essere eliminato.

Cominciamo con l'aggiunta di un popup di conferma modale quando l'utente fa clic sul pulsante Elimina. Aggiungere il seguente codice di popup modale al file show-post.component.html.

Modificare l'icona Elimina per includere l'attributo data-target come illustrato:

Salvare le modifiche e riavviare il client server. Logghiamoci nell'applicazione e facciamo clic sull'icona Elimina corrispondente a qualsiasi post del blog, e apparirà il modal di conferma.

Angular Blog App - Delete Confirmation Pop Up

Creazione dell'API per eliminare i post

Creiamo un endpoint REST API per eliminare il post sul blog. Nel file server/app.js, creare un endpoint REST API per gestire l'eliminazione di post di blog basato sull'id del post di blog. Ecco come appare l'endpoint REST API:

Avviare la connessione al database MongoDB utilizzando il client di Mangoose.

Potrai fare uso del metodo findByIdAndRemove per trovare il post di blog utilizzando l'id ed eliminarlo. Una volta che il post è stato eliminato con successo, dovrete ritornare lo status come una risposta. Ecco come appare l'endpoint REST API:

Effettuare una chiamata per l'API di eliminazione

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 eliminazione dopo la conferma, farete una chiamata alle API REST per eliminare il post.

Aggiungiamo un metodo denominato setDelete sul pulsante Elimina in show-post.component.html. Ecco come appare:

Nel file show-post.component.ts, definiamo una variabile chiamata post_to_delete.

Definire il metodo chiamato setDelete all'interno di show-post.component.ts per mantenere i dettagli del messaggio da eliminare.

Quando l'utente fa clic sul pulsante Annulla del popup, è necessario chiamare un metodo denominato unsetDelete per impostare il post_to_delete su null. Ecco come appare:

Ecco come appare il pulsante Cancel HTML per show-post.component.html:

Ora cerchiamo di definire il metodo di servizio denominato deletePost all'interno del file show-post.service.ts. Ecco come appare:

Per chiamare il metodo di servizio da ShowPostComponent, definiamo un metodo denominato deletePost che sottoscriverà il metodo deletePost da ShowPostService. Ecco come appare il metodo deletePost dalla ShowPostComponent:

Una volta che il post è stato eliminato, è necessario aggiornare l'elenco dei post, quindi è necessario effettuare una chiamata al metodo getAllPost. È inoltre necessario chiudere il popup una volta eseguita l'eliminazione.

In primo luogo, importiamo un riferimento a ViewChild ed ElementRef nel file show-post.component.ts.

Definire una variabile closeBtn per creare un riferimento al pulsante di chiusura popup.

Ora, quando la chiamata di delete ha esito positivo, è necessario chiudere il popup di conferma di eliminazione.

Ecco come appare il metodo deletePost modificato:

Ecco come appare il file show-post.component.ts:

Salvare le modifiche e riavviare l'applicazione client e server. Accedi all'applicazione e fai clic sull'icona Elimina corrispondente a qualsiasi post del blog. Si aprirà una finestra di conferma popup. Confermare l'eliminazione del post e il post verrà eliminato e verrà aggiornato l'elenco di post di blog.

Gestione sessione utente durante l'accesso

Quando l'utente accede all'applicazione, manterrete il nome utente loggato in un localstorage. Modificare il metodo di validateLogin dentro la LoginComponent per memorizzare il nome utente loggato in localstorage.

Quando il risultato della chiamata di API viene convalidato, aggiungere il seguente codice per memorizzare il nome utente loggato.

Ecco come appare il metodo validateLogin:

Ora, all'interno del file home.component.html, aggiungere un metodo denominato logout per il pulsante di disconnessione.

All'interno del file home.component.ts, create un metodo denominato logout. All'interno del metodo logout, è necessario cancellare il local storage per il loggedInUser. Ecco come appare il metodo:

Nel metodo del costruttore di HomeComponent, è necessario aggiungere un controllo per il tasto di memorizzazione locale loggedInUser. Se non viene trovato, è necessario reindirizzare alla pagina di accesso. Ecco come appare il file di home.component.ts:

Salvare le modifiche e riavviare il client server. Proviamo accedere alla home page caricando l'URL http://localhost:4200/home nella finestra del browser. Si verrà reindirizzati alla pagina di login.

Accedere all'applicazione e fare clic sul pulsante di disconnessione. Sarete disconnessi e reindirizzati alla pagina di login.

Concludendo

In questa parte della serie di esercitazioni, abbiamo imparato come implementare l'eliminazione di post di blog con l'aggiunta di un'icona per la lista di post. Abbiamo anche creato un'API REST per l'eliminazione dei dettagli del post dal database MongoDB utilizzando il client di Mongoose.

Sono state implementate solo le caratteristiche di un'applicazione blog molto base, e questa applicazione può essere sviluppata ulteriormente per includere molte altre caratteristiche.

Come è stata la vostra esperienza per creare un'applicazione di blogging utilizzando angular e MongoDB? Fateci sapere i vostri pensieri e suggerimenti nei commenti qui sotto.

Codice sorgente di questo tutorial è disponibile su GitHub.

E infine, ricordate che JavaScript è il linguaggio del web. Non è senza curva di apprendimento, ma se siete in cerca di risorse supplementari da studiare o utilizzare nel vostro lavoro, scoprite quello che abbiamo disponibile sul market di Envato.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.