Čitatelia ako vy pomáhajú podporovať MUO. Keď uskutočníte nákup pomocou odkazov na našej stránke, môžeme získať pridruženú províziu. Čítaj viac.

Relačné databázy, ako je MySQL, boli tradične najlepšou voľbou databázy. NoSQL databázy, ako je MongoDB, však získali na popularite vďaka svojej flexibilnej štruktúre ukladania údajov a schopnosti rýchlo ukladať a získavať údaje.

Tieto databázy ponúkajú alternatívny dopytovací jazyk, ktorý môžete bez problémov integrovať s modernými webovými a mobilnými aplikáciami. Čítajte ďalej a dozviete sa, ako ukladať údaje Reactu do databázy MongoDB.

Čo je databáza NoSQL?

NoSQL je skratka pre Not only SQL, nerelačná databáza. Tento typ databázy sa nespolieha na tradičný relačný databázový model. Nemá definovanú štruktúru stĺpcov a riadkov a môže ukladať údaje v rôznych rôznych formátoch, vďaka čomu je flexibilnejší a škálovateľnejší.

Hlavný rozdiel medzi NoSQL a relačnými databázami je v tom, že namiesto riadkov a stĺpcov databázy NoSQL ukladajú údaje v dokumentoch, ktoré majú dynamickú štruktúru.

instagram viewer

Nastavte databázu MongoDB

MongoDB je najpopulárnejšia databáza NoSQL. Ide o databázu s otvoreným zdrojovým kódom, ktorá ukladá údaje v dokumentoch (tabuľkách) podobných JSON vo vnútri kolekcií (databáz).

Takto vyzerá jednoduchá štruktúra dokumentu MongoDB:

{
 Krstné meno: 'Andrew',
 Rola: „Vývojár na pozadí“
}

Ak chcete začať, musíte najprv nastaviť databázu MongoDB. Po dokončení konfigurácie MongoDB otvorte aplikáciu MongoDB Compass. Potom kliknite na Nové pripojenie tlačidlo na vytvorenie spojenia so serverom MongoDB spusteným lokálne.

Ak nemáte prístup k nástroju GUI MongoDB Compass, môžete použiť MongoDB shell nástroj na vytvorenie databázy a kolekcie.

Zadajte identifikátor URI pripojenia a názov pripojenia a potom stlačte Uložiť a pripojiť.

Nakoniec kliknite na tlačidlo Create Database, vyplňte názov databázy a zadajte názov kolekcie pre demo kolekciu.

Vytvorte klienta React

V ňom nájdete kód tejto aplikácie úložisko GitHub.

Ak chcete rýchlo spustiť aplikáciu React, vytvorte priečinok projektu na svojom lokálnom počítači, prejdite do tohto adresára a spustite tieto príkazy terminálu na vytvorenie a rozbehnutie vývojového servera:

npx create-react-app my-app
cd moja aplikácia
npm štart

Ďalej nainštalujte Axios. Tento balík vám umožní odosielať požiadavky HTTP na váš backendový server Express.js na ukladanie údajov do vašej databázy MongoDB.

npm nainštalujte axios

Vytvorte ukážkový formulár na zhromažďovanie používateľských údajov

Otvor src/App.js súbor, odstráňte štandardný kód reakcie a nahraďte ho nasledujúcim:

importovať'./App.css';
importovať Reagovať, { useState } od'reagovať';
importovať Axios od"axios";
funkciuApp() {
konšt [name, setName] = useState("")
konšt [rola, setRole] = useState("")


konšt handleSubmit = (e) => {
 e.preventDefault();


 Axios.post(' http://localhost: 4000/vložka', {
 celé meno: meno,
 companyRole: rola
 })
 }


vrátiť (


"aplikácia">
"Hlavička aplikácie"> 
"prihlasovací formulár">


Krstné meno</p>


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




 Úloha spoločnosti</p>


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








exportpredvolená App;

Poďme si to rozobrať:

  • Deklarujte dva stavy, názov a stav roly, na uchovávanie používateľských údajov zhromaždených zo vstupných polí pomocou háku useState.
  • The pri zmene metóda každého vstupného poľa spustí spätné volanie, ktoré používa metódy stavu na zachytenie a uloženie údajov, ktoré používateľ odošle prostredníctvom formulára.
  • Na odoslanie údajov na koncový server používa funkcia obsluhy onSubmit Axios.post metóda na odoslanie údajov odovzdaných zo stavov ako objektu do koncového bodu rozhrania API.

Ak chcete upraviť štýl vykresleného formulára, pridajte nasledujúci kód do súboru App.css.

* {
vypchávka: 0;
marža: 0;
box-size: border-box;
}
telo {
font-family: 'Poppins', sans-serif;
farba pozadia: #8EC1D6;
}


.prihlasovací formulár {
marža: 100pxauto;
šírka: 200px;
výška: 250px;
farba pozadia: #fff;
hraničný polomer: 10px; 
}


.prihlasovací formulárp {
zarovnanie textu: stred;
veľkosť písma: 12px;
font-weight: 600;
farba: #B8BFC6;
vypchávka: 10px 10px;
}


.prihlasovací formulárvstup {
displej: blokovať;
šírka: 80%;
výška: 40px;
marža: 10pxauto;
hranica: 1pxpevný#ccc;
hraničný polomer: 5px;
vypchávka: 0 10px;
veľkosť písma: 16px;
farba: čierna;
}
.prihlasovací formulártlačidlo {
farba pozadia: #8EC1D6;
farba: #fff;
kurzor: ukazovateľ;
veľkosť písma: 15px;
hraničný polomer: 7 pixelov;
vypchávka: 5px 10px;
hranica: žiadny;
}

Teraz spustite vývojový server, aby ste aktualizovali zmeny a prejdite naň http://localhost: 3000 vo vašom prehliadači, aby ste videli výsledky.

Vytvorte Backend Express.js

Express backend funguje ako middleware medzi vaším klientom React a databázou MongoDB. Zo servera môžete definovať svoje dátové schémy a vytvoriť spojenie medzi klientom a databázou.

Vytvorte expresný webový server a nainštalujte tieto dva balíčky:

npm install mongoose cors

Mongoose je knižnica Object Data Modeling (ODM) pre MongoDB a Node. Poskytuje zjednodušenú metódu založenú na schéme na modelovanie údajov vašej aplikácie a ich uloženie do databázy MongoDB.

Balík CORS (Cross-Origin Resource Sharing) poskytuje mechanizmus pre backendový server a frontend klienta na komunikáciu a odovzdávanie údajov cez koncové body API.

Vytvorte schému údajov

Vytvorte nový priečinok v koreňovom adresári priečinka projektu vášho servera a pomenujte ho modelov. V tomto priečinku vytvorte nový súbor: dataSchema.js.

Schéma v tomto prípade predstavuje logickú štruktúru vašej databázy. Definuje dokumenty (záznamy) a polia (vlastnosti), ktoré tvoria kolekcie v rámci databázy.

Pridajte nasledujúci kód do dataSchema.js:

konšt mangusta = vyžadovať("mongoose");
konšt ReactFormDataSchema = Nový mangusta. Schéma({
 názov: {
 typ: Reťazec,
 požadovaný: pravda
 },
 rola: {
 typ: Reťazec,
 požadovaný: pravda
 }
});
konšt Používateľ = mongoose.model('používateľ', ReactFormDataSchema);
modul.exports = Používateľ;

Tento kód vytvorí schému Mongoose pre model používateľa. Táto schéma definuje dátovú štruktúru pre užívateľské dáta, vrátane mena a roly užívateľa. Schéma sa potom použije na vytvorenie modelu pre používateľa. To umožňuje modelu ukladať údaje do kolekcie MongoDB podľa štruktúry definovanej v schéme.

Nastavte expresný server

Ďalej otvorte index.js súbor v priečinku projektu servera a pridajte tento kód:

konšt vyjadriť = vyžadovať('expresné');
konšt mangusta = vyžadovať("mongoose");
konšt kors = vyžadovať('cors');
konšt app = express();
konšt Používateľ= vyžadovať('./models/ReactDataSchema')
app.use (express.json());
app.use (cors());


mongoose.connect('mongodb://localhost: 27017/reactdata', { použite NewUrlParser: pravda });


app.post('/insert', async(req, res) => {
konšt Meno = req.body.firstName
konšt CompanyRole = req.body.companyRole


konšt formData = Nový Používateľ ({
 meno: krstné meno,
 rola: CompanyRole
 })


skúste {
čakať formData.save();
 znova.odoslať("vložené údaje.")
 } chytiť(chyba) {
konzoly.log (chyba)
 }
});


konšt port = process.env. PORT || 4000;
app.listen (port, () => {
konzoly.log(`Server sa spustil na porte ${port}`);
});

Poďme si to rozobrať:

  • Inicializujte Express, Mongoose a CORS na serveri.
  • Balík Mongoose vytvorí pripojenie k databáze MongoDB pomocou pripojiť metóda, ktorá preberá doménu URI a objekt. URI je reťazec pripojenia používaný na vytvorenie spojenia s databázou MongoDB. Objekt špecifikuje konfiguráciu; v tomto prípade obsahuje nastavenie na použitie najnovšej formy analyzátora adries URL.
  • Webový server odpovedá hlavne na požiadavky prichádzajúce z rôznych trás vhodnou funkciou obsluhy. V tomto prípade má server trasu POST, ktorá prijíma údaje od klienta React, ukladá ich do premennej a odovzdáva ich importovanému dátovému modelu.
  • Server potom použije blok pokusu a chytenia na uloženie a uloženie údajov do databázy MongoDB a odhlási všetky chyby, ak nejaké existujú.

Nakoniec roztočte vývojový server, aby ste aktualizovali zmeny a prejdite na svojho klienta React vo svojom prehliadači. Zadajte akékoľvek údaje do formulára a zobrazte výsledky v databáze MongoDB.

Použitie MERN Stack na vytváranie aplikácií

Stoh MERN poskytuje efektívnu a výkonnú súpravu nástrojov pre stavebné aplikácie. Môžete vytvárať plnohodnotné aplikácie v reálnom svete pomocou MongoDB, Express, React a Node.js,

Ekosystém React tiež poskytuje balíčky, ktoré vám pomôžu pracovať s webovými formulármi. Niektoré z najpopulárnejších sú Formik, KendoReact Form a React Hook Form.