Bralci, kot ste vi, pomagajo podpirati MUO. Ko opravite nakup prek povezav na našem spletnem mestu, lahko zaslužimo partnersko provizijo. Preberi več.

Relacijske baze podatkov, kot je MySQL, so bile tradicionalno priljubljena izbira podatkovnih baz. Vendar so baze podatkov NoSQL, kot je MongoDB, postale priljubljene zaradi svoje prilagodljive strukture za shranjevanje podatkov in njihove zmožnosti hitrega shranjevanja in pridobivanja podatkov.

Te zbirke podatkov ponujajo alternativni jezik poizvedb, ki ga lahko brezhibno integrirate s sodobnimi spletnimi in mobilnimi aplikacijami. Preberite, če želite izvedeti, kako shraniti podatke React v zbirko podatkov MongoDB.

Kaj je baza podatkov NoSQL?

NoSQL pomeni Not only SQL, nerelacijsko bazo podatkov. Ta vrsta baze podatkov se ne opira na tradicionalni model relacijske baze podatkov. Nima definirane strukture stolpec-vrstica in lahko shranjuje podatke v različnih oblikah, zaradi česar je bolj prilagodljiv in razširljiv.

Glavna razlika med NoSQL in relacijskimi bazami podatkov je, da baze podatkov NoSQL namesto vrstic in stolpcev shranjujejo podatke v dokumentih, ki imajo dinamično strukturo.

instagram viewer

Nastavite bazo podatkov MongoDB

MongoDB je najbolj priljubljena baza podatkov NoSQL. Je odprtokodna zbirka podatkov, ki shranjuje podatke v JSON podobnih dokumentih (tabelah) znotraj zbirk (baz podatkov).

Tukaj je videti preprosta struktura dokumenta MongoDB:

{
 Ime: "Andrej",
 Vloga: 'Backend Developer'
}

Če želite začeti, morate najprej nastavite bazo podatkov MongoDB. Ko končate s konfiguracijo MongoDB, odprite aplikacijo MongoDB Compass. Nato kliknite Nova povezava gumb za ustvarjanje povezave s strežnikom MongoDB, ki se izvaja lokalno.

Če nimate dostopa do orodja MongoDB Compass GUI, lahko uporabite Orodje lupine MongoDB za ustvarjanje baze podatkov in zbirke.

Vnesite URI povezave in ime povezave, nato pritisnite Shrani in poveži.

Na koncu kliknite gumb Ustvari bazo podatkov, vnesite ime baze podatkov in navedite ime zbirke za predstavitveno zbirko.

Ustvarite odjemalca React

Kodo te aplikacije najdete v Repozitorij GitHub.

Za hiter zagon aplikacije React ustvarite projektno mapo na lokalnem računalniku, preklopite v ta imenik in zaženite te terminalske ukaze, da ustvarite in zavrtite razvojni strežnik:

npx create-react-app moja aplikacija
cd moja aplikacija
npm začetek

Nato namestite Axios. Ta paket vam bo omogočil pošiljanje zahtev HTTP na vaš zaledni strežnik Express.js za shranjevanje podatkov v vaši bazi podatkov MongoDB.

npm namestite axios

Ustvarite predstavitveni obrazec za zbiranje uporabniških podatkov

Odprite src/App.js datoteko, izbrišite kodo Boilerplate React in jo nadomestite z naslednjim:

uvoz'./App.css';
uvoz Odziv, {useState} od'reagirati';
uvoz Axios od'axios';
funkcijoaplikacija() {
konst [ime, setName] = useState("")
konst [vloga, setRole] = useState("")


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


 Axios.post(' http://localhost: 4000/vstavi', {
 polno ime: ime,
 companyRole: vloga
 })
 }


vrnitev (


"Aplikacija">
"Glava aplikacije"> 
"obrazec za prijavo">


Ime</p>


 ime razreda = "Ime"
 vrsta="besedilo"
 placeholder="Ime ..."
 onChange={(e) => {setName (e.target.value)}}
 />




 Vloga podjetja</p>


 ime razreda = "Vloga"
 vrsta="besedilo"
 placeholder = "Vloga ..."
 onChange={(e) => {setRole (e.target.value)}}
 />








izvozprivzeto aplikacija;

Razčlenimo:

  • Navedite dve stanji, ime in stanje vloge, da zadržite uporabniške podatke, zbrane iz vnosnih polj s kavljem useState.
  • The onChange metoda vsakega vnosnega polja zažene povratni klic, ki uporablja metode stanja za zajemanje in shranjevanje podatkov, ki jih uporabnik predloži prek obrazca.
  • Za predložitev podatkov zalednemu strežniku funkcija obdelovalca onSubmit uporablja Axios.post metoda za predložitev podatkov, posredovanih iz stanj kot objekta, končni točki API-ja zaledja.

Če želite oblikovati upodobljeni obrazec, dodajte to kodo v datoteko App.css.

* {
oblazinjenje: 0;
marža: 0;
velikost škatle: border-box;
}
telo {
družina pisav: 'Poppins', sans-serif;
Barva ozadja: #8EC1D6;
}


.logIn-obrazec {
marža: 100pxavto;
premer: 200px;
višina: 250px;
Barva ozadja: #fff;
mejni polmer: 10px; 
}


.logIn-obrazecstr {
poravnava besedila: center;
velikost pisave: 12px;
teža pisave: 600;
barva: #B8BFC6;
oblazinjenje: 10px 10px;
}


.logIn-obrazecvnos {
zaslon: blok;
premer: 80%;
višina: 40px;
marža: 10pxavto;
meja: 1pxtrdna#ccc;
mejni polmer: 5px;
oblazinjenje: 0 10px;
velikost pisave: 16px;
barva: Črna;
}
.logIn-obrazecgumb {
Barva ozadja: #8EC1D6;
barva: #fff;
kazalec: kazalec;
velikost pisave: 15px;
mejni polmer:7px;
oblazinjenje: 5px 10px;
meja: nič;
}

Zdaj zavrtite razvojni strežnik, da posodobite spremembe in se pomaknete do njega http://localhost: 3000 v brskalniku za ogled rezultatov.

Ustvarite zaledje Express.js

Zaledje Express deluje kot vmesna programska oprema med vašim odjemalcem React in bazo podatkov MongoDB. Na strežniku lahko definirate svoje podatkovne sheme in vzpostavite povezavo med odjemalcem in bazo podatkov.

Ustvarite spletni strežnik Express in namestite ta dva paketa:

npm namestite mongoose cors

Mongoose je knjižnica za modeliranje objektnih podatkov (ODM) za MongoDB in Node. Zagotavlja poenostavljeno metodo, ki temelji na shemi, za modeliranje vaših aplikacijskih podatkov in njihovo shranjevanje v zbirko podatkov MongoDB.

Paket CORS (Cross-Origin Resource Sharing) zagotavlja mehanizem za zaledni strežnik in sprednji odjemalec za komunikacijo in posredovanje podatkov prek končnih točk API-ja.

Ustvarite podatkovno shemo

Ustvarite novo mapo v korenskem imeniku mape vašega strežniškega projekta in jo poimenujte modeli. V tej mapi ustvarite novo datoteko: dataSchema.js.

Shema v tem primeru predstavlja logično strukturo vaše baze podatkov. Določa dokumente (zapise) in polja (lastnosti), ki sestavljajo zbirke v bazi podatkov.

V dataSchema.js dodajte naslednjo kodo:

konst mungos = zahtevati('mungos');
konst ReactFormDataSchema = novo mungos. Shema({
 ime: {
 vrsta: Vrvica,
 obvezno: prav
 },
 vloga: {
 vrsta: Vrvica,
 obvezno: prav
 }
});
konst Uporabnik = mongoose.model('Uporabnik', ReactFormDataSchema);
modul.exports = uporabnik;

Ta koda ustvari shemo Mongoose za uporabniški model. Ta shema definira strukturo podatkov za uporabniške podatke, vključno z imenom in vlogo uporabnika. Shema se nato uporabi za ustvarjanje modela za uporabnika. To omogoča modelu shranjevanje podatkov v zbirko MongoDB v skladu s strukturo, definirano v shemi.

Nastavite strežnik Express

Nato odprite index.js datoteko v mapi strežniškega projekta in dodajte to kodo:

konst izraziti = zahtevati('express');
konst mungos = zahtevati('mungos');
konst cors = zahtevati('cors');
konst app = express();
konst Uporabnik= zahtevati('./models/ReactDataSchema')
app.use (express.json());
app.use (cors());


mongoose.connect('mongodb://localhost: 27017/reactdata', { useNewUrlParser: prav });


app.post('/vstavi', asinh(req, res) => {
konst FirstName = req.body.firstName
konst CompanyRole = req.body.companyRole


konst formData = novo Uporabnik ({
 ime: Ime,
 vloga: CompanyRole
 })


poskusi {
čakati formData.save();
 res.send("vneseni podatki..")
 } ulov(napaka) {
konzola.log (napaka)
 }
});


konst vrata = proces.env. PRISTANIŠČE || 4000;
app.listen (vrata, () => {
konzola.log(`Strežnik se je zagnal na vratih ${port}`);
});

Razčlenimo:

  • Inicializirajte Express, mongoose in CORS v strežniku.
  • Paket Mongoose vzpostavi povezavo z bazo podatkov MongoDB z uporabo povezati metoda, ki prevzame domeno URI in objekt. URI je povezovalni niz, ki se uporablja za vzpostavitev povezave z bazo podatkov MongoDB. Objekt podaja konfiguracijo; v tem primeru vsebuje nastavitev za uporabo najnovejše oblike razčlenjevalnika URL-jev.
  • Spletni strežnik se v glavnem odziva na zahteve, ki prihajajo z različnih poti, z ustrezno funkcijo upravljavca. V tem primeru ima strežnik pot POST, ki prejme podatke od odjemalca React, jih shrani v spremenljivko in jih posreduje uvoženemu podatkovnemu modelu.
  • Strežnik nato uporabi blok poskusi in ulovi za shranjevanje in shranjevanje podatkov v zbirko podatkov MongoDB ter odjavi morebitne napake.

Na koncu zavrtite razvojni strežnik, da posodobite spremembe, in se v brskalniku pomaknite do odjemalca React. Vnesite poljubne podatke v obrazec in si oglejte rezultate v bazi podatkov MongoDB.

Uporaba sklada MERN za gradnjo aplikacij

Sklad MERN zagotavlja učinkovit in zmogljiv komplet orodij za gradnjo aplikacij. Z MongoDB, Express, React in Node.js lahko ustvarite popolnoma razvite aplikacije iz resničnega sveta,

Ekosistem React ponuja tudi pakete za pomoč pri delu s spletnimi obrazci. Nekateri najbolj priljubljeni so Formik, KendoReact Form in React Hook Form.