Tokie skaitytojai kaip jūs padeda palaikyti MUO. Kai perkate naudodami nuorodas mūsų svetainėje, galime uždirbti filialų komisinius. Skaityti daugiau.

Reliacinės duomenų bazės, tokios kaip MySQL, tradiciškai buvo pasirinktos duomenų bazės. Tačiau NoSQL duomenų bazės, tokios kaip MongoDB, išpopuliarėjo dėl lanksčios duomenų saugojimo struktūros ir galimybės greitai saugoti ir gauti duomenis.

Šios duomenų bazės siūlo alternatyvią užklausų kalbą, kurią galite sklandžiai integruoti su šiuolaikinėmis žiniatinklio ir mobiliosiomis programomis. Skaitykite toliau, kad sužinotumėte, kaip saugoti React duomenis MongoDB duomenų bazėje.

Kas yra NoSQL duomenų bazė?

„NoSQL“ reiškia „Ne tik SQL“, nesusijusią duomenų bazę. Šio tipo duomenų bazės nesiremia tradiciniu reliacinės duomenų bazės modeliu. Jame nėra apibrėžtos stulpelių ir eilučių struktūros ir gali būti saugomi įvairių formatų duomenys, todėl jis yra lankstesnis ir keičiamas.

Pagrindinis skirtumas tarp NoSQL ir reliacinių duomenų bazių yra tas, kad vietoj eilučių ir stulpelių NoSQL duomenų bazės saugo duomenis dokumentuose, kurių struktūra yra dinamiška.

instagram viewer

Sukurkite MongoDB duomenų bazę

MongoDB yra populiariausia NoSQL duomenų bazė. Tai atvirojo kodo duomenų bazė, kurioje duomenys saugomi JSON tipo dokumentuose (lentelėse) kolekcijose (duomenų bazėse).

Štai kaip atrodo paprasta MongoDB dokumento struktūra:

{
 Vardas: 'Andrew',
 Vaidmuo: „Backend Developer“
}

Norėdami pradėti, pirmiausia turite sukurti MongoDB duomenų bazę. Baigę konfigūruoti MongoDB, atidarykite MongoDB Compass programą. Tada spustelėkite Naujas ryšys mygtuką, kad sukurtumėte ryšį su vietiniu veikiančiu MongoDB serveriu.

Jei neturite prieigos prie MongoDB Compass GUI įrankio, galite naudoti MongoDB apvalkalo įrankis duomenų bazei ir kolekcijai sukurti.

Pateikite ryšio URI ir ryšio pavadinimą, tada paspauskite Išsaugoti ir prisijungti.

Galiausiai spustelėkite mygtuką Sukurti duomenų bazę, įveskite duomenų bazės pavadinimą ir pateikite demonstracinės kolekcijos kolekcijos pavadinimą.

Sukurkite „React“ klientą

Šios programos kodą galite rasti joje GitHub saugykla.

Norėdami greitai paleisti „React“ programą, vietiniame kompiuteryje sukurkite projekto aplanką, pakeiskite tą katalogą ir paleiskite šias terminalo komandas, kad sukurtumėte ir suaktyvintumėte kūrimo serverį:

npx Create-React-app my-app
cd mano programa
npm pradžia

Tada įdiekite „Axios“. Šis paketas leis jums siųsti HTTP užklausas į jūsų backend Express.js serverį, kad būtų saugomi duomenys jūsų MongoDB duomenų bazėje.

npm įdiegti axios

Sukurkite demonstracinę formą vartotojo duomenims rinkti

Atidaryk src/App.js failą, ištrinkite „React“ kodą ir pakeiskite jį tokiu:

importuoti„./App.css“;
importuoti Reaguoti, { useState } iš'reaguoti';
importuoti Axios iš"aksios";
funkcijaProgramėlė() {
konst [vardas, setName] = useState("")
konst [role, setRole] = useState("")


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


 Axios.post(' http://localhost: 4000 už įdėklą, {
 pilnas vardas: vardas,
 kompanijaVaidmuo: vaidmuo
 })
 }


grąžinti (


"Programėlė">
"Programos antraštė"> 
"prisijungimo forma">


Vardas </p>


 klasės pavadinimas = "Vardas"
 tipas ="tekstas"
 vietos rezervuaras="Pirmas vardas ..."
 onChange={(e) => {setName (e.target.value)}}
 />




 Įmonės vaidmuo</p>


 klasės pavadinimas = "Vaidmuo"
 tipas ="tekstas"
 vietos rezervavimo priemonė = "Vaidmuo..."
 onChange={(e) => {setRole (e.target.value)}}
 />








eksportuotinumatytas Programėlė;

Išskaidykime:

  • Paskelbkite dvi būsenas – pavadinimą ir vaidmens būseną, kad būtų saugomi vartotojo duomenys, surinkti iš įvesties laukų, naudojant „useState“ kabliuką.
  • The onChange kiekvieno įvesties lauko metodas vykdo atgalinį skambutį, kuris naudoja būsenos metodus duomenims, kuriuos vartotojas pateikia naudodamas formą, užfiksuoti ir saugoti.
  • Norėdami pateikti duomenis į vidinį serverį, onSubmit tvarkyklės funkcija naudoja Axios.post būdas pateikti duomenis, perduodamus iš būsenų kaip objektą į užpakalinės programos API galutinį tašką.

Norėdami sukurti pateiktos formos stilių, į App.css failą pridėkite šį kodą.

* {
kamšalas: 0;
marža: 0;
dėžutės dydžio: kraštinė-dėžė;
}
kūnas {
šrifto šeima: 'Poppinsas', be serifo;
fono spalva: #8EC1D6;
}


.prisijungimo forma {
marža: 100pxautomatinis;
plotis: 200px;
aukščio: 250px;
fono spalva: #fff;
pasienio spindulys: 10px; 
}


.prisijungimo formap {
teksto lygiavimas: centras;
šrifto dydis: 12px;
šrifto svoris: 600;
spalva: #B8BFC6;
kamšalas: 10px 10px;
}


.prisijungimo formaįvestis {
ekranas: blokas;
plotis: 80%;
aukščio: 40px;
marža: 10pxautomatinis;
siena: 1pxkietas#ccc;
pasienio spindulys: 5px;
kamšalas: 0 10px;
šrifto dydis: 16px;
spalva: juodas;
}
.prisijungimo formamygtuką {
fono spalva: #8EC1D6;
spalva: #fff;
žymeklį: rodyklė;
šrifto dydis: 15px;
pasienio spindulys:7px;
kamšalas: 5px 10px;
siena: nė vienas;
}

Dabar sukite kūrimo serverį, kad atnaujintumėte pakeitimus ir eitumėte į http://localhost: 3000 naršyklėje, kad peržiūrėtumėte rezultatus.

Sukurkite „Express.js“ pagrindinę programą

„Express backend“ veikia kaip tarpinė programinė įranga tarp jūsų „React“ kliento ir „MongoDB“ duomenų bazės. Iš serverio galite apibrėžti savo duomenų schemas ir užmegzti ryšį tarp kliento ir duomenų bazės.

Sukurkite „Express“ žiniatinklio serverį ir įdiekite šiuos du paketus:

npm įdiegti mongoose cors

„Mongoose“ yra objektų duomenų modeliavimo (ODM) biblioteka, skirta „MongoDB“ ir „Node“. Tai supaprastintas schema pagrįstas metodas, skirtas modeliuoti jūsų programos duomenis ir saugoti juos MongoDB duomenų bazėje.

CORS (Cross-Origin Resource Sharing) paketas suteikia mechanizmą, skirtą vidiniam serveriui ir priekiniam klientui bendrauti ir perduoti duomenis per API galinius taškus.

Sukurkite duomenų schemą

Sukurkite naują aplanką savo serverio projekto aplanko šakniniame kataloge ir pavadinkite jį modeliai. Šiame aplanke sukurkite naują failą: dataSchema.js.

Šiuo atveju schema parodo loginę jūsų duomenų bazės struktūrą. Jis apibrėžia dokumentus (įrašus) ir laukus (ypatybes), sudarančius duomenų bazės rinkinius.

Pridėkite šį kodą prie dataSchema.js:

konst mangustas = reikalauti("mangustas");
konst ReactFormDataSchema = naujas mangustas. Schema({
 vardas: {
 tipas: Styga,
 reikalingas: tiesa
 },
 vaidmuo: {
 tipas: Styga,
 reikalingas: tiesa
 }
});
konst Vartotojas = mongoose.model('Vartotojas', ReactFormDataSchema);
modulis.exports = Vartotojas;

Šis kodas sukuria vartotojo modelio Mongoose schemą. Ši schema apibrėžia vartotojo duomenų duomenų struktūrą, įskaitant vartotojo vardą ir vaidmenį. Tada schema naudojama vartotojo modeliui sukurti. Tai leidžia modeliui saugoti duomenis MongoDB kolekcijoje pagal schemoje apibrėžtą struktūrą.

Nustatykite Express serverį

Tada atidarykite index.js failą serverio projekto aplanke ir pridėkite šį kodą:

konst išreikšti = reikalauti("išreikšti");
konst mangustas = reikalauti("mangustas");
konst cors = reikalauti("cors");
konst programa = express ();
konst Vartotojas = reikalauti(„./models/ReactDataSchema“)
app.use (express.json());
app.use (cors());


mongoose.connect(„mongodb://localhost: 27017/reactdata“, { naudokite NewUrlParser: tiesa });


app.post('/Įdėti', async(req, res) => {
konst Vardas = req.body.firstName
konst Įmonės vaidmuo = req.body.companyRole


konst formData = naujas Vartotojas({
 vardas: Vardas,
 vaidmuo: CompanyRole
 })


bandyti {
laukti formData.save();
 res.send("įterpti duomenys..")
 } sugauti(err) {
konsolė.log (klaida)
 }
});


konst prievadas = procesas.env. UOSTAS || 4000;
app.listen (port, () => {
konsolė.log(`Serveris paleistas prievade ${port}`);
});

Išskaidykime:

  • Serveryje inicijuokite Express, Mongoose ir CORS.
  • „Mongoose“ paketas užmezga ryšį su „MongoDB“ duomenų baze naudodamas Prisijungti metodas, kuris paima URI domeną ir objektą. URI yra ryšio eilutė, naudojama ryšiui su MongoDB duomenų baze užmegzti. Objektas nurodo konfigūraciją; šiuo atveju jame yra nustatymas naudoti naujausią URL analizatoriaus formą.
  • Žiniatinklio serveris daugiausia atsako į užklausas, gaunamas iš skirtingų maršrutų, naudodamas atitinkamą tvarkyklės funkciją. Šiuo atveju serveris turi POST maršrutą, kuris gauna duomenis iš React kliento, išsaugo juos kintamajame ir perduoda importuotų duomenų modeliui.
  • Tada serveris naudoja bandymo ir gaudymo bloką duomenims saugoti ir išsaugoti MongoDB duomenų bazėje ir išregistruoja visas klaidas, jei tokių yra.

Galiausiai pasukite kūrimo serverį, kad atnaujintumėte pakeitimus, ir pereikite prie savo „React“ kliento naršyklėje. Įveskite bet kokius duomenis formoje ir peržiūrėkite rezultatus MongoDB duomenų bazėje.

MERN Stack naudojimas programoms kurti

MERN kaminas yra efektyvus ir galingas įrankių rinkinys, skirtas statyboms. Galite kurti visavertes realaus pasaulio programas naudodami MongoDB, Express, React ir Node.js,

React ekosistemoje taip pat pateikiami paketai, padedantys dirbti su žiniatinklio formomis. Vieni populiariausių yra „Formik“, „KendoReact Form“ ir „React Hook Form“.