Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. React
Code

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

by
Difficulty:IntermediateLength:ShortLanguages:
This post is part of a series called Creating a Blogging App Using React.
Creating a Blogging App Using React, Part 1: User Sign-In
Creating a Blogging App Using React, Part 3: Add & Display Post

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.

Kiedy już sklonujesz katalog, wejdź do katalogu projektu i zainstaluj wymagane zależności.

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):

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.

Będziesz używać biblioteki assert, by sprawdzać odpowiedź. Dodaj assert w pliku user.js.

Nazwijmy naszą bazę w MongoDB Blog tak, by adres naszej bazy wyglądał jak poniższy:

Wewnątrz pliku user.js stwórz i wyeksportuj funkcję o nazwie signup.

Przy użyciu klienta MongoDB spróbuj się połączyć z bazą. Kiedy się podłączysz wyświetlisz informację o połączeniu w terminalu.

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

Zbinduj powyższe metody w konstruktorze klasy.

Zdefiniuj zmienne stanu wewnątrz konstruktora klasy signup.

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.

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.

Zaimportuj plik user.js wewnątrz pliku app.js.

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:

Oto pełny kod user.js:

Zmodyfikuj handler zapytania /signup w pliku app.js, by przekazać imię, email i hasło do metody signup w user.js.

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:

Powyższa komenda wyświetli dane użytkownika w formacie JSON.

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.

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.

Sprawdź zwrócony wynik, czy nie jest null, jeśli nie znaleziono.

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:

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.

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.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.