Share
Dans la partie précédente de cette série de didacticiels, vous avez vu comment implémenter la fonctionnalité de page de profil pour l'application de blog React. Dans ce tutoriel, vous allez voir comment implémenter des tags pour les articles de blog..
Commençons par cloner le code source de la dernière partie de la série.
https://github.com/royagasthyan/ReactBlog-Profile
Une fois le répertoire cloné, accédez au répertoire du projet et installez les dépendances requises..
cd ReactBlogApp-Profile npm installer
Démarrez le serveur Node.js et l'application s'exécutera à l'adresse http: // localhost: 7777 / index.html # /.
Commençons par créer un lien permettant à l'utilisateur d'ajouter une balise à la base de données MongoDB. dans le index.html page, ajouter un de plus li pour le Ajouter une étiquette page.
Lorsque l'utilisateur clique sur le Ajouter une étiquette lien, il devrait afficher le Ajouter une étiquette Composant de réaction. Alors ajoutons un itinéraire pour le Ajouter une étiquette composant dans le home.jsx fichier.
Voici la liste complète des itinéraires:
ReactDOM.render (, document.getElementById ('app'));
Créons le Ajouter une étiquette composant qui sera rendu lorsque l'utilisateur cliquera sur le lien Ajouter une balise.
Accentsconagua
la classe AddTag étend React.Component constructeur (props) super (props); composantDidMount () document.getElementById ('addHyperLink'). className = ""; document.getElementById ('homeHyperlink'). className = ""; document.getElementById ('profileHyperlink'). className = ""; document.getElementById ('tagHyperlink'). className = "active"; render () return ( )Comme on le voit dans le code ci-dessus, à l'intérieur du Ajouter une étiquette réagissez classe de composant que vous avez rendu le modèle HTML de base pour la page. À l'intérieur de composantDidMount méthode que vous avez nom de la classe pour faire la Ajouter une étiquette lien hypertexte actif.
Enregistrez les modifications ci-dessus et redémarrez le serveur. Connectez-vous à l'application et cliquez sur le bouton Ajouter une étiquette lien, et vous pourrez voir le Ajouter une étiquette page.
Définir une variable d'état pour suivre le changement de balise.
constructeur (accessoires) super (accessoires); this.state = tag: ";
Attache la variable d'état de la balise à l'élément d'entrée dans la méthode de rendu.
Comme indiqué dans le code ci-dessus, vous avez également joint un sur le changement événement à l'entrée pour garder trace de son changement de valeur. Lier le sur le changement méthode handleTagChange à l'intérieur du constructeur.
constructeur (accessoires) super (accessoires); this.handleTagChange = this.handleTagChange.bind (this); this.state = tag: ";
Définissons maintenant le handleTagChange méthode à l'intérieur du Ajouter une étiquette Composant de réaction.
handleTagChange (e) this.setState (tag: e.target.value)
Lorsque l'utilisateur clique sur le bouton Ajouter pour ajouter la balise, vous devez enregistrer les données. Alors attachons un sur clic événement au bouton d'entrée.
Lier le ajouter une étiquette méthode dans le constructeur du composant React et définissez la méthode pour effectuer un appel API au noeud final du serveur Node.js.
constructeur (accessoires) super (accessoires); this.addTag = this.addTag.bind (this); this.handleTagChange = this.handleTagChange.bind (this); this.state = tag: ";
Ensuite, définissons le ajouter une étiquette méthode pour faire l'appel API à la /ajouter une étiquette point final.
addTag () axios.post ('/ addtag', balise: this.state.tag) .then (fonction (réponse) console.log ('la réponse de balise add est', réponse);) .catch (fonction (erreur) console.log (erreur);); Créons le noeud final de l'API Node.js pour /ajouter une étiquette. À l'intérieur de app.js fichier, créer le /ajouter une étiquette route, qui analysera les données et les insérera dans la base de données MongoDB.
app.post ('/ addtag', fonction (req, res) variable var = req.body.tag; post.addTag (balise, fonction (résultat) res.send (résultat);)À l'intérieur de /ajouter une étiquette point final, vous avez fait un appel à une méthode appelée ajouter une étiquette du post.js fichier. Créons le ajouter une étiquette méthode à l'intérieur du post.js fichier. Voici à quoi ça ressemble:
addTag: function (tagName, callback) MongoClient.connect (url, function (err, db) db.collection ('tag'). insertOne ("name": nomBlag, function (err, result) assert. equal (err, null); console.log ("Enregistre les détails de la balise."); if (err == null) callback (true) else callback (false))); Comme indiqué dans le code ci-dessus, vous avez utilisé MongoClient se connecter à la base de données MongoDB. Vous avez inséré les données de balise dans une collection appelée balise à l'intérieur de la base de données. Une fois que les données ont été insérées sans aucune erreur, la valeur booléenne true est transmise à la fonction de rappel. Si une erreur est rencontrée, une valeur booléenne false est renvoyée à la fonction de rappel..
Enregistrez les modifications ci-dessus et redémarrez le serveur. Connectez-vous à l'application et cliquez sur le bouton Ajouter une étiquette lien. Entrez un nom de tag et cliquez sur le Ajouter bouton. Vérifiez la console du navigateur et vous devriez pouvoir voir le message de réussite enregistré dans la console du navigateur..
Une fois que vous avez ajouté les balises de la Ajouter une étiquette page, les balises doivent être renseignées dans la Ajouter un post page. Commençons par créer une méthode appelée getTags à l'intérieur de post.js fichier qui se connecterait à la base de données MongoDB et récupérerait les balises. Voici à quoi ça ressemble:
getTag: function (rappel) MongoClient.connect (url, fonction (err, db) db.collection ('tag', fonction (err, collection) collection.find (). toArray (fonction (err, liste) callback (liste);););)Comme indiqué dans le code ci-dessus, vous avez utilisé MongoClient pour vous connecter à la base de données MongoDB. Une fois la collection extraite, elle est convertie en tableau à l'aide du bouton toArray méthode et ensuite passé à la fonction de rappel.
Créez ensuite le point de terminaison de l’API Node.js qui appellera ce qui précède. getTag méthode en app.js.
app.post ('/ gettag', fonction (req, res) post.getTag (fonction (résultat) res.send (résultat););)dans le home.jsx déposer à l'intérieur du AddPost composant, créer une méthode appelée getTags qui fera la / gettag Appel d'API et chercher la liste de balises.
getTags () var self = this; axios.post ('/ getTag', ) .then (fonction (réponse) if (réponse) self.setState (tags: response.data);) .catch (fonction (erreur) console .log ('erreur est', erreur);); Une fois que les données ont été extraites de l’API, définissez les données à l’intérieur du Mots clés état variable.
Dans la méthode de rendu de la ShowPost Composant React, ajoutez l'élément select HTML pour lier le Mots clés état variable. Voici à quoi cela ressemblerait:
Comme indiqué dans le code ci-dessus, vous avez utilisé le carte méthode pour cartographier le Mots clés variable d'état à l'élément select.
À l'intérieur de composantDidMount méthode, appelez le getTags méthode pour charger les étiquettes une fois que le composant est monté.
composantDidMount () document.getElementById ('addHyperLink'). className = "active"; document.getElementById ('homeHyperlink'). className = ""; document.getElementById ('profileHyperlink'). className = ""; document.getElementById ('tagHyperlink'). className = ""; this.getPostWithId (); this.getTags (); Enregistrez les modifications ci-dessus et redémarrez le serveur. Une fois que vous avez chargé le Ajouter un message page, les balises doivent être chargées dans un élément HTML sélectionné.
Ajoutons une option par défaut dans la liste déroulante avec la valeur 0.
Vous avez ajouté un sur le changement événement à l'élément HTML sélectionné. Voici ce que le handleTagChange L'événement ressemble à:
handleTagChange (e) this.setState (tag: e.target.value)
Une fois que l'utilisateur sélectionne la balise, la valeur sera disponible dans la variable d'état. étiquette.
Inclure le étiquette variable dans le addPost méthode dans le AddPost Composant de réaction.
addPost () axios.post ('/ addPost', titre: this.state.title, sujet: this.state.subject, tag: this.state.tag, id: this.props.params.id). then (function (response) console.log ('la réponse de add post is', réponse); hashHistory.push ('/')) .catch (function (error) console.log (error);); Changer la / addpost Point de terminaison de l'API pour inclure le étiquette paramètre.
app.post ('/ addpost', fonction (req, res) var title = req.body.title; var sujet = req.body.subject; var tag = req.body.tag; var id = req.body. id; console.log ('id est', id); if (id == "|| id == non défini) console.log ('add'); post.addPost (titre, sujet, balise, fonction (résultat ) res.send (result);); else console.log ('update', titre, sujet); post.updatePost (id, titre, sujet, balise, fonction (résultat) res.send (result ););) Modifier le addPost méthode dans le post.js fichier à inclure étiquette paramètre.
addPost: function (titre, sujet, tag, rappel) MongoClient.connect (url, fonction (err, db) db.collection ('post'). insertOne ("title": titre, "sujet": sujet, "tag": tag, fonction (err, résultat) assert.equal (err, null); console.log ("a enregistré les détails de l'article de blog."); if (err == null) callback (true) else callback (false));); Modifier le getPostWithId méthode pour définir le menu déroulant lorsque le détail de l'article est récupéré.
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); self.setState (tag: response.data.tag)) .catch (fonction (erreur) console.log ('erreur est', erreur);); Enregistrez les modifications ci-dessus et redémarrez le serveur. Connectez-vous et accédez au Ajouter un message page et ajouter une publication avec une balise sélectionnée. Vous aurez le nouveau message enregistré et répertorié. Cliquez sur le bouton Modifier pour modifier les détails de la publication et la balise..
Dans ce tutoriel, vous avez vu comment implémenter la page d'ajout de balises. Vous avez ajouté le champ de balise à la page d'ajout de publication avec les champs de titre et de sujet..
J'espère que vous avez apprécié cette série de tutoriels. Faites-nous savoir vos pensées, suggestions ou corrections dans les commentaires ci-dessous.
Le code source de ce tutoriel est disponible sur GitHub.
