Share
Dans la partie précédente de cette série de didacticiels, vous avez appris à implémenter la fonctionnalité permettant de modifier les détails d'un article de blog..
Dans cette partie, vous implémenterez la fonctionnalité permettant de supprimer une publication de blog existante et de mettre en œuvre la fonctionnalité de déconnexion de l'utilisateur..
Commençons par cloner le code source de la dernière partie de la série de tutoriels..
git clone https://github.com/royagasthyan/AngularBlogApp-EditUpdate DeletePost
Accédez au répertoire du projet et installez les dépendances requises.
cd DeletePost / client npm installer cd DeletePost / serveur npm installer
Une fois les dépendances installées, redémarrez l'application cliente et serveur..
cd DeletePost / client npm start cd Nœud DeletePost / server app.js
Pointez votre navigateur sur http: // localhost: 4200 et vous aurez l'application en cours d'exécution.
Vous avez déjà ajouté l'icône de suppression aux articles de blog répertoriés. Lorsque l'utilisateur clique sur l'icône de suppression correspondant à un article du blog, vous devez afficher une fenêtre contextuelle de confirmation de la suppression. Si l'utilisateur confirme le processus de suppression, seule la publication de blog doit être supprimée..
Commençons par ajouter une confirmation modale lorsque l'utilisateur clique sur le bouton de suppression. Ajoutez le code popup modal suivant au show-post.component.html fichier.
Modifier l’icône de suppression pour inclure le cible de données attribut comme indiqué:
Enregistrez les modifications ci-dessus et redémarrez le serveur client. Connectez-vous à l'application et cliquez sur l'icône de suppression correspondant à n'importe quel article du blog. La modale de confirmation apparaît..
Créons un point de terminaison de l'API REST pour supprimer la publication de blog. dans le serveur / app.js fichier, créez un point de terminaison API REST pour gérer la suppression d'un article de blog basé sur l'article du blog identifiant. Voici à quoi ressemble le noeud final de l'API REST:
Accentsconagua
app.post ('/ api / post / deletePost', (req, res) => )Commencez par vous connecter à la base de données MongoDB en utilisant le Mangouste client.
mongoose.connect (url, useMongoClient: true, fonction (err) // connexion établie);
Vous allez utiliser le findByIdAndRemove méthode pour trouver le blog en utilisant le identifiant et supprimez-le. Une fois la publication de blog supprimée, vous renvoyez le message. statut en réponse. Voici à quoi ressemble le noeud final de l'API REST:
app.post ('/ api / post / deletePost', (req, res) => mongoose.connect (url, useMongoClient: true, fonction (err) if (err) renvoie err; Post.findByIdAndRemove (req .body.id, (err, doc) => si (err) renvoie une erreur; renvoie res.status (200) .json (status: 'success', data: doc))))Lorsque l'utilisateur clique sur l'icône de suppression, vous devez conserver les détails de la publication dans une variable. Si l’utilisateur supprime l’option de suppression après confirmation, vous appelez l’API de suppression REST..
Ajouter une méthode appelée setDelete sur le bouton supprimer cliquez dans show-post.component.html. Voici à quoi ça ressemble:
À l'intérieur de show-post.component.ts fichier, définissez une variable appelée post_to_delete.
Définir la méthode appelée setDelete à l'intérieur show-post.component.ts conserver les détails de la publication à supprimer.
setDelete (post: Post) this.post_to_delete = post;
Lorsque l'utilisateur clique sur le bouton d'annulation de la fenêtre contextuelle, vous devez appeler une méthode appelée unsetdelete pour définir le post_to_delete à null. Voici à quoi ça ressemble:
unsetDelete () this.post_to_delete = null;
Voici comment Annuler bouton code HTML pour show-post.component.html regards:
Définissons maintenant la méthode de service appelée Supprimer le message à l'intérieur de show-post.service.ts fichier. Voici à quoi ça ressemble:
deletePost (id) renvoie this.http.post ('/ api / post / deletePost', id: id)Pour appeler la méthode de service à partir du ShowPostComponent, définir une méthode appelée Supprimer le message qui va souscrire à la Supprimer le message méthode de la ShowPostService. Voici comment Supprimer le message méthode de la ShowPostComponent regards:
deletePost () this.showPostService.deletePost (this.post_to_delete._id) .subscribe (res => this.getAllPost ();)
Une fois que le message a été supprimé, vous devez actualiser la liste des messages. Vous devez donc appeler le getAllPost méthode. Vous devez également fermer la fenêtre une fois la suppression réussie..
Commencez par importer une référence à ViewChild et ElementRef dans le show-post.component.ts fichier.
import Component, OnInit, ViewChild, ElementRef à partir de '@ angular / core';
Définir une variable closeBtn créer une référence au bouton de fermeture popup.
@ViewChild ('closeBtn') closeBtn: ElementRef;Maintenant, lorsque l'appel de suppression aboutit, vous devez fermer la fenêtre contextuelle de confirmation de suppression..
Voici comment le modifié Supprimer le message la méthode ressemble:
deletePost () this.showPostService.deletePost (this.post_to_delete._id) .subscribe (res => this.getAllPost (); this.closeBtn.nativeElement.click ();)
Voici comment show-post.component.ts fichier regarde:
import Component, OnInit, ViewChild, ElementRef à partir de '@ angular / core'; importer ShowPostService depuis './show-post.service'; import Post from '… /models/post.model'; importer CommonService, depuis '… /service/common.service'; @Component (sélecteur: 'app-show-post', templateUrl: './show-post.component.html', styleUrls: ['./show-post.component.css'], fournisseurs: [ShowPostService] ) la classe d'exportation ShowPostComponent implémente OnInit @ViewChild ('closeBtn') closeBtn: ElementRef; messages publics: tout []; public post_to_delete; constructeur (private showPostService: ShowPostService, private communService: 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 ();)Enregistrez les modifications ci-dessus et redémarrez l'application cliente et serveur. Connectez-vous à l'application et cliquez sur l'icône de suppression correspondant à n'importe quel article du blog. Vous aurez une boîte de confirmation apparue. Confirmez la suppression de l'article de blog, et l'article sera supprimé et la liste des articles de blog sera mise à jour..
Lorsque l'utilisateur se connecte à l'application, vous conservez le nom d'utilisateur connecté dans un répertoire. stockage local. Modifier le validateLogin méthode à l'intérieur du LoginComponent pour stocker le nom d'utilisateur connecté dans stockage local.
Lorsque le résultat de l'appel d'API est validé, ajoutez le code suivant pour stocker le nom d'utilisateur connecté..
localStorage.setItem ('logsInUser', this.user.username);Voici comment validateLogin la méthode ressemble:
validateLogin () if (this.user.username && this.user.password) this.loginService.validateLogin (this.user) .subscribe (result => if (result ['status'] === 'succès' ) localStorage.setItem ('logsInUser', this.user.username); this.router.navigate (['/ home']); else alert ('Mauvais mot de passe utilisateur');, error => console.log ('erreur est', erreur);); else alert ('entrez votre nom d'utilisateur et votre mot de passe'); Maintenant, à l'intérieur du home.component.html fichier, ajoutez une méthode appelée Connectez - Out au bouton de déconnexion.
À l'intérieur de home.component.ts fichier, créer une méthode appelée Connectez - Out. À l'intérieur de Connectez - Out méthode, vous devez vider le stockage local pour le connecté à l'utilisateur. Voici à quoi ressemble la méthode:
logout () localStorage.removeItem ('logsInUser'); this.router.navigate (['/']); dans le AccueilComposantméthode constructeur, vous devez ajouter une vérification pour le connecté à l'utilisateur clé de stockage locale. Si non trouvé, vous devez rediriger vers la page de connexion. Voici comment home.component.ts fichier regarde:
import Component, ViewChild, ElementRef à partir de '@ angular / core'; importer CommonService de '… /service/common.service'; importer routeur de '@ angular / router'; @Component (sélecteur: 'app-home', templateUrl: './home.component.html', styleUrls: ['./home.component.css']) classe d'exportation HomeComponent @ViewChild ('addPost') addBtn: ElementRef; constructeur (private commonService: CommonService, routeur privé: Router) if (! localStorage.getItem ('logsInUser')) this.router.navigate (['/']); this.commonService.postEdit_Observable.subscribe (res => this.addBtn.nativeElement.click ();); logout () localStorage.removeItem ('logsInUser'); this.router.navigate (['/']); Enregistrez les modifications ci-dessus et redémarrez le serveur client. Essayez d’accéder à la page d’accueil en chargeant l’URL http: // localhost: 4200 / home dans la fenêtre du navigateur. Vous serez redirigé vers la page de connexion.
Connectez-vous à l'application et cliquez sur le bouton de déconnexion. Vous serez déconnecté et redirigé vers la page de connexion.
Dans cette partie de la série de didacticiels, vous avez appris à implémenter la suppression d'un article de blog en ajoutant une icône à la liste des articles de blog. Vous avez également créé une API REST pour supprimer les détails de publication de blog de la base de données MongoDB à l'aide du Mangouste client.
Vous avez uniquement implémenté les fonctionnalités de base d'une application de blog, et cette application peut être développée pour inclure de nombreuses autres fonctionnalités..
Comment avez-vous appris à créer une application de blogging en utilisant Angular et MongoDB? Faites-nous savoir vos pensées et suggestions dans les commentaires ci-dessous.
Le code source de ce tutoriel est disponible sur GitHub.
Et enfin, rappelez-vous que JavaScript est la langue du web. Ce n’est pas sans ses courbes d’apprentissage, mais si vous recherchez des ressources supplémentaires à étudier ou à utiliser dans votre travail, découvrez ce que nous avons sur le marché Envato..
