Läsare som du hjälper till att stödja MUO. När du gör ett köp med hjälp av länkar på vår webbplats kan vi tjäna en affiliate-provision. Läs mer.

Relationsdatabaser som MySQL har traditionellt varit det bästa valet för databas. NoSQL-databaser som MongoDB har dock vuxit i popularitet på grund av deras flexibla struktur för datalagring och deras förmåga att snabbt lagra och hämta data.

Dessa databaser erbjuder ett alternativt frågespråk som du sömlöst kan integrera med moderna webb- och mobilappar. Läs vidare för att lära dig hur du lagrar React-data i en MongoDB-databas.

Vad är en NoSQL-databas?

NoSQL står för Inte bara SQL, en icke-relationell databas. Denna typ av databas är inte beroende av den traditionella relationsdatabasmodellen. Den har ingen definierad kolumnradstruktur och kan lagra data i en mängd olika format, vilket gör den mer flexibel och skalbar.

Den största skillnaden mellan NoSQL och relationsdatabaser är att istället för att ha rader och kolumner, lagrar NoSQL-databaser data i dokument, som har en dynamisk struktur.

instagram viewer

Konfigurera en MongoDB-databas

MongoDB är den mest populära NoSQL-databasen. Det är en öppen källkodsdatabas som lagrar data i JSON-liknande dokument (tabeller) i samlingar (databaser).

Så här ser en enkel MongoDB-dokumentstruktur ut:

{
 Förnamn: 'Andrew',
 Roll: 'Backend Developer'
}

För att komma igång måste du först skapa en MongoDB-databas. När du är klar med att konfigurera MongoDB, öppna MongoDB Compass-appen. Klicka sedan på Ny anslutning för att skapa en anslutning till MongoDB-servern som körs lokalt.

Om du inte har tillgång till MongoDB Compass GUI-verktyget kan du använda MongoDB-skalverktyg för att skapa en databas och samlingen.

Ange anslutnings-URI och namnet på anslutningen och tryck sedan Spara och anslut.

Klicka slutligen på knappen Skapa databas, fyll i databasnamnet och ange ett samlingsnamn för en demosamling.

Skapa en React Client

Du kan hitta denna applikations kod i dess GitHub-förråd.

För att snabbt starta upp en React-applikation, skapa en projektmapp på din lokala dator, byt till den katalogen och kör dessa terminalkommandon för att skapa och snurra upp utvecklingsservern:

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

Installera sedan Axios. Detta paket gör det möjligt för dig att skicka HTTP-förfrågningar till din backend Express.js-server för att lagra data i din MongoDB-databas.

npm installera axios

Skapa ett demoformulär för att samla in användardata

Öppna src/App.js fil, ta bort pannplattan React-koden och ersätt den med följande:

importera'./App.css';
importera Reagera, { useState } från'reagera';
importera Axios från"axios";
fungeraApp() {
konst [namn, setName] = useState("")
konst [roll, setRole] = useState("")


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


 Axios.post(' http://localhost: 4000/infoga', {
 fullständigt namn: namn,
 företagRoll: roll
 })
 }


lämna tillbaka (


"App">
"App-header"> 
"Inloggningsformulär">


Förnamn</p>


 klassnamn = "Namn"
 typ="text"
 platshållare="Förnamn ..."
 onChange={(e) => {setName (e.target.value)}}
 />




 Företagsroll</p>


 klassnamn = "Roll"
 typ="text"
 platshållare = "Roll..."
 onChange={(e) => {setRole (e.target.value)}}
 />








exporterastandard App;

Låt oss bryta ner det:

  • Deklarera två tillstånd, ett namn och ett rolltillstånd, för att hålla användardata som samlats in från inmatningsfälten med hjälp av useState-kroken.
  • De på Ändra metod för varje inmatningsfält kör en återuppringning som använder tillståndsmetoderna för att fånga och lagra data som användaren skickar via formuläret.
  • För att skicka data till backend-servern använder onSubmit-hanterarfunktionen Axios.post metod för att skicka data som skickas från tillstånden som ett objekt till backend API-slutpunkten.

Lägg till följande kod i filen App.css för att utforma det renderade formuläret.

* {
stoppning: 0;
marginal: 0;
lådans storlek: border-box;
}
kropp {
typsnittsfamilj: 'Poppins', sans serif;
bakgrundsfärg: #8EC1D6;
}


.Inloggningsformulär {
marginal: 100pxbil;
bredd: 200px;
höjd: 250px;
bakgrundsfärg: #fff;
gräns-radie: 10px; 
}


.Inloggningsformulärsid {
textjustera: Centrum;
textstorlek: 12px;
teckensnittsvikt: 600;
Färg: #B8BFC6;
stoppning: 10px 10px;
}


.Inloggningsformulärinmatning {
visa: blockera;
bredd: 80%;
höjd: 40px;
marginal: 10pxbil;
gräns: 1pxfast#ccc;
gräns-radie: 5px;
stoppning: 0 10px;
textstorlek: 16px;
Färg: svart;
}
.Inloggningsformulärknapp {
bakgrundsfärg: #8EC1D6;
Färg: #fff;
markören: pekare;
textstorlek: 15px;
gräns-radie:7px;
stoppning: 5px 10px;
gräns: ingen;
}

Nu, snurra upp utvecklingsservern för att uppdatera ändringarna och navigera till http://localhost: 3000 i din webbläsare för att se resultat.

Skapa en Express.js Backend

En Express-backend fungerar som mellanprogram mellan din React-klient och MongoDB-databasen. Från servern kan du definiera dina datascheman och upprätta kopplingen mellan klienten och databasen.

Skapa en Express webbserver och installera dessa två paket:

npm installera mongoose cors

Mongoose är ett objektdatamodelleringsbibliotek (ODM) för MongoDB och Node. Det tillhandahåller en förenklad schemabaserad metod för att modellera din applikationsdata och lagra den i en MongoDB-databas.

CORS-paketet (Cross-Origin Resource Sharing) tillhandahåller en mekanism för backend-servern och en frontend-klient för att kommunicera och skicka data via API-slutpunkterna.

Skapa ett dataschema

Skapa en ny mapp i rotkatalogen för din serverprojektmapp och namnge den modeller. Skapa en ny fil i den här mappen: dataSchema.js.

Ett schema, i det här fallet, representerar den logiska strukturen i din databas. Den definierar dokumenten (posterna) och fälten (egenskaperna) som utgör samlingarna i databasen.

Lägg till följande kod till dataSchema.js:

konst mangust = behöva('mungo');
konst ReactFormDataSchema = ny mungo. Schema({
 namn: {
 typ: Sträng,
 nödvändig: Sann
 },
 roll: {
 typ: Sträng,
 nödvändig: Sann
 }
});
konst Användare = mongoose.model('Användare', ReactFormDataSchema);
modul.exports = Användare;

Denna kod skapar ett Mongoose-schema för en användarmodell. Detta schema definierar datastrukturen för användardata, inklusive användarens namn och roll. Schemat används sedan för att skapa en modell för användaren. Detta gör att modellen kan lagra data i en MongoDB-samling enligt den struktur som definieras i schemat.

Konfigurera Express Server

Öppna sedan index.js fil i serverprojektmappen och lägg till denna kod:

konst uttrycka = behöva('uttrycka');
konst mangust = behöva('mungo');
konst cors = behöva('cors');
konst app = express();
konst Användare= behöva('./models/ReactDataSchema')
app.use (express.json());
app.use (cors());


mongoose.connect('mongodb://localhost: 27017/reactdata', { använd NewUrlParser: Sann });


app.post('/Föra in', asynkron(req, res) => {
konst Förnamn = req.body.firstName
konst CompanyRole = req.body.companyRole


konst formData = ny Användare({
 Namn förnamn,
 roll: FöretagRoll
 })


Prova {
vänta formData.save();
 res.send("infogade data..")
 } fånga(fel) {
trösta.log (fel)
 }
});


konst port = process.env. PORT || 4000;
app.listen (port, () => {
trösta.logga(`Server startade på port ${port}`);
});

Låt oss bryta ner det:

  • Initiera Express, mongoose och CORS på servern.
  • Mongoose-paketet upprättar anslutningen till MongoDB-databasen med hjälp av ansluta metod som tar in URI-domänen och ett objekt. URI: n är en anslutningssträng som används för att upprätta en anslutning till MongoDB-databasen. Objektet anger konfiguration; i det här fallet innehåller den en inställning för att använda den senaste formen av URL-tolkare.
  • Webbservern svarar huvudsakligen på förfrågningar som kommer in från olika rutter med lämplig hanterarfunktion. I det här fallet har servern en POST-rutt som tar emot data från React-klienten, lagrar dem i en variabel och skickar dem till den importerade datamodellen.
  • Servern använder sedan ett försök-och-fånga-block för att lagra och spara data i MongoDB-databasen och loggar ut eventuella fel.

Slutligen, snurra upp utvecklingsservern för att uppdatera ändringarna och gå över till din React-klient i din webbläsare. Skriv in alla data på formuläret och se resultaten i MongoDB-databasen.

Använda MERN-stacken för att bygga applikationer

MERN-stacken ger en effektiv och kraftfull verktygsuppsättning för byggapplikationer. Du kan skapa fullfjädrade verkliga applikationer med MongoDB, Express, React och Node.js,

React-ekosystemet tillhandahåller också paket som hjälper dig att arbeta med webbformulär. Några av de mest populära är Formik, KendoReact Form och React Hook Form.