Share
Dans la partie précédente de cette série de didacticiels, vous avez vu comment implémenter les fonctionnalités d’inscription et de connexion. Dans cette partie du didacticiel, vous allez implémenter la page d'accueil de l'utilisateur et la fonctionnalité permettant d'ajouter et d'afficher les articles du blog..
Commençons par cloner le code source de la première partie du didacticiel..
https://github.com/royagasthyan/ReactBlogApp-SignUp
Une fois le répertoire cloné, accédez au répertoire du projet et installez les dépendances requises..
cd ReactBlogApp-SignUp npm installer
Démarrez le serveur Node.js et l'application s'exécutera à l'adresse http: // localhost: 7777 / index.html # /.
Une fois que l'utilisateur a essayé de se connecter à l'application, vous devez valider les informations d'identification de l'utilisateur et, s'il est valide, créer une session. Pour utiliser des sessions dans une application Node.js, vous devez installer session express en utilisant Node Package Manager (npm).
npm install express-session --save
Exiger le session express dans le app.js fichier.
Accentsconagua
var session = require ('express-session');Pour utiliser la session, vous devez définir un secret de session..
app.use (session (secret: 'mon-secret'));
Définissons maintenant une variable appelée sessions dans le cadre global.
sessions var
Attribuer le sessions variable dans le /se connecter méthode utilisant le paramètre request.
sessions = req.session;
En utilisant le sessions variable, vous conservez le nom d'utilisateur connecté en session.
sessions.username = nom_utilisateur;
Créez un fichier appelé home.html à l'intérieur de html dossier dans l'application. Voici à quoi ça ressemble:
Réagissez Blog App Réagissez Blog App
En-tête d'élément de groupe de liste
Donec id elit non porta gravida à eget metus. Les mécènes ont perdu leur risus varius blandit.
En-tête d'élément de groupe de liste
Donec id elit non porta gravida à eget metus. Les mécènes ont perdu leur risus varius blandit.
En-tête d'élément de groupe de liste
Donec id elit non porta gravida à eget metus. Les mécènes ont perdu leur risus varius blandit.
Créez un itinéraire express appelé /maison qui rendra la page d'accueil pour un utilisateur valide.
app.get ('/ home', fonction (req, res) if (sessions && sessions.username) res.sendFile (__ dirname + '/html/home.html'); else res.send ('non autorisé ');)Comme indiqué dans le code ci-dessus, lorsque l'utilisateur est redirigé vers le /maison itinéraire, si sessions et sessions.username existe, la page d'accueil est rendue.
Modifier le se connecter méthode pour envoyer une réponse de succès après validation de l'utilisateur.
app.post ('/ signature', fonction (req, res) sessions = req.session; var nom_utilisateur = req.body.email; var mot de passe = req.body.password; user.validateSignIn (nom_utilisateur, mot de passe, fonction ( result) if (result) sessions.nom_utilisateur = nom_utilisateur; res.send ('success'););)La réponse de réussite ci-dessus est analysée du côté de la réaction et, en cas de succès, l’utilisateur est redirigé vers le /maison voie express. dans le main.jsx fichier, à l'intérieur du Se connecter composant à l'intérieur du se connecter méthode, modifiez le code pour le rediriger vers la page d'accueil.
signIn () axios.post ('/ signin', email: this.state.email, mot de passe: this.state.password) .then (fonction (réponse) if (response.data == 'succès') window.location.assign ('http: // localhost: 7777 / home')) .catch (function (error) console.log (error);); Enregistrez les modifications ci-dessus et redémarrez le serveur de noeud. Connectez-vous avec un nom d'utilisateur et un mot de passe valides et vous serez redirigé vers la page d'accueil..
Modifiez l’affichage de blog ci-dessus dans un composant React. Créez un fichier appelé home.jsx. À l'intérieur de home.jsx fichier, créez un composant React appelé ShowPost ce qui rendra la liste des articles du blog. Déplacez le code HTML statique dans la méthode de rendu du composant React. Voici comment ShowPost Le composant de réaction a l'air:
classe ShowPost étend React.Component constructeur (accessoires) super (accessoires); render () return ()En-tête d'élément de groupe de liste
Donec id elit non porta gravida à eget metus. Les mécènes ont perdu leur risus varius blandit.
En-tête d'élément de groupe de liste
Donec id elit non porta gravida à eget metus. Les mécènes ont perdu leur risus varius blandit.
En-tête d'élément de groupe de liste
Donec id elit non porta gravida à eget metus. Les mécènes ont perdu leur risus varius blandit.
Modifier le home.html page pour inclure les bibliothèques React requises. Voici le modifié home.html page:
Réagissez Blog App Réagissez Blog App
Comme vu dans le code HTML ci-dessus, le conteneur div a été nommé app, à l'intérieur duquel les composants React seront affichés.
Enregistrez les modifications ci-dessus et redémarrez le serveur de noeud. Connectez-vous à l'application de blog et, une fois sur la page d'accueil, vous aurez le ShowPost Réagir composant rendu.
Vous devez maintenant renseigner de manière dynamique les valeurs dans la liste de publication. Avant de faire cela, créons une page pour ajouter un article. En cliquant dessus Ajouter lien hypertexte, vous devez afficher la page pour ajouter le blog.
Créons un composant add post React pour ajouter les articles du blog. Il se composera d'une zone de saisie du titre et d'une zone de texte. dans le home.jsx, créé un AddPost Réagir composant pour ajouter des articles de blog. Voici comment AddPost Le composant de réaction a l'air:
La classe AddPost étend React.Component render () return ()
Lorsque l'utilisateur entre le titre et le sujet de la publication, vous devez gérer les événements de modification de texte dans le composant React. Ajoutez le gestionnaire d’événement de changement suivant au AddPost Composant de réaction.
handleTitleChange (e) this.setState (title: e.target.value) handleSubjectChange (e) this.setState (body: e.target.value)
Ajoutez l'événement on change au AddPost rendre HTML.
Lier les variables d'état et les événements dans la méthode du constructeur React.
constructeur (accessoires) super (accessoires); this.handleTitleChange = this.handleTitleChange.bind (this); this.handleSubjecChange = this.handleSubjectChange.bind (this); this.state = title: ", subject:";
Lorsque l'utilisateur clique sur le Ajouter un message Lorsque vous cliquez sur le bouton, vous devez publier le titre et le sujet de l'interface utilisateur de React dans le back-end de Node.js pour les enregistrer dans la base de données MongoDB. Créez une méthode appelée addPost dans le AddPost Réagissez au composant pour publier le titre et sous réserve du gestionnaire de demandes Node.js. Voici comment addPost méthode dans le AddPost Le composant de réaction a l'air:
addPost () axios.post ('/ addPost', titre: this.state.title, sujet: this.state.subject) .then (function (response) console.log ('la réponse de add post is' , réponse); hashHistory.push ('/')) .catch (function (error) console.log (error);); Comme indiqué dans le code ci-dessus, vous avez utilisé axios pour publier les détails d'un article de blog sur le serveur Node.js.
Maintenant, vous devez créer un module de publication qui traitera de l'ajout et de la récupération des détails de la publication. Créez un fichier appelé post.js dans le répertoire du projet. dans le post.js fichier, exporter un addPost méthode qui insère les détails de la publication dans la base de données MongoDB. Exiger le MongoClient et créer le addPost méthode pour insérer les détails de publication dans la base de données MongoDB. Voici comment post.js fichier regarde:
var MongoClient = require ('mongodb'). MongoClient; var assert = require ('assert'); var url = 'mongodb: // localhost: 27017 / Blog'; module.exports = addPost: function (titre, sujet, rappel) MongoClient.connect (url, fonction (err, db) db.collection ('post'). insertOne ("title": titre, "sujet" : sujet, 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 (faux) ); ); Comme indiqué dans le code ci-dessus, vous vous êtes connecté à la base de données MongoDB à l'aide du connecteur et vous avez inséré un enregistrement. Une fois l'opération exécutée, vous avez vérifié l'erreur, le cas échéant, et renvoyé l'état à la fonction de rappel..
À l'intérieur de app.js fichier, créer un gestionnaire de requêtes appelé addPost qui appellera le addPost méthode de post.js. Voici à quoi ça ressemble:
app.post ('/ addpost', fonction (req, res) var title = req.body.title; var sujet = req.body.subject; post.addPost (titre, sujet, fonction (résultat) res.send (résultat); ); )Enregistrez les modifications ci-dessus et redémarrez le serveur Node.js. Connectez-vous à l'application, cliquez sur le bouton Ajouter lien, et entrez les détails pour ajouter un message. Une fois cela fait, cliquez sur le bouton Ajouter un message bouton et les détails doivent être enregistrés dans la base de données MongoDB.
Vous devez d’abord récupérer les détails de la publication sauvegardée sur MongoDB. À l'intérieur de post.js fichier, créer une méthode appelée GetPost qui ira chercher les détails du post. Voici à quoi ça ressemble:
getPost: function (rappel) MongoClient.connect (url, fonction (err, db) db.collection ('post', fonction (err, collection) collection.find (). toArray (fonction (err, liste) callback (liste);););)Le code ci-dessus récupère les détails de la collection MongoDB, les convertit en liste et les renvoie à la fonction de rappel. dans le home.jsx fichier, à l'intérieur du ShowPost composant, récupérez les détails du post dans le composantDidMount méthode. Voici à quoi ça ressemble:
composantDidMount () var self = this; axios.post ('/ getPost', ) .then (fonction (réponse) ) .catch (fonction (erreur) console.log ('erreur est', erreur);); Le code ci-dessus fait une demande de publication à la méthode du serveur Node.js / getPost qui appellera le getPost méthode dans le post.js fichier. Voici la / getPost méthode dans le app.js fichier.
app.post ('/ getpost', fonction (req, res) post.getPost (fonction (résultat) res.send (résultat););)Une fois que les détails de la publication ont été récupérés dans axios callback success, conserve les détails dans une variable de tableau d'état. Déclarer une variable appelée des postes à l'intérieur de ShowPost constructeur.
constructeur (accessoires) super (accessoires); this.state = posts: [];
Dans le rappel de succès de la axios appel ajax, définissez la variable d'état comme indiqué:
self.setState (posts: response.data)
Une fois que vous avez les détails de la publication, vous devez créer dynamiquement le code HTML requis dans la méthode de rendu du composant React. Voici à quoi ça ressemble:
render () return (this.state.posts.map (function (publication, index) retour)titre de l'article
post.subject
)
Le code ci-dessus itère le des postes variable d'état et crée le code HTML de manière dynamique. Enregistrez les modifications ci-dessus et redémarrez le serveur Node.js. Connectez-vous à l'application de blog et créez quelques articles de blog à l'aide de la Ajouter bouton sur la page d'accueil. Une fois les articles ajoutés, ils seront affichés sur la page d'accueil..
Dans ce didacticiel, vous avez vu comment créer des composants React pour ajouter et afficher des articles de blog. Dans la suite de cette série de didacticiels, vous apprendrez à ajouter la fonctionnalité permettant de supprimer et de mettre à jour les articles de blog..
Faites-moi savoir ce que vous pensez de ce didacticiel dans la section commentaire ci-dessous. Le code source de ce tutoriel est disponible sur GitHub.
