Kaltaisesi lukijat auttavat tukemaan MUO: ta. Kun teet ostoksen käyttämällä sivustollamme olevia linkkejä, voimme ansaita kumppanipalkkion. Lue lisää.

Relaatiotietokannat, kuten MySQL, ovat perinteisesti olleet tietokantavalinta. MongoDB: n kaltaisten NoSQL-tietokantojen suosio on kuitenkin kasvanut johtuen niiden joustavasta tallennusrakenteesta ja niiden kyvystä tallentaa ja hakea tietoja nopeasti.

Nämä tietokannat tarjoavat vaihtoehtoisen kyselykielen, jonka voit integroida saumattomasti nykyaikaisiin verkko- ja mobiilisovelluksiin. Lue lisää React-tietojen tallentamisesta MongoDB-tietokantaan.

Mikä on NoSQL-tietokanta?

NoSQL on lyhenne sanoista Not only SQL, ei-relaatiotietokanta. Tämäntyyppinen tietokanta ei nojaa perinteiseen relaatiotietokantamalliin. Siinä ei ole määriteltyä sarake-rivirakennetta, ja se voi tallentaa tietoja useissa eri muodoissa, mikä tekee siitä joustavamman ja skaalautuvamman.

Suurin ero NoSQL: n ja relaatiotietokantojen välillä on, että NoSQL-tietokannat tallentavat tietoja rivejen ja sarakkeiden sijaan asiakirjoihin, joilla on dynaaminen rakenne.

instagram viewer

Luo MongoDB-tietokanta

MongoDB on suosituin NoSQL-tietokanta. Se on avoimen lähdekoodin tietokanta, joka tallentaa tietoja JSON-tyyppisiin asiakirjoihin (taulukoihin) kokoelmissa (tietokantoissa).

Tältä yksinkertainen MongoDB-dokumenttirakenne näyttää:

{
 Etunimi: "Andrew",
 Rooli: "Taustakehittäjä"
}

Aloittaaksesi sinun on ensin perustaa MongoDB-tietokanta. Kun olet määrittänyt MongoDB: n, avaa MongoDB Compass -sovellus. Napsauta sitten Uusi yhteys -painiketta luodaksesi yhteyden paikallisesti toimivaan MongoDB-palvelimeen.

Jos sinulla ei ole pääsyä MongoDB Compass GUI -työkaluun, voit käyttää MongoDB-kuorityökalu tietokannan ja kokoelman luomiseen.

Anna yhteyden URI ja yhteyden nimi ja paina sitten Tallenna ja yhdistä.

Napsauta lopuksi Luo tietokanta -painiketta, täytä tietokannan nimi ja anna kokoelman nimi esittelykokoelmalle.

Luo React-asiakas

Löydät tämän sovelluksen koodin siitä GitHub-arkisto.

Jos haluat käynnistää React-sovelluksen nopeasti, luo projektikansio paikalliselle koneellesi, vaihda kyseiseen hakemistoon ja suorita nämä päätekomennot kehityspalvelimen luomiseksi ja pyörittämiseksi:

npx create-react-app my-app
cd my-app
npm aloitus

Asenna seuraavaksi Axios. Tämän paketin avulla voit lähettää HTTP-pyyntöjä backend Express.js -palvelimellesi tietojen tallentamiseksi MongoDB-tietokantaan.

npm asennus axios

Luo esittelylomake käyttäjätietojen keräämistä varten

Avaa src/App.js tiedosto, poista tiivistelmä React-koodi ja korvaa se seuraavalla:

tuonti'./App.css';
tuonti Reagoi, { useState } alkaen'reagoi';
tuonti Axios alkaen"aksiot";
toimintoSovellus() {
konst [nimi, setName] = useState("")
konst [role, setRole] = useState("")


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


 Axios.post(' http://localhost: 4000/lisäosa", {
 koko nimi: nimi,
 yritysRooli: rooli
 })
 }


palata (


"Sovellus">
"Sovelluksen otsikko"> 
"sisäänkirjautumislomake">


Etunimi</p>


 luokannimi = "Nimi"
 tyyppi="teksti"
 paikkamerkki="Etunimi ..."
 onChange={(e) => {setName (e.target.value)}}
 />




 Yrityksen rooli</p>


 luokannimi = "Rooli"
 tyyppi="teksti"
 paikkamerkki = "Rooli..."
 onChange={(e) => {setRole (e.target.value)}}
 />








viedäoletuksena Sovellus;

Puretaan se:

  • Ilmoita kaksi tilaa, nimi ja roolitila, säilyttääksesi syöttökentistä kerätyt käyttäjätiedot useState-koukun avulla.
  • The onChange Jokaisen syöttökentän menetelmä suorittaa takaisinkutsun, joka käyttää tilamenetelmiä käyttäjän lomakkeen kautta lähettämien tietojen kaappaamiseen ja tallentamiseen.
  • OnSubmit-käsittelijätoiminto käyttää tietojen lähettämistä taustapalvelimelle Axios.post menetelmä lähettää tiloista objektina välitetyt tiedot tausta-API-päätepisteeseen.

Jos haluat muotoilla hahmonnetun lomakkeen, lisää seuraava koodi App.css-tiedostoon.

* {
pehmuste: 0;
marginaali: 0;
laatikon kokoinen: raja-laatikko;
}
kehon {
font-perhe: 'Poppins', sans-serif;
taustaväri: #8EC1D6;
}


.sisäänkirjautumislomake {
marginaali: 100pxauto;
leveys: 200px;
korkeus: 250px;
taustaväri: #F F F;
raja-säde: 10px; 
}


.sisäänkirjautumislomakes {
tekstin tasaus: keskusta;
Fonttikoko: 12px;
fontin paino: 600;
väri: #B8BFC6;
pehmuste: 10px 10px;
}


.sisäänkirjautumislomakesyöttö {
näyttö: lohko;
leveys: 80%;
korkeus: 40px;
marginaali: 10pxauto;
rajaa: 1pxkiinteä#ccc;
raja-säde: 5px;
pehmuste: 0 10px;
Fonttikoko: 16px;
väri: musta;
}
.sisäänkirjautumislomake-painiketta {
taustaväri: #8EC1D6;
väri: #F F F;
kohdistin: osoitin;
Fonttikoko: 15px;
raja-säde:7px;
pehmuste: 5px 10px;
rajaa: ei mitään;
}

Pyöritä nyt kehityspalvelin päivittääksesi muutokset ja siirry kohtaan http://localhost: 3000 selaimessasi nähdäksesi tulokset.

Luo Express.js-taustajärjestelmä

Express-taustajärjestelmä toimii väliohjelmistona React-asiakkaasi ja MongoDB-tietokannan välillä. Palvelimelta voit määrittää tietoskeemasi ja muodostaa yhteyden asiakkaan ja tietokannan välille.

Luo Express-verkkopalvelin ja asenna nämä kaksi pakettia:

npm asenna mongoose cors

Mongoose on Object Data Modeling (ODM) -kirjasto MongoDB: lle ja Nodelle. Se tarjoaa yksinkertaistetun kaavapohjaisen menetelmän sovellustietojen mallintamiseen ja tallentamiseen MongoDB-tietokantaan.

CORS-paketti (Cross-Origin Resource Sharing) tarjoaa mekanismin taustapalvelimelle ja käyttöliittymäasiakkaalle viestimään ja välittämään tietoja API-päätepisteiden kautta.

Luo tietoskeema

Luo uusi kansio palvelimesi projektikansion juurihakemistoon ja nimeä se mallit. Luo tähän kansioon uusi tiedosto: dataSchema.js.

Kaava edustaa tässä tapauksessa tietokantasi loogista rakennetta. Se määrittelee asiakirjat (tietueet) ja kentät (ominaisuudet), jotka muodostavat tietokannan kokoelmat.

Lisää seuraava koodi dataSchema.js-tiedostoon:

konst mangusti = vaatia('mungo');
konst ReactFormDataSchema = Uusi mungo. Schema({
 nimi: {
 tyyppi: merkkijono,
 edellytetään: totta
 },
 rooli: {
 tyyppi: merkkijono,
 edellytetään: totta
 }
});
konst User = mangoose.model("Käyttäjä", ReactFormDataSchema);
moduuli.exports = Käyttäjä;

Tämä koodi luo Mongoose-skeeman käyttäjämallille. Tämä skeema määrittää käyttäjätietojen tietorakenteen, mukaan lukien käyttäjän nimen ja roolin. Kaavaa käytetään sitten mallin luomiseen käyttäjälle. Tämä sallii mallin tallentaa tietoja MongoDB-kokoelmaan Schema määritellyn rakenteen mukaisesti.

Määritä Express-palvelin

Avaa seuraavaksi index.js tiedosto palvelimen projektikansioon ja lisää tämä koodi:

konst express = vaatia('ilmaista');
konst mangusti = vaatia('mungo');
konst cors = vaatia("cors");
konst sovellus = express();
konst Käyttäjä= vaatia('./models/ReactDataSchema')
app.use (express.json());
app.use (cors());


mangoose.connect("mongodb://localhost: 27017/reactdata", { käytä NewUrlParseria: totta });


app.post('/insert', asynk(req, res) => {
konst Etunimi = req.body.firstName
konst CompanyRole = vaadittu.body.companyRole


konst formData = Uusi User({
 nimi: etunimi,
 rooli: CompanyRole
 })


yrittää {
odottaa formData.save();
 res.send("tiedot lisätty..")
 } ottaa kiinni(err) {
konsoli.log (err)
 }
});


konst portti = process.env. SATAMA || 4000;
app.listen (portti, () => {
konsoli.Hirsi(`Palvelin käynnistyi portissa ${port}`);
});

Puretaan se:

  • Alusta Express, Mongoose ja CORS palvelimella.
  • Mongoose-paketti muodostaa yhteyden MongoDB-tietokantaan käyttämällä kytkeä menetelmä, joka ottaa URI-alueen ja objektin. URI on yhteysmerkkijono, jota käytetään yhteyden muodostamiseen MongoDB-tietokantaan. Objekti määrittää konfiguraation; tässä tapauksessa se sisältää asetuksen käyttää uusinta URL-jäsennin muotoa.
  • Verkkopalvelin vastaa pääasiassa eri reiteiltä tuleviin pyyntöihin sopivalla käsittelijätoiminnolla. Tässä tapauksessa palvelimella on POST-reitti, joka vastaanottaa tiedot React-asiakkaalta, tallentaa ne muuttujaan ja välittää ne tuodulle tietomallille.
  • Palvelin käyttää sitten try-and-catch-lohkoa tietojen tallentamiseen ja tallentamiseen MongoDB-tietokantaan ja kirjaa ulos mahdolliset virheet.

Pyöritä lopuksi kehityspalvelin päivittääksesi muutokset ja siirry React-asiakasohjelmaan selaimessasi. Kirjoita kaikki tiedot lomakkeeseen ja tarkastele tuloksia MongoDB-tietokannassa.

MERN-pinon käyttäminen sovellusten rakentamiseen

MERN-pino tarjoaa tehokkaan ja tehokkaan työkalusarjan rakennussovelluksiin. Voit luoda täysimittaisia ​​reaalimaailman sovelluksia käyttämällä MongoDB-, Express-, React- ja Node.js-tiedostoja,

React-ekosysteemi tarjoaa myös paketteja, jotka auttavat sinua työskentelemään verkkolomakkeiden kanssa. Jotkut suosituimmista ovat Formik, KendoReact Form ja React Hook Form.