Czytelnicy tacy jak ty pomagają wspierać MUO. Kiedy dokonujesz zakupu za pomocą linków na naszej stronie, możemy otrzymać prowizję partnerską. Czytaj więcej.

Relacyjne bazy danych, takie jak MySQL, tradycyjnie były wybieranymi bazami danych. Jednak bazy danych NoSQL, takie jak MongoDB, zyskały na popularności ze względu na ich elastyczną strukturę przechowywania danych oraz możliwość szybkiego przechowywania i pobierania danych.

Te bazy danych oferują alternatywny język zapytań, który można bezproblemowo zintegrować z nowoczesnymi aplikacjami internetowymi i mobilnymi. Czytaj dalej, aby dowiedzieć się, jak przechowywać dane React w bazie danych MongoDB.

Co to jest baza danych NoSQL?

NoSQL oznacza nie tylko SQL, nierelacyjną bazę danych. Ten typ bazy danych nie opiera się na tradycyjnym modelu relacyjnej bazy danych. Nie ma zdefiniowanej struktury kolumna-wiersz i może przechowywać dane w wielu różnych formatach, dzięki czemu jest bardziej elastyczny i skalowalny.

Główna różnica między NoSQL a relacyjnymi bazami danych polega na tym, że zamiast wierszy i kolumn, bazy danych NoSQL przechowują dane w dokumentach, które mają dynamiczną strukturę.

instagram viewer

Skonfiguruj bazę danych MongoDB

MongoDB to najpopularniejsza baza danych NoSQL. Jest to baza danych typu open source, która przechowuje dane w dokumentach (tabelach) podobnych do JSON w kolekcjach (bazach danych).

Oto jak wygląda prosta struktura dokumentu MongoDB:

{
 Imię: „Andrzej”,
 Rola: „Programista zaplecza”
}

Aby zacząć, musisz najpierw skonfigurować bazę danych MongoDB. Po zakończeniu konfigurowania MongoDB otwórz aplikację MongoDB Compass. Następnie kliknij Nowe połączenie przycisk, aby utworzyć połączenie z serwerem MongoDB działającym lokalnie.

Jeśli nie masz dostępu do narzędzia GUI MongoDB Compass, możesz użyć Narzędzie powłoki MongoDB do tworzenia bazy danych i kolekcji.

Podaj identyfikator URI połączenia i nazwę połączenia, a następnie naciśnij Zapisz i połącz.

Na koniec kliknij przycisk Utwórz bazę danych, wpisz nazwę bazy danych i podaj nazwę kolekcji dla kolekcji demonstracyjnej.

Stwórz klienta React

Możesz znaleźć kod tej aplikacji w jej Repozytorium GitHub.

Aby szybko uruchomić aplikację React, utwórz folder projektu na komputerze lokalnym, przejdź do tego katalogu i uruchom następujące polecenia terminala, aby utworzyć i uruchomić serwer programistyczny:

npx utwórz-reaguj-aplikację moja-aplikacja
cd moja-aplikacja
np start

Następnie zainstaluj Axios. Ten pakiet umożliwi Ci wysyłanie żądań HTTP do zaplecza serwera Express.js w celu przechowywania danych w bazie danych MongoDB.

npm zainstaluj osie

Utwórz formularz demonstracyjny, aby zbierać dane użytkownika

Otworzyć src/App.js plik, usuń szablonowy kod React i zastąp go następującym:

import'./App.css';
import Reaguj, { stan użycia } z'reagować';
import Aksjos z„osi”;
funkcjonowaćAplikacja() {
konst [nazwa, setName] = useState("")
konst [rola, ustawRolę] = useState("")


konst uchwyt Prześlij = (mi) => {
 e.preventDefault();


 Axios.post(' http://localhost: 4000/wkładka”, {
 pełne imię i nazwisko: imię,
 firmaRola: rola
 })
 }


powrót (


„Aplikacja”>
„Nagłówek aplikacji”> 
"Forma loginu">


Imię</p>


 nazwa klasy = "Nazwa"
 typ="tekst"
 symbol zastępczy="Imię ..."
 onChange={(e) => {setName (e.target.value)}}
 />




 Rola firmy</p>


 nazwa klasy = "Rola"
 typ="tekst"
 symbol zastępczy = "Rola..."
 onChange={(e) => {setRole (e.target.value)}}
 />








eksportdomyślny Aplikacja;

Rozbijmy to:

  • Zadeklaruj dwa stany, nazwę i stan roli, aby przechowywać dane użytkownika zebrane z pól wejściowych za pomocą haka useState.
  • The naZmień Metoda każdego pola wejściowego uruchamia wywołanie zwrotne, które wykorzystuje metody stanu do przechwytywania i przechowywania danych, które użytkownik przesyła za pośrednictwem formularza.
  • Aby przesłać dane do serwera zaplecza, funkcja obsługi onSubmit używa metody Axios.post metoda przesyłania danych przekazywanych ze stanów jako obiekt do punktu końcowego interfejsu API zaplecza.

Aby nadać styl renderowanemu formularzowi, dodaj następujący kod do pliku App.css.

* {
wyściółka: 0;
margines: 0;
rozmiar pudełka: ramka;
}
ciało {
rodzina czcionek: 'Poppins', bezszeryfowe;
kolor tła: #8EC1D6;
}


.Forma loginu {
margines: 100piksautomatyczny;
szerokość: 200piks;
wysokość: 250piks;
kolor tła: #ffff;
promień granicy: 10piks; 
}


.Forma loginuP {
wyrównanie tekstu: Centrum;
rozmiar czcionki: 12piks;
grubość czcionki: 600;
kolor: #B8BFC6;
wyściółka: 10piks 10piks;
}


.Forma loginuwejście {
wyświetlacz: blok;
szerokość: 80%;
wysokość: 40piks;
margines: 10piksautomatyczny;
granica: 1pikssolidny#ccc;
promień granicy: 5piks;
wyściółka: 0 10piks;
rozmiar czcionki: 16piks;
kolor: czarny;
}
.Forma loginuprzycisk {
kolor tła: #8EC1D6;
kolor: #ffff;
kursor: wskaźnik;
rozmiar czcionki: 15piks;
promień granicy:7px;
wyściółka: 5piks 10piks;
granica: nic;
}

Teraz uruchom serwer programistyczny, aby zaktualizować zmiany i przejdź do http://localhost: 3000 w przeglądarce, aby wyświetlić wyniki.

Utwórz backend Express.js

Backend Express działa jako oprogramowanie pośredniczące między klientem React a bazą danych MongoDB. Z poziomu serwera możesz zdefiniować swoje schematy danych i nawiązać połączenie między klientem a bazą danych.

Utwórz serwer sieciowy Express i zainstaluj te dwa pakiety:

npm zainstaluj mangustę cors

Mongoose to biblioteka do modelowania danych obiektowych (ODM) dla MongoDB i Node. Zapewnia uproszczoną, opartą na schemacie metodę modelowania danych aplikacji i przechowywania ich w bazie danych MongoDB.

Pakiet CORS (Cross-Origin Resource Sharing) udostępnia mechanizm dla serwera zaplecza i klienta frontendu do komunikowania się i przekazywania danych za pośrednictwem punktów końcowych API.

Utwórz schemat danych

Utwórz nowy folder w katalogu głównym folderu projektu serwera i nadaj mu nazwę modele. W tym folderze utwórz nowy plik: dataSchema.js.

W tym przypadku schemat reprezentuje logiczną strukturę bazy danych. Definiuje dokumenty (rekordy) i pola (właściwości), które składają się na kolekcje w bazie danych.

Dodaj następujący kod do dataSchema.js:

konst mangusta = wymagać('mangusta');
konst ReactFormDataSchema = nowy mangusta. Schemat({
 nazwa: {
 typ: Strunowy,
 wymagany: PRAWDA
 },
 rola: {
 typ: Strunowy,
 wymagany: PRAWDA
 }
});
konst Użytkownik = mangusta.model('Użytkownik', ReactFormDataSchema);
moduł.eksport = Użytkownik;

Ten kod tworzy schemat Mongoose dla modelu użytkownika. Ten schemat definiuje strukturę danych dla danych użytkownika, w tym nazwę i rolę użytkownika. Schemat jest następnie wykorzystywany do stworzenia modelu dla Użytkownika. Dzięki temu model może przechowywać dane w kolekcji MongoDB zgodnie ze strukturą zdefiniowaną w Schemacie.

Skonfiguruj serwer ekspresowy

Następnie otwórz indeks.js plik w folderze projektu serwera i dodaj ten kod:

konst ekspres = wymagać('wyrazić');
konst mangusta = wymagać('mangusta');
konst kors = wymagać(„kors”);
konst aplikacja = ekspres();
konst Użytkownik= wymagać(„./modele/ReactDataSchema”)
app.use (express.json());
app.use (cors());


mangusta.połącz('mongodb://localhost: 27017/reactdata', { użyj NewUrlParser: PRAWDA });


aplikacja.post('/wstawić', asynchroniczny(wymaganie, res) => {
konst Imię = wymagane.ciało.imię
konst CompanyRole = req.body.companyRole


konst dane formularza = nowy Użytkownik({
 imię pierwsze imię,
 rola: FirmaRola
 })


próbować {
czekać na formData.save();
 wyślij ponownie ("wstawione dane..")
 } złapać(błąd) {
konsola.log (błąd)
 }
});


konst port = proces.env. PORT || 4000;
app.listen (port, () => {
konsola.dziennik(`Serwer uruchomiony na porcie ${port}`);
});

Rozbijmy to:

  • Zainicjuj Express, mangusta i CORS na serwerze.
  • Pakiet Mongoose nawiązuje połączenie z bazą danych MongoDB za pomocą łączyć metoda, która przyjmuje domenę URI i obiekt. URI to ciąg połączenia używany do nawiązania połączenia z bazą danych MongoDB. Obiekt określa konfigurację; w tym przypadku zawiera ustawienie umożliwiające korzystanie z najnowszej formy parsera adresów URL.
  • Serwer WWW odpowiada głównie na żądania przychodzące z różnych tras za pomocą odpowiedniej funkcji obsługi. W tym przypadku serwer ma trasę POST, która odbiera dane od klienta React, przechowuje je w zmiennej i przekazuje do zaimportowanego modelu danych.
  • Następnie serwer używa bloku try-and-catch do przechowywania i zapisywania danych w bazie danych MongoDB oraz wylogowuje wszelkie ewentualne błędy.

Na koniec uruchom serwer programistyczny, aby zaktualizować zmiany i przejdź do klienta React w przeglądarce. Wpisz dowolne dane w formularzu i zobacz wyniki w bazie MongoDB.

Używanie stosu MERN do tworzenia aplikacji

Stos MERN zapewnia wydajny i potężny zestaw narzędzi do budowania aplikacji. Możesz tworzyć pełnowartościowe aplikacje działające w świecie rzeczywistym przy użyciu MongoDB, Express, React i Node.js,

Ekosystem React zapewnia również pakiety ułatwiające pracę z formularzami internetowymi. Niektóre z najbardziej popularnych to Formik, KendoReact Form i React Hook Form.