Share
In het eerste deel van deze tutorials zag u hoe u de inlogfunctionaliteit implementeerde. In dit deel leert u hoe u de aanmeldingsfunctionaliteit implementeert en de inlogfunctionaliteit wijzigt om te controleren op geldige gebruikers van MongoDB.
Laten we beginnen door de broncode uit het eerste deel van de zelfstudie te klonen.
git clone https://github.com/royagasthyan/ReactBlogApp-SignIn
Nadat de map is gekloond, navigeert u naar de projectdirectory en installeert u de vereiste afhankelijkheden.
cd ReactBlogApp-SignIn npm install
Start de Node.js-server en de toepassing wordt uitgevoerd op http: // localhost: 7777 / index.html # /.
Voor deze toepassing gebruikt u MongoDB als back-end. Volg de instructies in de MongoDB officiële documentatie om MongoDB op Ubuntu te installeren. Zodra MongoDB is geïnstalleerd, hebt u een connector nodig om MongoDB en Node.js. aan te sluiten. Installeer het MongoDB Node.js-stuurprogramma met behulp van de Node Package Manager (of npm):
npm mongodb installeren
Nadat u het stuurprogramma hebt geïnstalleerd, moet u het stuurprogramma in de toepassing kunnen gebruiken.
Maak een bestand met de naam user.js waar je de gebruikersgerelateerde dingen bewaart. Binnen in de user.js bestand, vereisen de client-gerelateerde afhankelijkheden van MongoDB.
Accentsconagua
var MongoClient = vereisen ('mongodb'). MongoClient;U gebruikt een bibliotheek met de naam beweren om de geretourneerde reactie te controleren. omvatten beweren in de user.js het dossier.
var assert = require ('assert');Laten we onze database een naam geven blog in MongoDB, dus onze database-URL is zoals weergegeven:
var url = 'mongodb: // localhost: 27017 / Blog';
Binnen in de user.js een functie maken, maken en exporteren inschrijven.
module.exports = signup: function () // Code is hier
Gebruik de MongoDB-client om verbinding te maken met de database. Nadat u bent verbonden, logt u het verbonden bericht in de terminal in.
module.exports = signup: function (name, email, password) MongoClient.connect (url, functie (err, db) console.log ('connected')); Nadat u de MongoDB-back-end hebt ingesteld, gaan we de aanmeldingsgebeurtenis uitvoeren. Binnen in de main.jsx pagina, neem de on-change-gebeurtenis op voor de invoertekstvakken naam, e-mail en wachtwoord in de inschrijven klasse.
handleNameChange (e) this.setState (name: e.target.value) handleEmailChange (e) this.setState (email: e.target.value) handlePasswordChange (e) this.setState ( wachtwoord: e.target.value)
Bind de bovenstaande wijzigingen in de klasseconstructor.
constructor (rekwisieten) super (rekwisieten); this.handleNameChange = this.handleNameChange.bind (this); this.handleEmailChange = this.handleEmailChange.bind (this); this.handlePasswordChange = this.handlePasswordChange.bind (this);
Definieer de toestandsvariabelen binnen de inschrijven klassenbouwer.
this.state = name: ", email:", password: ";
Definieer de aanmeldmethode binnen de inschrijven klasse. In de aanmeldingsmethode gebruikt u de Axios bibliotheek, maak een oproep naar de methode inschrijven methode in de user.js het dossier.
signUp () axios.post ('/ signup', name: this.state.name, email: this.state.email, password: this.state.password) .then (function (response) console.log (antwoord);). catch (functie (fout) console.log (error);); Binnen in de inschrijven functie in de user.js bestand, implementeert u de database-insert.
Voeg de toe /inschrijven aanvraag handler in de app.js bestand zoals weergegeven om de klikgebeurtenis te verwerken. Binnen in de /inschrijven verzoek behandelingsfunctie, bel naar de user.signup methode.
app.post ('/ signup', functie (req, res) user.signup (",", ") console.log (res);)Vereist de user.js bestand in de app.js het dossier.
var user = require ('./ user')Sla de bovenstaande wijzigingen op en start de server opnieuw. Richt uw browser op http: // localhost: 7777 / index.html # / signup en u moet de aanmeldingspagina hebben. Klik op de Inschrijven knop en je hebt de verbonden bericht in de terminal.
Gebruikersgegevens opslaan in de blog database, maakt u een verzameling genaamd gebruiker. In de gebruikersverzameling bewaar je alle gebruikersgegevens, zoals naam, e-mailadres en wachtwoord. De MongoClient.connect retourneert een db-parameter waarmee u een item in de. kunt invoegen gebruiker verzameling.
U zult gebruik maken van de insertOne methode om één record in de gebruikersverzameling in te voegen. Wijzig de code in de aanmeldingsmethode in user.js zoals hieronder getoond:
db.collection ('user'). insertOne ("name": name, "email": email, "password": password, function (err, result) assert.equal (err, null); console.log ("De gebruikersregistratiegegevens zijn opgeslagen."););Hier is het complete user.js code:
var MongoClient = vereisen ('mongodb'). MongoClient; var assert = require ('assert'); var url = 'mongodb: // localhost: 27017 / Blog'; module.exports = aanmelden: functie (naam, e-mailadres, wachtwoord) MongoClient.connect (url, functie (err, db) db.collection ('user'). insertOne ("name": name, "email" : e-mail, "wachtwoord": wachtwoord, functie (err, resultaat) assert.equal (err, null); console.log ("Bewaarde gebruikersregistratiegegevens."););); Wijzig de /inschrijven aanvraag handler in de app.js bestand om in te geven in de naam, e-mailadres en wachtwoord van de user.js inschrijven methode.
app.post ('/ signup', functie (req, res) var name = req.body.name; var email = req.body.email; var password = req.body.password; if (naam && email && wachtwoord ) user.signup (naam, e-mailadres, wachtwoord) else res.send ('Failure');)Sla de bovenstaande wijzigingen op en start de server opnieuw. Richt uw browser op http: // localhost: 7777 / index.html # / aanmelden. Vul de aanmeldingsgegevens van de gebruiker in en klik op de aanmeldknop. Je hebt de De gebruikersregistratiegegevens zijn opgeslagen. bericht in de serverterminal. Log in op de MongoDB-shell en controleer de gebruiker verzameling in de blog database. Om de gebruikersdetails te vinden, voert u de volgende opdracht in de MongoDB-shell in:
db.user.find ()
Het bovenstaande commando zal de gebruikersdetails in JSON-formaat weergeven.
"name": "roy", "email": "[email protected]", "password": "test", "_id": ObjectId ("58f622f50cb9b32905f1cb4b")
In het eerste deel van de zelfstudie hebt u de aanmeldingscontrole voor gebruikers hard gecodeerd sinds de aanmelding bij de gebruiker niet is geïmplementeerd. Laten we de hard-gecodeerde inlogcontrole aanpassen en in de MongoDB-database zoeken naar geldige gebruikersaanmeldingen.
Maak een functie genaamd validateSignIn in de user.js het dossier.
validateSignIn: functie (gebruikersnaam, wachtwoord, callback)
Binnen in de validateSignIn functie, met behulp van de MongoDB-client waarmee u verbinding maakt met de blog database en vraag de gebruikerstabel voor een gebruiker met de opgegeven gebruikersnaam en wachtwoord. U zult gebruik maken van de vind een methode om de gebruikersverzameling te bevragen.
db.collection ('user'). findOne (email: gebruikersnaam, wachtwoord: wachtwoord, functie (err, result) );Controleer het geretourneerde resultaat voor nul als het item niet wordt gevonden.
if (result == null) callback (false) else callback (true)
Zoals te zien in de bovenstaande code wordt, als er geen invoer wordt gevonden, false geretourneerd in de terugroepactie. Als een item wordt gevonden, wordt true geretourneerd in de callback.
Hier is het complete validateSignIn methode:
validateSignIn: functie (gebruikersnaam, wachtwoord, callback) MongoClient.connect (url, functie (err, db) db.collection ('user'). findOne (email: username, password: password, function (err, result ) if (result == null) callback (false) else callback (true));); In de /aanmelden methode in de app.js bestand, dan bel je naar de validateSignIn methode. In de callback-functie, zult u controleren op het antwoord. Als dit waar is, geeft dit een geldige aanmelding aan, anders een ongeldige aanmelding. Hier is hoe het eruit ziet:
app.post ('/ signin', functie (req, res) var user_name = req.body.email; var password = req.body.password; user.validateSignIn (gebruikersnaam, wachtwoord, functie (resultaat) if (resultaat ) res.send ('Success') else res.send ('Fout wachtwoord voor gebruikersnaam'));Sla de bovenstaande wijzigingen op en start de server opnieuw. Richt uw browser op http: // localhost: 7777 / index.html # /. Voer een geldige gebruikersnaam en wachtwoord in en u zult een succesbericht hebben vastgelegd in de browser console. Bij het invoeren van een ongeldige gebruikersnaam en wachtwoord zou er een foutmelding verschijnen.
In dit deel van de zelfstudie zag u hoe u het aanmeldproces voor gebruikers kunt uitvoeren. U zag hoe u de aanmeldingsweergave maakt en de gegevens van de gebruikersinterface van React doorgeeft aan Node.js en vervolgens opslaat in de MongoDB. U hebt ook de inlogfunctionaliteit van de gebruiker aangepast om te controleren op geldige gebruikersaanmelding vanuit de MongoDB-database.
In het volgende deel van de zelfstudie implementeert u de add-post en geeft u de functionaliteit van de postpagina weer.
Broncode van deze tutorial is beschikbaar op GitHub.
Laat ons uw mening of suggesties weten in de onderstaande opmerkingen.
