Lezers zoals jij steunen MUO. Wanneer u een aankoop doet via links op onze site, kunnen we een aangesloten commissie verdienen. Lees verder.

Relationele databases zoals MySQL zijn van oudsher de favoriete databasekeuze. NoSQL-databases zoals MongoDB zijn echter in populariteit gegroeid vanwege hun flexibele structuur voor gegevensopslag en hun vermogen om snel gegevens op te slaan en op te halen.

Deze databases bieden een alternatieve zoektaal die u naadloos kunt integreren met moderne web- en mobiele apps. Lees verder om te leren hoe u React-gegevens opslaat in een MongoDB-database.

Wat is een NoSQL-database?

NoSQL staat voor Niet alleen SQL, een niet-relationele database. Dit type database is niet afhankelijk van het traditionele relationele databasemodel. Het heeft geen gedefinieerde kolom-rijstructuur en kan gegevens in verschillende formaten opslaan, waardoor het flexibeler en schaalbaarder wordt.

Het belangrijkste verschil tussen NoSQL en relationele databases is dat in plaats van rijen en kolommen, NoSQL-databases gegevens opslaan in documenten, die een dynamische structuur hebben.

instagram viewer

Zet een MongoDB-database op

MongoDB is de meest populaire NoSQL-database. Het is een open-source database die gegevens opslaat in JSON-achtige documenten (tabellen) in collecties (databases).

Zo ziet een eenvoudige MongoDB-documentstructuur eruit:

{
 Voornaam: 'Andrew',
 Rol: 'Backend Developer'
}

Om te beginnen, moet je eerst een MongoDB-database opzetten. Zodra u klaar bent met het configureren van MongoDB, opent u de MongoDB Compass-app. Klik vervolgens op de Nieuwe verbinding knop om een ​​verbinding te maken met de MongoDB-server die lokaal draait.

Als u geen toegang hebt tot de MongoDB Compass GUI-tool, kunt u de MongoDB-shelltool om een ​​database en de verzameling te maken.

Geef de verbindings-URI en de naam van de verbinding op en druk vervolgens op Opslaan en verbinden.

Klik ten slotte op de knop Create Database, vul de databasenaam in en geef een collectienaam op voor een democollectie.

Maak een React-client aan

U kunt de code van deze applicatie vinden in de bijbehorende GitHub-opslagplaats.

Om snel een React-toepassing op te starten, maakt u een projectmap op uw lokale computer, gaat u naar die map en voert u deze terminalopdrachten uit om de ontwikkelingsserver te maken en te laten draaien:

npx maak-reageer-app mijn-app
cd mijn-app
npm begin

Installeer vervolgens Axios. Met dit pakket kunt u HTTP-verzoeken naar uw backend Express.js-server sturen om gegevens op te slaan in uw MongoDB-database.

npm axios installeren

Maak een demoformulier om gebruikersgegevens te verzamelen

Open de src/App.js bestand, verwijder de boilerplate React-code en vervang deze door het volgende:

importeren'./App.css';
importeren Reageer, { useState } van'Reageer';
importeren Axio's van'axios';
functieapp() {
const [naam, setnaam] = useState("")
const [rol, setRole] = useState("")


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


 Axios.post(' http://localhost: 4000/inzet', {
 volledige naam: naam,
 bedrijfRol: rol
 })
 }


opbrengst (


"App">
"App-header"> 
"login formulier">


Voornaam</p>


 classNaam = "Naam"
 type="tekst"
 tijdelijke aanduiding="Voornaam ..."
 onChange={(e) => {setName (e.target.value)}}
 />




 Bedrijfsrol</p>


 classNaam = "Rol"
 type="tekst"
 tijdelijke aanduiding = "Rol..."
 onChange={(e) => {setRole (e.target.value)}}
 />








exporterenstandaard App;

Laten we het opsplitsen:

  • Declareer twee statussen, een naam en een rolstatus, om de gebruikersgegevens te bewaren die zijn verzameld uit de invoervelden met behulp van de useState-hook.
  • De opWijzigen methode van elk invoerveld voert een callback uit die de statusmethoden gebruikt om gegevens vast te leggen en op te slaan die de gebruiker via het formulier indient.
  • Om de gegevens naar de backend-server te verzenden, gebruikt de onSubmit-handlerfunctie de Axios.post methode om de gegevens die vanuit de staten zijn doorgegeven als een object naar het backend-API-eindpunt te verzenden.

Om het gerenderde formulier vorm te geven, voegt u de volgende code toe aan het bestand App.css.

* {
opvulling: 0;
marge: 0;
maatvoering van de doos: border-box;
}
lichaam {
font-familie: 'Poppins', schreefloos;
Achtergrond kleur: #8EC1D6;
}


.login formulier {
marge: 100pxauto;
breedte: 200px;
hoogte: 250px;
Achtergrond kleur: #fff;
grensradius: 10px; 
}


.login formulierP {
tekst uitlijnen: centrum;
lettertypegrootte: 12px;
lettertype dikte: 600;
kleur: #B8BFC6;
opvulling: 10px 10px;
}


.login formulierinvoer {
weergave: blok;
breedte: 80%;
hoogte: 40px;
marge: 10pxauto;
grens: 1pxstevig#ccc;
grensradius: 5px;
opvulling: 0 10px;
lettertypegrootte: 16px;
kleur: zwart;
}
.login formulierknop {
Achtergrond kleur: #8EC1D6;
kleur: #fff;
cursor: wijzer;
lettertypegrootte: 15px;
grensradius:7px;
opvulling: 5px 10px;
grens: geen;
}

Draai nu de ontwikkelingsserver om de wijzigingen bij te werken en navigeer naar http://localhost: 3000 in uw browser om de resultaten te bekijken.

Maak een Express.js-backend

Een Express-backend fungeert als middleware tussen uw React-client en de MongoDB-database. Vanaf de server kunt u uw gegevensschema's definiëren en de verbinding tussen de client en de database tot stand brengen.

Maak een Express-webserver en installeer deze twee pakketten:

npm mongoose cors installeren

Mongoose is een Object Data Modeling (ODM)-bibliotheek voor MongoDB en Node. Het biedt een vereenvoudigde, op een schema gebaseerde methode om uw applicatiegegevens te modelleren en op te slaan in een MongoDB-database.

Het CORS-pakket (Cross-Origin Resource Sharing) biedt een mechanisme voor de backend-server en een frontend-client om te communiceren en gegevens door te geven via de API-eindpunten.

Maak een gegevensschema

Maak een nieuwe map in de hoofdmap van uw serverprojectmap en geef deze een naam modellen. Maak in deze map een nieuw bestand aan: dataSchema.js.

Een schema vertegenwoordigt in dit geval de logische structuur van uw database. Het definieert de documenten (records) en velden (properties) waaruit de collecties in de database bestaan.

Voeg de volgende code toe aan dataSchema.js:

const mangoest = vereisen('mangoest');
const ReactFormDataSchema = nieuw mangoest. Schema({
 naam: {
 type: Snaar,
 vereist: WAAR
 },
 rol: {
 type: Snaar,
 vereist: WAAR
 }
});
const Gebruiker = mangoest.model('Gebruiker', ReactFormDataSchema);
moduul.exports = Gebruiker;

Deze code maakt een Mongoose-schema voor een gebruikersmodel. Dit schema definieert de gegevensstructuur voor de gebruikersgegevens, inclusief de naam en rol van de gebruiker. Het schema wordt vervolgens gebruikt om een ​​model voor de gebruiker te maken. Hierdoor kan het model gegevens opslaan in een MongoDB-verzameling volgens de structuur die is gedefinieerd in het Schema.

Stel de Express-server in

Open vervolgens de index.js bestand in de serverprojectmap en voeg deze code toe:

const uitdrukken = vereisen('nadrukkelijk');
const mangoest = vereisen('mangoest');
const koren = vereisen('cors');
const app = uitdrukken();
const Gebruiker= vereisen('./models/ReactDataSchema')
app.gebruik (express.json());
app.gebruik (cors());


mangoest.connect('mongodb://localhost: 27017/reactdata', { gebruik NewUrlParser: WAAR });


app.post('/invoegen', asynchroon(req, res) => {
const FirstName = req.body.firstName
const CompanyRole = req.body.companyRole


const formulierData = nieuw Gebruiker({
 naam voornaam,
 rol: Bedrijfsrol
 })


poging {
wachten formData.save();
 opnieuw verzenden("ingevoegde gegevens..")
 } vangst(fout) {
troosten.log (fout)
 }
});


const poort = proces.env. HAVEN || 4000;
app.listen (poort, () => {
troosten.log(`Server gestart op poort ${poort}`);
});

Laten we het opsplitsen:

  • Initialiseer Express, mongoose en CORS in de server.
  • Het Mongoose-pakket brengt de verbinding met de MongoDB-database tot stand met behulp van de aansluiten methode die het URI-domein en een object opneemt. De URI is een verbindingsreeks die wordt gebruikt om een ​​verbinding tot stand te brengen met de MongoDB-database. Het object specificeert de configuratie; in dit geval bevat het een instelling om de nieuwste vorm van URL-parser te gebruiken.
  • De webserver reageert voornamelijk op de verzoeken die binnenkomen via verschillende routes met de juiste handlerfunctie. In dit geval heeft de server een POST-route die gegevens ontvangt van de React-client, deze opslaat in een variabele en doorgeeft aan het geïmporteerde gegevensmodel.
  • De server gebruikt vervolgens een try-and-catch-blok om de gegevens op te slaan en op te slaan in de MongoDB-database, en logt eventuele fouten uit.

Draai ten slotte de ontwikkelingsserver om de wijzigingen bij te werken en ga naar uw React-client in uw browser. Typ alle gegevens op het formulier en bekijk de resultaten in de MongoDB-database.

De MERN Stack gebruiken om applicaties te bouwen

De MERN-stack biedt een efficiënte en krachtige toolset voor het bouwen van applicaties. U kunt volwaardige real-world applicaties maken met MongoDB, Express, React en Node.js,

Het React-ecosysteem biedt ook pakketten om u te helpen bij het werken met webformulieren. Enkele van de meest populaire zijn Formik, KendoReact Form en React Hook Form.