Wie man mit Mern Stack anfängt

Mern Stack ist eine Reihe von zuverlässigen und leistungsfähigen Technologien, die zur Entwicklung skalierbarer Webanwendungen verwendet werden können. Diese Webanwendung umfasst Front-End, Back-End und Datenbank zum Speichern der Daten. Es handelt sich um ein JavaScript-Framework mit vollem Stapel, mit dem benutzerfreundliche Websites und Anwendungen erstellt werden.

Um mit dem Mern -Stapel zu beginnen, müssen wir die folgenden therapis ausführen, den Knotenserver einrichten, eine MongoDB -Datenbank erstellen und eine Verbindung mit dem Knotenserver herstellen. Der dritte und der wichtigste Schritt ist, den Front-End-Reakt zu bauen.JS -Anwendung. In diesem Bericht wird Ihnen angezeigt, wie Sie alle diese Operationen ausführen können. Bevor Sie vorankommen, diskutieren wir die genannten Komponenten des Mern -Stacks.

Komponenten von Mern Stack

• JS wird als oberste Stufe in der Mern -Stapelentwicklung angesehen. Es ist eine Deklarative JavaScript -Framework Wird verwendet, um dynamische clientseitige Anwendungen zu entwickeln. Es ermöglicht Ihnen außerdem, komplexe Schnittstellen zu erstellen, indem die Komponenten Ihrer Daten aus dem Backend -Server angeschlossen und dann als HTML rendern. React zeichnet auch datengesteuerte und staatliche Schnittstellen mit minimalem Code und anderen Funktionen wie Fehlerbehandlung, Listen, Formularen und Ereignissen hervor, die Sie von einem modernen Web-Framework erwarten.
• Wenn Sie eine Anwendung basierend auf entwickeln möchten Mern Stack Dies speichert jede Form der Daten wie Ereignisse, Kommentare, Benutzerprofile, Inhalte und Uploads. Sie benötigen eine einfache Datenbank, die Sie mit dem Front-End und Back-End verwenden können. Dies ist die Situation, in der MongoDb kommt ins Spiel. Im Reagieren.JS Front End, die erstellten JSON -Dokumente werden an den Express gesendet.JS und der Knoten.JS -Server, verarbeitet sie und speichert sie in der MongoDB -Datenbank.
• In Mern Stackentwicklung, Die Stufe, die zwischen der MongoDB -Datenbank und der React vorhanden ist.JS Front-End ist das "JS”. Es kann als minimalistischer, nicht optimierter und schneller Web -Framework für Knoten beschrieben werden.JS. Äußern.JS Framework betreibt den Knoten.JS -Server darin darin. Sie können eine Verbindung zum Express herstellen.JS-Funktionen von Ihrem Bewerbungsfunktion, indem Sie die Beiträge, erhalten oder HTTP-Anfragen senden. Diese angegebenen Funktionen werden dann verwendet, um die MongoDB -Daten über Versprechen oder Rückrufe zu ändern oder zuzugreifen. Äußern.JS bietet auch leistungsstarke Modelle für den Umgang mit HTTP -Antworten, -anfragen und URL -Routing an.

Beginnen wir jetzt mit dem Mern -Stack!

So richten Sie den Knotenserver in der Entwicklung von Mern Stack ein

Um den Knotenserver in der Entwicklung von Mern Stack einzurichten, müssen Sie als erstes den Knoten herunterladen.JS auf Ihrem System über seine offizielle Website:

Verwenden Sie anschließend die heruntergeladene Datei, um die Installation des Knotens abzuschließen.JS und nach Abschluss der angegebenen Operation die folgenden in Ihrer Eingabeaufforderung gegebenenfalls ausführen:

> Knoten -v

Das oben gegebene “KnotenBefehl mit dem “-vDie Option wird die aktuelle Version des "ausdruckenKnoten.JSDas ist auf Ihrem System installiert:

Nach der Installation des Knotens.JS, wir werden uns mit dem Verfahren der Entwicklung des Servers fortsetzen. Zu diesem Zweck erstellen wir zunächst einen Basisordner und installieren dann alle erforderlichen Pakete oder Abhängigkeiten für die Node Server -Entwicklung.

Für die angegebene Operation können Sie auch die Eingabeaufforderung verwenden. Wir werden jedoch das nutzen “Visual Studio -Code”Terminal, das es auch einfach macht, in den Knotenserverdateien zu arbeiten.

Im nächsten Schritt öffnen wir unseren Basisordner, indem wir die „verwenden“Ordner öffnen”Option der“Datei" Speisekarte:

Wir haben die "ausgewählt"Mitarbeiter-Mern-ProjectOrdner zum Speichern der Dateien im Zusammenhang mit dem Knotenserver des Mern -Stacks:

Jetzt drücken "Strg+Verschiebung+'”, Um ein neues Terminalfenster im Visual Studio -Code zu öffnen. Für diesen Zweck können Sie auch das Menü „Terminal“ verwenden:

Im nächsten Schritt werden wir eine "erstellen"Backend"Ordner in unserem"Mitarbeiter-Mern-Project”Root- oder Basisordner. Um dasselbe zu tun, können Sie das untergegebene untergeführt “MkdirBefehl im geöffneten Terminal:

> Mkdir Backend

Danach werden wir in die neu geschaffenen “eingehen“BackendOrdner zum Hinzufügen der serverbezogenen Datei und Pakete darin:

> CD -Backend

Im Inneren der “Backend"Ordner, wir werden jetzt eine" erstellen "Paket.JSON" Datei. Das Paket.Die JSON -Datei ist das Kernelement eines Knotenservers in der Mern -Stack -Entwicklung. Es umfasst die Metadaten Ihres Mern Stack -Projekts und definiert auch die funktionalen Attribute, die dann vom NPM zum Ausführen von Skripten und zur Installation von Abhängigkeiten verwendet werden können.

So erstellen Sie ein neues Paket.JSON -Datei für Ihren Knotenserver geben Sie den folgenden Befehl ein:

> npm init -y

So installieren Sie Abhängigkeiten für den Knotenserver in der Entwicklung von Mern Stack

In diesem Abschnitt wird das Verfahren zur Installation von wesentlichen Abhängigkeiten wie zäußern","CORS","Mungo", Und "dotenv”Für Ihren Knotenserver in der Mern -Stapelentwicklung. Der Knotenpaketmanager oder “NPM”Kann verwendet werden, um die angegebenen Abhängigkeiten auf folgende Weise zu installieren:

> NPM express cors mongoose dotenv installieren

Hier:

• "Express" wird hinzugefügt, um "Express" zu installieren, einem leichten Web -Framework für Knoten.JS. Es kann auch viele Middlewares unterstützen, die dazu beitragen, den Code einfacher und kürzer zu schreiben.
• "Cors" ist ein Abkürzung für die Freigabe von Cross-Origin-Ressourcen. Dieses Paket ermöglicht AJAX -Anfragen, um auf die Ressourcen von den Remote -Hosts zuzugreifen.
• "Mongoose" wird hinzugefügt, um das "Mongoose" -Paket zu installieren. Das Mongoose -Paket hilft dem Knotenserver, mit MongoDB in der Mern -Stapelentwicklung zu interagieren.
• Zuletzt lädt das "dotenv" -Paket die Umgebungsvariablen aus dem ".env “zum„ Prozess “.env ”Datei. Es verwaltet auch die Datenbankanmeldeinformationen in einer kollaborativen Umgebung.

Für unseren Knotenserver ist ein weiteres Paket, das wir installieren werden, "ist"Nodemon”. Es wird die Knotenanwendung automatisch neu gestartet, wenn Sie bei der Entwicklung des Knotens einige Änderungen in der Datei vorgenommen haben.JS -basierte Anwendung:

> sudo npm install -g nodemon

So führen Sie den Knotenserver in der Entwicklung von Mern Stack aus

Bis zu diesem Zeitpunkt haben wir den Knoten installiert.JS und die erforderlichen Pakete und Abhängigkeiten. Jetzt ist es Zeit, den Backend -Knoten zu erstellen und auszuführen.JS -Server. Klicken Sie dazu auf die “Backend”Ordner und im Dropdown-Menü wählen Sie die“Neue Datei" Möglichkeit:

Hier können Sie eine neue ““Server.JSJavaScript -Datei wird im Backend -Ordner hinzugefügt:

Nun in der “Server.JS"Datei, wir erstellen eine"äußern"Server, dann werden wir die" anhängen "äußern.JSON"Middleware und"CORS”. Der "äußern.JSON"Middleware wird zum Senden und Empfangen von" JSON "verwendet. Auch der Knoten.JS Server dürfen auf das zuhören. “5000" Hafen:

const express = forderung ('express');
const cors = fordern ('cors');
erfordern ('dotenv').config ();
const App = express ();
const port = prozess.env.Port || 5000;
App.Verwendung (cors ());
App.Verwendung (Express.JSON ());
App.Hören Sie (Port, () =>
Konsole.log ('Server wird auf Port ausgeführt: $ port');
);

Nach dem Hinzufügen des oben gegebenen Code in die “Server.JS"Datei, drücken"Strg+s"Um die Änderungen zu speichern und dann Ihren Knotenserver mit" auszuführen "führen Sie es mit" aus "ausNodemon”:

> Nodemon Server

Aus der Ausgabe können Sie feststellen, dass unser Server erfolgreich auf Port ausgeführt wird5000”:

Nach erfolgreichem Betrieb den Knoten.JS -Server auf dem angegebenen Port erhalten Sie voran, den Knoten zu verbinden.JS -Server zur MongoDB -Datenbank. Dafür müssen Sie zuerst ein MongoDB -Konto erstellen.

So erstellen Sie die MongoDB -Datenbank in der Entwicklung von Mern Stack

In Mern Stack Development ist ein MongoDB-Datenbankkonto ein Muss. Durch das Erstellen eines MongoDB -Kontos können Sie eine Datenbank gemäß Ihren Anforderungen erstellen. Danach können Sie eine hinzufügen “Cluster”In die neu erstellte Datenbank und generieren Sie eine Verbindungszeichenfolge, mit der Sie den Knoten verbinden können.JS -Server zur MongoDB -Datenbank. Beginnen wir dieses Verfahren, indem wir uns auf die offizielle Website von MongoDB wenden:

Erstellen Sie nun ein Konto zum Hosting der Datenbank in der “MongoDb Atlas”:

Sie sehen das untergegebene Dashboard nach der Erstellung von MongoDB-Kontoen. Klicken Sie nun auf die “Neues ProjektTaste, die sich auf der rechten Seite des Armaturenbretts befindet:

Geben Sie im Feld hervorgehobener Eingangsfeld Ihren MongoDB -Projektnamen ein und klicken Sie auf die “Nächste" Taste:

Zu diesem Zeitpunkt wird Ihr MongoDB -Projekt erstellt und Sie sind alle bereit, eine neue Datenbank zu erstellen:

Wählen Sie im nächsten Schritt den Anbieter und die Zone für Ihre Datenbank aus. Zum Beispiel haben wir ausgewählt “Google Cloud"Als Cloud -Anbieter und"Lowa”Als unsere Region. Es wird auch empfohlen, eine kostenlose Stufe auszuwählen, die sich hervorragend für eine Sandbox -Umgebung herausstellt.

Klicken Sie nach Auswahl der erforderlichen Optionen auf die “Cluster erstellenSchaltfläche, um voranzukommen:

Um die MongoDB -Sicherheit aufrechtzuerhalten, wählen Sie eine Option zwischen “Benutzername und Passwort" Und "Zertifikat”Zur Authentifizierung der Verbindung vom oder zum Knoten.JS. In unserem Fall haben wir den Benutzernamen und das Passwort hinzugefügt:

Fügen Sie nun Ihre IP -Adressen zur MongoDB Whitelist hinzu. Mit dieser Option können die konfigurierte IP -Adresse auf die Cluster des Projekts zugreifen:

Klicken Sie nach dem Einrichten der IP -Adresse auf die “Beenden und schließen" Taste:

Innerhalb weniger Minuten wird der erstellte Cluster Ihres MongoDB -Projekts bereitgestellt:

So generieren Sie eine MongoDB -Zeichenfolge, um den Knoten zu verbinden.JS -Server in der Entwicklung von Mern Stack

Nach dem Einrichten der “Mitarbeiter-Mern-Project"Datenbank und die neu erstellt"Cluster0", Geh in die"DatenbankbereitstellungenAbschnitt ”und wählen Sie den Cluster aus. Danach klicken Sie auf die “VerbindenSchaltfläche, die im untergegebenen Bild hervorgehoben wird:

Dann werden Sie aufgefordert, die Verbindungsmethode für Cluster0 auszuwählen. Wir wollen unseren Knoten verbinden.JS -Server zur MongoDB -Datenbank in der Entwicklung von Mern Stack Application, sodass wir mit dem “gehenSchließen Sie Ihre Anwendung an" Optionen:

Wählen Sie als nächstes die "TREIBER" und sein "AUSFÜHRUNG”Und dann die Verbindungszeichenfolge unten im Fenster kopieren:

So verbinden Sie den Knoten.JS -Server zu MongoDB -Datenbank in der Mern -Stapelentwicklung

In der Entwicklung von Mern Stack, um den Knoten zu verbinden.JS und die MongoDB -Datenbank werden wir die Verbindungszeichenfolge verwenden, in der wir aus der “kopiert haben“Verbindung zu Cluster0 herstellen" Fenster. Öffnen Sie dazu den Knoten.JS "Server.JSDatei und stellen Sie sicher, dass Ihr Server ausgeführt wird:

> Nodeman Server

Im nächsten Schritt werden wir hinzufügen “Mungo" Bibliothek. Der "Mungo”Knoten.Die JS -Bibliothek hilft bei der Herstellung einer Verbindung zwischen dem MongoDB -Cluster und dem Knoten.JS -Server:

const mongoose = erfordern ('mongoose');

Jetzt werden wir eine separate “erstellen“.env"Datei zum Speichern des MongoDB -Atlas"Uri" oder der "Verbindungszeichenfolge”. Klicken Sie zu diesem Zweck auf den Knoten.JS -Serverordner, der ist “BackendIn unserem Fall und erstellt dann eine "Neue Datei”:

Wir haben die neue Datei als "benannt".env”:

Wenn Sie nicht die Verbindungszeichenfolge haben, kopieren Sie sie aus dem hervorgehobenen Abschnitt:

Fügen Sie dann die kopierte Verbindungszeichenfolge als "hinzu" hinzu "Atlas_uri" im ".env" Datei:

ATLAS_URI = MONGODB+SRV: // LinuxHint:@cluster0.8jdc7.MongoDb.net/myfirstdatabase?Wiederholungsschreiber = True & W = Mehrheit

Im hinzugefügten “Atlas_uri"Geben Sie Ihren MongoDB -Benutzernamen und Ihr Passwort an und drücken Sie"Strg+s”Um die hinzugefügten Änderungen zu speichern:

Fügen Sie nun den folgenden Code in Ihren Knoten hinzu.JS "Server" Datei:

const uri = Prozess.env.Atlas_uri;
Mungo.verbinden (URI);
const Connection = Mongoose.Verbindung;
Verbindung.einmal ('open', () =>
Konsole.log ("MongoDB -Datenbankverbindung erfolgreich hergestellt");
)

Der hinzugefügte Code wird versucht, eine Verbindung mit dem zu verbindenMongoDb Atlas"Verwenden"Mungo"Bibliothek und die Altas_uri und wenn die Verbindung hergestellt wird, wird sie ausdrucken"MongoDB -Datenbankverbindung erfolgreich erstellt”Auf dem Terminalfenster:

Drücken Sie "Strg+sUm die hinzugefügten Änderungen zu speichern und dann Ihren Knoten auszuführen.JS -Server:

> Nodemon Server

Die untergegebene Ausgabe erklärt, dass wir unseren Knoten erfolgreich miteinander verbunden haben.JS -Server zur MongoDB -Datenbank in der Mern -Stapelentwicklung:

Jetzt werden wir die Methode zum Einrichten von React überprüfen.JS auf der Kundenseite in Mern Stack Development.

Wie man reagiert.JS auf der Kundenseite in Mern Stack Development

Reagieren Sie reagieren.JS auf der Kundenseite in der Mern-Stack-Entwicklung müssen Sie als erstes ein Verzeichnis für die Installation des React auswählen.JS basiertes Projekt. Du kannst den ... benutzen "Eingabeaufforderung" für diesen Zweck. Wir werden jedoch das nutzen “Visual Studio -Code”Terminal, das es auch einfach macht, mit dem React zu arbeiten.JS -Anwendung.

Zuerst werden wir nach dem suchen "Visual Studio -Code”Anwendung und öffnen Sie es:

Klicken Sie in der geöffneten Anwendung auf die “DateiOption der Menüleiste und wählen Sie die "Ordner öffnen" Möglichkeit:

Stöbern Sie jetzt nach dem Ordner, in dem Sie Ihren Reaktieren platzieren möchten.JS-Anwendungsdatei. In unserem Fall haben wir das ausgewähltMitarbeiter-Mern-Project"Ordner, vorhanden in der"Lokale Scheibe (e :)”:

Als nächstes drücken Sie “Strg+Verschiebung+'So öffnen Sie das Visual Studio -Code -Terminal. Sie können den angegebenen Betrieb auch mit Hilfe des Menüs „Terminal“ ausführen:

Zu diesem Zeitpunkt sind wir alle bereit, den React einzurichten.JS -Anwendung in Mern Stack Development. Die Ausführung des “NPXBefehl mit dem “Erstellen von React-AppDie Option unterstützt Sie bei der Erstellung eines React.JS -Anwendung. Zum Beispiel das untergegebene “NPXBefehl ”Erstellt eine“Mern-Em-System" Reagieren.JS -Anwendung mit allen erforderlichen Abhängigkeiten in seinem Projektordner:

> NPX erstellen React-App-Mern-Em-System

Warten Sie ein paar Minuten, da die Installation der Pakete einige Zeit dauert:

Die untergegebene fehlerfreie Ausgabe zeigt an, dass wir die “erfolgreich installiert habenMern-Em-System" Reagieren.JS -Anwendung:

Der Visual Studio-Code lädt automatisch den erstellten Ordner reactjs-application darin. Jetzt werden wir einige Änderungen in der “vornehmenIndex.html"Datei der"Mern-Em-System" Reagieren.JS -Anwendung:

Der "Index.htmlDatei Ihres Reags.Die JS -Anwendung sieht irgendwie so aus:

Hier, "React AppRepräsentiert die “Titel" unserer "Mern-Em-System" Anwendung:

Wir werden den erstellten React nutzen.JS -Anwendung zur Entwicklung eines Mitarbeiterverwaltungssystems mit Mern Stack. Erstens werden wir den Titel unserer "ändern"Mern-Em-System" Reagieren.JS -Anwendung auf “Mitarbeiterverwaltungssystem"Und speichern die geöffneten"Index.html" Datei:

Im nächsten Schritt werden wir das aktuelle Arbeitsverzeichnis in “ändern“Mern-Em-System”Verwenden des Terminals:

> CD Mern-Em-System

Schreiben Sie nun das untergegebene "NPMBefehl zum Starten der Entwicklung des Webservers:

> NPM Start

Wie Sie aus der Ausgabe sehen können, dass unsere “Mern-Em-System„Projekt wird erfolgreich zusammengestellt und bereit, im Browser zu sehen:

Durch tippen die “LOCALHOST: 3000"In der Adressleiste unseres Browsers sehen wir die folgende Schnittstelle für die"Mern-Em-System" Reagieren.JS -Anwendung:

Sie können auch den Inhalt der “ändern“ hinzufügenApp.JSJavaScript -Datei zum Bearbeiten oder Anzeigen der Komponenten Ihrer React -Anwendung:

Zum Beispiel den folgenden Code in unserem “Hinzufügen“App.JS"Datei speichert die"MitarbeiterverwaltungssystemInhalte in einem Container:

importieren './App.CSS ';
Funktion App ()
zurückkehren (

Mitarbeiterverwaltungssystem

);

Standard -Standard -App exportieren;

Aus dem untergegebenen Bild können Sie sehen, dass das hinzugefügte “MitarbeiterverwaltungssystemInhalte für unseren Reakt.Die JS -Anwendung wird erfolgreich angezeigt:

Das drehte sich um das Verfahren zur Einrichtung von React.JS-Anwendung auf clientseitig in Mern Stack Development. Sie können nach Ihren Anforderungen weitere Anpassungen durchführen.

Abschluss

Mern Stack ist ein leistungsstarkes Webanwendungs ​​-Framework, das zum Erstellen moderner Websites und Anwendungen verwendet wird. Es umfasst React.JS zur Entwicklung des Front-Ends, Express und Knotens.JS zum Erstellen des Backend- und MongoDB -Datenbanks zur Verwaltung der Datenbank. Diese Beschreibung hat gezeigt, wie man mit dem Mern-Stapel beginnt. Jedes Verfahren wird von der Einrichtung des React bereitgestellt.JS -Anwendung und Knoten.JS -Server mit der Verbindung des Servers mit der MongoDB -Datenbank.