Nodejs-Tutorial Teil 3: Die Startseite

Posted by in JavaScript, Nodejs

In Teil 2 dieses Tutorials haben wir gesehen, wie alle nötigen Komponenten installiert werden. Im dritten Teil, also diesem, werden wir eine einfache Startseite erstellen, die jedoch noch ohne Funktion sein wird.

Unter der Lupe: Die zentrale Datei app.js

Die Datei app.js ist das Herz der Applikation. Deswegen wird sie hier Stück für Stück erklärt.

Im ersten Teil werden einige Variablen initialisiert, die später noch gebraucht werden. Wichtig sind vor allem die letzten beiden Zeilen in denen die Routen der Webapplikation definiert werden. Für diese App ist nur die erste Route routes interessant, die von der Datei index.js kontrolliert wird. Das Thema Routing wird erst später vertieft.

Im nächsten Teil wird Express instanziiert und konfiguriert. Zuerst wird festgelegt, wo sich die Views (Jade-Templates) befinden und welche Engine für das Parsen verwendet werden soll. Die drittletzte Zeile weist Express an statische Inhalte wie Bilder aus dem Ordner public auszuliefern. Die letzten beiden Zeilen legen fest, welche Routen für welche Url zuständig sind. Die Url http://localhost:3000/helloworld würde zum Beispiel von routes übernommen, während http://localhost:3000/users/helloworld von users behandelt würde. Ich denke das Prinzip ist klar.

Wenn in unserer App eine Exception geworfen wird, dann wollen wir natürlich nicht, dass die App ihren Dienst einstellt, denn das würde bedeuten, dass sich mit ihr der ganze Server verabschiedet. Also brauchen wir handler die Fehlerfälle behandeln. Es gibt einen für den Entwicklungsfall und einen, falls der Code schon in Produktion läuft. Außerdem werden noch 404s abgefangen. Ohne weiter darauf einzugehen ist damit alles abgedeckt, was so auftreten kann.

Als in Nodejs gängige Praxis exportiert auch unsere app.js sich selbst als Modul, damit es überall im Code aufgerufen werden kann.

Route für Startseite

Als erste Fingerübung wird eine Startseite mit dem obligatorischen Hello, World! erstellt. Zur Erinnerung, es wird die Standardroute routes bearbeitet.

Diese finden wir unter routes/index.js, da das require diese Datei einbindet. So sieht sie aus

Offensichtlich macht sie nicht sehr viel. Zuerst wird wieder Express eingebunden und ein Router erstellt. Dann wirds aber schon interessant: Bei einem Aufruf von http://localhost:3000/ greift schon die mit get spezifierte Regel und führt die übergebene Funktion aus. Dem Result res des http-Requests wird das von Jade geparste Template index, das wir unter views/index.jade finden angehängt. Dieses erwartet eine Variable title, die mit übergeben werden muss. Das Ergebnis ist dann unsere bereits bekannte Express-Startseite.

Dummytemplate für Login

Das ist alles schön und gut soweit, doch eigentlich wollen wir eine Loginmaske erstellen. Um etwas über Routing zu lernen soll diese unter http://localhost:3000/login zu erreichen sein.

Dazu fügen wir den folgenden Code direkt über die letzte Zeile ein

Damit ist das Routing schon erledigt, und wir können unsere App neustarten. rufen wir http://localhost:3000/login auf, dann bekommen wir…eine Fehlermeldung, denn die View/Template gibt es noch nicht. Also erstellen wir kurzerhand die Datei login.jade im Ordner views.

Nach einem Neustart des Servers, sollte unter http://localhost:3000/login eine Seite mit dem Titel Login angezeigt werden.

Login-Template erweitern

Die Route ist gelegt, nur dem Template fehlt noch essentielle Funktionalität. Inputfelder für Name und Password und natürlich ein Einloggen-Button, sind die Grundausstattung, die wir dringend benötigen. Das Styling ist (noch) unwichtig. Das Template login.jade sieht am Ende so aus

Damit sind wir schon fertig. Der Aufruf von http://localhost:3000/login sollte schon das neue Template anzeigen. Noch ein paar Worte zu den Templates.

  • Templates können im laufenden Betrieb einfach ausgetauscht werden, da sie bei jeder Auslieferung neu geparst werden. Nur Änderungen am Code der Applikation erfordert einen Neustart des Servers.
  • Jade erkennt zusammenhängende Textblöcke aufgrund der Einrückung. Ich bevorzuge die Schreibweise mit 2 Leerzeichen pro Einrückungslevel, da im Gegensatz zu Tabs die Darstellung in fast allen Editoren damit nahezu identisch aussieht. Grundsätzlich ist es jedoch egal, ob Tabs oder Leerzeichen(egal wie viele) verwendet werden.

Wie gehts weiter?

In Teil 3 wurde näher auf das Routing der Webapplikation eingegangen und eine einfache Loginmaske erstellt. In Teil 4 werden wir uns ein bisschen mit dem Aufbau des Datenbankschemas beschäftigen. Denn obwohl MongoDB ein Vertreter der NoSQL-Zunft ist, sollte man sich auch hier Gedanken darüber machen, wie man seine Daten sinnvoll strukturiert. Anschließend fügen wir unseren ersten Benutzer in die Datenbank ein und bringen den Login dann auch zum Fliegen.