Share
In deze tutorialserie ziet u hoe u aan de slag kunt met het maken van een blogapp via React. In de loop van deze zelfstudieserie concentreer je je op het gebruik van React voor het ontwikkelen van de gebruikersinterface van de toepassing. U gebruikt Node.js voor de serverkant van de toepassing.
In deze zelfstudie ziet u hoe u de gebruikersinterface en back-end implementeert voor gebruikersregistratie en gebruikersaanmelding.
Maak een projectmap met de naam ReactNodeApp. Navigeer naar de projectdirectory en start het knooppuntproject.
npm init
Vul de vereiste gegevens in en u moet de package.json bestand gemaakt. Hier is hoe het eruit ziet:
"naam": "react-node-app", "version": "1.0.0", "description": "", "main": "index.js", "scripts": "test": " echo \ "Fout: geen test opgegeven \" && exit 1 "," author ":" roy "," license ":" MIT "
U zult het express-framework gebruiken voor het bedienen van uw applicatie. Installeer express met behulp van de volgende opdracht:
npm install express --save
Laten we met behulp van het express-framework onze applicatie maken op een poortadres luisteren. Maak in de projectdirectory een bestand met de naam app.js. Vereist de uitdrukkelijke module binnen de app.js en maak een app. Stel het statische pad van de toepassing in waar het de statische bestanden kan vinden. Hier is hoe het eruit ziet:
Accentsconagua
var express = require ("express"); var path = require ("path"); var app = express (); app.use (express.static (path.join (__ dirname, "/ html")));Ken een poortnummer toe aan de applicatie om op een poort te luisteren. Voeg de volgende code toe om een server te maken:
app.listen (7777, function () console.log ("Beginnen met luisteren op poort", 7777);)Maak in de projectdirectory een map met de naam html. Binnen in de html map, maak een bestand aan met de naam index.html. Voeg de volgende code toe aan index.html:
Hallo Wereld
Sla de bovenstaande wijzigingen op en start de server met de volgende opdracht:
knooppunt app.js
Richt uw browser op http: // localhost: 7777 / index.html en u zou de index.html pagina.
U gebruikt bootstrap om de gebruikersinterface te maken. Download en include bootstrap in de index.html pagina.
Voeg de vereiste React-bibliotheken toe in de index.html pagina.
U maakt de weergave met JSX. Als u niet bekend bent met JSX, raad ik u aan eerst een introductieles over React en JSX te lezen.
Om JSX-code naar JavaScript te converteren, hebt u dit nodig Babel, een JavaScript-compiler. Neem babel op in de index.html pagina.
Maak een bestand met de naam main.jsx binnen in de html map. Dit bestand bevat de React UI-componenten.
Laten we een nieuw geroepen onderdeel maken Aanmelden binnen in de main.jsx het dossier.
class Signin breidt React.Component uit
Voeg een weergavemethode toe binnen de Aanmelden component die de UI voor onze zal weergeven Aanmelden bestanddeel.
class Signin breidt React.Component uit render () return ()
In de bovenstaande code is het allemaal HTML met slechts één verschil. De klasse attribuut is gewijzigd in naam van de klasse indien gebruikt JSX.
De Aanmelden component, wanneer weergegeven, wordt de HTML-code weergegeven in de geven methode.
Voeg een container-div toe in de index.html pagina waar u de Aanmelden bestanddeel.
Render de Aanmelden component in de .houder div in de index.html.
ReactDOM.render ( < Signin / > , document.getElementById ('app'));Sla de bovenstaande wijzigingen op en start de knooppuntserver opnieuw op. Richt uw browser op http: // localhost: 7777 / index.html en u zou het inlogscherm moeten kunnen zien.
Om het inlogproces te implementeren, moet u de invoertekst afhandelen onChange gebeurtenis en houd de tekstvakwaarden in een statusvariabele. Wanneer de gebruiker op de knop klikt, gebruikt u de toestandsvariabelen om de tekstvakwaarden van het e-mailadres en het wachtwoord te lezen. Dus laten we het toevoegen onChange evenement naar de tekstvakken:
Definieer de onChange evenementen in de Aanmelden component:
handleEmailChange (e) this.setState (email: e.target.value) handlePasswordChange (e) this.setState (password: e.target.value)
Bind de hierboven gedefinieerde gebeurtenissen en de toestandsvariabelen in de componentconstructormethode:
constructor (rekwisieten) super (rekwisieten); this.handleEmailChange = this.handleEmailChange.bind (this); this.handlePasswordChange = this.handlePasswordChange.bind (this); this.state = email: ", password:";
Definieer een bij klikken methode die u aanroept bij klikken op de knop.
signIn () alert ('Email adres is' + this.state.email + 'Wachtwoord is' + this.state.password); Voeg de toe Bij klikken evenement voor de Aanmelden knop.
Sla de bovenstaande wijzigingen op en start de knooppuntserver opnieuw op. Richt uw browser op http: // localhost: 7777 / index.html. Voer het e-mailadres en wachtwoord in en klik op de Aanmelden knop, en je zou de e-mail en het wachtwoord kunnen zien verschijnen.
Zodra u de gegevens aan de clientzijde hebt, moet u die gegevens naar de Node.js-servermethode verzenden om de gebruikersaanmelding te valideren. Voor het plaatsen van de gegevens maakt u gebruik van een ander script met de naam Axios. Axios is een op belofte gebaseerde HTTP-client voor de browser en Node.js. omvatten Axios in de index.html pagina.
Binnen in de aanmelden methode in de main.jsx bestand, voeg de volgende regel code toe om een postverzoek te doen.
axios.post ('/ signin', email: this.state.email, password: this.state.password) .then (function (response) console.log (response);) .catch (function (error ) console.log (error););De code maakt een postverzoek naar de /aanmelden methode met de getoonde parameters. Zodra het verzoek is gelukt, is de belofte opgelost in de dan Bel terug. Bij vergissing wordt het antwoord vastgelegd in de vangst Bel terug.
Laten we een maken aanmelden methode aan de kant van Node.js om het aanmeldingsproces van de gebruiker te valideren. In de app.js bestand, maakt u een methode genaamd aanmelden.
app.post ('/ signin', functie (req, res) )Je zult gebruik maken van de body-parser module om het verzoek van de React-client te ontleden. Installeer de body-parser module in het project.
npm body-parser installeren - opslaan
Vereist de body-parser module in de app.js het dossier.
var bodyParser = require ("body-parser");Voeg de volgende regel code toe om in te schakelen JSON parsing.
app.use (bodyParser.json ());
Binnen in de aanmelden methode, kunt u het verzoek als volgt ontleden:
var user_name = req.body.email; var wachtwoord = req.body.password;
Wijzig de aanmelden methode zoals getoond om de login van de gebruiker te valideren.
app.post ('/ signin', functie (req, res) var user_name = req.body.email; var password = req.body.password; if (user_name == 'admin' && password == 'admin') res.send ('success'); else res.send ('Failure');) Voorlopig zijn de gebruikersreferenties hard gecodeerd. U kunt dit vervangen door de juiste service volgens uw voorkeur.
Nadat de parameters zijn geparseerd, worden ze gevalideerd op basis van de verwachte inloggegevens. Indien waar, wordt een succesbericht doorgegeven, anders wordt een foutmelding geretourneerd.
Sla de bovenstaande wijzigingen op en start de Node.js-server opnieuw. Voer een geldige gebruikersnaam en wachtwoord in en klik op de aanmeldmethode. Op basis van de inloggegevens retourneert het bericht een bericht over het succes of de fout, die wordt weergegeven in de browserconsole.
Het proces voor het maken van de gebruikersregistratieweergave is vergelijkbaar met de manier waarop u de aanmeldingsmodule voor gebruikers hebt geïmplementeerd. Laten we beginnen met het maken van de Inschrijven component in de main.jsx het dossier.
class Signup breidt React.Component uit render () retourneren ()
Aangezien aanmelden en aanmelden twee verschillende componenten zijn, moet u de twee componenten koppelen. Voor het doel van routering maakt u gebruik van reactie-router. Als je nog niet vertrouwd bent met routering in React, raad ik je aan de tutorial React routing te lezen.
omvatten reactie-router in de index.html pagina.
Definieer de vereiste reactie-router variabelen om links in de te maken main.jsx het dossier.
var Router = window.ReactRouter.Router; var Route = window.ReactRouter.Route; var hashHistory = window.ReactRouter.hashHistory; var Link = window.ReactRouter.Link;
Definieer de verschillende toepassingsroutes en de standaardroute zoals hieronder weergegeven:
ReactDOM.render (, document.getElementById ( 'app'));
Voeg een link toe aan het aanmeldingsonderdeel in de aanmeldingscomponent en omgekeerd. Hier is de Aanmelden component weergave methode met de sign-up link:
render () retour ()'Inschrijven'
Sla de bovenstaande wijzigingen op en start de Node.js-server opnieuw. Richt uw browser op http: // localhost: 7777 / index.html en u zou het inlogscherm met de aanmeldingslink moeten kunnen zien. Klik op de aanmeldingslink en u moet naar het aanmeldingsscherm worden genavigeerd.
Het implementeren van een gebruikersaanmelding is vergelijkbaar met de manier waarop u de gebruikersaanmelding hebt geïmplementeerd. Ik laat de aanmeldingsimplementatie door de gebruiker als een oefening. Ik plaats de implementatie van de gebruikersaanmelding in het volgende deel van deze zelfstudiereeks.
In dit deel van de zelfstudiereeks hebt u het aanmeldingsscherm gemaakt en geïmplementeerd. Je zag ook hoe te gebruiken reactie-router om routing in React te implementeren. In het volgende deel van deze zelfstudie ziet u hoe u het aanmeldingsgedeelte en de pagina Bericht toevoegen kunt implementeren.
Broncode van deze tutorial is beschikbaar op GitHub.
Laat ons uw mening en suggesties weten in de opmerkingen hieronder.
