Leser wie Sie helfen, MUO zu unterstützen. Wenn Sie über Links auf unserer Website einen Kauf tätigen, erhalten wir möglicherweise eine Affiliate-Provision. Weiterlesen.

Relationale Datenbanken wie MySQL waren traditionell die erste Wahl für Datenbanken. NoSQL-Datenbanken wie MongoDB erfreuen sich jedoch aufgrund ihrer flexiblen Struktur für die Datenspeicherung und ihrer Fähigkeit, Daten schnell zu speichern und abzurufen, wachsender Beliebtheit.

Diese Datenbanken bieten eine alternative Abfragesprache, die Sie nahtlos in moderne Web- und mobile Apps integrieren können. Lesen Sie weiter, um zu erfahren, wie Sie React-Daten in einer MongoDB-Datenbank speichern.

Was ist eine NoSQL-Datenbank?

NoSQL steht für Not only SQL, eine nicht relationale Datenbank. Diese Art von Datenbank stützt sich nicht auf das traditionelle relationale Datenbankmodell. Es hat keine definierte Spalten-Zeilen-Struktur und kann Daten in einer Vielzahl unterschiedlicher Formate speichern, wodurch es flexibler und skalierbarer wird.

instagram viewer

Der Hauptunterschied zwischen NoSQL und relationalen Datenbanken besteht darin, dass NoSQL-Datenbanken Daten in Dokumenten speichern, die eine dynamische Struktur haben, anstatt Zeilen und Spalten zu haben.

Richten Sie eine MongoDB-Datenbank ein

MongoDB ist die beliebteste NoSQL-Datenbank. Es ist eine Open-Source-Datenbank, die Daten in JSON-ähnlichen Dokumenten (Tabellen) innerhalb von Sammlungen (Datenbanken) speichert.

So sieht eine einfache MongoDB-Dokumentstruktur aus:

{
 Vorname: 'Andrew',
 Rolle: 'Backend-Entwickler'
}

Um loszulegen, müssen Sie zuerst Richten Sie eine MongoDB-Datenbank ein. Sobald Sie mit der Konfiguration von MongoDB fertig sind, öffnen Sie die MongoDB Compass-App. Klicken Sie dann auf die Neue Verbindung Schaltfläche, um eine Verbindung mit dem lokal ausgeführten MongoDB-Server herzustellen.

Wenn Sie keinen Zugriff auf das GUI-Tool MongoDB Compass haben, können Sie die MongoDB-Shell-Tool zum Erstellen einer Datenbank und der Sammlung.

Geben Sie den Verbindungs-URI und den Namen der Verbindung an und klicken Sie dann auf Speichern & verbinden.

Klicken Sie abschließend auf die Schaltfläche Datenbank erstellen, geben Sie den Datenbanknamen ein und geben Sie einen Sammlungsnamen für eine Demosammlung an.

Erstellen Sie einen React-Client

Sie finden den Code dieser Anwendung in seiner GitHub-Repository.

Um eine React-Anwendung schnell zu booten, erstellen Sie einen Projektordner auf Ihrem lokalen Computer, wechseln Sie in dieses Verzeichnis und führen Sie diese Terminalbefehle aus, um den Entwicklungsserver zu erstellen und hochzufahren:

npx create-react-app meine-app
cd meine-app
npm starten

Als nächstes installieren Sie Axios. Mit diesem Paket können Sie HTTP-Anforderungen an Ihren Express.js-Backend-Server senden, um Daten in Ihrer MongoDB-Datenbank zu speichern.

npm installiert Axios

Erstellen Sie ein Demo-Formular, um Benutzerdaten zu sammeln

Öffne das src/App.js löschen Sie den Boilerplate-React-Code und ersetzen Sie ihn durch Folgendes:

importieren'./App.css';
importieren Reagieren, { useState } aus'reagieren';
importieren Axios aus'axios';
FunktionApp() {
konst [name, setName] = useState("")
konst [Rolle, SetRolle] = useState("")


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


 Axios.post(' http://localhost: 4000/Einlage', {
 fullName: Name,
 companyRole: Rolle
 })
 }


zurückkehren (


"App">
"App-Header"> 
"Login Formular">


Vorname</p>


 Klassenname = "Name"
 Typ="Text"
 Platzhalter="Vorname ..."
 onChange={(e) => {setName (e.target.value)}}
 />




 Unternehmensrolle</p>


 Klassenname = "Rolle"
 Typ="Text"
 Platzhalter = "Rolle..."
 onChange={(e) => {setRole (e.target.value)}}
 />








ExportStandard Anwendung;

Lassen Sie es uns aufschlüsseln:

  • Deklarieren Sie zwei Zustände, einen Namen und einen Rollenzustand, um die Benutzerdaten zu speichern, die von den Eingabefeldern mit dem useState-Hook erfasst wurden.
  • Der bei Änderung -Methode jedes Eingabefelds führt einen Rückruf aus, der die Statusmethoden verwendet, um Daten zu erfassen und zu speichern, die der Benutzer über das Formular übermittelt.
  • Um die Daten an den Backend-Server zu senden, verwendet die Handler-Funktion onSubmit die Axios.post -Methode, um die von den Zuständen übergebenen Daten als Objekt an den Back-End-API-Endpunkt zu senden.

Um das gerenderte Formular zu formatieren, fügen Sie der App.css-Datei den folgenden Code hinzu.

* {
Polsterung: 0;
Rand: 0;
Box-Größe: Border-Box;
}
Körper {
Schriftfamilie: 'Poppins', serifenlos;
Hintergrundfarbe: #8EC1D6;
}


.Login Formular {
Rand: 100pxAuto;
Breite: 200px;
Höhe: 250px;
Hintergrundfarbe: #F f f;
Grenzradius: 10px; 
}


.Login FormularP {
Textausrichtung: Center;
Schriftgröße: 12px;
Schriftstärke: 600;
Farbe: #B8BFC6;
Polsterung: 10px 10px;
}


.Login FormularEingang {
Anzeige: Block;
Breite: 80%;
Höhe: 40px;
Rand: 10pxAuto;
Grenze: 1pxsolide#ccc;
Grenzradius: 5px;
Polsterung: 0 10px;
Schriftgröße: 16px;
Farbe: Schwarz;
}
.Login FormularTaste {
Hintergrundfarbe: #8EC1D6;
Farbe: #F f f;
Mauszeiger: Zeiger;
Schriftgröße: 15px;
Grenzradius:7px;
Polsterung: 5px 10px;
Grenze: keiner;
}

Starten Sie nun den Entwicklungsserver, um die Änderungen zu aktualisieren und zu navigieren http://localhost: 3000 in Ihrem Browser, um die Ergebnisse anzuzeigen.

Erstellen Sie ein Express.js-Backend

Ein Express-Backend fungiert als Middleware zwischen Ihrem React-Client und der MongoDB-Datenbank. Vom Server aus können Sie Ihre Datenschemata definieren und die Verbindung zwischen dem Client und der Datenbank herstellen.

Erstellen Sie einen Express-Webserver und diese beiden Pakete installieren:

npm installiert Mongoose Cors

Mongoose ist eine Object Data Modeling (ODM)-Bibliothek für MongoDB und Node. Es bietet eine vereinfachte schemabasierte Methode, um Ihre Anwendungsdaten zu modellieren und in einer MongoDB-Datenbank zu speichern.

Das CORS-Paket (Cross-Origin Resource Sharing) bietet einen Mechanismus für den Back-End-Server und einen Front-End-Client zur Kommunikation und Weitergabe von Daten über die API-Endpunkte.

Erstellen Sie ein Datenschema

Erstellen Sie einen neuen Ordner im Stammverzeichnis Ihres Serverprojektordners und benennen Sie ihn Modelle. Erstellen Sie in diesem Ordner eine neue Datei: dataSchema.js.

Ein Schema stellt in diesem Fall die logische Struktur Ihrer Datenbank dar. Es definiert die Dokumente (Datensätze) und Felder (Eigenschaften), aus denen die Sammlungen innerhalb der Datenbank bestehen.

Fügen Sie dataSchema.js den folgenden Code hinzu:

konst Mungo = erfordern('Mungo');
konst ReactFormDataSchema = neu Mungo. Schema({
 Name: {
 Typ: Schnur,
 erforderlich: WAHR
 },
 Rolle: {
 Typ: Schnur,
 erforderlich: WAHR
 }
});
konst Benutzer = mongoose.model ('Benutzer', ReactFormDataSchema);
Modul.exports = Benutzer;

Dieser Code erstellt ein Mongoose-Schema für ein Benutzermodell. Dieses Schema definiert die Datenstruktur für die Benutzerdaten, einschließlich des Namens und der Rolle des Benutzers. Das Schema wird dann verwendet, um ein Modell für den Benutzer zu erstellen. Dadurch kann das Modell Daten in einer MongoDB-Sammlung gemäß der im Schema definierten Struktur speichern.

Richten Sie den Express-Server ein

Als nächstes öffnen Sie die index.js Datei im Serverprojektordner und fügen Sie diesen Code hinzu:

konst ausdrücken = erfordern('äußern');
konst Mungo = erfordern('Mungo');
konst Kors = erfordern('kors');
konst app = ausdrücken ();
konst Benutzer= erfordern('./models/ReactDataSchema')
app.use (express.json());
app.use (cors());


Mungo.connect ('mongodb://localhost: 27017/reactdata', { useNewUrlParser: WAHR });


app.post('/Einfügung', asynchron(req, res) => {
konst Vorname = req.body.vorname
konst CompanyRole = req.body.companyRole


konst Formulardaten = neu Benutzer({
 Name Vorname,
 Rolle: Unternehmensrolle
 })


versuchen {
erwarten formData.save();
 res.send("eingefügte Daten..")
 } fangen(irren) {
Konsole.log (fehler)
 }
});


konst port = process.env. HAFEN || 4000;
app.listen (port, () => {
Konsole.Protokoll(`Server auf Port gestartet ${port}`);
});

Lassen Sie es uns aufschlüsseln:

  • Initialisieren Sie Express, Mongoose und CORS auf dem Server.
  • Das Mongoose-Paket stellt die Verbindung zur MongoDB-Datenbank mithilfe der verbinden Methode, die die URI-Domäne und ein Objekt übernimmt. Der URI ist eine Verbindungszeichenfolge, die verwendet wird, um eine Verbindung mit der MongoDB-Datenbank herzustellen. Das Objekt spezifiziert die Konfiguration; In diesem Fall enthält es eine Einstellung, um die neueste Form des URL-Parsers zu verwenden.
  • Der Webserver antwortet hauptsächlich auf die Anfragen, die von verschiedenen Wegen kommen, mit der entsprechenden Handler-Funktion. Für diesen Fall hat der Server eine POST-Route, die Daten vom React-Client empfängt, sie in einer Variablen speichert und sie an das importierte Datenmodell übergibt.
  • Der Server verwendet dann einen Try-and-Catch-Block, um die Daten in der MongoDB-Datenbank zu speichern und zu speichern, und protokolliert etwaige Fehler, falls vorhanden.

Drehen Sie schließlich den Entwicklungsserver hoch, um die Änderungen zu aktualisieren, und gehen Sie in Ihrem Browser zu Ihrem React-Client. Geben Sie beliebige Daten in das Formular ein und zeigen Sie die Ergebnisse in der MongoDB-Datenbank an.

Verwenden des MERN-Stacks zum Erstellen von Anwendungen

Der MERN-Stack bietet ein effizientes und leistungsstarkes Tool-Set zum Erstellen von Anwendungen. Mit MongoDB, Express, React und Node.js können Sie vollwertige reale Anwendungen erstellen.

Das React-Ökosystem bietet auch Pakete, die Ihnen bei der Arbeit mit Webformularen helfen. Einige der beliebtesten sind Formik, KendoReact Form und React Hook Form.