Polish (Polski) translation by Tomasz Pierzchała (you can also view the original English article)
W pierwszej części tej serii tutoriali widziałeś jak zaimplementować funkcjonalność logowania. W tej części nauczysz się jak zaimplementować funkcjonalność rejestracji i zmodyfikować funkcjonalność logowania tak, by szukać odpowiednich użytkowników w MongoDB.
Zaczynamy
Zacznijmy od sklonowania kodu źródłowego z pierwszej części tutoriala.
git clone https://github.com/royagasthyan/ReactBlogApp-SignIn
Kiedy już sklonujesz katalog, wejdź do katalogu projektu i zainstaluj wymagane zależności.
cd ReactBlogApp-SignIn npm install
Uruchom serwer Node.js. Aplikacjia będzie dostępna pod adresem http://localhost:7777/index.html#/.
Ustawienie Back End'u
W tej aplikacji będziesz używał MongoDB jako back end. Wykonaj instrukcje z oficjalnej dokumentacji MongoDB, by zainstalować MongoDB na Ubuntu. Gdy już zainstalujesz MongoDB, będziesz potrzebować connector'a by połączyć MongoDB i Node.js. Zainstaluj sterownik MongoDB dla Node.js przy użyciu Node Package Manager (npm):
npm install mongodb
Kiedy zainstalujesz sterownik, powinieneś być w stanie zaimportować sterownik do aplikacji.
Stwórz plik o nazwie user.js
, gdzie będziesz trzymał rzeczy związane z użytkownikiem. Wewnątrz pliku user.js
, zaimportuj zależności MongoDB związane z klientem.
var MongoClient = require('mongodb').MongoClient;
Będziesz używać biblioteki assert
, by sprawdzać odpowiedź. Dodaj assert
w pliku user.js
.
var assert = require('assert');
Nazwijmy naszą bazę w MongoDB Blog tak, by adres naszej bazy wyglądał jak poniższy:
var url = 'mongodb://localhost:27017/Blog';
Wewnątrz pliku user.js
stwórz i wyeksportuj funkcję o nazwie signup
.
module.exports = { signup: function(){ // Code will be here } }
Przy użyciu klienta MongoDB spróbuj się połączyć z bazą. Kiedy się podłączysz wyświetlisz informację o połączeniu w terminalu.
module.exports = { signup: function(name, email, password){ MongoClient.connect(url, function(err, db) { console.log('connected') }); } }
Ustawienie zdarzenia Sign-Up
Gdy już ustawisz back end MongoDB, zaimplementujemy zdarzenie rejestracji użytkownika. Wewnątrz pliku main.jsx
dodaj zdarzenie on-change dla pól tekstowych name, email i password w klasie signup
handleNameChange(e){ this.setState({name:e.target.value}) } handleEmailChange(e){ this.setState({email:e.target.value}) } handlePasswordChange(e){ this.setState({password:e.target.value}) }
Zbinduj powyższe metody w konstruktorze klasy.
constructor(props) { super(props); this.handleNameChange = this.handleNameChange.bind(this); this.handleEmailChange = this.handleEmailChange.bind(this); this.handlePasswordChange = this.handlePasswordChange.bind(this); }
Zdefiniuj zmienne stanu wewnątrz konstruktora klasy signup
.
this.state = { name:'', email:'', password:'' };
Zdefiniuj metodę rejestracji wewnątrz klasy signup
. Wewnątrz metody rejestracji, przy użyciu biblioteki axios
, wyślij zapytanie typu post do metody signup
w pliku user.js
.
signUp(){ axios.post('/signup', { name: this.state.name, email: this.state.email, password: this.state.password }) .then(function (response) { console.log(response); }) .catch(function (error) { console.log(error); }); }
Wewnątrz funkcji signup
w pliku user.js
, zaimplementujesz operację insert w bazie.
Dodaj handler zapytania /signup
w pliku app.js
, jak poniżej, by obsłużyć zdarzenie kliknięcia w przycisk rejestracji. Wewnątrz handlera zapytania /signup
wykonaj zapytanie do metody user.signup
.
app.post('/signup', function (req, res) { user.signup('','','') console.log(res); })
Zaimportuj plik user.js
wewnątrz pliku app.js
.
var user = require('./user')
Zapisz powyższe zmiany i zrestartuj serwer. Otwórz w przeglądarce http://localhost:7777/index.html#/signup. Powinieneś zobaczyć stronę rejestracji. Kliknij przycisk Sign Up i zobaczysz wiadomość connected
w terminalu.
Zapisz Dane Użytkownika w MongoDB
By zapisać dane użytkownika w bazie Blog
, stworzysz kolekcję user
. Wewnątrz kolekcji użytkowników będziesz przechowywał dane użytkownika takie, jak imię, email, hasło. MongoClient.connect
zwraca parametr db, przy użyciu którego możesz wstawić encję do kolekcji user
.
Wykorzystasz metodę insertOne
, by wstawiać pojedynczy rekord do kolekcji użytkowników. Zmodyfikuj kod w metodzie rejestracji w user,js
, jak poniżej:
db.collection('user').insertOne( { "name": name, "email": email, "password": password },function(err, result){ assert.equal(err, null); console.log("Saved the user sign up details."); });
Oto pełny kod user.js
:
var MongoClient = require('mongodb').MongoClient; var assert = require('assert'); var url = 'mongodb://localhost:27017/Blog'; module.exports = { signup: function(name, email, password){ MongoClient.connect(url, function(err, db) { db.collection('user').insertOne( { "name": name, "email": email, "password": password },function(err, result){ assert.equal(err, null); console.log("Saved the user sign up details."); }); }); } }
Zmodyfikuj handler zapytania /signup
w pliku app.js
, by przekazać imię, email i hasło do metody signup
w user.js
.
app.post('/signup', function (req, res) { var name=req.body.name; var email=req.body.email; var password=req.body.password; if(name && email && password){ user.signup(name, email, password) } else{ res.send('Failure'); } })
Zapisz powyższe zmiany i zrestartuj serwer. Otwórz w przeglądarce http://localhost:7777/index.html#/signup. Wypełnij dane rejestracji użytkownika i kliknij przycisk rejestracji. Zobaczysz wiadomość Saved the user sign up details.
w terminalu serwera. Zaloguj się do powłoki MongoDB i sprawdź kolekcję user
w bazie Blog
. By znaleźć dane użytkownika, wpisz poniższą komendę w powłoce MongoDB:
db.user.find()
Powyższa komenda wyświetli dane użytkownika w formacie JSON.
{ "name": "roy", "email": "royagasthyan@gmail.com", "password": "test", "_id": ObjectId("58f622f50cb9b32905f1cb4b") }
Implementacja Sprawdzania Logowania Użytkownika
W pierwszej części tutoriala, wpisałeś "na sztywno" sprawdzanie logującego się użytkownika, z racji tego, że rejestracja nie była jeszcze zaimplementowana, Zmodyfikujmy sprawdzanie logującego się użytkownika i zbadajmy MongoDB pod kątem poprawnych logowań użytkownika.
Stwórz funkcję o nazwie validateSignIn
w pliku user.js
.
validateSignIn: function(username, password,callback){ }
Wewnątrz funkcji validateSignIn
, przy użyciu klienta MongoDB podłączysz się do bazy Blog
i zapytasz tabelę użytkowników o użytkownika z konkretną nazwą i hasłem, Użyjesz metody findOne
by odpytać kolekcję użytkowników.
db.collection('user').findOne( { email : username ,password: password },function(err, result){ });
Sprawdź zwrócony wynik, czy nie jest null, jeśli nie znaleziono.
if(result==null){ callback(false) } else{ callback(true) }
Jak można zauważyć w powyższym kodzie, jeśli żadna pozycja nie jest znaleziona, zwracany jest fałsz w callback'u. Jeśli pozycja została znaleziona, zwracana jest prawda w callback'u.
Oto kompletna metoda validateSignIn
:
validateSignIn: function(username, password,callback){ MongoClient.connect(url, function(err, db){ db.collection('user').findOne( { email : username ,password: password },function(err, result){ if(result==null){ callback(false) } else{ callback(true) } }); }); }
W metodzie /signin
w pliku app.js
wykonasz zapytanie do metody validateSignIn
. W funkcji zwrotnej sprawdzisz odpowiedź. Jeśli będzie prawda, logowanie przeszło pomyślnie. Jeśli będzie fałsz, była to nieudana próba logowania.
app.post('/signin', function (req, res) { var user_name=req.body.email; var password=req.body.password; user.validateSignIn(user_name,password,function(result){ if(result){ res.send('Success') } else{ res.send('Wrong username password') } });
Zapisz powyższe zmiany i zrestartuj serwer. Otwórz w przeglądarce http://localhost:7777/index.html#/signup. Wpisz poprawną nazwę użytkownika i hasło, to zobaczysz wiadomość o sukcesie w konsoli przeglądarki. Wpisując niepoprawną nazwę i hasło, wyświetli się bład.
Podsumowując
W tej części tutoriala zobaczyłeś jak zaimplementować proces rejestracji użytkownika. Zobaczyłeś jak tworzyć widok rejestracji i przekazywać dane z interfejsu użytkownika React do Node.js i potem zapisywać je w MongoDB. Zmodyfikowałeś także funkcjonalność sprawdzania poprawnego logowania tak, by szukać uzytkowników w bazie MongoDB.
W następnej części tutoriala zaimplementujesz funkcjonalność dodawania i wyświetlania postów.
Kod źródłowy z tego tutoriala jest dostępny na GitHub.
Podziel się swoimi przemyśleniami lub sugestiami w komentarzach poniżej.
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Update me weeklyEnvato Tuts+ tutorials are translated into other languages by our community members—you can be involved too!
Translate this post