Tādi lasītāji kā jūs palīdz atbalstīt MUO. Veicot pirkumu, izmantojot saites mūsu vietnē, mēs varam nopelnīt filiāles komisiju. Lasīt vairāk.

Relāciju datu bāzes, piemēram, MySQL, tradicionāli ir bijušas galvenā datubāzes izvēle. Tomēr NoSQL datu bāzes, piemēram, MongoDB, ir kļuvušas populārākas, pateicoties to elastīgajai datu uzglabāšanas struktūrai un spējai ātri uzglabāt un izgūt datus.

Šīs datu bāzes piedāvā alternatīvu vaicājumu valodu, ko varat nemanāmi integrēt ar modernām tīmekļa un mobilajām lietotnēm. Lasiet tālāk, lai uzzinātu, kā uzglabāt React datus MongoDB datu bāzē.

Kas ir NoSQL datu bāze?

NoSQL apzīmē ne tikai SQL, nerelāciju datubāzi. Šāda veida datubāze nebalstās uz tradicionālo relāciju datu bāzes modeli. Tam nav noteiktas kolonnu-rindu struktūras, un tas var uzglabāt datus dažādos formātos, padarot to elastīgāku un mērogojamāku.

Galvenā atšķirība starp NoSQL un relāciju datu bāzēm ir tā, ka NoSQL datu bāzēs rindu un kolonnu vietā tiek saglabāti dati dokumentos, kuriem ir dinamiska struktūra.

instagram viewer

Iestatiet MongoDB datu bāzi

MongoDB ir vispopulārākā NoSQL datu bāze. Tā ir atvērtā koda datu bāze, kas glabā datus JSON līdzīgos dokumentos (tabulās) kolekcijās (datu bāzēs).

Lūk, kā izskatās vienkārša MongoDB dokumentu struktūra:

{
 Vārds: Endrjū,
 Loma: "aizmugures izstrādātājs"
}

Lai sāktu, vispirms ir nepieciešams izveidot MongoDB datu bāzi. Kad esat pabeidzis MongoDB konfigurēšanu, atveriet lietotni MongoDB Compass. Pēc tam noklikšķiniet uz Jauns savienojums pogu, lai izveidotu savienojumu ar MongoDB serveri, kas darbojas lokāli.

Ja jums nav piekļuves MongoDB Compass GUI rīkam, varat izmantot MongoDB čaulas rīks, lai izveidotu datu bāzi un kolekciju.

Norādiet savienojuma URI un savienojuma nosaukumu, pēc tam nospiediet Saglabāt un izveidot savienojumu.

Visbeidzot noklikšķiniet uz pogas Izveidot datu bāzi, ievadiet datu bāzes nosaukumu un norādiet demonstrācijas kolekcijas kolekcijas nosaukumu.

Izveidojiet React klientu

Šīs lietojumprogrammas kodu varat atrast tajā GitHub repozitorijs.

Lai ātri ielādētu React lietojumprogrammu, izveidojiet projekta mapi savā lokālajā datorā, pārejiet uz šo direktoriju un palaidiet šīs termināļa komandas, lai izveidotu un atvērtu izstrādes serveri:

npx izveidot-reaģēt-lietotni mana lietotne
CD mana lietotne
npm sākums

Pēc tam instalējiet Axios. Šī pakotne ļaus jums nosūtīt HTTP pieprasījumus uz jūsu aizmugursistēmas Express.js serveri, lai saglabātu datus jūsu MongoDB datu bāzē.

npm instalēt axios

Izveidojiet demonstrācijas veidlapu, lai apkopotu lietotāja datus

Atveriet src/App.js failu, izdzēsiet React kodu un aizstājiet to ar šādu:

imports'./App.css';
imports Reaģēt, { useState } no'reaģēt';
imports Axios no"aksios";
funkcijuApp() {
konst [nosaukums, setName] = useState("")
konst [role, setRole] = useState("")


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


 Axios.post(' http://localhost: 4000/ieliktnis”, {
 pilns vārds: vārds,
 uzņēmumsLoma: loma
 })
 }


atgriezties (


"Lietotne">
"Lietotnes galvene"> 
"pieteikšanās forma">


Vārds </p>


 klases nosaukums = "Vārds"
 tips="teksts"
 vietturis="Vārds ..."
 onChange={(e) => {setName (e.target.value)}}
 />




 Uzņēmuma loma</p>


 klases nosaukums = "Loma"
 tips="teksts"
 vietturis = "Loma..."
 onChange={(e) => {setRole (e.target.value)}}
 />








eksportētnoklusējuma Lietotne;

Sadalīsim to:

  • Deklarējiet divus stāvokļus, nosaukumu un lomas stāvokli, lai saglabātu lietotāja datus, kas savākti no ievades laukiem, izmantojot āķi useState.
  • The onChange Katra ievades lauka metode izpilda atzvanīšanu, kas izmanto stāvokļa metodes, lai uztvertu un saglabātu datus, ko lietotājs iesniedz, izmantojot veidlapu.
  • Lai iesniegtu datus aizmugursistēmas serverī, onSubmit apstrādātāja funkcija izmanto Axios.post metode, lai iesniegtu datus, kas nosūtīti no stāvokļiem kā objekts uz aizmugursistēmas API galapunktu.

Lai veidotu atveidotās formas stilu, pievienojiet tālāk norādīto kodu failam App.css.

* {
polsterējums: 0;
starpība: 0;
kastes izmēra noteikšana: apmale-box;
}
ķermeni {
fontu ģimene: 'Popins', sans serif;
fona krāsa: #8EC1D6;
}


.logIn-form {
starpība: 100pxauto;
platums: 200px;
augstums: 250px;
fona krāsa: #fff;
robeža-rādiuss: 10px; 
}


.logIn-formlpp {
teksta līdzināšana: centrs;
fonta izmērs: 12px;
fonta svars: 600;
krāsa: #B8BFC6;
polsterējums: 10px 10px;
}


.logIn-formievade {
displejs: bloķēt;
platums: 80%;
augstums: 40px;
starpība: 10pxauto;
robeža: 1pxciets#ccc;
robeža-rādiuss: 5px;
polsterējums: 0 10px;
fonta izmērs: 16px;
krāsa: melns;
}
.logIn-formpogu {
fona krāsa: #8EC1D6;
krāsa: #fff;
kursors: rādītājs;
fonta izmērs: 15px;
robeža-rādiuss:7 pikseļi;
polsterējums: 5px 10px;
robeža: neviens;
}

Tagad pagrieziet izstrādes serveri, lai atjauninātu izmaiņas un pārietu uz http://localhost: 3000 savā pārlūkprogrammā, lai skatītu rezultātus.

Izveidojiet Express.js aizmugursistēmu

Express aizmugursistēma darbojas kā starpprogrammatūra starp jūsu React klientu un MongoDB datu bāzi. No servera varat definēt savas datu shēmas un izveidot savienojumu starp klientu un datu bāzi.

Izveidojiet Express tīmekļa serveri un instalējiet šīs divas pakotnes:

npm instalējiet mongoose cors

Mongoose ir objektu datu modelēšanas (ODM) bibliotēka MongoDB un Node. Tā nodrošina vienkāršotu uz shēmu balstītu metodi, lai modelētu jūsu lietojumprogrammas datus un saglabātu tos MongoDB datu bāzē.

CORS (Cross-Origin Resource Sharing) pakotne nodrošina mehānismu aizmugursistēmas serverim un priekšgala klientam, lai sazinātos un nodotu datus, izmantojot API galapunktus.

Izveidojiet datu shēmu

Izveidojiet jaunu mapi sava servera projekta mapes saknes direktorijā un nosauciet to modeļiem. Šajā mapē izveidojiet jaunu failu: dataSchema.js.

Šajā gadījumā shēma atspoguļo jūsu datu bāzes loģisko struktūru. Tas nosaka dokumentus (ierakstus) un laukus (rekvizītus), kas veido kolekcijas datubāzē.

Pievienojiet vietnei dataSchema.js šādu kodu:

konst mangusts = pieprasīt('mangusts');
konst ReactFormDataSchema = jauns mangusts. Shēma({
 vārds: {
 veids: Stīga,
 nepieciešams: taisnība
 },
 loma: {
 veids: Stīga,
 nepieciešams: taisnība
 }
});
konst Lietotājs = mangoose.model('Lietotājs', ReactFormDataSchema);
modulis.exports = lietotājs;

Šis kods lietotāja modelim izveido Mongoose shēmu. Šī shēma nosaka lietotāja datu datu struktūru, tostarp lietotāja vārdu un lomu. Pēc tam shēmu izmanto, lai izveidotu modeli lietotājam. Tas ļauj modelim uzglabāt datus MongoDB kolekcijā saskaņā ar shēmā definēto struktūru.

Iestatiet Express serveri

Pēc tam atveriet index.js failu servera projekta mapē un pievienojiet šo kodu:

konst izteikt = pieprasīt('izteikt');
konst mangusts = pieprasīt('mangusts');
konst cors = pieprasīt('kors');
konst lietotne = express();
konst Lietotājs= pieprasīt('./models/ReactDataSchema')
app.use (express.json());
app.use (cors());


mangoose.connect("mongodb://localhost: 27017/reactdata", { izmantojiet NewUrlParser: taisnība });


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


konst formData = jauns Lietotājs({
 vārds: Vārds,
 loma: UzņēmumsRole
 })


mēģināt {
gaidīt formData.save();
 res.send("ievietoti dati..")
 } noķert(kļūda) {
konsole.log (kļūda)
 }
});


konst ports = process.env. OST || 4000;
app.listen (port, () => {
konsole.log(`Serveris startēja ostā ${port}`);
});

Sadalīsim to:

  • Inicializējiet Express, Mongoose un CORS serverī.
  • Mongoose pakotne izveido savienojumu ar MongoDB datu bāzi, izmantojot savienot metode, kas izmanto URI domēnu un objektu. URI ir savienojuma virkne, ko izmanto, lai izveidotu savienojumu ar MongoDB datu bāzi. Objekts norāda konfigurāciju; šajā gadījumā tajā ir iestatījums izmantot jaunāko URL parsētāja formu.
  • Tīmekļa serveris galvenokārt atbild uz pieprasījumiem, kas nāk no dažādiem ceļiem, izmantojot atbilstošu apstrādātāja funkciju. Šajā gadījumā serverim ir POST maršruts, kas saņem datus no React klienta, saglabā tos mainīgajā un nodod tos importētajam datu modelim.
  • Pēc tam serveris izmanto mēģinājuma un uztveršanas bloku, lai saglabātu un saglabātu datus MongoDB datu bāzē, un izslēdz visas kļūdas, ja tādas ir.

Visbeidzot, pagrieziet izstrādes serveri, lai atjauninātu izmaiņas, un pārejiet uz savu React klientu savā pārlūkprogrammā. Veidlapā ierakstiet visus datus un skatiet rezultātus MongoDB datu bāzē.

MERN Stack izmantošana lietojumprogrammu veidošanai

MERN kaudze nodrošina efektīvu un jaudīgu rīku komplektu būvniecībai. Varat izveidot pilnvērtīgas reālās pasaules lietojumprogrammas, izmantojot MongoDB, Express, React un Node.js,

React ekosistēma nodrošina arī pakotnes, kas palīdz strādāt ar tīmekļa veidlapām. Dažas no populārākajām ir Formik, KendoReact Form un React Hook Form.