Share
Dans la partie précédente de cette série de didacticiels, vous avez vu comment implémenter les fonctionnalités d'ajout et d'affichage de publication. Dans cette partie de la série de didacticiels sur la création d'une application de blogging dans React, vous allez implémenter la fonctionnalité permettant de mettre à jour et de supprimer les articles de blog..
Commençons par cloner le code source de la dernière partie de la série.
https://github.com/royagasthyan/ReactBlogApp-AddPost
Une fois le répertoire cloné, accédez au répertoire du projet et installez les dépendances requises..
cd ReactBlogApp-AddPost npm installer
Démarrez le serveur Node.js et l'application s'exécutera à l'adresse http: // localhost: 7777 / index.html # /.
Modifions la liste des articles de blog pour afficher les données sous forme de tableau avec les icônes de mise à jour et de suppression. Dans la méthode de rendu de la ShowPost composant, remplacez le div avec une table comme indiqué dans le code:
| # | Titre | Assujettir | ||
|---|---|---|---|---|
| index + 1 | titre de l'article | post.subject |
Comme indiqué dans le code ci-dessus, vous avez modifié le code existant pour afficher les publications sous forme de tableau. Vous avez cartographié le des postes variable à parcourir sur la collection de messages et créer dynamiquement le requis tr et td.
Enregistrez les modifications ci-dessus et redémarrez le serveur. Pointez votre navigateur sur http: // localhost: 7777 / home # / et vous devriez pouvoir afficher la liste des articles de blog sous forme de tableau..
Pour implémenter la fonctionnalité de publication de mise à jour, vous devez associer l'événement on-click à l'icône d'édition. Modifier l'icône d'édition envergure comme montré:
Comme indiqué dans le code ci-dessus, vous avez passé l'identifiant de publication en tant que paramètre du updatePost méthode.
Créer une méthode updatePost à l'intérieur de ShowPost composant.
Accentsconagua
updatePost (id) hashHistory.push ('/ addPost /' + id); Comme indiqué dans le code ci-dessus, vous avez déclenché la redirection vers la page d'ajout de publication avec l'id de l'élément modifié. Dans la page d'ajout de publication, vous obtiendrez les détails de la publication de blog avec l'identifiant transmis et vous renseignerez les détails..
Modifier le routeur pour inclure un paramètre optionnel id sur la page d'ajout de publication.
À l'intérieur de AddPost composant, créer une méthode appelée getPostWithId chercher les détails de l'article sur le blog avec identifiant. À l'intérieur de getPostWithId méthode, faites un appel AJAX au getPostWithId API à l'intérieur app.js.
getPostWithId () var id = this.props.params.id; var self = this; axios.post ('/ getPostWithId', id: id) .then (fonction (réponse) if (réponse) self.setState (title: response.data.title); self.setState (sujet: response.data.subject);) .catch (function (error) console.log ('error is', error);); Avec la réponse reçue du getPostWithId Méthode API, vous avez mis à jour les variables d'état Titre et assujettir.
Modifier le Titre et assujettir zones de texte pour afficher la valeur des variables d'état.
Créons maintenant le getPostWithId API à l'intérieur app.js faire un appel de base de données à la base de données MongoDB pour obtenir les détails de la publication avec un identifiant particulier. Voici la getPostWithId Méthode de l'API:
app.post ('/ getPostWithId', fonction (req, res) var id = req.body.id; post.getPostWithId (id, fonction (résultat) res.send (résultat)))À l'intérieur de post.js fichier, créer une méthode getPostWithId interroger la base de données pour récupérer les détails. Voici à quoi ça ressemble:
getPostWithId: function (id, callback) MongoClient.connect (url, function (err, db) db.collection ('post'). findOne (_id: nouveau mongodb.ObjectID (id), function (err, résultat) ) assert.equal (err, null); if (err == null) callback (résultat) else callback (false))Comme indiqué dans le code ci-dessus, vous avez utilisé le findOne API pour obtenir les détails de la publication de blog avec un identifiant particulier.
Enregistrez les modifications ci-dessus et essayez d’exécuter le programme. Cliquez sur l'icône d'édition sur la page d'accueil pour rediriger vers la page d'ajout de publication et renseigner le titre et le sujet..
Maintenant, pour mettre à jour les détails de publication de blog, vous devez vérifier la identifiant à l'intérieur de addPost Méthode API dans le app.js. Si c'est un nouveau message, le identifiant sera indéfini.
Modifier le addPost méthode à l'intérieur du AddPost composant pour inclure le identifiant état variable.
axios.post ('/ addPost', titre: this.state.title, sujet: this.state.subject, id: this.state.id)À l'intérieur de addPost Méthode API, vous devez vérifier si le identifiant paramètre est indéfini ou pas. Si indéfini, cela signifie que c'est un nouveau message, sinon vous devez appeler la méthode update. Voici ce que le addPost La méthode API ressemble à:
app.post ('/ addpost', fonction (req, res) var title = req.body.title; var sujet = req.body.subject; var id = req.body.id; if (id == "| | id == non défini) post.addPost (titre, sujet, fonction (résultat) res.send (résultat);); else post.updatePost (id, titre, sujet, fonction (résultat) res.send (résultat); ); )À l'intérieur de post.js fichier, créer une méthode appelée updatePost mettre à jour les détails de l'article de blog. Vous allez utiliser le updateOne API pour mettre à jour les détails de la publication de blog avec le particulier identifiant. Voici comment updatePost la méthode ressemble:
updatePost: function (id, titre, sujet, rappel) MongoClient.connect (url, function (err, db) db.collection ('post'). updateOne ("_id": new mongodb.ObjectID (id) , $ set: "title": titre, "subject": sujet, fonction (err, résultat) assert.equal (err, null); if (err == null) callback (true) else callback (false));); Enregistrez les modifications ci-dessus et redémarrez le serveur. Connectez-vous à l'application et cliquez sur l'icône d'édition. Modifiez les valeurs existantes et cliquez sur le bouton pour mettre à jour les détails.
Pour implémenter la fonctionnalité de suppression de publication, vous devez associer l'événement on-click à l'icône de suppression. Modifier l'étendue de l'icône de suppression comme indiqué:
Comme indiqué dans le code ci-dessus, vous avez passé l'identifiant de publication en tant que paramètre du Supprimer le message méthode.
Créez une méthode appelée Supprimer le message à l'intérieur de ShowPost composant.
deletePost (id)
Lier la méthode dans le ShowPost composant constructeur.
this.deletePost = this.deletePost.bind (this);
Pour l'utilisation ce à l'intérieur de carte fonction de rappel, vous devez lier ce au carte une fonction. Modifier le carte fonction de rappel comme indiqué:
this.state.posts.map (function (publication, index) retour.bind (this)) index + 1 titre de l'article post.subject
À l'intérieur de Supprimer le message méthode, ajoutez une invite de confirmation avant d'appeler l'API de suppression.
deletePost (id) if (confirm ('Êtes-vous sûr?')) // L'appel de suppression API post sera là !! Ajoutons maintenant le Supprimer le message API à l'intérieur du app.js fichier. L'API lit l'ID de publication de l'appel AJAX et supprime l'entrée dans MongoDB. Voici comment Supprimer le message L'API ressemble:
app.post ('/ deletePost', fonction (req, res) var id = req.body.id; post.deletePost (id, fonction (résultat) res.send (résultat)))Comme indiqué dans le code ci-dessus, vous appelez le Supprimer le message méthode dans le post.js fichier et retourne le résultat. Créons le Supprimer le message méthode à l'intérieur du post.js fichier.
deletePost: function (id, rappel) MongoClient.connect (url, function (err, db) db.collection ('post'). deleteOne (_id: new mongodb.ObjectID (id), function (err, résultat) ) assert.equal (err, null); console.log ("Suppression de la publication."); if (err == null) callback (true) else callback (false))Comme on le voit dans le code ci-dessus, le Supprimer le message méthode dans le post.js fichier utilisera le MongoClient se connecter à la base de données de blogs dans MongoDB. En utilisant le Id passé de l'appel AJAX, il supprimera le message de la base de données.
Mettre à jour le code à l'intérieur du Supprimer le message méthode dans le home.jsx fichier pour inclure l'appel AJAX au Supprimer le message API dans le app.js fichier.
deletePost (id) if (confirm ('Êtes-vous sûr?')) var self = this; axios.post ('/ deletePost', id: id) .then (fonction (réponse) ) .catch (fonction (erreur) ); Une fois que l'article du blog a été supprimé, vous devez actualiser la liste des articles du blog en conséquence. Alors créez une nouvelle méthode appelée getPost et déplacez le composantDidMount code à l'intérieur de cette fonction. Voici la getPost méthode:
getPost () var self = this; axios.post ('/ getPost', ) .then (fonction (réponse) console.log ('res is', réponse); self.setState (posts: response.data)) .catch (fonction (erreur) console.log ('erreur est', erreur);); Modifier le composantDidMount code comme indiqué:
composantDidMount () this.getPost (); document.getElementById ('homeHyperlink'). className = "active"; document.getElementById ('addHyperLink'). className = ""; À l'intérieur de Supprimer le message Rappel d’appel AJAX, appelez le getPost méthode pour mettre à jour la liste des articles de blog.
deletePost (id) if (confirm ('Êtes-vous sûr?')) var self = this; axios.post ('/ deletePost', id: id) .then (function (response) self.getPost ();) .catch (function (error) console.log ('Error is', error) ;); Enregistrez les modifications ci-dessus et redémarrez le serveur. Essayez d'ajouter un nouvel article de blog, puis cliquez sur Supprimer de la liste de la grille. Un message de confirmation de suppression vous sera demandé. Une fois que vous cliquez sur le D'accord bouton, l'entrée sera supprimée et la liste des articles de blog sera mise à jour.
Dans ce didacticiel, vous avez vu comment implémenter la fonctionnalité de suppression de blog et de mise à jour dans l'application de blog React. Dans la partie suivante de la série de didacticiels, vous apprendrez à implémenter la page de profil pour un utilisateur connecté..
Faites-nous savoir vos pensées et suggestions dans les commentaires ci-dessous. Le code source de ce tutoriel est disponible sur GitHub.
