Rich text languages/mern-stack-tutorial

Background Wrapper languages/mern-stack-tutorial

Wenn Sie ein visueller Lerner sind, schauen Sie sich die Videoversion dieses Tutorials an.

Slalom mern-stack-tutorial

Default

lsxl2xv3wufbz9728-Mern-stack.png

(Sie können gerne mitcodieren oder den vollständigen Code aus dem 

Mit MERN können wir Full-Stack-Lösungen erstellen. Um sein volles Potenzial auszuschöpfen, werden wir ein MERN-Stack-Projekt erstellen. Für dieses Projekt werden wir sowohl ein Backend als auch ein Frontend erstellen. Das Frontend wird mit React und das Backend mit MongoDB, Node.js und Express implementiert. Wir rufen den Frontend- 

Beginnen wir mit der Erstellung eines leeren Verzeichnisses: 

. Dieser Ordner enthält unsere Client- und Serverordner.

Als Nächstes erstellen Sie einen Ordner für das Backend und nennen ihn „server“. Dann initialisieren wir die Datei 

, das offiziell unterstützte Standardformat zur Paketierung von JavaScript-Code zur Wiederverwendung, zu verwenden, fügen wir eine Zeile in die 

Wir werden auch die Abhängigkeiten installieren.

Der obige Befehl installiert drei verschiedene Pakete:

Wir können die installierten Abhängigkeiten in der Datei package.json überprüfen. Es sollte die Pakete zusammen mit ihren Versionen auflisten.

Nachdem wir sichergestellt haben, dass die Abhängigkeiten erfolgreich installiert wurden, erstellen wir eine Datei namens 

 greift auf die Portvariable aus der Datei 

Es ist an der Zeit, unseren Server mit der Datenbank zu verbinden. Wir werden MongoDB Atlas als Datenbank verwenden. MongoDB Atlas ist ein cloudbasierter Datenbankdienst, der robuste Datensicherheit und Zuverlässigkeit bietet. MongoDB Atlas bietet einen kostenlosen Cluster, der nie abläuft und Ihnen Zugriff auf eine Teilmenge der Features und Funktionen von Atlas gewährt.

, um ein Konto zu erstellen, Ihren ersten Cluster bereitzustellen und die Verbindungszeichenfolge Ihres Clusters zu finden.

Nachdem Sie nun die Verbindungszeichenfolge haben, gehen Sie zurück zum Serververzeichnis und erstellen Sie eine Datei „config.env“. Weisen Sie dort die Verbindungszeichenfolge einer neuen 

-Variable zu. Wenn Sie fertig sind, sollte Ihre Datei ungefähr wie die folgende aussehen. Ersetzen Sie 

mit Ihrem Datenbank-Benutzernamen, Passwort, Clusternamen und Projekt-ID.

. Dort können wir den folgenden Code hinzufügen, um eine Verbindung zu unserer Datenbank herzustellen:

Datenbank fertig. Server fertig. Jetzt ist es Zeit für die API-Endpunkte. Beginnen wir mit der Erstellung eines 

 darin. Navigieren Sie zurück zu Ihrem „Server“-Verzeichnis und erstellen Sie das neue Verzeichnis und die neue Datei:

 wird auch die folgenden Codezeilen enthalten:

Wenn Sie die Anwendung an diesem Punkt ausführen, erhalten Sie beim Herstellen der Verbindung die folgende Meldung in Ihrem Terminal. Beachten Sie, dass wir die integrierte Umgebungsvariablenfunktionalität der neuesten Versionen von Node.js verwenden.

Mit dem Backend sind wir nun fertig. Jetzt beginnen wir mit der Arbeit am Frontend.

 verwenden, eine moderne Art, eine React-Anwendung zu erstellen. In einem neuen Terminal im Verzeichnis 

Es gibt einige zusätzliche Abhängigkeiten, die in unserem Projekt verwendet werden sollen. Wir beginnen mit 

Als Nächstes bearbeiten wir das Inhaltsfeld in der Datei 

 müssen wir die Tailwind-Direktiven hinzufügen und alles andere löschen.

Tailwind ist ein nutzerorientiertes CSS-Framework, mit dem Sie durch die Verwendung vordefinierter Klassennamen CSS-Stile hinzufügen können. Und React Router fügt clientseitiges Seitenrouting zu React hinzu!

Wir haben die Routen unserer Anwendungsseite in der 

 verwendet, um unsere Benutzeroberfläche mit der URL synchron zu halten. 

 hilft bei nahtlosen Übergängen beim Wechseln zwischen Komponenten. Im Grunde wird nur die Komponente neu geladen oder aktualisiert, die geändert werden muss, anstatt die gesamte Seite zu aktualisieren oder neu zu laden. Obwohl React Router keine Notwendigkeit ist, ist es wichtig, wenn Ihre App reagieren soll.

Als Nächstes erstellen wir die Komponenten, die wir in unseren Routen definiert haben. Erstellen Sie einen 

-Ordner. Für jede Komponente, die wir erstellen, fügen wir eine neue 

Die folgenden Snapshots zeigen, wie jede Datei aussehen würde.

In der Komponente navbar.js erstellen wir eine Navigationsleiste, die uns mit folgendem Code zu den benötigten Komponenten führt.

Der folgende Code dient als Anzeigekomponente für unsere Datensätze. Es werden alle Datensätze in unserer Datenbank über eine GET-Methode abgerufen.

mern/client/src/components/RecordList.jsx

Der folgende Code dient als Formularkomponente zum Erstellen oder Aktualisieren von Datensätzen. Diese Komponente sendet entweder einen Erstellungsbefehl oder einen Aktualisierungsbefehl an unseren Server.

Dies ist unsere Hauptlayout-Komponente. Unsere 

 wird immer oben auf jeder Seite stehen, und das 

 wird die untergeordneten Komponenten akzeptieren, die wir zuvor in unseren 

Wir haben den Prozess der Komponentenerstellung abgeschlossen. Außerdem haben wir unsere React-App mithilfe von 

 mit dem Back-End verbunden, was eine sauberere und einfachere Verarbeitung von HTTP-Anfragen ermöglicht. In 

 haben wir den folgenden Code an den Block 

 angehängt. Wenn eine POST- oder PATCH-Anforderung an die URL gesendet wird, fügt 

 der Datenbank entweder einen neuen Datensatz hinzu oder aktualisiert einen vorhandenen Datensatz in der Datenbank.

Wir haben auch den folgenden Codeblock in 

 unterhalb des Konstruktorblocks eingefügt, um einen vorhandenen Datensatz zu laden, falls er existiert.

 die Datensätze aus der Datenbank. Wir werden also die 

 verwenden, um Datensätze aus der Datenbank abzurufen. Um dies zu erreichen, haben wir die folgenden Codezeilen über der Funktion 

Nachdem Sie alles geschlossen haben, führen Sie die folgenden Schritte aus, um die App zu starten:

So sieht die Landing Page der Datensatzkomponente aus, nachdem wir Datensätze für „Jesse Hall“, „Kushagra Kesav“ und „Stanimira Vlaeva“ über die Schaltfläche „Mitarbeiter erstellen“ hinzugefügt haben.

So sieht der Bildschirm aus, auf dem Sie einen Mitarbeiter hinzufügen können:

Herzlichen Glückwunsch zum Erstellen Ihrer ersten MERN-Anwendung. Weitere Ideen und fortgeschrittene Konzepte finden Sie in unserem 

 und wenn Sie Fragen haben, können Sie diese in unseren 

Rich-Text2 Sprachen/Mern-Stack-Tutorial

Erste Schritte mit MongoDB Atlas

SEO Section Overview-mern-stack-tutorial

Wir stellen MongoDB 8.0 vor, das schnellste MongoDB aller Zeiten! Mehr erfahren &gt;

Voyage AI und MongoDB unterstützen ab sofort gemeinsam genauere und vertrauenswürdigere KI-Anwendungen auf Atlas. Mehr erfahren >

Für dieses Tutorial benötigen Sie Zugriff auf eine MongoDB Atlas-Datenbank. Wenn Sie kein Konto haben, können Sie sich kostenlos anmelden.

So verwenden Sie MERN Stack: Eine vollständige Anleitung

Erste Schritte mit MongoDB Atlas