So erstellen Sie SPAs (Single Page Applications) mit NodeJS, SailsJS und DustJS in Ubuntu 14.04

Einführung

Node.js® * ist eine Plattform, die auf der JavaScript-Laufzeit von Chrome basiert, um auf einfache Weise schnelle, skalierbare Netzwerkanwendungen zu erstellen. Node.js verwendet ein ereignisgesteuertes, nicht blockierendes E / A-Modell, das es leicht und effizient macht und sich perfekt für datenintensive Echtzeitanwendungen eignet, die auf verteilten Geräten ausgeführt werden.
Sails * ist ein NodeJS-Framework für den Backend-Server. Basierend auf einem Model-View-Controller-Muster ermöglicht es die schnelle Entwicklung von Anwendungen. Sails verfügt über eine integrierte Integration für Web-Sockets für Echtzeit-Push-Nachrichten. Es verwendet Waterline ORM als Standard-ORM, wodurch es datenbankunabhängig wird. Mit anderen Worten, es ermöglicht Datenbankoperationen in einem Spektrum von SQL- und Nicht-SQL-Datenbanken. Am wichtigsten ist, dass Sails Ihrer Anwendung eine angemessene Struktur verleiht.
Dust * ist eine JavaScript-Template-Engine. Es erbt sein Aussehen von der ctemplate-Sprachfamilie und kann sowohl auf dem Server als auch im Browser asynchron ausgeführt werden.
SPA * steht für * Single Page Application *. Dies sind Anwendungen, die auf eine einzelne Webseite passen. Sobald die Site geöffnet ist, wird die Seite danach nicht mehr neu geladen. Das Ziel einer solchen Anwendung ist es, eine flüssige Benutzererfahrung zu bieten, indem die Ladezeit für Seiten verkürzt und einfache Übergänge zu verschiedenen Seiten bereitgestellt werden, genau wie bei Desktop-Apps.

In diesem Tutorial richten wir einen NodeJS-Server mit SailsJS als Framework für die Verwaltung unseres Codes ein. Wir werden DustJS für isomorphe Vorlagen verwenden, die sowohl auf dem Client als auch auf dem Server verwendet werden.

Tore

Unser Hauptziel ist es, sowohl auf dem Client als auch auf dem Server isomorphe (oder gleiche) Vorlagen zu verwenden. Das ist großartig, weil

Weniger Code zum Schreiben und Verwalten derselben Vorlagen auf Client und Server
Suchmaschine indexierbar, da jede Seite direkt vom Server abgerufen werden kann

Voraussetzungen

In diesem Tutorial wird davon ausgegangen, dass Sie ein Ubuntu 14.04 x64-Droplet erstellt haben. Es wurde mit 512 MB RAM getestet. + Sie benötigen außerdem einen Benutzer mit sudo-Zugriff, um die Pakete zu installieren.

Schritt 1 - Installieren der Software

Um native Addons von npm zu kompilieren und zu installieren, müssen Sie zunächst die Build-Tools installieren:

sudo apt-get install python-software-properties python g++ make

Installieren Sie dann NodeJs und NPM mit den folgenden Befehlen (aus dem PPA von * Chris Lea *):

sudo add-apt-repository ppa:chris-lea/node.js
sudo apt-get update
sudo apt-get install nodejs

Als nächstes installieren Sie + SailsJs +:

sudo npm -g install sails

Schritt 2 - Ein neues Segelprojekt erstellen

Erstellen Sie eine neue Anwendung:

sails new dustspa
cd dustspa

Sails erstellt das Verzeichnis + dustspa + mit der folgenden Struktur:

--config
--views
---api
--tasks
--assets
README
.gitignore
package.json
.sailsrc
app.js
Gruntfile.js

Suchen Sie die folgenden Zeilen in der Datei "+ package.json":

"dependencies": {
"sails": "~0.11.0",

Ändern Sie sie wie folgt:

"dependencies": {
    "dustjs-linkedin": "^2.5.1",
    "sails": "~0.11.0",

Der Staubcompiler wird zum Kompilieren von Staubvorlagen verwendet, um JavaScript-Vorlagen zu entstauben.

Installieren Sie als Nächstes die Pakete + dustjs + sowie die anderen Paketabhängigkeiten in der Datei + package.json +:

sudo npm install

Jetzt benutzen wir + sails lift + um den Server zu heben:

sails lift

Besuchen Sie ": 1337 +", um die Standardhomepage anzuzeigen. Stoppen Sie den Server mit ` Ctrl + C +`, wenn Sie fertig sind.

Schritt 3 - Einstellen der View Engine

Zuerst setzen wir die * View Engine * auf + dust +:

Ändern Sie in "+ config / views.js " " engine:" ejs "" in " engine:" dust "+":

nano ./config/views.js

Gehe zur Zeile:

   engine: 'ejs',

und ändere es in:

   engine: 'dust',

Nachdem die Änderungen vorgenommen wurden, drücken Sie "+ Strg + X +" (Speichern), "Y" (Dateinamen bestätigen) und "ENTER" (Speichern und Beenden).

Wir werden die obige Methode verwenden, um in Zukunft alle Dateien zu bearbeiten.

Schritt 4 - Layout erstellen

Der Inhalt von "+ layout.dust +" ist unsere Zielseite. Alle Anfragen werden auf dieser Seite für die erste Seite eingehen. Danach werden Anfragen am Frontend bearbeitet.

Erstellen Sie die Datei "+ layout.dust" im Ordner "+ views":

touch views/layout.dust

Kopieren Sie den folgenden HTML-Code in + layout.dust +:

layout.dust

<!DOCTYPE html>
<html>
<head>
 <title>Dust SPA</title>
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
</head>
<body>
 <div class="container">
   <div class="header">
     <nav>
       <ul class="nav nav-pills pull-right">
         <li role="presentation" class="active"><a href="#" class="links" data-template="home">Home</a></li>
         <li role="presentation"><a href="#" class="links" data-template="about">About</a></li>
         <li role="presentation"><a href="#" class="links" data-template="contact">Contact</a></li>
       </ul>
     </nav>
     <h3 class="text-muted">SPA - DustJS Templates, SailsJS Architecture</h3>
   </div>
   <br/>
   <div id="template">
     <h1>Partial Goes Here</h1>
   </div>
   <footer class="footer">
     <p>Styled by Bootstrap&copy;</p>
   </footer>
 </div>
</body>
</html>

Das HTML ist ziemlich einfach. Es verwendet:

Bootstrap zum Stylen.
Eine einfache Navigation für Navigationslinks.
+ <div id =" template "> … </ div> + wo unsere Vorlagen geladen werden

Als nächstes müssen wir die Ansicht für "+ / " in " routes.js" einstellen. Öffne + config / routes.js + und bearbeite es zu:

routes.js

'/': {
  view: 'layout'
   }

Heben wir nun den Server an (Wenn der Server bereits in Betrieb ist, drücken Sie Strg + C, um ihn anzuhalten.) Und überprüfen Sie unseren Fortschritt. Führen Sie diesen Befehl aus dem Verzeichnis + dust spa + aus (welches unser aktuelles Verzeichnis ist):

sails lift

Zeigen Sie mit Ihrem Browser auf den folgenden Ort: +: 1337 +

Wenn Sie die Seite sehen können, fahren wir fort. Wenn nicht, überprüfen Sie bitte die vorherigen Schritte. Außerdem funktionieren die Links an dieser Stelle nicht.

Schritt 5 - Partials erstellen

Erstellen Sie das Verzeichnis + partials + in + views + und wechseln Sie in dieses neue Verzeichnis:

mkdir views/partials
cd views/partials

Erstellen Sie die Dateien "+ home.dust ", " about.dust " und " contact.dust " im Verzeichnis " partials +" mit folgendem Inhalt:

home.dust

   <div class="jumbotron">
     <h1>Home Page
       {?home}<small class="pull-right">Visit Count: {home}</small>{/home}
     </h1>
     <p class="lead">This is the home page. Its actually a dust partial which will be replaced when we navigate away from the page. Only this partial will change while the rest of the page will not be reloaded. SPA Magic!</p>
     <p>
       <a class="btn btn-lg btn-success" href="http://linkedin.github.io/dustjs/" target="_blank" role="button">Check out DustJS</a>
       <a class="btn btn-lg btn-warning pull-right" href="http://sailsjs.org" target="_blank" role="button">Check out SailsJS</a>
     </p>
   </div>

about.dust

   <div class="panel panel-primary">
     <div class="panel-heading">
     <h1 class="panel-title">About Us
       {?about}<kbd class="pull-right">Visit Count: {about}</kbd>{/about}
     </h1>
     </div>
     <div class="panel-body">
       <h4>This is the About Us template. Its actually a dust partial which will be replaced when we navigate away from the page. Only this partial will change while the rest of the page will not be reloaded. SPA Magic!</h4>
       <br>
       <p>
         <a class="btn btn-lg btn-success" href="http://linkedin.github.io/dustjs/" target="_blank" role="button">Check out DustJS</a>
         <a class="btn btn-lg btn-warning pull-right" href="http://sailsjs.org" target="_blank" role="button">Check out SailsJS</a>
     </p>
     </div>
   </div>

contact.dust

   <div class="well">
     <h1 class="align-center">Show us some love and we'll get back to you !
       {?contact}<small class="pull-right">Visit Count: {contact}</small>{/contact}
     </h1>
     <hr/>
     <div class="input-group input-group-lg">
       <span class="input-group-addon" id="basic-addon1">@</span>
       <input type="text" class="form-control" placeholder="Email" aria-describedby="basic-addon1">
     </div>
     <br/>
     <p>
     <a class="btn btn-lg btn-success" href="#" role="button">Send Contact</a>
     </p>
   </div>

Schritt 6 - Vorlagen kompilieren

Staubschablonen müssen kompiliert werden, bevor sie im Frontend verwendet werden können.

Lass uns den + dust compiler + installieren:

sudo npm install -g dust-compiler

Wir behalten alle unsere kompilierten Vorlagen in "+ Assets / Templates". Wechseln Sie in das Hauptverzeichnis + dusts +:

cd ../..

Kompilieren Sie nun die + dust templates:

dust-compiler -s views/partials/ -d assets/templates/ --bootstrap --nonotify

Jetzt sollten Sie drei Dateien in Ihrem Ordner "+ assets / templates +" haben:

+ home.js +
+ about.js +
+ contact.js +

Jetzt haben wir alle erforderlichen Dateien.

Fügen Sie zuerst in + views / layout.dust + die + dust-js + Bibliotheken und Vorlagendateien in die + <body> + Tags am Ende ein:

layout.dust

<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/dustjs-linkedin/2.5.1/dust-core.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/dustjs-helpers/1.5.0/dust-helpers.min.js"></script>

<script type="text/javascript" src="/templates/home.js"></script>
<script type="text/javascript" src="/templates/about.js"></script>
<script type="text/javascript" src="/templates/contact.js"></script>

Danach müssen wir ein Skript hinzufügen, um Linkklicks zu erfassen und die erforderliche Vorlage zu rendern. Erstelle + assets / js / click Handler.js mit folgendem Inhalt:

clickHandler.js

   (function () {

 var links = document.getElementsByClassName("links"),
 templateDiv = document.getElementById("template"),
 nav = document.querySelector('nav > ul'),
 clicked = false, viewCount = { home: 2, about: 1, contact: 1 };

 function clickHandler(e) {
   var target = event.target,
   templateName = this.getAttribute("data-template");
   if(clicked) {
     clicked.removeAttribute('class');
   }
   else {
     nav.querySelector('.active').removeAttribute('class');
   }
   target.parentElement.setAttribute('class','active');
   clicked = target.parentElement;

   dust.render(templateName, viewCount, function (err, out) {
     if(err) console.log('Error:',err);
     else {
       viewCount[templateName]++;
       templateDiv.innerHTML = out;
     }
   });
 };

 for(var i = 0; i < links.length; i++){
   links[i].addEventListener('click', clickHandler, false);
 }

})();

Das obige Skript ist sehr einfach. Es macht Folgendes:

Erfasst Klickereignisse auf Links
Extrahiert den Vorlagennamen für einen Link aus dem Attribut + data-template +
Stilisiert den angeklickten Link
Rendert die Vorlage mit der Funktion + dust.render + und übergibt ein Objekt + viewCount + (kann alles enthalten, hier enthält es die Anzahl der Aufrufe)

Verweisen Sie auf diese neue "+ click Handler.js" -Datei, indem Sie die Datei "+ views / layout.dust" bearbeiten und ganz am Ende die folgenden Zeichen in die Tags "+ <body> +" einfügen:

<script type="text/javascript" src="/js/clickHandler.js"></script>

Schließlich müssen wir "+ layout.dust" im "+ views" -Verzeichnis bearbeiten.

Ändern Sie das + <div id =" template "> … </ div> + in + views / layout.dust + zu:

layout.dust

<div id="template">
 {> "partials/home"/}
</div>

Was bewirkt die obige Änderung ?! Dies ist * Template Reuse *. Die View-Engine "+ dust.js" ersetzt "+ {>" partials / home "/} " durch den Inhalt der Datei " view / partials / home.dust +".

Wie wird diese Vorlage wiederverwendet? Eine kompilierte Version dieser Vorlage (die wir mit + dust-compiler + kompiliert haben) befindet sich in + assets / templates / home.js +. Diese kompilierte Vorlage wird später in ein Skript-Tag aufgenommen. Sobald eine Vorlage mit einem "+ <script src =" / templates / home.js "/> " -Tag eingefügt wurde, wird sie (die Vorlage) automatisch zum " dust.cache " -Objekt im " frontend " hinzugefügt . Um diese Vorlage erneut zu rendern, verwenden wir ` dust.render (" home ", obj, callbackFunction) `. Sie können den Code in der Datei ` assets / js / click Handler.js` überprüfen, um den Code besser zu verstehen.

Eine Staubschablone mit dem Namen "+ xxx " wird in einer Datei mit dem Namen " xxx.dust " erstellt. Sie können mehrere ` .dust ` Dateien haben und eine dust.js-Vorlage als Teil einer anderen referenzieren. Dies ist die Grundlage für „Komponenten“ oder wiederverwendbare Vorlagen für Aufgaben wie eine gemeinsame Kopf- und Fußzeile auf mehreren Seiten. Beachten Sie, dass die Dateierweiterung " .dust " hier in Beispielen verwendet wird, " .tl +" jedoch auch häufig verwendet wird. Da es nur auf den Erstellungsprozess ankommt, können Sie jede Erweiterung verwenden, die für Sie funktioniert.

Die Teilreferenzsyntax + {> name /} + unterstützt auch Pfade, sodass Sie eine Vorlage unter einem Pfad wie + shared / header.dust + und als `+ {>" shared / header "/} + referenzieren können `. Auf diese Weise können Partials mithilfe von Verzeichnissen in bibliotheksähnlichen Strukturen organisiert werden.

Weitere Informationen zu Partials finden Sie unter github.

Ihr endgültiges "+ layout.dust +" sollte so aussehen:

layout.dust

<!DOCTYPE html>
<html>
<head>
 <title>Dust SPA</title>
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
</head>

<body>
 <div class="container">
   <div class="header">
     <nav>
       <ul class="nav nav-pills pull-right">
         <li role="presentation" class="active"><a href="#" class="links" data-template="home">Home</a></li>
         <li role="presentation"><a href="#" class="links" data-template="about">About</a></li>
         <li role="presentation"><a href="#" class="links" data-template="contact">Contact</a></li>
       </ul>
     </nav>
     <h3 class="text-muted">SPA - DustJS Templates, SailsJS Architecture</h3>
   </div>
   <br/>
   <div id="template">
     {> "partials/home"/}
   </div>
   <footer class="footer">
     <p>Styled by Bootstrap&copy;</p>
   </footer>
 </div>

 <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/dustjs-linkedin/2.5.1/dust-core.min.js"></script>
 <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/dustjs-helpers/1.5.0/dust-helpers.min.js"></script>
 <script type="text/javascript" src="/templates/home.js"></script>
 <script type="text/javascript" src="/templates/about.js"></script>
 <script type="text/javascript" src="/templates/contact.js"></script>
 <script type="text/javascript" src="/js/clickHandler.js"></script>
</body>

</html>

Schritt 7 - Testen der App

Heben Sie den Server an:

sails lift

Zeigen Sie mit Ihrem Browser auf Folgendes: "+: 1337 +"

Testen Sie SPA, indem Sie auf die drei oberen Links klicken: * Home *, * About *, * Contact *

Fazit

Genial ! Wir haben erfolgreich eine isomorphe Website erstellt, die sowohl auf dem Client als auch auf dem Server dieselbe Vorlagenverwendung zuließ. + Wir haben eine Single-Page-Application-Website (SPA-Website) erstellt und uns auch mit der Verwendung des SailsJS-Frameworks vertraut gemacht.

Externe Links

Wenn Sie mehr über die verwendeten Technologien erfahren möchten, können Sie die unten aufgeführten Links besuchen.

TOC

So erstellen Sie SPAs (Single Page Applications) mit NodeJS, SailsJS und DustJS in Ubuntu 14.04

Einführung

Tore

Voraussetzungen

Schritt 1 - Installieren der Software

Schritt 2 - Ein neues Segelprojekt erstellen

Schritt 3 - Einstellen der View Engine

Schritt 4 - Layout erstellen

Schritt 5 - Partials erstellen

Schritt 6 - Vorlagen kompilieren

Schritt 7 - Testen der App

Fazit

Externe Links

Related