Share
Dans la première partie de cette série de didacticiels, vous avez vu comment implémenter la fonctionnalité de connexion. Dans cette partie, vous apprendrez à mettre en œuvre la fonctionnalité d’inscription et à modifier la fonctionnalité de connexion pour rechercher des utilisateurs valides dans MongoDB..
Commençons par cloner le code source de la première partie du didacticiel..
git clone https://github.com/royagasthyan/ReactBlogApp-SignIn
Une fois le répertoire cloné, accédez au répertoire du projet et installez les dépendances requises..
cd ReactBlogApp-SignIn npm installer
Démarrez le serveur Node.js et l'application s'exécutera à l'adresse http: // localhost: 7777 / index.html # /.
Pour cette application, vous utiliserez MongoDB comme back-end. Suivez les instructions de la documentation officielle de MongoDB pour installer MongoDB sur Ubuntu. Une fois MongoDB installé, vous aurez besoin d’un connecteur pour connecter MongoDB à Node.js. Installez le pilote MongoDB Node.js à l’aide du gestionnaire de package de nœud (ou npm):
npm installer mongodb
Une fois le pilote installé, vous devriez pouvoir l'exiger dans l'application..
Créez un fichier appelé user.js où vous conserverez les éléments liés à l'utilisateur. À l'intérieur de user.js fichier, nécessite les dépendances liées au client MongoDB.
Accentsconagua
var MongoClient = require ('mongodb'). MongoClient;Vous utiliserez une bibliothèque appelée affirmer pour vérifier la réponse renvoyée. Comprendre affirmer dans le user.js fichier.
var assert = require ('assert');Nommons notre base de données Blog dans MongoDB, l’URL de notre base de données est la suivante:
var url = 'mongodb: // localhost: 27017 / Blog';
À l'intérieur de user.js déposer, créer et exporter une fonction appelée s'inscrire.
module.exports = signup: function () // le code sera ici
En utilisant le client MongoDB, essayez de vous connecter à la base de données. Une fois connecté, vous enregistrez le message connecté dans le terminal..
module.exports = inscription: fonction (nom, email, mot de passe) MongoClient.connect (url, fonction (err, db) console.log ('connecté')); Une fois que vous avez configuré le back-end MongoDB, implémentons l'événement d'inscription. À l'intérieur de main.jsx la page, incluez l'événement on-change pour les zones de texte de saisie du nom, de l'email et du mot de passe dans s'inscrire classe.
handleNameChange (e) this.setState (name: e.target.value) handleEmailChange (e) this.setState (email: e.target.value) handlePasswordChange (e) this.setState ( mot de passe: e.target.value)
Lier les changements d'événement ci-dessus dans le constructeur de classe.
constructeur (accessoires) super (accessoires); this.handleNameChange = this.handleNameChange.bind (this); this.handleEmailChange = this.handleEmailChange.bind (this); this.handlePasswordChange = this.handlePasswordChange.bind (this);
Définir les variables d'état à l'intérieur du s'inscrire constructeur de classe.
this.state = name: ", email:", mot de passe: ";
Définir la méthode d'inscription à l'intérieur du s'inscrire classe. Dans la méthode d’inscription, en utilisant le axios bibliothèque, faites un appel de méthode post à la s'inscrire méthode dans le user.js fichier.
signUp () axios.post ('/ signup', name: this.state.name, email: this.state.email, mot de passe: this.state.password) .then (fonction (réponse) console.log (réponse);) .catch (fonction (erreur) console.log (erreur);); À l'intérieur de s'inscrire fonctionner dans le user.js fichier, vous allez implémenter l'insertion de base de données.
Ajouter le /s'inscrire gestionnaire de demandes dans le app.js comme indiqué pour gérer l'événement de clic d'inscription. À l'intérieur de /s'inscrire demande gestionnaire fonction, faire un appel à la user.signup méthode.
app.post ('/ signup', fonction (req, res) user.signup (",", ") console.log (res);)Exiger le user.js déposer à l'intérieur du app.js fichier.
var user = require ('./ user')Enregistrez les modifications ci-dessus et redémarrez le serveur. Pointez votre navigateur sur http: // localhost: 7777 / index.html # / inscrivez-vous et vous devriez avoir la page d'inscription. Clique sur le S'inscrire bouton et vous aurez le connecté message dans le terminal.
Pour enregistrer les détails de l'utilisateur dans le Blog base de données, vous allez créer une collection appelée utilisateur. Dans la collection d'utilisateurs, vous conserverez tous les détails de l'utilisateur, tels que le nom, l'adresse électronique et le mot de passe. le MongoClient.connect retourne un paramètre db en utilisant lequel vous pouvez insérer une entrée dans le utilisateur collection.
Vous allez utiliser le insertOne méthode pour insérer un seul enregistrement dans la collection d'utilisateurs. Modifiez le code dans la méthode d'inscription dans user.js comme indiqué ci-dessous:
db.collection ('utilisateur'). insertOne ("name": nom, "email": email, "mot de passe": mot de passe, fonction (err, résultat) assert.equal (err, null); console.log ("Enregistré les informations d'inscription de l'utilisateur."););Voici le complet user.js code:
var MongoClient = require ('mongodb'). MongoClient; var assert = require ('assert'); var url = 'mongodb: // localhost: 27017 / Blog'; module.exports = inscription: fonction (nom, email, mot de passe) MongoClient.connect (url, fonction (err, db) db.collection ('utilisateur'). insertOne ("nom": nom, "email" : email, "mot de passe": mot de passe, fonction (err, résultat) assert.equal (err, null); console.log ("a enregistré les détails de l'inscription de l'utilisateur."););); Modifier le /s'inscrire gestionnaire de demandes dans le app.js fichier à transmettre le nom, email et mot de passe au user.js s'inscrire méthode.
app.post ('/ signup', fonction (req, res) var nom = req.body.name; var email = req.body.email; var mot de passe = req.body.password; if (nom && email && mot de passe ) user.signup (nom, email, mot de passe) else res.send ('Failure');Enregistrez les modifications ci-dessus et redémarrez le serveur. Pointez votre navigateur sur http: // localhost: 7777 / index.html # / signup. Remplissez les détails d'inscription de l'utilisateur et cliquez sur le bouton d'inscription. Vous aurez le Enregistré les détails d'inscription de l'utilisateur. message dans le terminal du serveur. Connectez-vous au shell MongoDB et vérifiez la utilisateur collection dans le Blog base de données. Pour trouver les détails de l'utilisateur, entrez la commande suivante dans le shell MongoDB:
db.user.find ()
La commande ci-dessus affichera les détails de l'utilisateur au format JSON..
"nom": "roy", "email": "[email protected]", "mot de passe": "test", "_id": ObjectId ("58f622f50cb9b32905f1cb4b")
Dans la première partie du didacticiel, vous avez codé en dur le contrôle de connexion de l'utilisateur, car celui-ci n'a pas été implémenté. Modifions le contrôle de connexion codé en dur et examinons la base de données MongoDB pour des connexions valides.
Créez une fonction appelée validateSignIn dans le user.js fichier.
validateSignIn: fonction (nom d'utilisateur, mot de passe, rappel)
À l'intérieur de validateSignIn fonction, en utilisant le client MongoDB, vous vous connecterez au Blog base de données et interrogez la table utilisateur pour trouver un utilisateur avec le nom d'utilisateur et le mot de passe spécifiés. Vous allez utiliser le findOne méthode pour interroger la collection d'utilisateurs.
db.collection ('utilisateur'). findOne (email: nom d'utilisateur, mot de passe: mot de passe, fonction (err, résultat) );Vérifier le résultat renvoyé pour null si l'entrée n'est pas trouvée.
if (résultat == null) callback (false) else callback (true)
Comme indiqué dans le code ci-dessus, si aucune entrée n'est trouvée, la valeur false est renvoyée dans le rappel. Si une entrée est trouvée, true est renvoyé dans le rappel.
Voici le complet validateSignIn méthode:
validateSignIn: fonction (nom d'utilisateur, mot de passe, rappel) MongoClient.connect (url, fonction (err, db) db.collection ('utilisateur'). findOne (email: nom d'utilisateur, mot de passe: mot de passe, fonction (err, résultat) ) if (result == null) callback (false) else callback (true));); dans le /se connecter méthode dans le app.js fichier, vous allez faire un appel au validateSignIn méthode. Dans la fonction de rappel, vous allez vérifier la réponse. Si true, cela indiquera une connexion valide, sinon une connexion invalide. Voici à quoi ça ressemble:
app.post ('/ signin', fonction (req, res) var nom_utilisateur = req.body.email; var mot de passe = req.body.password; user.validateSignIn (nom_utilisateur, mot de passe, fonction (résultat) if (résultat ) res.send ('Success') else res.send ('Mot de passe incorrect'));Enregistrez les modifications ci-dessus et redémarrez le serveur. Pointez votre navigateur sur http: // localhost: 7777 / index.html # /. Entrez un nom d'utilisateur et un mot de passe valides et vous aurez un message de réussite enregistré dans la console du navigateur. Lors de la saisie d'un nom d'utilisateur et d'un mot de passe invalides, un message d'erreur s'afficherait..
Dans cette partie du didacticiel, vous avez vu comment implémenter le processus d'inscription d'un utilisateur. Vous avez vu comment créer la vue d'inscription et transmettre les données de l'interface utilisateur de React à Node.js, puis les enregistrer dans MongoDB. Vous avez également modifié la fonctionnalité de connexion de l'utilisateur pour vérifier la validité de la connexion de l'utilisateur à partir de la base de données MongoDB..
Dans la partie suivante du didacticiel, vous implémenterez les fonctionnalités d'ajout de publication et d'affichage de page de publication..
Le code source de ce tutoriel est disponible sur GitHub.
Faites-nous savoir vos pensées ou suggestions dans les commentaires ci-dessous.
