Share
Dans la partie précédente de cette série de didacticiels, vous avez vu comment implémenter la fonctionnalité de mise à jour et de suppression de publication pour notre application de blog React. Dans ce tutoriel, vous allez implémenter la page de profil de l'application de blog..
Commençons par cloner le code source de la dernière partie de la série.
https://github.com/royagasthyan/ReactBlogApp-EditDelete
Une fois le répertoire cloné, accédez au répertoire du projet et installez les dépendances requises..
cd ReactBlogApp-EditSupprimer npm installer
Démarrez le serveur Node.js et l'application s'exécutera à l'adresse http: // localhost: 7777 / index.html # /.
Vous devez d’abord ajouter un nouvel élément de menu dans le menu de la page d’accueil appelé Profil. Sur le home.html page, ajouter un nouveau ul élément pour la page de profil comme indiqué:
Enregistrez les modifications ci-dessus et redémarrez le serveur. Pointez votre navigateur sur http: // localhost: 7777 / et connectez-vous à l'application. Une fois connecté, vous pourrez voir la liste des menus avec le lien de profil..
Pour que le lien de menu de profil fonctionne, vous devez ajouter un nouvel itinéraire aux itinéraires existants dans home.jsx fichier.
ReactDOM.render (, document.getElementById ('app'));
dans le home.jsx fichier, créer un nouveau composant Montre le profile. Ajouter des variables d'état pour prénom, mot de passe, email, et Id. Dans la méthode de rendu de la Montre le profile composant, ajoutez le code HTML pour le rendu des détails du profil. Voici comment Montre le profile composant ressemble:
Accentsconagua
la classe ShowProfile étend React.Component constructeur (props) super (props); this.state = name: ", email:", mot de passe: ", id:"; composantDidMount () document.getElementById ('addHyperLink'). className = ""; document.getElementById ('homeHyperlink'). className = ""; document.getElementById ('profileHyperlink'). className = "active"; this.getProfile (); updateProfile () getProfile () render () return ( )Lorsque la page de profil est chargée, vous devez extraire les détails de la base de données et les renseigner dans le formulaire. Ajoutez le code dans le getProfile méthode à l'intérieur du Montre le profile composant pour faire l'appel AJAX pour obtenir des détails sur l'utilisateur.
axios.post ('/ getProfile', ) .then (fonction (réponse) ) .catch (fonction (erreur) console.log ('erreur est', erreur););Une fois les détails reçus dans la réponse, vous devez mettre à jour les variables d'état pour les mêmes. Voici la getProfile méthode de la Montre le profile composant:
getProfile () var self = this; axios.post ('/ getProfile', ) .then (fonction (réponse) if (réponse) self.setState (nom: response.data.name); self.setState (email: response.data .email); self.setState (motdepasse: response.data.password);) .catch (function (error) console.log ('error is', error);); À l'intérieur de app.js fichier, créer une méthode appelée getProfile qui gérera l'appel de méthode POST à partir du Montre le profilede getProfile méthode. le getProfile méthode à l'intérieur du app.js le fichier fera un appel à la place user.js pour obtenir des détails de la base de données. Voici à quoi ça ressemble:
app.post ('/ getProfile', fonction (req, res) user.getUserInfo (sessions.nom_utilisateur, fonction (résultat) res.send (résultat)))À l'intérieur de user.js fichier, créer une méthode appelée getUserInfo qui interrogera la base de données MongoDB en utilisant le nom d’utilisateur pour obtenir les détails requis. Voici comment getUserInfo la méthode ressemble:
getUserInfo: function (nom d'utilisateur, rappel) MongoClient.connect (url, fonction (err, db) db.collection ('utilisateur'). findOne (email: nomutilisateur, fonction (err, résultat) if (result = = null) callback (false) else callback (résultat););); Comme indiqué dans le code ci-dessus, vous appelez MongoDB à l’aide du bouton MongoClient interroger la collection d'utilisateurs en fonction de l'adresse électronique. Une fois le résultat reçu, il est renvoyé à la fonction de rappel..
Enregistrez les modifications ci-dessus et redémarrez le serveur Node.js. Pointez votre navigateur sur http: // localhost: 7777 / # / et connectez-vous à l'application. Cliquez sur le lien du profil dans le menu pour pouvoir afficher les détails du profil renseignés sur la page..
Pour gérer le changement de nom et de mot de passe, vous devez définir deux méthodes appelées handleNameChange et handlePasswordChange dans le Montre le profile composant. Ces méthodes définiront les variables d'état lors du changement de texte. Voici à quoi ça ressemble:
handleNameChange (e) this.setState (name: e.target.value) handlePasswordChange (e) this.setState (password: e.target.value)
Lier les méthodes dans le Montre le profile constructeur.
constructeur (accessoires) super (accessoires); this.handleNameChange = this.handleNameChange.bind (this); this.handlePasswordChange = this.handlePasswordChange.bind (this); this.updateProfile = this.updateProfile.bind (this); this.getProfile = this.getProfile.bind (this); this.state = name: ", email:", mot de passe: ", id:";
Définir une méthode appelée mettre à jour le profil qui sera appelé lorsque l'utilisateur clique sur le bouton Mettre à jour bouton pour mettre à jour les détails de l'utilisateur. À l'intérieur de mettre à jour le profil méthode, faites un appel POST au mettre à jour le profil méthode dans le app.js déposer avec le changé prénom et mot de passe. Voici comment mettre à jour le profil méthode dans le Montre le profile composant ressemble:
updateProfile () var self = this; axios.post ('/ updateProfile', name: this.state.name, mot de passe: this.state.password) .then (function (réponse) if (réponse) hashHistory.push ('/') ) .catch (function (error) console.log ('error is', error);); Une fois la réponse reçue de l’appel du POST, l’écran affiche la liste des publications du blog..
À l'intérieur de app.js fichier, créer une méthode appelée mettre à jour le profil qui va analyser les paramètres entrés et faire un appel à la base de données MongoDB.
app.post ('/ updateProfile', fonction (req, res) nom var = req.body.name; mot de passe var = req.body.password; user.updateProfile (nom, mot de passe, sessions.nomutilisateur, fonction (résultat) res.send (result);))Comme indiqué dans le code ci-dessus, une fois les paramètres analysés dans le mettre à jour le profil méthode dans le app.js fichier, le user.updateProfile la méthode est appelée avec changé prénom, mot de passe, et Nom d'utilisateur.
Définissons le user.updateProfile méthode à l'intérieur du user.js fichier, qui fera un appel à la MongoDB base de données et mettre à jour le prénom et mot de passe basé sur Nom d'utilisateur. Voici comment mettre à jour le profil méthode dans le user.js fichier regarde:
updateProfile: function (nom, mot de passe, nom d'utilisateur, rappel) MongoClient.connect (url, fonction (err, db) db.collection ('utilisateur'). updateOne ("email": nomutilisateur, $ set: "name": name, "password": password, fonction (err, résultat) if (err == null) callback (true) else callback (false));); Dans le code ci-dessus, vous avez mis à jour les détails de l’utilisateur en fonction de l’adresse électronique à l’aide du bouton updateOne méthode.
Enregistrez les modifications ci-dessus et redémarrez le serveur. Connectez-vous à l'application et cliquez sur le bouton Profil lien. Changez le nom et le mot de passe et cliquez sur le bouton Mettre à jour bouton. Essayez de vous connecter et vous pourrez vous connecter en utilisant le nouveau mot de passe.
Dans ce tutoriel, vous avez implémenté la page de profil de l'application de blog. Vous avez appris à récupérer les détails d'une base de données et à les renseigner sur la page à l'aide de React. Vous avez également implémenté la fonctionnalité pour mettre à jour les détails du profil..
Le code source de ce tutoriel est disponible sur GitHub. Faites-moi savoir vos pensées ou suggestions dans les commentaires ci-dessous.
