Dieser Artikel wird von Feiyus "[Translation] Erste-Anleitung für Front-End-Entwickler, Erstellen von Knoten, Express, Jade, MongoDB-Server von Grund auf neu geändert. Der Grund, warum Jade durch EJs ersetzt wurde, ist, dass ich denke, dass EJs eher mit den Habits of Web-Programmierern übereinstimmen. Tutorial.
Teil 1 Installation in 15 Minuten
Wenn Sie wirklich von Grund auf neu lernen, nehmen Sie sich etwas Zeit, um die Umgebung zuerst aufzubauen. Es ist nicht schwierig, ich verwende Win8, daher sieht dies ein bisschen anders aus als diese Tutorials, die Mac und Ubuntu oder andere *Nix -Systeme verwenden, aber es ist ungefähr gleich.
Schritt 1 Installieren Sie Node.js
Es ist einfach, auf die offizielle Node.js -Website zu gehen und auf die Schaltfläche Green Big Installation zu klicken, die Ihr System automatisch erkennt und Ihnen einen Download der richtigen Installationsdatei erhalten. (Wenn nicht, klicken Sie auf die Schaltfläche Download, um den benötigten Download auszuwählen.) Führen Sie den Installateur aus, und das ist in Ordnung. Sie haben node.js und npm (Knotenpaketmanager) installiert, um verschiedene nützliche Pakete einfach in Knoten zu installieren.
Schritt 2 Installieren Sie Express
Nachdem wir den Knoten ausgeführt haben, brauchen wir etwas anderes, damit wir tatsächlich eine verfügbare Website erstellen können. Als nächstes müssen wir Express installieren, ein Framework, das den Knoten von einer ursprünglichen Anwendung zu einem ähnlicheren Webserver verwandelt, den wir normalerweise verwenden. Wir müssen mit Express beginnen, da wir die Gerüstfunktionen benötigen, die es bietet. Geben Sie diesen Befehl ein:
Die Codekopie lautet wie folgt:
c:/node> npm install -g express
Auf diese Weise ist Express korrekt in unseren Knoten eingebaut und auf global verfügbare verfügbar. Im Befehlszeilenfenster, hauptsächlich HTTP 304 und Anfragen, die normal sind, sehen Sie eine Reihe von Ausgaben. Express sollte installiert und verfügbar sein.
Schritt 3 Erstellen Sie ein Express -Projekt
Wir werden Express und EJS verwenden, aber nicht für die Vorverarbeitung von CSS. Wir werden einige CSS von Hand geschrieben. Wir müssen EJs oder andere Vorlagenmotoren verwenden, um Knoten zu verarbeiten und Daten auszudrücken. Wenn Sie HTML kennen, ist EJS nicht schwierig. Denken Sie daran, dass Sie sich konzentrieren müssen oder Dinge anfällig für Fehler sein können.
Geben Sie nun in das gleiche Befehlszeilenfenster ein:
Die Codekopie lautet wie folgt:
C:/Knoten> Express -Sessions Nodetest1
Betreten Sie und Sie werden eine Reihe von Dingen wie folgt sehen:
Die Codekopie lautet wie folgt:
C:/Node> Express -Session Nodetest1
erstellen: nodetest1
erstellen: nodetest1/package.json
erstellen: nodetest1/app.js
erstellen: nodetest1/Routen
erstellen: nodetest1/routes/index.js
erstellen: nodetest1/routes/user.js
erstellen: nodetest1/Ansichten
erstellen: nodetest1/views/index.ejs
erstellen: nodetest1/public/bilder
erstellen: nodetest1/public/javascripts
erstellen: nodetest1/public
erstellen: nodetest1/public/stylesheets
erstellen: nodetest1/public/stylesheets/style.css
Abhängigkeiten installieren:
$ cd nodetest1 && npm installieren
Führen Sie die App aus:
$ node App
Schritt 4 Abhängigkeiten bearbeiten
Ok, wir haben jetzt einige grundlegende Projektstrukturen, aber es ist noch nicht fertig. Sie werden feststellen, dass der Installationsprozess von Express eine Datei namens Package.json in Ihrem Nodetest1 -Verzeichnis erstellt. Öffnen Sie die Datei mit einem Texteditor. Es sollte so aussehen.
Die Codekopie lautet wie folgt:
{
"Name": "Anwendungsname",
"Version": "0.0.1",
"privat": wahr,
"Skripte": {{
"Start": "Node App.js"
},
"Abhängigkeiten": {{
"Express": "3.4.8",
"EJS": "*"
}
}
Dies ist eine Standard -JSON -Formatdatei, die unsere Anwendung und ihre Abhängigkeiten angibt. Wir müssen etwas hinzufügen. Zum Beispiel Anrufe nach MongoDB und Mönch. Ändern Sie die Abhängigkeiten dazu:
Die Codekopie lautet wie folgt:
"Abhängigkeiten": {{
"Express": "3.4.8",
"EJS": "*",
"MongoDB": "*",
"Mönch": "*"
}
Schritt 5 Installieren Sie Abhängigkeiten
Jetzt haben wir die Abhängigkeiten des Projekts definiert. * Ermittelt NPM "die neueste Version installieren". Kehren Sie zum Befehlszeilenfenster zurück, geben Sie das Verzeichnis nodetest1 ein und geben Sie ein:
Die Codekopie lautet wie folgt:
C:/Knoten/Nodetest1> NPM Installation
Es gibt eine Reihe von Dingen aus. Dies liegt daran, dass es direkt unsere modifizierte JSON -Datei liest, die darin enthaltenen Abhängigkeiten erkennt und die erforderlichen Dateien installiert. Nach Abschluss der NPM -Installation sollten Sie über ein NODE_MODULES -Verzeichnis verfügen, das alle für unser Projekt erforderlichen Abhängigkeitsdateien enthält.
Jetzt haben wir eine voll ausgestattete App und sie ist bereit zu laufen. Probieren wir es aus! Stellen Sie sicher, dass Ihr aktuelles Verzeichnis das nodetest1 -Verzeichnis ist, geben Sie ein:
Die Codekopie lautet wie folgt:
C:/node/nodetest1> node app.js
Nach dem Betreten des Autos werden Sie sehen:
Die Codekopie lautet wie folgt:
Express Server, der Port 3000 anhört
wunderbar. Öffnen Sie den Browser und geben Sie http: // localhost: 3000 ein, und Sie sollten in der Lage sein, eine willkommene Seite in Express zu sehen.
Jetzt haben Sie mit Express Engine und EJS -HTML -Vorlagen -Engine Ihren eigenen Node JS -Webserver ausführen. Nicht sehr schwierig, oder?
Teil 2 ist da, lass uns "Hallo, Welt!"
Öffnen Sie Ihren häufig verwendeten Texteditor oder eine andere IDE. Öffnen Sie App.js in Ihrem Nodetest1 -Verzeichnis, und diese Datei ist der Kern Ihrer App. Sie sollten so etwas sehen:
Die Codekopie lautet wie folgt:
var express = require ('express');
var routes = fordert ('./ Routen');
var user = required ('./ Routes/user');
var http = required ('http');
var path = require ('path');
Dies definiert nur eine Reihe von JavaScript -Variablen und zeigt auf einige Pakete und Abhängigkeiten, Knotenfunktionen und Routen. Routen entsprechen einer Sammlung von Modellen und Controllern in MVC. Es ist für die Weiterleitung von Anforderungen verantwortlich und enthält auch eine Verarbeitungslogik. Express hat all diese Dinge für uns erstellt, und wir ignorieren nun die Benutzerroute und schreiben die obere Route (gesteuert von Routen/Index.js).
Am Ende der obigen Datei:
Die Codekopie lautet wie folgt:
var app = express ();
Dieser Satz ist entscheidend. Es exprimiert ausdrückt und weist unserer App -Variablen Wert zu. Der folgende Inhalt muss diese Variable verwenden, um eine Reihe von Express -Parametern zu konfigurieren. Fahren Sie weiter ein:
Die Codekopie lautet wie folgt:
// alle Umgebungen
app.set ('port', process.env.port || 3000);
app.set ('Ansichten', Path.Join (__ DirName, 'Ansichten');
app.set ('Ansicht Engine', 'ejs');
app.use (express.favicon ());
app.use (express.logger ('dev'));
app.use (express.bodyparser ());
app.use (Express.Methodoverride ());
app.use (App.router);
app.use (express.static (Path.Join (__ DirName, 'public')));
Hier richten wir den Port ein, suchen nach dem Verzeichnis der Ansichten, der Template -Engine, um diese Ansichten zu verarbeiten, und einige andere Dinge. Achten Sie auch auf die letzte Zeile, in der Express die statischen Dateien in der Öffentlichkeit/ Verzeichnis als Dateien im Verzeichnis der obersten Ebene hosten soll. Zum Beispiel wird Ihr Bildverzeichnis in C:/node/nodetest1/public/images/gespeichert, aber die tatsächliche Zugriffsadresse lautet http: // localhost: 3000/bilder/.
Hinweis: Sie müssen diese Zeile einstellen
Die Codekopie lautet wie folgt:
app.use (express.bodyparser ());
Wechseln zu
Die Codekopie lautet wie folgt:
app.use (express.urlencoded ());
Damit werden die Warninformationen im Knotenfenster während des Betriebs einiger Apps ignoriert. Hauptsächlich ein Ausdruck und sein Plug-In können in Zukunft geändert werden. Wenn Sie diese Änderung nicht vornehmen, erhalten Sie eine Reihe von Warnungen, die eine bestimmte Funktion bald auslaufen wird, wenn das Programm ausgeführt wird.
Dann fügen Sie hinzu:
Die Codekopie lautet wie folgt:
// nur Entwicklung
if ('Development' == app.get ('env')) {
app.use (express.ErrorHandler ());
}
Auf diese Weise können Sie während der Entwicklung einige Fehlerprüfungen durchführen.
Weiter erhöhen:
Die Codekopie lautet wie folgt:
app.get ('/', Routes.Index);
app.get ('/user', user.list);
Dadurch wird die Route angegeben, die die Route verwendet werden soll, wenn eine URI -Anfrage eintrifft. Beachten Sie, dass die Benutzervariable früher definiert und auf /routes/user.js zugeordnet ist. Wir werden die in dieser Datei definierte Listenfunktion aufrufen. Hier kann eine Benutzerliste angezeigt werden.
Weiter erhöhen:
Die Codekopie lautet wie folgt:
http.createServer (App) .Listen (app.get ('port'), function () {
console.log ('Express Server -Anhören auf Port' + app.get ('port'));
});
Erstellen Sie schließlich einen HTTP -Server und starten Sie ihn. Das war's.
(Der obige Inhalt ist in der vom neuen Express generierten Vorlage abgeschlossen und muss selbst nicht selbst geschrieben werden.)
Lassen Sie uns nun etwas Nützliches schreiben. Wir werden nicht "Hallo Welt!" Schreiben! direkt auf unserer Indexseite. Wir werden diese Gelegenheit nutzen, um zu lernen, wie man Routenrouting nutzt und wie die EJS -Engine funktioniert. Fügen Sie eine Zeile nach dem Absatz von App.get () der obigen App.js -Datei hinzu:
app.get ('/helloWorld', Routes.Helloworld);
Wenn Sie im Befehlszeilenfenster Strg+C drücken, um den app.js -Prozess zu beenden und neu zu starten und dann mit dem Browser auf http: // localhost: 3000/helloWorld zuzugreifen, erhalten Sie im Befehlszeilenfenster einen spannenden Knotenfehler und eine Reihe von Crash -Eingabeaufforderungen. Dies liegt daran, dass wir den Weg nicht geändert haben, um diesen Weg zu verarbeiten. Komm und mach das. Gehen Sie in Ihrem Editor zum Routes -Verzeichnis, finden Sie index.js und öffnen Sie es. Es sollte so aussehen:
Die Codekopie lautet wie folgt:
/*
* Homepage bekommen.
*/
exports.index = function (req, res) {
res.render ('index', {title: 'express'});
};
Fügen wir eine neue Seite hinzu. Ich bevorzuge es, eine unabhängige Routendatei für jedes Verzeichnis der ersten Ebene zu erstellen, aber jetzt planen wir nicht, eine vollständige Verzeichnisstruktur für HelloWorld unter Ansichten zu erstellen. Daher verwenden wir vorerst Indexrouten. Fügen Sie am Ende dieser Datei hinzu:
Die Codekopie lautet wie folgt:
exports.Helloworld = function (req, res) {
res.render ('helloWorld', {Titel: 'Hallo, Welt!'});
};
Es wird für die Behandlung dieser URI -Anfrage verantwortlich sein, aber jetzt haben wir keine tatsächliche Seite, um res.render zu rendern, wofür EJS verantwortlich ist. Gehen Sie zu Ihrem Ansichtenverzeichnis, öffnen Sie index.ejs und speichern Sie es als Datei helloWorld.ejs. Jetzt sollte es so aussehen:
Die Codekopie lautet wie folgt:
<! DocType html>
<html>
<kopf>
<title> < %= title %> </title>
<link rel = 'stylesheet' href = '/stylesheets/style.css'/>
</head>
<body>
<H1> < %= title %> </h1>
<p> Willkommen zu < %= title %> </p>
</body>
</html>
Es sollte leicht zu verstehen sein.
Speichern Sie die Datei. Drücken Sie Strg+C im Befehlszeilenfenster, um app.js zu unterbrechen, und geben Sie dann Node App.js ein, um es neu zu starten. Tipp: Wenn Sie eine EJS -Vorlagendatei ändern, müssen Sie den Server nicht neu starten. Wenn Sie jedoch eine JS -Datei wie App.js oder eine Routing -JS -Datei ändern, müssen Sie den Server neu starten, um den Effekt anzuzeigen.
Nach dem Start des Servers öffnet der Server http: // localhost: 3000/helloWorld und Sie sollten in der Lage sein, diese schöne Schnittstelle zu sehen:
In Ordnung! Jetzt, da wir die Routen haben, die unsere Vorlagen bewältigen können, sehen wir den gewünschten Effekt. Lassen Sie uns als nächstes einige Modelle (Datenschicht) durchführen.
Teil 3 Erstellen Sie eine Datenbank und lesen Sie Daten
Schritt 1 Installieren Sie MongoDB
Schließen wir zuerst den Texteditor und kehren zum Befehlszeilenfenster zurück. Verwenden Sie zuerst Ihren Browser, öffnen Sie http://mongodb.org/ und laden Sie Mongo herunter. Klicken Sie im Hauptmenü auf den Link Download, um die Version zu finden, die zu Ihnen passt. Laden Sie für 64-Bit Win8 die 64-Bit *2008R2+ -Version herunter. Nach dem Herunterladen handelt es sich um eine ZIP -Datei, und es ist unkomprimiert zu C:/Mongo, C:/Programmdateien/Mongo oder was auch immer es ist. Das spielt keine Rolle. Wir speichern die Daten in unserem Nodetest1 -Verzeichnis.
Schritt 2 Mongod und Mongo laufen
Erstellen Sie in unserem Nodetest1 -Verzeichnis ein Subverzeichnisdaten und geben Sie dann das Bin -Verzeichnis Ihres MongoDB -Verzeichnisses in das Befehlszeilenfenster ein und geben Sie ein:
Die Codekopie lautet wie folgt:
Mongod dbPath C:/Knoten/Nodetest1/Daten
Sie werden sehen, dass der Mongo-Server gestartet wird und das erste Startup etwas Zeit in Anspruch nimmt, da es erforderlich ist, einige Festplattenraum und einige andere Aufgaben zu verbessern. Wenn es auffordert, "[initandListen] auf Verbindungen auf Port 27017 zu warten", ist es fertig. Es gibt nichts anderes zu tun, der Server wird bereits ausgeführt. Jetzt müssen Sie ein anderes Befehlszeilenfenster öffnen, das Bin -Verzeichnis des Mongo -Verzeichnisses eingeben und eingeben
Die Codekopie lautet wie folgt:
Mongo
Sie werden einige Tipps wie diese sehen:
Die Codekopie lautet wie folgt:
C:/mongo> mongo
MongoDB Shell Version: 2.4.5
Verbindung zu: Test
Wenn Sie sich das Mongod -Fenster ansehen, sehen Sie eine Aufforderung, dass eine Verbindung verbunden wurde. Als nächstes werden wir diesen Befehlszeilen -Client verwenden, um unsere Datenbank manuell zu verarbeiten, dies ist jedoch für unsere Website nicht erforderlich.
Schritt 3 Erstellen Sie eine Datenbank
Machen Sie sich keine Sorgen über die oben genannte Aufforderung zum Anschließen zum Test. Dies ist nur eine Datenbank, die mongo standardmäßig standhält, wenn Sie keine Datenbank angeben, und diese Datenbank mit dem Namen Test erstellt, es sei denn, Sie fügen ihnen einen Datensatz hinzu. Erstellen wir unsere eigene Datenbank. Geben Sie im Befehlszeilenfenster von Mongo ein:
Die Codekopie lautet wie folgt:
Verwenden Sie Nodetest1
Es wird diese Datenbank nicht erstellt, es sei denn, wir fügen einige Daten in sie ein.
Schritt 4 Fügen Sie einige Daten hinzu
Mein Lieblingsmerkmal von MongoDB ist, dass JSON als Datenstruktur verwendet wird, was bedeutet, dass ich damit sehr vertraut bin. Wenn Sie mit JSON nicht vertraut sind, lesen Sie zuerst einige relevante Materialien, was über den Rahmen dieses Tutorials hinausgeht.
Wir fügen der Sammlung einige Daten hinzu. In diesem Tutorial haben wir nur eine einfache Datenbank, zwei Felder: Benutzername und E -Mail. Unsere Daten sehen so aus:
Die Codekopie lautet wie folgt:
{
"_id": 1234,
"Benutzername": "Cwbuecheler",
"E -Mail": "[email protected]"
}
Sie können Ihren eigenen Wert des Feldes erstellen, aber ich denke, es ist besser, Mongo es tun zu lassen. Es schafft einen eindeutigen Wert für jeden Datensatz. Mal sehen, wie es funktioniert. Geben Sie im Mongo -Fenster ein:
Die Codekopie lautet wie folgt:
DB.USERCollection.insert ({"Benutzername": "TestUser1", "E -Mail": "[email protected]"})
Wichtiger Tipp: DB ist die oben erstellte Nodetest1 -Datenbank, und UserCollection ist unsere Sammlung, die einer Datentabelle entspricht. Beachten Sie, dass wir diese Sammlung nicht im Voraus erstellen müssen, sie wird automatisch erstellt, wenn sie zum ersten Mal verwendet wird. Ok, drücken Sie die Eingabetaste. Wenn alles gut läuft, werden Sie ... nichts sehen. Dies ist nicht sehr gut, geben Sie ein:
Die Codekopie lautet wie folgt:
db.Usercollection.find (). Pretty ()
Wenn Sie neugierig sind, formatiert die hübsche Methode den Ausgangsinhalt und fügt Newline -Eindrückung hinzu. Es sollte angezeigt werden:
Die Codekopie lautet wie folgt:
{
"_id": ObjectID ("5202B481D2184D390CBF6ECA"),
"Benutzername": "testuser1",
"E -Mail": "[email protected]"
}
Natürlich sollte die Objekte, die Sie erhalten, anders sein, mongo generiert automatisch einen. Wenn Sie schon einmal JSON -Interface -Dienste verwendet haben, denken Sie, wow, wenn Sie dies im Web anrufen, sollte es sehr einfach sein! Nun, du hast recht.
Tipp: Als formeller Service sollten Sie nicht möchten, dass alle Daten auf der obersten Ebene liegen. In Bezug auf das Design der MongoDB -Datenstruktur sehen Sie sich Google an.
Nachdem wir ein Datenstück haben, fügen wir weitere Punkte hinzu. Eingeben:
Die Codekopie lautet wie folgt:
NewsStuff = [{"Benutzername": "TestUser2", "E -Mail": "[email protected]"}, {"Benutzername": "TestUser3", "E -Mail": "[email protected]"}]
db.usercollection.insert (NewStuff);
Beachten Sie, dass wir über ein Daten mehrere Daten gleichzeitig an die Sammlung übergeben. Wie einfach! Verwenden Sie dann den obigen Befehl Find und Sie sehen diese drei Datenstücke.
Lassen Sie uns nun den zuvor erstellten Webserver und die Datenbank integrieren.
Schritt 5 Schließen Sie den Mongo mit dem Knoten an
Erstellen wir nun eine Seite und zeigen die Datensätze in der Datenbank in einer schönen Tabelle an. Hier ist der HTML -Inhalt, den wir erstellen:
Die Codekopie lautet wie folgt:
<ul>
<li> <a href = "mailto: [email protected]"> testuser1 </a> </li>
<li> <a href = "mailto: [email protected]"> testuser2 </a> </li>
<li> <a href = "mailto: [email protected]"> testuser3 </a> </li>
</ul>
Ich weiß, dass dies nicht sehr wissenschaftlich ist, aber Sie können es verstehen. Wir versuchen nur, eine einfache Datenbank -Les- und Schreibprogramm zu erstellen, keine vollständige Website. Erstens fügen wir App.js (das Herz und die Seele unseres Programms) ein wenig Inhalt hinzu, damit wir MongoDB verknüpfen können. Öffnen Sie C: /node/nodetest1/app.js, oben sehen Sie:
Die Codekopie lautet wie folgt:
var express = require ('express');
var routes = fordert ('./ Routen');
var user = required ('./ Routes/user');
var http = required ('http');
var path = require ('path');
Fügen Sie unten hinzu:
Die Codekopie lautet wie folgt:
// neuer Code
var mongo = required ('mongoDB');
var monk = fordert ('monk');
var db = monk ('localhost: 27017/nodetest1');
Diese Zeilen werden der App mitteilen, dass wir eine Verbindung zu MongoDB herstellen müssen. Wir verwenden Mönch, um für diese Verbindung verantwortlich zu sein. Unser Datenbankstandort lautet localhost: 27017/nodetest1. Beachten Sie, dass 27017 der Standardport von MongoDB ist. Wenn Sie den Port aus irgendeinem Grund ändern, sollten Sie hier auch den Datensatz ändern. Schauen Sie sich nun den Ende der Datei an:
Die Codekopie lautet wie folgt:
app.get ('/', Routes.Index);
app.get ('/user', user.list);
app.get ('/helloWorld', Routes.Helloworld);
Fügen Sie unten eine Zeile hinzu:
Die Codekopie lautet wie folgt:
app.get ('/userList', Routes.userList (db));
Diese Zeile gibt der App mit, dass wir die DB -Variable an die UserList -Route übergeben müssen, wenn der Benutzer auf den Pfad /Benutzerlist zugreift. Wir haben jedoch noch keine UserList -Route, also lassen Sie uns jetzt eine erstellen.
Schritt 6 Lesen Sie die Daten in Mongo und zeigen Sie sie an
Verwenden Sie Ihren Editor, um c: /node/nodetest1/routes/idnex.js zu öffnen, der zwei Routen hat: Index und Hello World. Fügen wir nun den dritten hinzu:
Die Codekopie lautet wie folgt:
exports.userList = function (db) {
Rückgabefunktion (req, res) {
var collection = db.get ('userCollection');
collection.find ({}, {}, function (e, docs) {
res.render ('userList', {
"Benutzerliste": Dokumente
});
});
};
};
Nun, die Dinge werden ein wenig kompliziert. Hier definieren wir zuerst eine Funktion, empfangen die DB -Variable, die wir übergeben, und rufen dann eine Seite mit dem Rendern auf, die den beiden vorherigen Routen entsprechen. Wir sagen es, dass wir die USERCollektion lesen, eine Suche durchführen müssen und die zurückgegebenen Daten in der DOCS -Variablen gespeichert werden. Sobald wir den Inhalt gelesen haben, rufen wir Rendern auf, um die Seite "Benutzerlistenvorlage" zu rendern, und übergeben die erhaltene DOCS -Variable als Variable der Benutzerliste in der Vorlage -Engine.
Erstellen Sie als nächstes unsere EJS -Vorlage. Öffnen Sie index.ejs im View -Verzeichnis, speichern Sie als userList.ejs und ändern Sie seine HTML dazu:
Die Codekopie lautet wie folgt:
<! DocType html>
<html>
<kopf>
<title> UserList </title>
<link rel = 'stylesheet' href = '/stylesheets/style.css'/>
</head>
<body>
<h1> Benutzerliste </h1>
<ul>
<%
für (var i in userlist) {
%>
<li> <a href = ”mailto: <%= userList [i] .Email%>”> <%= userList [i] .username%> </a> </li>
< %} %>
</ul>
</body>
</html>
Speichern Sie die Datei und starten Sie den Knotenserver neu. Ich hoffe, Sie erinnern sich noch daran, wie man neu startet. Öffnen Sie den Browser und besuchen Sie http: // localhost: 3000/userlist, und Sie sollten eine Schnittstelle wie folgt sehen:
Klicken Sie auf die Schaltfläche Senden und Sie sehen einen Fehler von "nicht nach /adduser posten". Lassen Sie uns es beheben.
Schritt 2 Erstellen Sie Ihre Datenbankverarbeitungsfunktion
Nach wie vor ändern wir App.js, dann die Datei und dann die EJS -Vorlage. Hier besteht jedoch keine Notwendigkeit für eine EJS -Vorlage, da wir später zu veröffentlichen werden. Fügen Sie eine Zeile nach dem Absatz von App.get () von App.js hinzu:
Die Codekopie lautet wie folgt:
app.post ('/adduser', Routes.adDuser (db));
Beachten Sie, dass dies App.Post ist, nicht App.get. Setzen wir die Route. Gehen Sie zurück zu Routen/index.js und erstellen Sie unsere Funktion zur Datenbankeinfügungsfunktion. Das ist ziemlich groß, daher schlage ich vor, dass Sie einen guten Kommentar schreiben.
Die Codekopie lautet wie folgt:
exports.adduser = function (db) {
Rückgabefunktion (req, res) {
// Erhalten Sie unsere Formwerte. Diese stützen sich auf die Attribute "Name"
var userername = req.body.username;
var useremail = req.body.useremail;
// Setzen Sie unsere Sammlung
var collection = db.get ('userCollection');
// beim DB einreichen
Sammlung.insert ({{
"Benutzername": Benutzername,
"E -Mail": UserMail
}, function (err, doc) {
if (err) {
// Wenn es fehlgeschlagen ist, geben Sie Fehler zurück
res.send ("Es gab ein Problem mit dem Hinzufügen der Informationen in die Datenbank.");
}
anders {
// Wenn es funktioniert hat, stellen Sie den Header fest, damit die Adressleiste noch nicht sagt /Adduser
res.location ("userList");
// und auf die Erfolgsseite weiterleiten
res.redirect ("userList");
}
});
}
}
In realen Projekten müssen Sie offensichtlich noch eine große Überprüfung durchführen, z. B. den Benutzernamen und die E -Mail zulassen keine Doppelarbeit, und die E -Mail -Adresse muss bestimmten Formatregeln entsprechen. Aber jetzt kümmern wir uns nicht um diese Dinge. Sie können sehen, dass der Benutzer, wenn die Insertion -Datenbank abgeschlossen ist, den Benutzer zur Benutzerliste zurückspringen lässt, auf der sie die neu eingefügten Daten sehen sollten.
Ist das der beste Weg?
Schritt 3 Verbinden Sie eine Verbindung zur Datenbank und schreiben Sie die Daten
Stellen Sie sicher, dass Ihr Mongod läuft! Starten Sie dann Ihren Knotenserver neu. Öffnen Sie http: // localhost: 3000/neuer mit Ihrem Browser. Jetzt füllen wir Inhalte aus und klicken auf die Schaltfläche Senden. Wenn es gut geht, sollten wir zur Benutzerliste zurückkehren und die neuen Daten sehen, die wir gerade hinzugefügt haben.
Jetzt haben wir offiziell das Lesen und Schreiben in die MongoDB -Datenbank mit Node.js, Exress und EJs abgeschlossen. Wir sind bereits ein Programmierer von NIU X.
Herzlichen Glückwunsch wirklich. Wenn Sie dieses Tutorial ernsthaft beendet haben und das Lernen sehr ernst nehmen, anstatt nur den Code zu kopieren, sollten Sie ein vollständiges Konzept von Routen, Ansichten, Lesen von Daten und Schreibdaten haben. Hier sind alle Kenntnisse, mit denen Sie eine andere vollständige Website entwickeln müssen! Egal was du denkst, ich finde das wirklich cool.
Teil 5 Nächster Schritt
Beginnen Sie jetzt, Sie haben unbegrenzte Möglichkeiten. Sie können sich Mongoose ansehen, ein anderes Knotenpaket, das MongoDB -Datenbanken übernimmt. Es ist etwas größer als Monk und hat mehr Funktionen. Sie können sich auch Stylus, einen Express CSS -Motor ansehen. Sie können das Tutorial von Google Node Express -Mongo -Tutorial sehen und sehen, was als nächstes kommt. Hart lernen und jeden Tag verbessern.
Ich hoffe, dieses Tutorial hilft, ich habe es geschrieben, denn als ich anfing zu lernen, brauchte ich wirklich so etwas, aber ich konnte es wirklich nicht finden. Wenn Sie es hier gesehen haben, vielen Dank!