Share
Vor ein paar Jahren begann ich, wie viele Leute, mehr und mehr über Node.js zu erfahren. Ich hatte in ColdFusion seit über zehn Jahren serverseitige Anwendungen entwickelt, war aber immer neugierig, wie andere Plattformen auch funktionieren. Ich habe JavaScript auf dem Client genossen und es schien faszinierend zu sein, es auf dem Server zu verwenden. (Obwohl nicht unbedingt neu. Ich bin alt genug, um mich daran zu erinnern, als Netscape in den 90ern SSJS veröffentlichte.) Ich las einige Tutorials, setzte mich in ein paar Sitzungen und kam im Allgemeinen… unbeeindruckt weg.
Jedes Mal, wenn ich etwas über Node las, kam es zur selben Geschichte: zum Erstellen eines Webservers. Ehrlich gesagt war das nicht aufregend. Selbst als ich Webanwendungen in Perl-CGI-Skripts erstellte, musste ich mir keine Sorgen machen. Ich könnte das Potenzial in kleinen, einfachen API-Anbietern erkennen, aber würde ich darin eine einfache Site erstellen? Auf keinen Fall!
Aber eines Tages hatte ich Glück. Ich hatte beschlossen, an einer weiteren Node-Präsentation teilzunehmen (hauptsächlich, weil ich den Moderator gut kannte), und während seiner Präsentation demonstrierte der Referent Express. Eine Glühbirne ging aus. Hier war das Node-Framework, auf das ich gewartet habe! Ja, theoretisch bauen Sie immer noch Ihren eigenen Webserver, aber dieser Aspekt wird minimiert und Sie können sich stattdessen auf die Logik und den Inhalt Ihrer Website konzentrieren. Noch besser, ich habe gesehen, wie die Integration von Templating-Engines ein fast ColdFusion (oder PHP) -Erlebnis ermöglicht. In diesem Artikel zeige ich Ihnen, wie Sie Express installieren und mit dem Erstellen von Webanwendungen mit dem Framework beginnen.
Wahrscheinlich sind Sie bereits ein Node-Entwickler. Wenn Sie noch nicht mit der Plattform vertraut sind, können Sie immer noch beeindruckt sein von der Leistungsfähigkeit von npm. Ich weiß, ich bin. Wie gesagt, ich verbrachte den größten Teil meines Lebens mit ColdFusion. Für diese Plattform gibt es ein reiches, wenn nicht ein großes Ökosystem von Open Source. Das Entdecken und Installieren ist jedoch eine manuelle Angelegenheit. Die ersten Male, die ich npm benutzte, war ich beeindruckt. Ehrlich gesagt fällt es mir schwer, mir vorzustellen, eine Plattform ohne ein Tool wie npm zu verwenden. Beginnen wir mit einem package.json Datei, wo wir die Express-Abhängigkeit hinzufügen.
"name": "demo1", "description": "Erste Express-App", "Version": "0.0.1", "Abhängigkeiten": "express": "3.x"
Auch dies sollte für Node-Entwickler ein gewisser Standard sein. Gehen Sie zur Befehlszeile und führen Sie Folgendes aus:
npm installieren
Welche installiert Express und seine Abhängigkeiten.
Umgekehrt können Sie Express auch als Befehlszeilenprogramm installieren, um schnell Skelett-Apps zu generieren. Dies kann durch Ausführen von:
npm install -g express
Sobald Sie das getan haben, können Sie laufen ausdrücken in der Befehlszeile, um eine Anwendung zu generieren.
Gehen wir zurück zu der Anwendung, die wir mit der vorherigen erstellt haben package.json Datei und fügen Sie ein app.js Datei. Zumindest erstellt Ihre Anwendung eine neue Instanz des Express-Objekts und beginnt mit der Überwachung eines bestimmten Ports. Beginnen wir damit:
Accentsconagua
var express = erfordern ('express'); var app = express (); App.listen (3000); Ich persönlich neige dazu, Dinge sehr langsam zu nehmen, wenn ich ein neues Rahmenwerk lerne. Es kann also sinnvoll sein, schnell zu laufen Knoten App Nur um sicherzustellen, dass nichts schiefgelaufen ist.
Versuchen wir nun, der Anwendung einige einfache Routen hinzuzufügen. Express-Apps können auf verschiedene HTTP-Verben als API-Methoden reagieren. Also als Beispiel:
// Normales HTTP get app.get (einige URLs, etwas tun); // eine andere Seite app.get (eine andere URL, etwas anderes tun); // Ich kann auf ein Formular antworten. Post.post (einige URLs, mehr erledigen);
Lassen Sie uns ein reales Beispiel dafür erstellen und der Anwendung eine Startseite hinzufügen:
app.get ('/', Funktion (Anfrage, Antwort) response.send ("Dies wäre etwas HTML");); Beachten Sie, dass Express ein einfaches fügt senden() Methode zum Antwort Objekt. Dies abstrahiert einige der Boilerplate-Codes, um Antworten zu verarbeiten. Wenn Sie alles richtig gemacht haben, können Sie jetzt Ihre Anwendung neu starten und Ihren Browser für Port 3000 öffnen.
Das request.send () Die API behandelt auch verschiedene Datentypen intelligent. Stellen Sie sich vor, Sie möchten Ihrer Site eine einfache JSON-basierte API hinzufügen. Durch die einfache Rückgabe eines Objekts anstelle einer Zeichenfolge übernimmt Express die Konvertierung des Ergebnisses in JSON sowie das Setzen der entsprechenden Antwortheader.
app.get ('/ api', Funktion (Anfrage, Antwort) response.send (Name: "Raymond", Alter: 40);); Wie Sie sich vorstellen können, besteht das Erstellen einer Anwendung an dieser Stelle aus dem Hinzufügen von mehr und mehr Routen, um den Anforderungen Ihrer Anforderungen gerecht zu werden. Lassen Sie uns eine sehr einfache statische Website erstellen, die das bisher Gelernte nutzt.
Für unsere erste Website werden wir einen Blog erstellen. Ja, das ist nicht besonders neu oder aufregend, aber es ist auch etwas, das jeder konzeptionell versteht. Den vollständigen Quellcode für diese Anwendung finden Sie im beigefügten Download in der blog1 Mappe. Wir überspringen das package.json Datei, da sie mit Ausnahme des Namens identisch ist. Schauen wir uns stattdessen an app.js.
var express = erfordern ('express'); var app = express (); app.get ('/', Funktion (req, res) res.sendfile ('./ views / index.html');); app.get ('/ about', Funktion (req, res) res.sendfile ('./ views / about.html');); app.get ('/ article', Funktion (req, res) res.sendfile ('./ views / article.html');); App.listen (3000); Eines der ersten Dinge, die Sie bemerken, ist, dass wir von der Website gewechselt sind senden api zu Datei senden. Während wir große HTML-Strings in unsere einbinden konnten app.js Datei, das würde ziemlich schnell unordentlich werden. Wir haben drei Wege für diese Anwendung. Eine für die Homepage, eine für eine "Über" -Seite und eine für einen Artikel. Normalerweise würde die Artikelseite einen Blogeintrag darstellen, aber im Moment halten wir die Dinge einfach.
Der HTML-Code für unsere Seiten ist ebenfalls recht einfach. Hier ist die Startseite:
Startseite Blog!
Beachten Sie, dass es hier noch nichts Besonderes gibt. Es ist reines statisches HTML, das von der Express-Anwendung unverändert zurückgegeben wird. Sowohl die Info- als auch die Artikelseite sind außerhalb von Änderungen am Titel und identisch h1 Werte.
Starten Sie dies erneut über die Befehlszeile und öffnen Sie Ihren Browser. (Übrigens: Einer der häufigsten Fehler, die ich beim ersten Node-Lernen gemacht habe, war das Vergessen meiner vorherigen Demos. Wenn Sie die letzte Anwendung noch ausführen, wird Port 3000 festgehalten. Entweder töten Sie sie oder verwenden Sie einen anderen Port.) Anwendung.) Sie sollten in der Lage sein, diese einfache Anwendung mit ein paar einfachen Klicks zu durchsuchen.
Lassen Sie uns jetzt von statisch zu dynamisch wechseln.
Express unterstützt eine Vielzahl von Templating-Engines. Template Engines sind wie viele Dinge in der Technologiewelt - eine Stufe niedriger als Religion und Politik. Die Express-Befehlszeile kann Unterstützung für Jade, EJS, JSHTML und Hogan hinzufügen. Laut der Express-Dokumentation funktioniert jede Templating Engine, die einer bestimmten Signatur entspricht, damit. Sie empfehlen auch, die Bibliothek „consolate.js“ auf eine Liste der unterstützten Vorlagenmodule zu überprüfen.
Ich persönlich bin ein großer Fan von Handlebars (handlebarsjs.com). Ich habe es in vielen Client-seitigen Anwendungen verwendet und es war für mich selbstverständlich, auf der Serverseite zu verwenden. Um Handlebars verwenden zu können, müssen Sie eine Wrapperbibliothek namens hbs installieren. Fügen wir dies unserer Anwendung hinzu.
"name": "blog2", "description": "Blog-App", "Version": "0.0.1", "Abhängigkeiten": "express": "3.x", "hbs": "*"
Jetzt aktualisieren wir unsere app.js um diese Engine zu benutzen:
var express = erfordern ('express'); var app = express (); var hbs = erfordern ('hbs'); app.set ('view engine', 'html'); app.engine ('html', hbs .__ express); app.get ('/', Funktion (req, res) res.render ('index');); app.get ('/ about', Funktion (req, res) res.render ('about');); app.get ('/ article', Funktion (req, res) res.render ('article');); App.listen (3000); Wir haben hier ein paar wichtige Dinge getan. Um Handlebars verwenden zu können, laden wir die HBS-Wrapperbibliothek in (via request). Dann müssen wir Express mitteilen, dass es verwendet werden soll. Standardmäßig arbeitet Handlebars mit Dateien, die eine Erweiterung enthalten, die der jeweiligen Engine entspricht. In unserem Fall, etwas.hbs. Wir können Express jedoch dazu anweisen, HTML-Dateien mit dem Code als dynamisch zu behandeln "view engine" Direktive sehen Sie oben. Dies ist nicht erforderlich, aber ich arbeite lieber mit HTML-Dateien. Mein Editor kann dann schönere Codehinweise und Syntaxhervorhebung bereitstellen. Das eigentliche Laden des Motors erfolgt dann über app.engine.
Schließlich wechseln die Routen alle auf die Neue machen Methode. Express verwendet standardmäßig den Ordner "Ansichten", sodass wir den Ordner deaktivieren können. Da Express auch die Erweiterung kennt, die wir bevorzugen, können wir das auch vergessen. Im Wesentlichen, res.render ('etwas') ist gleichbedeutend damit, Express zu suchen Ansichten / etwas.html, parsen Sie es basierend auf den Regeln unserer Templating Engine und geben Sie es an den Browser zurück.
Sie finden dieses Beispiel in der blog2 Ordner im angehängten Quellcode. Wie ich schon sagte, ich mache gerne kleine Schritte, also empfehle ich, obwohl wir eigentlich nichts Dynamisches tun, es über die Kommandozeile hochzufahren und sicherzustellen, dass Sie die Website trotzdem durchsuchen können.
Da wir jetzt dynamische Vorlagen unterstützen, können wir sie tatsächlich dynamisieren. Da wir ein Blog erstellen, sollten Sie Unterstützung für das Auflisten einer Gruppe von Blogeinträgen auf der Startseite hinzufügen und es Ihnen ermöglichen, eine Verknüpfung zu einer bestimmten Blog-Engine herzustellen. Während wir eine Verbindung zu MySQL oder Mongo aufbauen könnten, erstellen wir einen statischen Datensatz sowie eine einfache Wrapperbibliothek. Hier ist ein blog.js Datei, die sowohl zum Abrufen von Einträgen als auch zum Abrufen von Einträgen dient.
var entries = ["id": 1, "title": "Hello World!", "body": "Dies ist der Körper meines Blogeintrags. Sooo aufregend.", "Published": "02.06.2013 ", " id ": 2," title ":" Eier zum Frühstück "," body ":" Heute hatte ich Eier zum Frühstück. Sooo aufregend. "," veröffentlicht ":" 6/3/2013 ", "id": 3, "title": "Beer is Good", "body": "News Flash! Beer ist super!", "veröffentlicht": "6/4/2013", "id": 4 , "title": "Mean People Suck", "body": "Leute, die gemein sind, sind weder nett noch lustig, um herumzuhängen.", "Published": "6/5/2013", "id": 5, "Titel": "Ich verlasse die Technologie X und du interessierst dich", "Körper": "Lass mich einen Linkköder darüber schreiben, warum ich keine bestimmte Technologie mehr verwende.", "Published": "6 / 10/2013 ", " id ": 6," title ":" Helfen Sie meinem Kickstarter "," body ":" Ich möchte eine neue XBox One. Bitte finanzieren Sie meinen Kickstarter. "," Published ":" 6/12 / 2013 "]; exports.getBlogEntries = function () gibt Einträge zurück; exports.getBlogEntry = function (id) für (var i = 0; i < entries.length; i++) if(entries[i].id == id) return entries[i];
Normalerweise verfügen wir auch über Methoden zum Hinzufügen, Bearbeiten und Löschen. Dies ist jedoch für den Moment ausreichend. Schauen wir uns jetzt ein Update an app.js Datei, die diese Engine verwendet.
var express = erfordern ('express'); var app = express (); var hbs = erfordern ('hbs'); var blogEngine = required ('./ blog'); app.set ('view engine', 'html'); app.engine ('html', hbs .__ express); app.use (express.bodyParser ()); app.get ('/', Funktion (req, res) res.render ('index', title: "Mein Blog", Einträge: blogEngine.getBlogEntries ());); app.get ('/ about', Funktion (req, res) res.render ('about', title: "About Me");); app.get ('/ article /: id', Funktion (req, res) var entry = blogEngine.getBlogEntry (req.params.id); res.render ('article', title: entry.title, blog: Eintrag);); App.listen (3000); Lassen Sie uns die Updates einzeln angehen. (Diese Version finden Sie im blog3 ordner.) Zuerst laden wir unseren Motor mit einem schnellen Aufruf. Dies gibt uns die Möglichkeit, es anzurufen und Einträge zu erhalten. Möglicherweise bemerken Sie einen neuen Anruf BodyParser, Aber ignorieren Sie das erst einmal.
In unserem Homepage-Router haben wir ein zweites Argument an die Render-API übergeben. Das Argument ist ein Objekt mit zwei Schlüsseln, Titel und Einträge. Der Wert für title ist nur eine Zeichenfolge, aber Einträge nennen unsere blogEngine API. Hier werden die Dinge interessant. Alle Daten, die wir hier weitergeben, stehen unseren Vorlagen zur Verfügung. Abhängig von Ihrer Vorlagensprache können sich die Details zu Ihrer Verwendung ändern, aber Sie können sich die Startseite ansehen.
Blog!
#seingabenTitel
/jeder
Veröffentlicht: Published
Wenn Sie noch nie mit Lenkstangen gearbeitet haben, können Sie wahrscheinlich immer noch gut raten, was hier vor sich geht. Das #jeder Die Direktive wird über ein Array iterieren. Innerhalb des Blocks habe ich eine Kombination aus Handlebar-Token verwendet, die auf meine Blogdaten sowie HTML verweist, um eine einfache Liste von Blogeinträgen zu erstellen. Dies kommt aus einem ColdFusion-Hintergrund und ist sehr vertraut.
Ich wette, Sie fragen sich auch, wohin der Rest des HTML-Codes geht. Bei der Verwendung von Templating-Engines in Express erhalten Sie automatische Layout-Unterstützung. Das bedeutet, dass ich mit meinem Site-Design ein generisches Layout erstellen kann, und Express wird die Ausgabe einer bestimmten Seite darin einfügen. Konventionell wird dies aufgerufen layout.something wobei "etwas" die bestimmte Erweiterung ist, die Sie verwenden. Da wir HTML verwendet haben, wird dies einfach so sein layout.html:
Titel Karosserie
Ziemlich glatt, richtig? Die Info-Seite ist nicht interessant, also überspringen wir sie, schauen Sie sich aber die Artikelroute an. Es enthält jetzt ein Token, :Ich würde, in der URL. Express ermöglicht es uns, dynamische URLs zu erstellen, die dann den angeforderten Argumenten zugeordnet werden können. Sie werden feststellen, dass wir auf der Startseite Links definiert haben, die folgendermaßen aussehen: / article / id.
Theoretisch würden wir für jeden Blogeintrag, den wir haben, eine Route hinzufügen. Es ist jedoch viel besser, eine abstrakte Route zu erstellen, die jeder Anfrage dieser bestimmten Form entspricht. Um auf diesen Wert zugreifen zu können, fügen wir noch eine weitere hinzu, die BodyParser Linie, die wir zuvor definiert haben. (Diese spezielle Funktion stammt aus dem Connect-Framework und bietet eine große Hilfe bei der Unterstützung von Abfragezeichenfolgen und Formularkörpern. Fast jede Express-App möchte dies enthalten.)
Da wir am Ende der URL Zugriff auf den dynamischen Wert erhalten, können wir diesen einfach an den übergeben blogEngine Objekt und verwenden Sie das Ergebnis als Argument für die Ansicht.
Hier ist die article.html Datei:
Blog Titel
Veröffentlicht: blog.published blog.body
Jetzt haben wir eine wirklich dynamische, aber hässliche Anwendung. Hier ist unsere neue Homepage:
Und hier ist ein bestimmter Blogeintrag:
Lassen Sie uns unserer Anwendung etwas grundlegenderes Styling hinzufügen, um es ein bisschen schöner zu machen. Express bietet eine einfache Möglichkeit, statische Ressourcen wie Bilder, JavaScript-Bibliotheken und Stylesheets zu unterstützen. Durch die einfache Definition eines statischen Ordners wird jede Anforderung einer Datei mit diesem Ordner verglichen, bevor sie mit den Routen verglichen wird. Hier ist ein Beispiel aus der endgültigen Version unserer Blog-Engine (die Sie im finden können blog4 Mappe):
app.use (express.static ('public')); An diesem Punkt, wenn Sie es wünschen /foo.css, und die Datei foo.css existiert im Öffentlichkeit Ordner wird es zurückgegeben. Da meine Konstruktionskenntnisse so gut sind wie bei jedem anderen Entwickler, habe ich es mir leicht gemacht und eine Bootstrap-Kopie (http://twitter.github.io/bootstrap/) gekauft. Ich legte es und eine Kopie von jQuery in meine Öffentlichkeit Mappe.
Dann in meinem layout.html, Ich kann auf diese Ressourcen verweisen. Hier ist ein Beispiel für das Verlinken in bootstrap.css:
Express sucht nun automatisch nach dieser Datei in der Öffentlichkeit Mappe. Sie können mehrere statische Ordner wie diese haben und sogar benutzerdefinierte URL-Präfixe für sie einrichten. Das Ergebnis ist - umwerfend. (Ok, verglichen mit der ersten Version, es ist eine enorme Verbesserung!)
Die Startseite:
Und ein Artikel:
Möchten Sie mehr erfahren? Hier sind einige Links, die hilfreich sein können.
