Cititorii ca tine ajută la sprijinirea MUO. Când efectuați o achiziție folosind link-uri de pe site-ul nostru, este posibil să câștigăm un comision de afiliat. Citeşte mai mult.

Bazele de date relaționale precum MySQL au fost în mod tradițional alegerea de bază de date. Cu toate acestea, bazele de date NoSQL precum MongoDB au crescut în popularitate datorită structurii lor flexibile pentru stocarea datelor și a capacității lor de a stoca și prelua rapid date.

Aceste baze de date oferă un limbaj alternativ de interogare pe care îl puteți integra fără probleme cu aplicațiile web și mobile moderne. Citiți mai departe pentru a afla cum să stocați datele React într-o bază de date MongoDB.

Ce este o bază de date NoSQL?

NoSQL înseamnă Nu numai SQL, o bază de date non-relațională. Acest tip de bază de date nu se bazează pe modelul tradițional al bazei de date relaționale. Nu are o structură coloană-rând definită și poate stoca date într-o varietate de formate diferite, făcându-l mai flexibil și mai scalabil.

instagram viewer

Principala diferență dintre bazele de date NoSQL și relaționale este că, în loc să aibă rânduri și coloane, bazele de date NoSQL stochează date în documente, care au o structură dinamică.

Configurați o bază de date MongoDB

MongoDB este cea mai populară bază de date NoSQL. Este o bază de date open-source care stochează date în documente asemănătoare JSON (tabele) în interiorul colecțiilor (baze de date).

Iată cum arată o structură simplă de document MongoDB:

{
 Prenume: „Andrew”,
 Rol: „Dezvoltator backend”
}

Pentru a începe, trebuie mai întâi configurați o bază de date MongoDB. După ce ați terminat de configurat MongoDB, deschideți aplicația MongoDB Compass. Apoi, faceți clic pe Conexiune nouă butonul pentru a crea o conexiune cu serverul MongoDB care rulează local.

Dacă nu aveți acces la instrumentul GUI MongoDB Compass, puteți utiliza Instrumentul shell MongoDB pentru a crea o bază de date și o colecție.

Furnizați URI-ul conexiunii și numele conexiunii, apoi apăsați Salvați și conectați.

În cele din urmă, faceți clic pe butonul Creare bază de date, completați numele bazei de date și furnizați un nume de colecție pentru o colecție demonstrativă.

Creați un client React

Puteți găsi codul acestei aplicații în documentul său Depozitul GitHub.

Pentru a porni rapid o aplicație React, creați un folder de proiect pe mașina dvs. locală, treceți la acel director și rulați aceste comenzi de terminal pentru a crea și a porni serverul de dezvoltare:

npx create-react-app aplicația mea
cd aplicația mea
npm start

Apoi, instalați Axios. Acest pachet vă va permite să trimiteți solicitări HTTP către serverul dvs. backend Express.js pentru a stoca date în baza de date MongoDB.

npm instalează axios

Creați un formular demonstrativ pentru a colecta datele utilizatorului

Deschide src/App.js fișier, ștergeți codul boilerplate React și înlocuiți-l cu următorul:

import„./App.css”;
import Reacționează, { useState } din'reacţiona';
import Axios din"axios";
funcţieApp() {
const [nume, setName] = useState("")
const [rol, setRole] = useState("")


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


 Axios.post(' http://localhost: 4000/inserare', {
 Nume complet: nume,
 companyRole: rol
 })
 }


întoarcere (


„Aplicație”>
„Aplicație antet”> 
"formular de conectare">


Prenume</p>


 className = "Nume"
 tip="text"
 substituent="Nume ..."
 onChange={(e) => {setName (e.target.value)}}
 />




 Rolul companiei</p>


 className = "Rol"
 tip="text"
 substituent = "Rol..."
 onChange={(e) => {setRole (e.target.value)}}
 />








exportMod implicit Aplicație;

Să o descompunem:

  • Declarați două stări, un nume și o stare de rol, pentru a păstra datele utilizatorului colectate din câmpurile de intrare folosind cârligul useState.
  • The cu privire la schimbările metoda fiecărui câmp de intrare rulează un callback care utilizează metodele de stare pentru a captura și stoca datele pe care utilizatorul le trimite prin intermediul formularului.
  • Pentru a trimite datele către serverul backend, funcția de gestionare onSubmit utilizează Axios.post metodă de a trimite datele transmise din state ca obiect către punctul final al API-ului backend.

Pentru a stila formularul randat, adăugați următorul cod în fișierul App.css.

* {
căptușeală: 0;
marginea: 0;
dimensionarea cutiei: cutie-chenar;
}
corp {
familie de fonturi: 'Poppins', sans-serif;
culoare de fundal: #8EC1D6;
}


.logIn-form {
marginea: 100pxauto;
lăţime: 200px;
înălţime: 250px;
culoare de fundal: #fff;
hotar-raza: 10px; 
}


.logIn-formp {
aliniere text: centru;
marimea fontului: 12px;
grosimea fontului: 600;
culoare: #B8BFC6;
căptușeală: 10px 10px;
}


.logIn-formintrare {
afişa: bloc;
lăţime: 80%;
înălţime: 40px;
marginea: 10pxauto;
frontieră: 1pxsolid#ccc;
hotar-raza: 5px;
căptușeală: 0 10px;
marimea fontului: 16px;
culoare: negru;
}
.logIn-formbuton {
culoare de fundal: #8EC1D6;
culoare: #fff;
cursor: indicator;
marimea fontului: 15px;
hotar-raza:7px;
căptușeală: 5px 10px;
frontieră: nici unul;
}

Acum, porniți serverul de dezvoltare pentru a actualiza modificările și navigați la http://localhost: 3000 pe browser pentru a vedea rezultatele.

Creați un backend Express.js

Un backend Express acționează ca middleware între clientul dvs. React și baza de date MongoDB. De pe server, puteți defini schemele de date și puteți stabili conexiunea dintre client și baza de date.

Creați un server web Express și instalează aceste două pachete:

npm install mongoose cors

Mongoose este o bibliotecă Object Data Modeling (ODM) pentru MongoDB și Node. Oferă o metodă simplificată bazată pe schemă, pentru a modela datele aplicației și a le stoca într-o bază de date MongoDB.

Pachetul CORS (Cross-Origin Resource Sharing) oferă un mecanism pentru serverul de backend și un client frontend pentru a comunica și a transmite date prin punctele finale API.

Creați o schemă de date

Creați un folder nou în directorul rădăcină al folderului de proiect al serverului și denumiți-l modele. În acest folder, creați un fișier nou: dataSchema.js.

O schemă, în acest caz, reprezintă structura logică a bazei de date. Acesta definește documentele (înregistrările) și câmpurile (proprietăți) care alcătuiesc colecțiile din baza de date.

Adăugați următorul cod la dataSchema.js:

const mangusta = cere('mangustă');
const ReactFormDataSchema = nou mangustă. Schemă({
 Nume: {
 tip: Şir,
 necesar: Adevărat
 },
 rol: {
 tip: Şir,
 necesar: Adevărat
 }
});
const Utilizator = mangoose.model('Utilizator', ReactFormDataSchema);
modul.exports = Utilizator;

Acest cod creează o schemă Mongoose pentru un model de utilizator. Această schemă definește structura datelor pentru datele utilizatorului, inclusiv numele și rolul utilizatorului. Schema este apoi folosită pentru a crea un model pentru utilizator. Acest lucru permite modelului să stocheze date într-o colecție MongoDB conform structurii definite în Schemă.

Configurați serverul Express

Apoi, deschideți index.js fișier în folderul de proiect al serverului și adăugați acest cod:

const expres = cere('expres');
const mangusta = cere('mangustă');
const cors = cere('cors');
const aplicație = expres();
const Utilizator= cere(„./models/ReactDataSchema”)
app.use (express.json());
app.use (cors());


mangoose.connect(„mongodb://localhost: 27017/reactdata”, { useNewUrlParser: Adevărat });


app.post('/introduce', asincron(req, res) => {
const FirstName = req.body.firstName
const CompanyRole = req.body.companyRole


const formData = nou Utilizator({
 nume: Prenume,
 rol: CompanyRole
 })


încerca {
așteaptă formData.save();
 res.send("date introduse..")
 } captură(eroare) {
consolă.log (eroare)
 }
});


const port = process.env. PORT || 4000;
app.listen (port, () => {
consolă.Buturuga(`Serverul a pornit pe port ${port}`);
});

Să o descompunem:

  • Inițializați Express, mangusta și CORS pe server.
  • Pachetul Mongoose stabilește conexiunea la baza de date MongoDB folosind conectați metodă care preia domeniul URI și un obiect. URI-ul este un șir de conexiune utilizat pentru a stabili o conexiune cu baza de date MongoDB. Obiectul specifică configurația; în acest caz, conține o setare pentru a utiliza cea mai nouă formă de parser URL.
  • Serverul web răspunde în principal la solicitările venite de la diferite rute cu funcția de gestionare corespunzătoare. În acest caz, serverul are o rută POST care primește date de la clientul React, le stochează într-o variabilă și le transmite modelului de date importat.
  • Serverul folosește apoi un bloc try-and-catch pentru a stoca și salva datele în baza de date MongoDB și deconectează orice erori, dacă există.

În cele din urmă, porniți serverul de dezvoltare pentru a actualiza modificările și mergeți la clientul dvs. React în browser. Introduceți orice date din formular și vizualizați rezultatele în baza de date MongoDB.

Utilizarea stivei MERN pentru a construi aplicații

Stiva MERN oferă un set de instrumente eficient și puternic pentru construirea de aplicații. Puteți crea aplicații cu drepturi depline din lumea reală folosind MongoDB, Express, React și Node.js,

Ecosistemul React oferă și pachete pentru a vă ajuta să lucrați cu formulare web. Unele dintre cele mai populare sunt Formik, KendoReact Form și React Hook Form.