Relatsiooniandmebaasid, nagu MySQL, on traditsiooniliselt olnud andmebaaside valik. Kuid NoSQL-i andmebaasid, nagu MongoDB, on muutunud populaarsemaks tänu nende paindlikule andmesalvestusstruktuurile ja võimele andmeid kiiresti salvestada ja hankida.
Need andmebaasid pakuvad alternatiivset päringukeelt, mida saate sujuvalt integreerida kaasaegsete veebi- ja mobiilirakendustega. Lugege edasi, et õppida, kuidas salvestada Reacti andmeid MongoDB andmebaasis.
Mis on NoSQL-i andmebaas?
NoSQL tähistab mitte ainult SQL-i, mitterelatsioonilist andmebaasi. Seda tüüpi andmebaas ei tugine traditsioonilisele relatsioonilise andmebaasi mudelile. Sellel ei ole määratletud veeru-ridade struktuuri ja see võib salvestada andmeid erinevates vormingutes, muutes selle paindlikumaks ja skaleeritavamaks.
Peamine erinevus NoSQL-i ja relatsiooniandmebaaside vahel seisneb selles, et ridade ja veergude asemel salvestavad NoSQL-i andmebaasid andmeid dokumentidesse, millel on dünaamiline struktuur.
MongoDB andmebaasi seadistamine
MongoDB on kõige populaarsem NoSQL-i andmebaas. See on avatud lähtekoodiga andmebaas, mis salvestab andmeid JSON-laadsetes dokumentides (tabelites) kogudes (andmebaasides).
Siin näeb lihtne MongoDB dokumendistruktuur välja:
{
Eesnimi: "Andrew",
Roll: taustaarendaja
}Alustamiseks peate esmalt looge MongoDB andmebaas. Kui olete MongoDB konfigureerimise lõpetanud, avage rakendus MongoDB Compass. Seejärel klõpsake nuppu Uus ühendus nuppu, et luua ühendus kohalikult töötava MongoDB serveriga.
Kui teil pole juurdepääsu MongoDB Compassi GUI tööriistale, saate kasutada MongoDB kestatööriist andmebaasi ja kollektsiooni loomiseks.
Sisestage ühenduse URI ja ühenduse nimi, seejärel vajutage nuppu Salvesta ja ühenda.
Lõpuks klõpsake nuppu Loo andmebaas, sisestage andmebaasi nimi ja määrake demokogu jaoks kogu nimi.
Looge Reacti klient
Selle rakenduse koodi leiate sellest GitHubi hoidla.
Reacti rakenduse kiireks alglaadimiseks looge oma kohalikus masinas projekti kaust, minge sellesse kataloogi ja käivitage arendusserveri loomiseks ja käivitamiseks järgmised terminalikäsud:
npx loo-reageeri-rakendus minu-rakendus
cd minu rakendus
npm startJärgmisena installige Axios. See pakett võimaldab teil saata HTTP-päringuid oma taustaprogrammi Express.js serverisse, et salvestada andmeid teie MongoDB andmebaasi.
npm install axiosLooge kasutajaandmete kogumiseks demovorm
Ava src/App.js faili, kustutage reageerimiskood ja asendage see järgmisega:
importida'./App.css';
importida Reageerige, { useState } alates'reageeri';
importida Axios alates"axios";funktsiooniRakendus() {
konst [nimi, setName] = useState("")
konst [roll, setRole] = useState("")konst käepideEsita = (e) => {
e.preventDefault();Axios.post(' http://localhost: 4000/sisesta, {
täisnimi: nimi,
ettevõte Roll: roll
})
}tagasi (
"Rakendus">"Rakenduse päis"> "logIn-vorm">
eksportidavaikimisi Rakendus;
Teeme selle lahti:
- Deklareerige kaks olekut, nimi ja rolli olek, et hoida sisestusväljadelt kogutud kasutajaandmeid konksu useState abil.
- The onChange iga sisestusvälja meetod käivitab tagasihelistamise, mis kasutab olekumeetodeid, et hõivata ja salvestada andmeid, mida kasutaja vormi kaudu esitab.
- Andmete esitamiseks taustaserverisse kasutab töötleja funktsioon onSubmit Axios.post meetod osariikidest objektina edastatud andmete esitamiseks taustarakenduse API lõpp-punkti.
Renderdatud vormi stiilimiseks lisage faili App.css järgmine kood.
* {
polsterdus: 0;
marginaal: 0;
kasti suuruse määramine: ääris-kast;
}keha {
font-perekond: 'Poppins', sans-serif;
taustavärv: #8EC1D6;
}.logIn-vorm {
marginaal: 100pxauto;
laius: 200px;
kõrgus: 250px;
taustavärv: #fff;
piiriraadius: 10px;
}.logIn-vormlk {
teksti joondamine: Keskus;
fondi suurus: 12px;
font-weight: 600;
värvi: #B8BFC6;
polsterdus: 10px 10px;
}.logIn-vormsisend {
kuva: blokk;
laius: 80%;
kõrgus: 40px;
marginaal: 10pxauto;
piir: 1pxtahke#ccc;
piiriraadius: 5px;
polsterdus: 0 10px;
fondi suurus: 16px;
värvi: must;
}
.logIn-vormnuppu {
taustavärv: #8EC1D6;
värvi: #fff;
kursor: osuti;
fondi suurus: 15px;
piiriraadius:7 pikslit;
polsterdus: 5px 10px;
piir: mitte ühtegi;
}
Nüüd keerutage arendusserver muudatuste värskendamiseks ja navigeerimiseks http://localhost: 3000 brauseris tulemuste vaatamiseks.
Looge Express.js taustaprogramm
Expressi taustaprogramm toimib teie Reacti kliendi ja MongoDB andmebaasi vahel vahevarana. Serverist saate määratleda oma andmeskeemid ja luua ühenduse kliendi ja andmebaasi vahel.
Looge Expressi veebiserver ja installige need kaks paketti:
npm install mongoose corsMongoose on objektiandmete modelleerimise (ODM) teek MongoDB ja Node jaoks. See pakub lihtsustatud skeemipõhist meetodit teie rakenduse andmete modelleerimiseks ja nende salvestamiseks MongoDB andmebaasi.
CORS-i (Cross-Origin Resource Sharing) pakett pakub taustaserverile ja kasutajaliidese kliendile mehhanismi API lõpp-punktide kaudu suhtlemiseks ja andmete edastamiseks.
Looge andmeskeem
Looge oma serveri projekti kausta juurkataloogis uus kaust ja andke sellele nimi mudelid. Looge selles kaustas uus fail: dataSchema.js.
Skeem esindab antud juhul teie andmebaasi loogilist struktuuri. See määratleb dokumendid (kirjed) ja väljad (atribuudid), mis moodustavad andmebaasis olevad kogud.
Lisage failile dataSchema.js järgmine kood:
konst mangust = nõuda("mongoose");konst ReactFormDataSchema = uus mangust. Skeem({
nimi: {
tüüp: String,
nõutud: tõsi
},
roll: {
tüüp: String,
nõutud: tõsi
}
});
konst Kasutaja = mongoose.model('kasutaja', ReactFormDataSchema);
moodul.exports = Kasutaja;
See kood loob kasutajamudeli jaoks Mongoose'i skeemi. See skeem määratleb kasutajaandmete andmestruktuuri, sealhulgas kasutaja nime ja rolli. Seejärel kasutatakse skeemi kasutaja jaoks mudeli loomiseks. See võimaldab mudelil salvestada andmeid MongoDB kogusse vastavalt skeemis määratletud struktuurile.
Seadistage Express Server
Järgmisena avage index.js faili serveri projekti kausta ja lisage see kood:
konst väljendada = nõuda('väljendama');
konst mangust = nõuda("mongoose");
konst cors = nõuda('kors');
konst rakendus = express();
konst Kasutaja = nõuda('./models/ReactDataSchema')app.use (express.json());
app.use (cors());mongoose.connect("mongodb://localhost: 27017/reactdata", { kasutage NewUrlParserit: tõsi });
app.post('/insert', asünkr(req, res) => {
konst Eesnimi = req.body.firstName
konst EttevõtteRoll = req.body.companyRolekonst formData = uus Kasutaja({
nimi: eesnimi,
roll: CompanyRole
})proovi {
ootama formData.save();
res.send("andmed sisestatud..")
} püüda(err) {
konsool.log (viga)
}
});konst port = protsess.env. PORT || 4000;
app.listen (port, () => {
konsool.log(`Server käivitus pordis ${port}`);
});
Teeme selle lahti:
- Initsialiseerige serveris Express, mongoose ja CORS.
- Pakett Mongoose loob ühenduse MongoDB andmebaasiga, kasutades ühendada meetod, mis võtab URI domeeni ja objekti. URI on ühenduse string, mida kasutatakse ühenduse loomiseks MongoDB andmebaasiga. Objekt määrab konfiguratsiooni; sel juhul sisaldab see sätet URL-i parseri uusima vormi kasutamiseks.
- Veebiserver vastab peamiselt erinevatelt marsruutidelt saabuvatele päringutele vastava töötleja funktsiooniga. Sel juhul on serveril POST-marsruut, mis võtab andmed vastu Reacti kliendilt, salvestab need muutujasse ja edastab need imporditud andmemudelile.
- Seejärel kasutab server MongoDB andmebaasi andmete salvestamiseks ja salvestamiseks proovi- ja püüdmisplokki ning logib välja kõik vead, kui neid on.
Lõpuks käivitage muudatuste värskendamiseks arendusserver ja minge brauseris oma Reacti kliendi juurde. Sisestage vormile kõik andmed ja vaadake tulemusi MongoDB andmebaasis.
MERN Stacki kasutamine rakenduste loomiseks
MERN-i virn on tõhus ja võimas tööriistakomplekt rakenduste ehitamiseks. Saate luua täisväärtuslikke reaalmaailma rakendusi, kasutades MongoDB, Express, React ja Node.js,
Reacti ökosüsteem pakub ka pakette, mis aitavad teil veebivormidega töötada. Mõned kõige populaarsemad on Formik, KendoReact Form ja React Hook Form.
