Lesere som deg er med på å støtte MUO. Når du foretar et kjøp ved å bruke lenker på nettstedet vårt, kan vi tjene en tilknyttet provisjon. Les mer.

Relasjonelle databaser som MySQL har tradisjonelt vært det beste databasevalget. NoSQL-databaser som MongoDB har imidlertid vokst i popularitet på grunn av deres fleksible struktur for datalagring og deres evne til raskt å lagre og hente data.

Disse databasene tilbyr et alternativt spørrespråk som du sømløst kan integrere med moderne nett- og mobilapper. Les videre for å lære hvordan du lagrer React-data i en MongoDB-database.

Hva er en NoSQL-database?

NoSQL står for Ikke bare SQL, en ikke-relasjonell database. Denne typen database er ikke avhengig av den tradisjonelle relasjonsdatabasemodellen. Den har ikke en definert kolonneradstruktur og kan lagre data i en rekke forskjellige formater, noe som gjør den mer fleksibel og skalerbar.

Hovedforskjellen mellom NoSQL og relasjonsdatabaser er at i stedet for å ha rader og kolonner, lagrer NoSQL-databaser data i dokumenter, som har en dynamisk struktur.

instagram viewer

Sett opp en MongoDB-database

MongoDB er den mest populære NoSQL-databasen. Det er en åpen kildekode-database som lagrer data i JSON-lignende dokumenter (tabeller) i samlinger (databaser).

Slik ser en enkel MongoDB-dokumentstruktur ut:

{
 Fornavn: 'Andrew',
 Rolle: 'Backend Developer'
}

For å komme i gang må du først sette opp en MongoDB-database. Når du er ferdig med å konfigurere MongoDB, åpner du MongoDB Compass-appen. Klikk deretter på Ny tilkobling for å opprette en forbindelse med MongoDB-serveren som kjører lokalt.

Hvis du ikke har tilgang til MongoDB Compass GUI-verktøyet, kan du bruke MongoDB-skallverktøy for å lage en database og samlingen.

Oppgi tilkoblings-URI og navnet på tilkoblingen, og trykk deretter Lagre og koble til.

Til slutt, klikk på Opprett database-knappen, fyll inn databasenavnet og oppgi et samlingsnavn for en demosamling.

Opprett en React Client

Du finner denne applikasjonens kode i dens GitHub-depot.

For raskt å starte opp en React-applikasjon, opprett en prosjektmappe på din lokale maskin, bytt til den katalogen og kjør disse terminalkommandoene for å opprette og spinne opp utviklingsserveren:

npx create-react-app min-app
cd min-app
npm start

Installer deretter Axios. Denne pakken vil gjøre deg i stand til å sende HTTP-forespørsler til din backend Express.js-server for å lagre data i MongoDB-databasen din.

npm installer aksioer

Lag et demoskjema for å samle brukerdata

Åpne src/App.js fil, slett React-koden og erstatt den med følgende:

import'./App.css';
import Reager, { useState } fra'reagere';
import Axios fra'aksios';
funksjonApp() {
konst [navn, settnavn] = brukState("")
konst [rolle, setRole] = brukState("")


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


 Axios.post(' http://localhost: 4000/innlegg', {
 fullt navn: navn,
 selskapRolle: rolle
 })
 }


komme tilbake (


"App">
"App-header"> 
"innloggingsskjema">


Fornavn</p>


 klassenavn = "Navn"
 type="tekst"
 plassholder="Fornavn ..."
 onChange={(e) => {setName (e.target.value)}}
 />




 Bedriftsrolle</p>


 klassenavn = "Rolle"
 type="tekst"
 plassholder = "Rolle..."
 onChange={(e) => {setRole (e.target.value)}}
 />








eksportmisligholde App;

La oss bryte det ned:

  • Erklær to tilstander, et navn og en rolletilstand, for å holde brukerdataene samlet inn fra inndatafeltene ved å bruke useState-kroken.
  • De på Endre metoden for hvert inndatafelt kjører en tilbakeringing som bruker tilstandsmetodene til å fange opp og lagre data brukeren sender inn via skjemaet.
  • For å sende dataene til backend-serveren, bruker onSubmit-behandlingsfunksjonen Axios.post metode for å sende dataene som sendes fra statene som et objekt til backend API-endepunktet.

For å style det gjengitte skjemaet, legg til følgende kode i App.css-filen.

* {
polstring: 0;
margin: 0;
boksstørrelse: kantboks;
}
kropp {
font-familie: 'Poppins', sans serif;
bakgrunnsfarge: #8EC1D6;
}


.innloggingsskjema {
margin: 100pxauto;
bredde: 200px;
høyde: 250px;
bakgrunnsfarge: #fff;
grense-radius: 10px; 
}


.innloggingsskjemas {
tekstjustering: senter;
skriftstørrelse: 12px;
font-vekt: 600;
farge: #B8BFC6;
polstring: 10px 10px;
}


.innloggingsskjemainput {
vise: blokkere;
bredde: 80%;
høyde: 40px;
margin: 10pxauto;
grense: 1pxfast#ccc;
grense-radius: 5px;
polstring: 0 10px;
skriftstørrelse: 16px;
farge: svart;
}
.innloggingsskjemaknapp {
bakgrunnsfarge: #8EC1D6;
farge: #fff;
markøren: pekeren;
skriftstørrelse: 15px;
grense-radius:7px;
polstring: 5px 10px;
grense: ingen;
}

Nå snurr du opp utviklingsserveren for å oppdatere endringene og navigere til http://localhost: 3000 på nettleseren din for å se resultater.

Opprett en Express.js Backend

En Express-backend fungerer som mellomvare mellom React-klienten din og MongoDB-databasen. Fra serveren kan du definere dataskjemaene dine og etablere forbindelsen mellom klienten og databasen.

Opprett en Express-webserver og installer disse to pakkene:

npm installer mongoose cors

Mongoose er et objektdatamodelleringsbibliotek (ODM) for MongoDB og Node. Det gir en forenklet skjemabasert metode for å modellere applikasjonsdataene dine og lagre dem i en MongoDB-database.

CORS-pakken (Cross-Origin Resource Sharing) gir en mekanisme for backend-serveren og en frontend-klient for å kommunisere og sende data via API-endepunktene.

Lag et dataskjema

Opprett en ny mappe i rotkatalogen til serverprosjektmappen og navngi den modeller. Opprett en ny fil i denne mappen: dataSchema.js.

Et skjema, i dette tilfellet, representerer den logiske strukturen til databasen. Den definerer dokumentene (postene) og feltene (egenskapene) som utgjør samlingene i databasen.

Legg til følgende kode i dataSchema.js:

konst mangust = krever("mangus");
konst ReactFormDataSchema = ny mangust. Skjema({
 Navn: {
 type: String,
 nødvendig: ekte
 },
 rolle: {
 type: String,
 nødvendig: ekte
 }
});
konst Bruker = mongoose.model('Bruker', ReactFormDataSchema);
modul.exports = Bruker;

Denne koden lager et Mongoose-skjema for en brukermodell. Dette skjemaet definerer datastrukturen for brukerdataene, inkludert navnet og rollen til brukeren. Skjemaet brukes deretter til å lage en modell for brukeren. Dette gjør at modellen kan lagre data i en MongoDB-samling i henhold til strukturen definert i skjemaet.

Sett opp Express Server

Deretter åpner du index.js fil i serverprosjektmappen, og legg til denne koden:

konst uttrykke = krever('uttrykke');
konst mangust = krever("mangus");
konst cors = krever('cors');
konst app = express();
konst Bruker= krever('./models/ReactDataSchema')
app.use (express.json());
app.use (cors());


mongoose.connect('mongodb://localhost: 27017/reactdata', { bruk NewUrlParser: ekte });


app.post('/sett inn', asynkron(req, res) => {
konst Fornavn = req.body.firstName
konst CompanyRole = req.body.companyRole


konst formData = ny Bruker({
 navn: Fornavn,
 rolle: BedriftRolle
 })


prøve {
avvente formData.save();
 res.send("satte inn data..")
 } å fange(feil) {
konsoll.log (feil)
 }
});


konst port = prosess.env. PORT || 4000;
app.listen (port, () => {
konsoll.Logg(`Tjeneren startet på port ${port}`);
});

La oss bryte det ned:

  • Initialiser Express, mongoose og CORS på serveren.
  • Mongoose-pakken etablerer forbindelsen til MongoDB-databasen ved hjelp av koble metode som tar inn URI-domenet og et objekt. URI er en tilkoblingsstreng som brukes til å etablere en tilkobling med MongoDB-databasen. Objektet spesifiserer konfigurasjon; i dette tilfellet inneholder den en innstilling for å bruke den nyeste formen for URL-parser.
  • Nettserveren svarer hovedsakelig på forespørslene som kommer inn fra forskjellige ruter med riktig behandlerfunksjon. For dette tilfellet har serveren en POST-rute som mottar data fra React-klienten, lagrer dem i en variabel og sender dem til den importerte datamodellen.
  • Serveren bruker deretter en prøv-og-fang-blokk for å lagre og lagre dataene i MongoDB-databasen, og logger ut eventuelle feil.

Til slutt snurr du opp utviklingsserveren for å oppdatere endringene og gå over til React-klienten din i nettleseren din. Skriv inn eventuelle data på skjemaet, og se resultatene på MongoDB-databasen.

Bruk av MERN-stakken til å bygge applikasjoner

MERN-stabelen gir et effektivt og kraftig verktøysett for byggeapplikasjoner. Du kan lage fullverdige applikasjoner fra den virkelige verden ved å bruke MongoDB, Express, React og Node.js,

React-økosystemet tilbyr også pakker som hjelper deg med å jobbe med nettskjemaer. Noen av de mest populære er Formik, KendoReact Form og React Hook Form.