Tworzenie Aplikacji do Prowadzenia Bloga przy użyciu React, Część 2: Rejestracja użytkownika

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.