Čitatelji poput vas podržavaju MUO. Kada kupite putem poveznica na našoj stranici, možemo zaraditi partnersku proviziju. Čitaj više.

Relacijske baze podataka poput MySQL tradicionalno su bile glavni izbor baze podataka. Međutim, NoSQL baze podataka poput MongoDB-a porasle su u popularnosti zbog svoje fleksibilne strukture za pohranjivanje podataka i sposobnosti brzog pohranjivanja i dohvaćanja podataka.

Ove baze podataka nude alternativni jezik upita koji možete neprimjetno integrirati s modernim web i mobilnim aplikacijama. Čitajte dalje kako biste saznali kako pohraniti React podatke u MongoDB bazu podataka.

Što je NoSQL baza podataka?

NoSQL je kratica za Not only SQL, nerelacijsku bazu podataka. Ova vrsta baze podataka ne oslanja se na tradicionalni model relacijske baze podataka. Nema definiranu strukturu stupac-redak i može pohranjivati ​​podatke u nizu različitih formata, što ga čini fleksibilnijim i skalabilnijim.

Glavna razlika između NoSQL i relacijskih baza podataka je u tome što umjesto redaka i stupaca, NoSQL baze podataka pohranjuju podatke u dokumentima koji imaju dinamičku strukturu.

instagram viewer

Postavite MongoDB bazu podataka

MongoDB je najpopularnija NoSQL baza podataka. To je baza podataka otvorenog koda koja pohranjuje podatke u dokumentima (tablicama) sličnim JSON-u unutar zbirki (baza podataka).

Evo kako izgleda jednostavna struktura MongoDB dokumenta:

{
 Ime: 'Andrew',
 Uloga: 'Pozadinski programer'
}

Da biste započeli, morate prvo postaviti MongoDB bazu podataka. Nakon što ste završili s konfiguracijom MongoDB-a, otvorite aplikaciju MongoDB Compass. Zatim kliknite na Nova veza gumb za stvaranje veze s MongoDB poslužiteljem koji radi lokalno.

Ako nemate pristup GUI alatu MongoDB Compass, možete koristiti MongoDB shell alat za stvaranje baze podataka i zbirke.

Unesite URI veze i naziv veze, a zatim pritisnite Spremi i poveži se.

Na kraju kliknite gumb Stvori bazu podataka, unesite naziv baze podataka i navedite naziv zbirke za demo zbirku.

Stvorite React klijenta

Kôd ove aplikacije možete pronaći u GitHub spremište.

Za brzo pokretanje React aplikacije, stvorite mapu projekta na vašem lokalnom računalu, prijeđite na taj direktorij i pokrenite ove naredbe terminala za stvaranje i zavrtje razvojnog poslužitelja:

npx create-react-app moja-aplikacija
cd moja aplikacija
npm početak

Zatim instalirajte Axios. Ovaj paket će vam omogućiti slanje HTTP zahtjeva vašem pozadinskom poslužitelju Express.js za pohranu podataka u vašoj MongoDB bazi podataka.

npm instalirati axios

Napravite demo obrazac za prikupljanje korisničkih podataka

Otvori src/App.js datoteku, izbrišite predložak React koda i zamijenite ga sljedećim:

uvoz'./App.css';
uvoz Reagiraj, {useState} iz'reagirati';
uvoz Axios iz'axios';
funkcijaaplikacija() {
konst [ime, setName] = useState("")
konst [uloga, setRole] = useState("")


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


 Axios.post(' http://localhost: 4000/umetnuti', {
 puno ime: ime,
 tvrtkaRole: uloga
 })
 }


povratak (


"Aplikacija">
"Zaglavlje aplikacije"> 
"obrazac za prijavu">


Ime</p>


 ime klase = "Ime"
 vrsta="tekst"
 rezervirano mjesto="Ime ..."
 onChange={(e) => {setName (e.target.value)}}
 />




 Uloga tvrtke</p>


 ime klase = "Uloga"
 vrsta="tekst"
 rezervirano mjesto = "Uloga..."
 onChange={(e) => {setRole (e.target.value)}}
 />








izvozzadano aplikacija;

Razdvojimo to:

  • Deklarirajte dva stanja, ime i stanje uloge, za držanje korisničkih podataka prikupljenih iz polja za unos pomoću kuke useState.
  • The onChange metoda svakog polja za unos pokreće povratni poziv koji koristi metode stanja za hvatanje i pohranjivanje podataka koje korisnik šalje putem obrasca.
  • Za slanje podataka pozadinskom poslužitelju, funkcija rukovatelja onSubmit koristi Axios.post metoda za slanje podataka proslijeđenih iz stanja kao objekta krajnjoj točki pozadinskog API-ja.

Da biste stilizirali prikazani obrazac, dodajte sljedeći kod u datoteku App.css.

* {
podstava: 0;
margina: 0;
dimenzioniranje kutije: rubni okvir;
}
tijelo {
obitelj-fontova: 'Poppins', sans-serif;
boja pozadine: #8EC1D6;
}


.logIn-obrazac {
margina: 100pxauto;
širina: 200px;
visina: 250px;
boja pozadine: #F F F;
granični radijus: 10px; 
}


.logIn-obrazacstr {
poravnanje teksta: centar;
veličina fonta: 12px;
težina fonta: 600;
boja: #B8BFC6;
podstava: 10px 10px;
}


.logIn-obrazaculazni {
prikaz: blok;
širina: 80%;
visina: 40px;
margina: 10pxauto;
granica: 1pxčvrsta#ccc;
granični radijus: 5px;
podstava: 0 10px;
veličina fonta: 16px;
boja: crno;
}
.logIn-obrazacdugme {
boja pozadine: #8EC1D6;
boja: #F F F;
kursor: pokazivač;
veličina fonta: 15px;
granični radijus:7px;
podstava: 5px 10px;
granica: nikakav;
}

Sada zavrtite razvojni poslužitelj da ažurirate promjene i dođite do njega http://localhost: 3000 na vašem pregledniku da vidite rezultate.

Napravite Express.js Backend

Express backend djeluje kao posredni softver između vašeg React klijenta i MongoDB baze podataka. S poslužitelja možete definirati svoje podatkovne sheme i uspostaviti vezu između klijenta i baze podataka.

Stvorite Express web poslužitelj i instalirajte ova dva paketa:

npm instalirajte mongoose cors

Mongoose je biblioteka za modeliranje objektnih podataka (ODM) za MongoDB i Node. Omogućuje pojednostavljenu metodu temeljenu na shemi za modeliranje podataka vaše aplikacije i njihovo pohranjivanje u MongoDB bazu podataka.

Paket CORS (Cross-Origin Resource Sharing) pruža mehanizam za pozadinski poslužitelj i prednji klijent za komunikaciju i prijenos podataka putem krajnjih točaka API-ja.

Stvorite podatkovnu shemu

Stvorite novu mapu u korijenskom direktoriju mape vašeg poslužiteljskog projekta i dajte joj naziv modeli. U ovoj mapi stvorite novu datoteku: dataSchema.js.

Shema, u ovom slučaju, predstavlja logičku strukturu vaše baze podataka. Definira dokumente (zapise) i polja (svojstva) koji čine zbirke unutar baze podataka.

Dodajte sljedeći kod u dataSchema.js:

konst mungos = zahtijevati('mungos');
konst ReactFormDataSchema = novi mungos. Shema({
 Ime: {
 tip: Niz,
 potreban: pravi
 },
 uloga: {
 tip: Niz,
 potreban: pravi
 }
});
konst Korisnik = mongoose.model('Korisnik', ReactFormDataSchema);
modul.exports = Korisnik;

Ovaj kod stvara Mongoose shemu za korisnički model. Ova shema definira strukturu podataka za korisničke podatke, uključujući ime i ulogu korisnika. Shema se zatim koristi za izradu modela za korisnika. To modelu omogućuje pohranu podataka u MongoDB zbirku prema strukturi definiranoj u shemi.

Postavite Express poslužitelj

Zatim otvorite index.js datoteku u mapi projekta poslužitelja i dodajte ovaj kod:

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


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


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


konst obrazacData = novi Korisnik({
 ime: Ime,
 uloga: CompanyRole
 })


probati {
čekati obrazacData.save();
 res.send("umetnuti podaci..")
 } ulov(pogreška) {
konzola.log (pogreška)
 }
});


konst luka = ​​proces.env. LUKA || 4000;
app.listen (port, () => {
konzola.log(`Poslužitelj je pokrenut na priključku ${port}`);
});

Razdvojimo to:

  • Inicijalizirajte Express, mongoose i CORS na poslužitelju.
  • Mongoose paket uspostavlja vezu s MongoDB bazom podataka pomoću Spojiti metoda koja uzima URI domenu i objekt. URI je niz veze koji se koristi za uspostavljanje veze s MongoDB bazom podataka. Objekt specificira konfiguraciju; u ovom slučaju, sadrži postavku za korištenje najnovijeg oblika URL parsera.
  • Web poslužitelj uglavnom odgovara na zahtjeve koji dolaze s različitih ruta s odgovarajućom funkcijom rukovatelja. Za ovaj slučaj, poslužitelj ima POST rutu koja prima podatke od React klijenta, pohranjuje ih u varijablu i prosljeđuje uvezenom podatkovnom modelu.
  • Poslužitelj tada koristi blok pokušaj i uhvati za pohranu i spremanje podataka u MongoDB bazu podataka i odjavljuje sve pogreške, ako ih ima.

Na kraju, zavrtite razvojni poslužitelj da ažurirate promjene i prijeđite na svoj React klijent u svom pregledniku. Unesite bilo koji podatak u obrazac i pogledajte rezultate u MongoDB bazi podataka.

Korištenje MERN skupa za izradu aplikacija

MERN stack pruža učinkovit i moćan set alata za građenje aplikacija. Možete stvoriti potpuno razvijene aplikacije iz stvarnog svijeta koristeći MongoDB, Express, React i Node.js,

Ekosustav React također nudi pakete koji vam pomažu u radu s web obrascima. Neki od najpopularnijih su Formik, KendoReact Form i React Hook Form.