Share
Für das Erstellen von Webanwendungen müssen verschiedene Technologien und Tools verwendet werden. Dabei werden Datenbankmanipulationen, serverseitige Vorgänge sowie die clientseitige Verarbeitung und Anzeige der vom Server stammenden Daten behandelt. Bevor Sie ein neues Projekt starten, müssen alle Werkzeuge und die Projektstruktur eingerichtet werden. Dies ist eine zeitaufwändige Aufgabe. Verwenden eines Frameworks oder eines Stapel Diese Aufgabe kann die Entwicklung beschleunigen und die Arbeit für den Entwickler erleichtern.
"MEAN ist eine Fullstack-JavaScript-Plattform für moderne Webanwendungen.".
So definieren es die Autoren des MEAN-Stacks auf ihrer Website. Es ist sehr klar, dass MEAN alle Arten von JavaScript-Entwicklern (sowohl Server- als auch Clientseite) anspricht, und dass es sich dabei um eine Stack-Plattform handelt, die darauf hinweist, dass es mehrere Komponenten gibt.
Diese Komponenten sind:
Wie Sie sehen, vereint MEAN vier der am häufigsten verwendeten und geschätzten Technologien für die JavaScript-Entwicklung und legt damit den Grundstein für das einfache Erstellen komplexer Webanwendungen.
Der MEAN-Stack kann auf zwei Arten installiert werden:
Diese Methode ist ziemlich einfach. Sie müssen nur die mean.io-Site besuchen und dann können Sie das Framework als Postleitzahl Datei durch Klicken auf die große grüne Schaltfläche.
Eine andere hier verfügbare Option ist das Klonen des Git-Repositorys. Öffnen Sie einfach ein Terminal und geben Sie den folgenden Befehl ein:
Git Klon https://github.com/linnovate/mean.git
Es gibt mehrere Yeoman-Generatoren, die von verschiedenen Entwicklern geschrieben wurden. Die Installation von MEAN mit einem Generator erfolgt in zwei Schritten. Zuerst wird der Generator installiert:
npm install -g generator-meanstack
und dann mit yo die App erstellen:
Sie meinen Stacks
Das obige Beispiel setzt voraus, dass die Installation von Mittelstapel Generator und auch, dass Yeoman installiert ist. Um eine Liste der MEAN-Generatoren zu erhalten, überprüfen Sie diesen Link und filtern Sie nach "mean". Informationen zur Installation von Yeoman finden Sie auf der Website von Yeoman.
Addy Osmani hat einen sehr interessanten Blogbeitrag über MEAN-Stack und Yeoman-Generatoren dafür geschrieben. Ich empfehle dringend, das zu lesen, um herauszufinden, wie der Stapel mit Generatoren installiert wird.
In diesem Artikel werde ich den Git-Klon-Ansatz verwenden.
Nach der Installation einfach CD in den Ordner, in dem Sie den MEAN-Stack installiert haben, und geben Sie den aus grunzen Befehl (sollten Sie haben) grunzen-cli Eingerichtet). Dieser Befehl startet einen Server, der Port 3000 abhört, also zu Besuch http: // localhost: 3000 Im Browser wird so etwas angezeigt:
Der MEAN-Stack ist eine voll funktionsfähige Blog-Engine-Anwendung. Die Authentifizierung erfolgt über verschiedene Methoden: Facebook, GitHub, Twitter oder Google und auch per E-Mail und Passwort.
Ich wette, Sie sind neugierig auf Code, den Sie bisher gesehen haben. Die Ordnerstruktur des MEAN-Stacks sollte folgendermaßen aussehen:
Der Server ist in zwei Ordner und eine Datei aufgeteilt:
Accentsconagua
App Ordner - enthält die Controller, Modelle und Ansichten, aus denen sich die Anwendung zusammensetztKonfig Ordner - enthält die Dateien, die das Verhalten der Teile der App steuernserver.js - ist der Einstiegspunkt der AnwendungNehmen wir sie einzeln auf:
server.js DateiDies ist die Datei, mit der die gesamte Anwendung gestartet wird. Wenn Sie nicht verwenden möchten grunzen Sie können verwenden Knotenserver, js um den Server zu starten.
Das server.js Datei ist verantwortlich für:
Konfig MappeDieser Ordner enthält die Anwendungskonfigurationsdateien. Im Inneren finden Sie eine env Ordner mit Konfigurationen für den Entwicklungs-, Produktions- und Testmodus zum Ausführen der Anwendung.
Es gibt auch Dateien, die die Konfiguration für die Anwendung selbst, den Express-Teil und die Passport-Konfiguration für die Anmeldung enthalten.
App MappeIn der App Ordner enthält den gesamten serverseitigen Code. Dieser Ordner enthält Unterordner für die Controller, Modelle und Ansichten, aus denen sich die MVC-Serveranwendung zusammensetzt, sowie einen Ordner für die Routen, die bedient werden.
Standardmäßig gibt es Controller für die Artikel, Benutzer und eine Indexdatei für den Stammpfad. Außerdem werden Modelle für die Artikel und Benutzer erstellt und Routen für Artikel, Benutzer und der Stammpfad werden während der Installation erstellt.
Für die standardmäßig erstellten Ansichten wird die folgende Struktur erstellt:
Das beinhaltet Der Ordner enthält die Fuß- und Kopfzeile der Seiten, die in alle Seiten der App eingefügt werden. Das Layout Ordner enthält den Basis-HTML-Code für das Seitenlayout. Dieses Layout wird in die erweitert index.html Datei aus der Ansichten Mappe.
Das Benutzer Der Ordner enthält den Markup-Code zum Anmelden, Anmelden und Authentifizieren.
In der Wurzel der Ansichten Ordner neben dem index.html Datei, es gibt Dateien, die das Markup für 404- und 500-Fehler enthalten.
Der Client-Teilecode befindet sich im Öffentlichkeit Mappe. Dieser Ordner enthält eine css Unterordner für das Applikations-Styling und ein img Ordner mit den in der Anwendung verwendeten Bildern.
Besondere Aufmerksamkeit sollte dem gewidmet werden js Ordner, der den Angular-Code für die clientseitige App, den Initialisierungscode, einige Anweisungen und Filtercode (derzeit leere Dateien) sowie die Controller und Services für die Artikel und den Header-Teil der Anwendung enthält Ansichten Ordner enthält das Markup zum Erstellen, Bearbeiten, Anzeigen und Anzeigen von Artikeln.
Endlich, das lib Ordner enthält den Angular-Bibliothekscode.
Das Prüfung Ordner enthält die Dateien zum Testen der Anwendung. Es gibt hauptsächlich Dateien zum Testen des Server-Teils mit Mocha und Dateien zum Testen des Client-Teils mit Karma.
Bei der Verwendung des MEAN-Stapels haben Sie als Entwickler auch Zugriff auf npm, bower und grunt, die installiert werden sollten,
Es ist wichtig zu erwähnen, dass JSHint bereitgestellt wird und der gesamte JavaScript-Code geflutet ist. Mit Grunt kann das Projekt auch auf Änderungen überprüft und automatisch neu erstellt werden.
Dieser Artikel soll von einem zweiten Lernprogramm begleitet werden, in dem eine vollständige Anwendung auf dem MEAN-Stack erstellt wird, die Ihnen zeigt, wie MEAN konfiguriert und angepasst werden kann, um für andere Arten von Anwendungen verwendet zu werden.
Bleiben Sie dran für den zweiten Teil!
