Čtenáři jako vy pomáhají podporovat MUO. Když provedete nákup pomocí odkazů na našich stránkách, můžeme získat provizi přidružené společnosti. Přečtěte si více.

Relační databáze, jako je MySQL, byly tradičně volbou databáze. Databáze NoSQL, jako je MongoDB, však rostly v popularitě díky jejich flexibilní struktuře pro ukládání dat a jejich schopnosti rychle ukládat a načítat data.

Tyto databáze nabízejí alternativní dotazovací jazyk, který můžete bez problémů integrovat s moderními webovými a mobilními aplikacemi. Čtěte dále a zjistěte, jak ukládat data Reactu do databáze MongoDB.

Co je databáze NoSQL?

NoSQL je zkratka pro Not only SQL, nerelační databáze. Tento typ databáze se nespoléhá na tradiční relační databázový model. Nemá definovanou strukturu sloupců a řádků a může ukládat data v řadě různých formátů, takže je flexibilnější a škálovatelnější.

Hlavní rozdíl mezi NoSQL a relačními databázemi je v tom, že databáze NoSQL místo řádků a sloupců ukládají data v dokumentech, které mají dynamickou strukturu.

instagram viewer

Nastavte databázi MongoDB

MongoDB je nejpopulárnější NoSQL databáze. Jedná se o open-source databázi, která ukládá data v JSON-like dokumentů (tabulkách) uvnitř kolekcí (databází).

Zde je návod, jak vypadá jednoduchá struktura dokumentu MongoDB:

{
 Jméno: 'Andrew',
 Role: 'Backend Developer'
}

Chcete-li začít, musíte nejprve nastavit databázi MongoDB. Jakmile dokončíte konfiguraci MongoDB, otevřete aplikaci MongoDB Compass. Poté klikněte na Nové připojení tlačítko pro vytvoření připojení k lokálně spuštěnému serveru MongoDB.

Pokud nemáte přístup k nástroji GUI MongoDB Compass, můžete použít Shell nástroj MongoDB pro vytvoření databáze a kolekce.

Zadejte identifikátor URI připojení a název připojení a poté stiskněte Uložit a připojit.

Nakonec klikněte na tlačítko Vytvořit databázi, vyplňte název databáze a zadejte název kolekce pro ukázkovou kolekci.

Vytvořte klienta React

V něm najdete kód této aplikace úložiště GitHub.

Chcete-li rychle zavést aplikaci React, vytvořte složku projektu na místním počítači, přejděte do tohoto adresáře a spusťte tyto příkazy terminálu pro vytvoření a spuštění vývojového serveru:

npx create-react-app my-app
cd my-app
npm start

Dále nainstalujte Axios. Tento balíček vám umožní posílat HTTP požadavky na váš backend Express.js server pro ukládání dat do vaší databáze MongoDB.

npm nainstalovat axios

Vytvořte ukázkový formulář pro sběr uživatelských dat

Otevři src/App.js soubor, odstraňte standardní kód React a nahraďte jej následujícím:

import'./App.css';
import Reagovat, { useState } z'reagovat';
import Axios z'axios';
funkceAplikace() {
konst [name, setName] = useState("")
konst [role, setRole] = useState("")


konst handleSubmit = (E) => {
 e.preventDefault();


 Axios.post(' http://localhost: 4000/vložení', {
 celé jméno: jméno,
 companyRole: role
 })
 }


vrátit se (


"Aplikace">
"Záhlaví aplikace"> 
"přihlašovací formulář">


Křestní jméno</p>


 className = "Název"
 typ="text"
 zástupný symbol="Jméno ..."
 onChange={(e) => {setName (e.target.value)}}
 />




 Role společnosti</p>


 className = "Role"
 typ="text"
 zástupný symbol = "Role..."
 onChange={(e) => {setRole (e.target.value)}}
 />








vývoznívýchozí Aplikace;

Pojďme si to rozebrat:

  • Deklarujte dva stavy, název a stav role, abyste udrželi uživatelská data shromážděná ze vstupních polí pomocí háčku useState.
  • The při změně metoda každého vstupního pole spustí zpětné volání, které používá stavové metody k zachycení a uložení dat, která uživatel odešle prostřednictvím formuláře.
  • K odeslání dat na backendový server používá funkce obsluhy onSubmit Axios.post metoda k odeslání dat předávaných ze stavů jako objektu do koncového bodu rozhraní API.

Chcete-li upravit styl vykresleného formuláře, přidejte do souboru App.css následující kód.

* {
vycpávka: 0;
okraj: 0;
velikost krabice: border-box;
}
tělo {
rodina písem: 'Poppins', sans-serif;
barva pozadí: #8EC1D6;
}


.přihlašovací formulář {
okraj: 100pxauto;
šířka: 200px;
výška: 250px;
barva pozadí: #fff;
hraniční poloměr: 10px; 
}


.přihlašovací formulářp {
zarovnání textu: centrum;
velikost písma: 12px;
tloušťka písma: 600;
barva: #B8BFC6;
vycpávka: 10px 10px;
}


.přihlašovací formulářvstup {
Zobrazit: blok;
šířka: 80%;
výška: 40px;
okraj: 10pxauto;
okraj: 1pxpevný#ccc;
hraniční poloměr: 5px;
vycpávka: 0 10px;
velikost písma: 16px;
barva: Černá;
}
.přihlašovací formulářknoflík {
barva pozadí: #8EC1D6;
barva: #fff;
kurzor: ukazatel;
velikost písma: 15px;
hraniční poloměr: 7 pixelů;
vycpávka: 5px 10px;
okraj: žádný;
}

Nyní roztočte vývojový server, abyste aktualizovali změny a přejděte na něj http://localhost: 3000 ve vašem prohlížeči pro zobrazení výsledků.

Vytvořte backend Express.js

Express backend funguje jako middleware mezi vaším klientem React a databází MongoDB. Ze serveru můžete definovat svá datová schémata a navázat spojení mezi klientem a databází.

Vytvořte expresní webový server a nainstalujte tyto dva balíčky:

npm install mongoose cors

Mongoose je knihovna Object Data Modeling (ODM) pro MongoDB a Node. Poskytuje zjednodušenou metodu založenou na schématu pro modelování dat vaší aplikace a jejich ukládání do databáze MongoDB.

Balíček CORS (Cross-Origin Resource Sharing) poskytuje mechanismus pro backendový server a frontend klienta pro komunikaci a předávání dat přes koncové body API.

Vytvořte datové schéma

Vytvořte novou složku v kořenovém adresáři složky projektu serveru a pojmenujte ji modely. V této složce vytvořte nový soubor: dataSchema.js.

Schéma v tomto případě představuje logickou strukturu vaší databáze. Definuje dokumenty (záznamy) a pole (vlastnosti), které tvoří kolekce v rámci databáze.

Přidejte následující kód do dataSchema.js:

konst mangusta = vyžadovat('mangusta');
konst ReactFormDataSchema = Nový mangusta. Schéma({
 název: {
 typ: Tětiva,
 Požadované: skutečný
 },
 role: {
 typ: Tětiva,
 Požadované: skutečný
 }
});
konst Uživatel = mongoose.model('Uživatel', ReactFormDataSchema);
modul.exports = Uživatel;

Tento kód vytvoří schéma Mongoose pro model uživatele. Toto schéma definuje datovou strukturu pro uživatelská data, včetně jména a role uživatele. Schéma se pak použije k vytvoření modelu pro uživatele. To umožňuje modelu ukládat data do kolekce MongoDB podle struktury definované ve schématu.

Nastavte expresní server

Dále otevřete index.js soubor ve složce projektu serveru a přidejte tento kód:

konst vyjádřit = vyžadovat('vyjádřit');
konst mangusta = vyžadovat('mangusta');
konst kors = vyžadovat('cors');
konst app = express();
konst Uživatel= vyžadovat('./models/ReactDataSchema')
app.use (express.json());
app.use (cors());


mongoose.connect('mongodb://localhost: 27017/reactdata', { useNewUrlParser: skutečný });


app.post('/vložit', asynchronní(req, res) => {
konst Jméno = req.body.firstName
konst CompanyRole = req.body.companyRole


konst formData = Nový Uživatel({
 jméno: Jméno,
 role: CompanyRole
 })


Snaž se {
čekat formData.save();
 znovu.odeslat("vložené údaje.")
 } chytit(chyba) {
řídicí panel.log (chyba)
 }
});


konst port = proces.env. PORT || 4000;
app.listen (port, () => {
řídicí panel.log(`Server spuštěn na portu ${port}`);
});

Pojďme si to rozebrat:

  • Inicializujte Express, Mongoose a CORS na serveru.
  • Balíček Mongoose naváže připojení k databázi MongoDB pomocí připojit metoda, která přebírá doménu URI a objekt. URI je připojovací řetězec používaný k navázání spojení s databází MongoDB. Objekt určuje konfiguraci; v tomto případě obsahuje nastavení pro použití nejnovější formy analyzátoru URL.
  • Webový server především odpovídá na požadavky přicházející z různých tras pomocí příslušné funkce handleru. V tomto případě má server cestu POST, která přijímá data od klienta React, ukládá je do proměnné a předává je importovanému datovému modelu.
  • Server pak použije blok pokusu a odlovu k uložení a uložení dat do databáze MongoDB a případné chyby odhlásí.

Nakonec roztočte vývojový server, abyste aktualizovali změny a přejděte do svého klienta React v prohlížeči. Zadejte libovolná data do formuláře a zobrazte výsledky v databázi MongoDB.

Použití MERN Stack k sestavení aplikací

MERN stack poskytuje efektivní a výkonnou sadu nástrojů pro stavební aplikace. Můžete vytvářet plnohodnotné aplikace v reálném světě pomocí MongoDB, Express, React a Node.js,

Ekosystém React také poskytuje balíčky, které vám pomohou pracovat s webovými formuláři. Některé z nejpopulárnějších jsou Formik, KendoReact Form a React Hook Form.