Læsere som dig hjælper med at støtte MUO. Når du foretager et køb ved hjælp af links på vores websted, kan vi optjene en affiliate-kommission. Læs mere.

Relationelle databaser som MySQL har traditionelt været det foretrukne databasevalg. NoSQL-databaser som MongoDB er dog vokset i popularitet på grund af deres fleksible struktur til datalagring og deres evne til hurtigt at gemme og hente data.

Disse databaser tilbyder et alternativt forespørgselssprog, som du problemfrit kan integrere med moderne web- og mobilapps. Læs videre for at lære, hvordan du gemmer React-data i en MongoDB-database.

Hvad er en NoSQL-database?

NoSQL står for Ikke kun SQL, en ikke-relationel database. Denne type database er ikke afhængig af den traditionelle relationelle databasemodel. Den har ikke en defineret kolonnerækkestruktur og kan gemme data i en række forskellige formater, hvilket gør den mere fleksibel og skalerbar.

Den største forskel mellem NoSQL og relationelle databaser er, at i stedet for at have rækker og kolonner, gemmer NoSQL-databaser data i dokumenter, som har en dynamisk struktur.

Opsæt en MongoDB-database

MongoDB er den mest populære NoSQL-database. Det er en open source-database, der gemmer data i JSON-lignende dokumenter (tabeller) inde i samlinger (databaser).

Sådan ser en simpel MongoDB-dokumentstruktur ud:

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

For at komme i gang skal du først oprette en MongoDB-database. Når du er færdig med at konfigurere MongoDB, skal du åbne MongoDB Compass-appen. Klik derefter på Ny forbindelse knappen for at oprette en forbindelse med MongoDB-serveren, der kører lokalt.

Hvis du ikke har adgang til MongoDB Compass GUI-værktøjet, kan du bruge MongoDB shell-værktøj til at oprette en database og samlingen.

Angiv forbindelses-URI og navnet på forbindelsen, og tryk derefter Gem og tilslut.

Til sidst skal du klikke på knappen Opret database, udfylde databasenavnet og angive et samlingsnavn til en demosamling.

Opret en React Client

Du kan finde denne applikations kode i dens GitHub-depot.

For hurtigt at bootstrap en React-applikation skal du oprette en projektmappe på din lokale maskine, skifte til den mappe og køre disse terminalkommandoer for at oprette og spinne udviklingsserveren:

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

Installer derefter Axios. Denne pakke gør det muligt for dig at sende HTTP-anmodninger til din backend Express.js-server for at gemme data i din MongoDB-database.

npm installere aksioer

Opret en demoformular for at indsamle brugerdata

Åbn src/App.js fil, slet boilerplate React-koden, og erstat den med følgende:

importere'./App.css';
importere Reager, { useState } fra'reagere';
importere Axios fra'aksios';
fungereApp() {
konst [navn, sætnavn] = useState("")
konst [rolle, sætRole] = useState("")


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


 Axios.post(' http://localhost: 4000/indsæt', {
 fulde navn: navn,
 virksomhedRole: rolle
 })
 }


Vend tilbage (


"App">
"App-header"> 
"logIn-form">


Fornavn</p>


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




 Virksomhedens rolle</p>


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








eksportStandard App;

Lad os opdele det:

  • Erklær to tilstande, et navn og en rolletilstand, for at holde brugerdata indsamlet fra inputfelterne ved hjælp af useState-krogen.
  • Det på Skift metoden for hvert inputfelt kører et tilbagekald, der bruger tilstandsmetoderne til at fange og gemme data, som brugeren indsender via formularen.
  • For at indsende dataene til backend-serveren bruger onSubmit-håndteringsfunktionen Axios.post metode til at indsende de data, der sendes fra staterne som et objekt til backend API-slutpunktet.

For at style den gengivne formular skal du tilføje følgende kode til App.css-filen.

* {
polstring: 0;
margen: 0;
kassestørrelse: grænse-kasse;
}
legeme {
skrifttype-familie: 'Poppins', sans serif;
baggrundsfarve: #8EC1D6;
}


.logIn-form {
margen: 100pxauto;
bredde: 200px;
højde: 250px;
baggrundsfarve: #fff;
grænse-radius: 10px; 
}


.logIn-forms {
tekstjustering: centrum;
skriftstørrelse: 12px;
skrifttype-vægt: 600;
farve: #B8BFC6;
polstring: 10px 10px;
}


.logIn-forminput {
Skærm: blok;
bredde: 80%;
højde: 40px;
margen: 10pxauto;
grænse: 1pxsolid#ccc;
grænse-radius: 5px;
polstring: 0 10px;
skriftstørrelse: 16px;
farve: sort;
}
.logIn-formknap {
baggrundsfarve: #8EC1D6;
farve: #fff;
cursoren: pointer;
skriftstørrelse: 15px;
grænse-radius:7px;
polstring: 5px 10px;
grænse: ingen;
}

Drej nu udviklingsserveren op for at opdatere ændringerne og navigere til http://localhost: 3000 på din browser for at se resultater.

Opret en Express.js-backend

En Express-backend fungerer som middleware mellem din React-klient og MongoDB-databasen. Fra serveren kan du definere dine dataskemaer og etablere forbindelsen mellem klienten og databasen.

Opret en Express-webserver og installer disse to pakker:

npm installer mongoose cors

Mongoose er et Object Data Modeling (ODM) bibliotek til MongoDB og Node. Det giver en forenklet skemabaseret metode til at modellere dine applikationsdata og gemme dem i en MongoDB-database.

CORS-pakken (Cross-Origin Resource Sharing) giver en mekanisme til backend-serveren og en frontend-klient til at kommunikere og videregive data via API-endepunkterne.

Opret et dataskema

Opret en ny mappe i rodmappen på din serverprojektmappe og navngiv den modeller. Opret en ny fil i denne mappe: dataSchema.js.

Et skema, i dette tilfælde, repræsenterer den logiske struktur i din database. Den definerer de dokumenter (poster) og felter (egenskaber), der udgør samlingerne i databasen.

Tilføj følgende kode til dataSchema.js:

konst mangust = kræve('mangust');
konst ReactFormDataSchema = ny mangust. Skema({
 navn: {
 type: Snor,
 påkrævet: rigtigt
 },
 rolle: {
 type: Snor,
 påkrævet: rigtigt
 }
});
konst Bruger = mongoose.model('Bruger', ReactFormDataSchema);
modul.exports = Bruger;

Denne kode opretter et Mongoose-skema til en brugermodel. Dette skema definerer datastrukturen for brugerdataene, herunder brugerens navn og rolle. Skemaet bruges derefter til at skabe en model til brugeren. Dette gør det muligt for modellen at gemme data i en MongoDB-samling i henhold til strukturen defineret i skemaet.

Konfigurer Express Server

Åbn derefter index.js fil i serverprojektmappen, og tilføj denne kode:

konst udtrykke = kræve('udtrykke');
konst mangust = kræve('mangust');
konst cors = kræve('cors');
konst app = express();
konst Bruger= kræve('./models/ReactDataSchema')
app.use (express.json());
app.use (cors());


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


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


konst formData = ny Bruger({
 navn: Fornavn,
 rolle: VirksomhedRolle
 })


prøve {
vente formData.save();
 res.send("indsatte data..")
 } fangst(fejl) {
konsol.log (fejl)
 }
});


konst port = proces.env. PORT || 4000;
app.listen (port, () => {
konsol.log(`Server startede på port ${port}`);
});

Lad os opdele det:

  • Initialiser Express, mongoose og CORS på serveren.
  • Mongoose-pakken etablerer forbindelsen til MongoDB-databasen ved hjælp af Opret forbindelse metode, der tager URI-domænet og et objekt ind. URI'en er en forbindelsesstreng, der bruges til at etablere en forbindelse med MongoDB-databasen. Objektet angiver konfiguration; i dette tilfælde indeholder den en indstilling til at bruge den nyeste form for URL-parser.
  • Webserveren reagerer hovedsageligt på de forespørgsler, der kommer ind fra forskellige ruter med den passende behandlerfunktion. I dette tilfælde har serveren en POST-rute, der modtager data fra React-klienten, gemmer dem i en variabel og sender dem til den importerede datamodel.
  • Serveren bruger derefter en try-and-catch-blok til at gemme og gemme dataene i MongoDB-databasen og logger eventuelle fejl ud.

Drej endelig udviklingsserveren op for at opdatere ændringerne og gå over til din React-klient i din browser. Indtast alle data på formularen, og se resultaterne på MongoDB-databasen.

Brug af MERN-stakken til at bygge applikationer

MERN-stakken giver et effektivt og kraftfuldt værktøjssæt til byggeapplikationer. Du kan oprette fuldgyldige applikationer fra den virkelige verden ved hjælp af MongoDB, Express, React og Node.js,

React-økosystemet leverer også pakker til at hjælpe dig med at arbejde med webformularer. Nogle af de mest populære er Formik, KendoReact Form og React Hook Form.