Sails.js ist ein aufstrebendes Node.js-Framework mit Fokus auf Freiheit und intelligenten Standardeinstellungen. In diesem Artikel werfen wir einen Blick auf einige der Datenfunktionen, die Sails standardmäßig bereitstellt, um komplexe Apps einfach erstellen zu können.

Warum Segel anders ist als andere Frameworks

Der Grund, sich für Sails zu entscheiden, wird am besten von Mike McNeil, dem Erfinder von Sails, ausgedrückt: "Sails wurde aus der Notwendigkeit geschaffen". Viele Frameworks, die Sie in der Umgebung sehen, sind fast für den akademischen Bereich konzipiert. Diese Frameworks fördern normalerweise Best Practices und schaffen eine Plattform für Entwickler, um Dinge schneller oder besser zu erstellen.

Segel hingegen wurde für die Produktion entwickelt. Es versucht nicht, Sie mit einer neuen Syntax oder Plattform zu füttern. Es ist eine solide Basis für die schnelle Erstellung von 'Client-Work'. Der Kontrast kann geringfügig sein, es gibt jedoch einige Unterschiede.

Um zu veranschaulichen, worauf ich mich beziehe, wollen wir uns Meteor ansehen. Meteor ist heute wahrscheinlich die führende JS-Plattform, aber es ist ein gutes Beispiel für ein Framework, um ein Framework zu schaffen. Nun, das ist keine schlechte Sache, ich bin ein großer Unterstützer von Meteor. Ich meine, sie wollten einen Rahmen aufbauen und sie haben gute Arbeit geleistet. Mike hingegen wollte die Arbeit des Kunden beschleunigen . Segel ist nur ein Mittel, um ein Ziel zu erreichen.

In Meteor wird so ziemlich alles abstrahiert und Sie verwenden JavaScript und die Meteor-API, um alles zu codieren. Während Sails keine neue Plattform sein soll, ist nichts versteckt.

Es ruht auf Socket.io und dem populären Express-Framework, und Sie haben Zugriff auf sie als Ganzes. Beginnen Sie den Unterschied zu erkennen??

Da Sails zunächst auf die Produktion ausgerichtet ist, bietet Sails mehrere Optionen für Skalierung und Sicherheit.

Es gibt viel zu besprechen, aber in diesem Artikel möchte ich mich darauf konzentrieren, wie Sails mit Daten umgeht und wie Sie einige der fortschrittlicheren Funktionen von Sails nutzen können, um wirklich coole Aktionen auszuführen.

Installation

Falls Sie Sails noch nicht installiert haben, können Sie dies über NPM tun, indem Sie Folgendes ausführen:

sudo npm install -g segelt

Socket.io & Express

Lassen Sie uns jetzt ein wenig über Socket.io und Express sprechen, bevor wir in Sails einsteigen. Es gibt eine gute Premium-Serie auf Express von Andrew Burgess, wenn Sie interessiert sind, aber ich werde die relevanten Grundlagen dieser beiden Bibliotheken hier durchgehen:

Socket.io

Socket.io ist eine Pub / Sub-Bibliothek, die sowohl auf dem Server als auch auf dem Client ausgeführt wird und es ihnen ermöglicht, über Web-Sockets zu sprechen.

Ein kurzes Beispiel könnte ungefähr so ​​aussehen:

// Code für Server var io = erfordern ("socket.io"); io.sockets.on ("Verbindung", Funktion (Socke) sock.emit ("welcomeMessage", hello: "world"); io.listen (80);

Dieser Code beginnt mit der Anforderung von socket.io Bibliothek, die auf eine Verbindung wartet, und wenn ein anderer Socket eine Verbindung herstellt, sendet er eine Nachricht an die Willkommensnachricht Ereignis und schließlich einige JSON übergeben.

Als nächstes schreiben Sie auf dem Client so etwas wie:

// Code für Client var sock = io.connect ('http: // localhost'); sock.on ('welcomeMessage', function (json) // Ereignis empfangen empfangen);

Hier verbinden wir uns mit dem Server und warten darauf Willkommensnachricht Ereignis, das wir gerade erstellt haben. Wie Sie sehen, handelt es sich um einen relativ einfachen Publish / Subscribe-Server, der bidirektional ist (der Client könnte auch Nachrichten für den Server ausgeben)..

Nun sehen wir uns Express an:

ausdrücken

Die einfachste Form einer Expressroute könnte wie folgt aussehen:

app.get ('/ users', Funktion (req, res) res.send ("Hallo von '/ users'!"););

Dies definiert eine einfache Route, so dass ein Benutzer an die Adresse Ihrer Site geht und versucht, auf die Website zuzugreifen / Benutzer Auf dieser Seite wird die Nachricht angezeigt "Hallo von '/ Benutzer'!".

So ist Express ein Framework für die Abwicklung von HTTP-Anforderungen und Socket.io ist eine Websocket-Kommunikationsbibliothek. Was das Sails-Team jedoch getan hat, ist die interne Zuordnung aller Express-Routen zu Socket.io. Das heißt, Sie können jede der HTTP-Routen über Web-Sockets aufrufen.

Das ist ziemlich cool! Es fehlt jedoch immer noch ein Teil des Puzzles, und das sind die Sails Blueprints.

Mit Sails können Sie Modelle wie in anderen Frameworks generieren. Der Unterschied besteht darin, dass Sails auch eine produktionsbereite RESTfull-API für sie generieren kann. Dies bedeutet, wenn Sie ein Modell mit dem Namen 'Benutzer'Sie können sofort RESTfull-Abfragen auf dem' ausführen./ Benutzer'Ressource ohne Codierung erforderlich.

Wenn Sie mit RESTful-APIs noch nicht vertraut sind, können Sie einfach auf Daten zugreifen und CRUD-Vorgänge verschiedenen HTTP-Methoden zuordnen.

So ein ERHALTEN Anfrage zu '/ Benutzer'wird alle Benutzer bekommen, a POST Anfrage erstellt einen neuen Benutzer usw.

Was bedeutet das alles??

Dies bedeutet, dass wir eine vollständige RESTfull-API haben, die über Sails auf Socket.io abgebildet ist, ohne eine einzige Codezeile zu schreiben!

Aber warum können Sockets Daten besser abrufen als eine Ajax-Anfrage? Neben einem schlankeren Protokoll bleiben Sockets für die bidirektionale Kommunikation offen, und Sails hat dies genutzt. Sails übergibt Ihnen nicht nur die Daten, sondern abonniert automatisch Updates für diese Datenbank. Wenn etwas hinzugefügt, entfernt oder aktualisiert wird, erhält Ihr Client eine Benachrichtigung über den Web-Socket, um Sie darüber zu informieren.

Deshalb ist Sails so großartig!

Segel + Rückgrat

Das nächste Thema, das ich behandeln möchte, ist die Backbone-Integration. Wenn Sie kein JavaScript-Framework verwenden, machen Sie es falsch.

In diesem Sinne sind Sails und Backbone das perfekte Paar. Backbone ist wie Sails extrem unauffällig, alle Funktionen sind verfügbar, überschreibbar und optional.

Wenn Sie Backbone schon einmal verwendet haben, wissen Sie vielleicht, dass es direkt mit REST-APIs verbunden ist. Daher können Sie die Daten im Frontend mit der Sails-Anwendung synchronisieren.

Aber genug für jetzt, lassen Sie uns einen Blick darauf werfen, indem Sie eine grundlegende Chat-Anwendung erstellen. Öffnen Sie zunächst ein Terminalfenster und geben Sie Folgendes ein:

segelt neue ChatApp-CD ChatApp-Segel generieren Modellbenutzer Segel generieren Modellnachrichten Segel generieren Controllernachrichten Segel generieren Controller-Main

Dadurch wird eine neue App erstellt und einige Dateien für uns generiert. Sie können von oben sehen, es gibt zwei verschiedene Ressourcen, die Sie generieren können. Modelle und Steuerungen. Wenn Sie mit dem MVC-Entwurfsmuster vertraut sind, sollten Sie wissen, um was es sich hierbei handelt, aber kurz gesagt, sind Ihre Daten Ihre Daten und die Controller halten Ihren Logikcode. Wir benötigen also zwei Sammlungen, eine für die Benutzer und eine für die Nachrichten.

Als nächstes brauchen wir für die Controller einen, um die Seitenrouten zu handhaben, ich nannte es 'Main', dann haben wir einen zweiten Controller namens'Mitteilungen'. Nun wundern Sie sich vielleicht, warum ich einen Controller mit dem gleichen Namen wie unseren erstellt habe Mitteilungen Modell? Wenn Sie sich erinnern, sagte ich, dass Sails eine REST-API für Sie erstellen kann. Wenn ein leerer Controller mit demselben Namen wie ein Modell erstellt wird, kann Sails darauf zurückgreifen und eine REST-API für die entsprechende Ressource erstellen.

Wir haben also einen Controller für unsere entwickelt Mitteilungen Modell, aber es ist nicht erforderlich, ein Modell für das Benutzermodell zu erstellen. Ich habe es einfach weggelassen. Und das ist alles, um Modelle und Controller zu erstellen.

Als Nächstes wollen wir einige Routen einrichten.

Routen

Routen sind immer ein sicherer Ort, um anzufangen, da Sie normalerweise eine gute Vorstellung davon haben, welche Seiten erstellt werden sollen.

Also mach das auf routen.js Datei, die in der Konfig Ordner kann es auf den ersten Blick ein wenig überwältigend aussehen, aber wenn Sie alle Kommentare entfernen und die folgenden Routen hinzufügen, werden Sie mit etwas wie dem folgenden belassen:

module.exports.routes = '/': Controller: 'main', Aktion: 'Index', '/ signup': Controller: 'main', Aktion: 'signup', '/ login':  Controller: 'main', Aktion: 'login', '/ chat': controller: 'main', action: 'chat';

Wir haben eine Homepage, eine Chat-Seite und zwei Seiten, um sowohl die Anmelde- als auch die Anmeldeseite zu bearbeiten. Ich habe alle in den gleichen Controller gestellt, aber in Sails können Sie so viele Controller erstellen, wie Sie möchten.

Modelle

Als Nächstes betrachten wir das generierte Mitteilungen Modell, das unter "api> models> Messages.js". Wir müssen unserem Modell die erforderlichen Spalten hinzufügen. Nun ist dies nicht unbedingt erforderlich, aber es werden einige Hilfsfunktionen für uns erstellt, die wir verwenden können:

// Messages Model module.exports = Attribute: Benutzer-ID: 'INT', Benutzername: 'STRING', Nachricht: 'STRING';

Für die Mitteilungen Modell beginnen wir mit dem Ich würde des Benutzers, zu dem diese Nachricht gehört, a Nutzername Wir müssen dies also nicht separat abfragen, und dann die tatsächliche Botschaft.

Füllen Sie nun das Benutzermodell aus:

// Users Model module.exports = Attribute: Benutzername: 'STRING', Kennwort: 'STRING';

Und das ist es, wir haben nur die Nutzername und Passwort Attribute. Der nächste Schritt ist das Erstellen unserer Routenfunktionen in der MainController.

Controller

Also mach das auf MainController, welche finden Sie unter "api> controller> MainController.js". Beginnen wir mit der Erstellung einer Funktion für jede der oben definierten Routen:

var MainController = index: function (req, res) , Anmeldung: function (req, res) , login: function (req, res) , Chat: function (req, res) ; module.exports = MainController;

Wenn Sie mit Express vertraut sind, werden Sie froh sein, dass diese Funktionen Standard-Expressroutenfunktionen sind. Sie erhalten zwei Variablen, req für die HTTP-Anfrage und res die Antwort erstellen.

Dem MVC-Muster folgend bietet Sails eine Funktion zum Rendern von Ansichten. Die Homepage benötigt nichts Besonderes, also lassen Sie uns einfach die Ansicht rendern.

index: function (req, res) res.view (); ,

Segel neigen eher zur Konvention als zur Konfiguration, also beim Aufruf res.view (); Segel sucht nach einer Ansichtsdatei (mit einem .ejs Erweiterung standardmäßig) mit folgendem Muster: 'Ansichten> ControllerName> MethodName.ejs'. Für diesen Anruf sucht er also nach 'ansichten> main> index.ejs'. Es ist auch erwähnenswert, dass diese Ansichten nur die Ansichtsspezifischen Teile der Seite enthalten. Wenn Sie einen Blick darauf werfenansichten> layout.ejs', in der Mitte sehen Sie einen Anruf für <%- body %>, Hier wird Ihre Ansichtsdatei eingefügt. Standardmäßig verwendet es diese 'layout.ejs'Datei, aber Sie können andere Layoutdateien verwenden, indem Sie einfach den Layoutnamen in die res.view () Funktion unter der Eigenschaft 'layout'. Zum Beispiel: 'res.view (layout: "other.ejs");'.

Ich werde die Standard-Layoutdatei mit einer kleinen Anpassung verwenden. Ich werde jQuery, Backbone und Underscore hinzufügen. Also in der 'layout.ejs'Datei direkt vor dem Schließen Tag, fügen Sie die folgenden Zeilen hinzu:

Damit sind wir nun bereit, die Homepage zu erstellen.

Die Startseite

Erstellen wir einen neuen Ordner in der Ansichten Ordner benannt Main, und innerhalb unseres neuen Main Ordner erstellen wir eine neue Datei mit dem Namen 'index.ejs'.

In der Datei erstellen wir einfach ein Anmelde- und Anmeldeformular:

Code-Chat
 
 
Anmeldung
   Anmeldung 
 
 
Anmelden
    Anmelden 

Ganz einfach, nur das Wesentliche.

Die Login- und Registrierungsbereiche

Als Nächstes müssen wir eine kleine JS hinzufügen, damit diese mit dem Server kommuniziert. Jetzt ist dies nicht spezifisch für Sails. Wir senden einfach eine AJAX-Anfrage über jQuery an den Sails-Server.

Dieser Code kann entweder auf der Seite selbst enthalten sein oder über eine separate JS-Datei geladen werden. Der Einfachheit halber werde ich es einfach auf die gleiche Seite unten setzen:

Dies ist alles nur eine Standard-Version von JS und jQuery. Wir überwachen das Klickereignis auf der Anmeldeschaltfläche, stellen sicher, dass die Felder Benutzername und Kennwort ausgefüllt sind, und senden die Daten in das Feld '/Anmeldung' Route. Wenn die Anmeldung erfolgreich ist, leiten wir den Benutzer zur Chat-Seite weiter. Andernfalls wird der vom Server zurückgegebene Fehler angezeigt.

Als Nächstes erstellen wir dasselbe für den Anmeldebereich:

$ ("# signupButton"). click (function () var Benutzername = $ ("# signupName"). val (); var password = $ ("# signupPassword"). val (); var confirmPassword = $ (" #signupConfirmPassword "). val (); if (Benutzername & Kennwort) if (Kennwort === ConfirmPassword) $ .post ('/ signup', Benutzername: Benutzername, Kennwort: Kennwort, Funktion () Fenster. location = "/ chat";) .fail (Funktion (res) alert ("Fehler:" + res.getResponseHeader ("error"));); else alert ("Passwörter stimmen nicht überein") ; else alert ("Benutzername und Passwort sind erforderlich"););

Dieser Code ist fast identisch, so sehr, dass Sie wahrscheinlich den gesamten Ajax-Teil in eine eigene Funktion abstrahieren können, aber für dieses Tutorial ist es in Ordnung.

Jetzt müssen wir zu unserem zurückkehren.MainController'und diese beiden Routen handhaben, aber bevor wir das tun, möchte ich ein Knotenmodul installieren. Wir müssen das Passwort mit einem Hash versehen, da es sich um Klartextpasswörter handelt nicht eine gute Sache, nicht einmal zur Demonstration! Ich habe ein schönes Modul mit dem Namen "password-hash" von David Wood gefunden, das gut funktionieren wird.

Um es zu installieren, gehen Sie einfach von Ihrem Terminal zum Stammverzeichnis Ihrer Sails-App und geben Sie Folgendes ein: npm install password-hash.

Sobald das installiert ist, öffnen wir die MainController und implementieren Sie die zwei benötigten Routen. Lass uns beginnen mit Anmelden:

Anmeldung: function (req, res) var Benutzername = req.param ("Benutzername"); var password = req.param ("Kennwort"); Users.findByUsername (Benutzername) .done (Funktion (err, usr) if (err) res.send (500, Fehler: "DB-Fehler"); else if (usr) res.send (400, error: "Benutzername bereits vergeben"); else var hasher = required ("password-hash"); password = hasher.generate (password); Users.create (Benutzername: Benutzername, Passwort: Passwort). done (Funktion (Fehler, Benutzer) if (Fehler) res.send (500, Fehler: "DB-Fehler"); else req.session.user = Benutzer; res.send (Benutzer); );); 

Es ist ein wenig ausführlich, aber wir müssen hier nur den Benutzernamen und das Passwort aus der POST-Anforderung lesen und sicherstellen, dass der Benutzername nicht bereits vergeben ist. Sie können sehen, dass ich auch den soeben installierten Passwort-Hasher verwende. Es ist sehr einfach zu verwenden. Übergeben Sie das Passwort einfach in die Generatormethode, und es wird mit einem zufälligen Salt-Hash-Hash ausgeführt.

Erwähnenswert ist auch, dass wir an jeder möglichen Stelle, an der ein Fehler oder ein Problem auftreten kann, einen HTTP-Fehlercode zurücksenden und eine Nachricht über einen benutzerdefinierten Header mit dem Namen ''Error'Wenn Sie sich erinnern, werden wir auf der Indexseite in einer Warnmeldung angezeigt.

Ein weiterer bemerkenswerter Punkt ist die Tatsache, dass wir eine 'magische' Funktion mit dem Namen 'verwenden.findByUsername', das ist möglich, weil wir eine haben Nutzername Spalte in unserem Benutzermodell.

Schließlich können Sie unten sehen, ob alles gut gelaufen ist. Wir speichern den Benutzer in einer Sitzungsvariablen und geben ihn mit einem Standardstatuscode von 200 zurück, der jQuery mitteilt, dass die AJAX-Anforderung erfolgreich war.

Als nächstes schreiben wir die Login-Funktion:

login: function (req, res) var Benutzername = req.param ("Benutzername"); var password = req.param ("Kennwort"); Users.findByUsername (Benutzername) .done (Funktion (err, usr) if (err) res.send (500, Fehler: "DB-Fehler"); else if (usr) var hasher = required ( "password-hash"); if (hasher.verify (password, usr.password)) req.session.user = usr; res.send (usr); else res.send (400, error: "Wrong Passwort "); else res.send (404, error:" User not found ");); 

Wieder ist dies dem vorherigen sehr ähnlich Anmelden Wenn wir diese Funktion suchen, suchen wir nach einem Benutzer mit demselben Benutzernamen, der aus dem Formular gepostet wurde. Wenn er einen findet, prüfen wir, ob das Passwort mit dem Hashwert übereinstimmt überprüfen Methode. Der Grund, warum wir das Passwort nicht einfach noch einmal hashen und an die Modelle weitergeben können finden Funktion ist, weil der Hasher ein zufälliges Salt verwendet, wenn wir also das Passwort erneut hashten, würde es mit etwas anderem gleich sein.

Der Rest des Codes ist derselbe; Wenn alles klappt, speichern wir den Benutzer in einer Sitzung und geben ihn zurück, andernfalls senden wir eine Fehlermeldung zurück.

Das Anmeldesystem ist nun abgeschlossen und wir können endlich mit der Erstellung der Chat-Funktion fortfahren.

Erstellen der Chat-Funktion

Da wir Backbone zum Abrufen der Nachrichten verwenden, ist die eigentliche Routenfunktion sehr einfach. Hier ist die komplette Chat-Funktion:

chat: function (req, res) if (req.session.user) res.view (Benutzername: req.session.user.username);  else res.redirect ('/'); 

Wir prüfen zunächst, ob der Benutzer angemeldet ist oder nicht. Wenn dies der Fall ist, wird die Ansicht geladen und der Benutzername wird an die Sitzung übergeben. Andernfalls wird auf die Startseite umgeleitet.

Jetzt erstellen wir eine neue Ansicht mit dem Namen 'chat.ejs'innerhalb der Main Mappe. Öffne es und lass uns ein einfaches Formular erstellen, um neue Nachrichten zu posten und ein div Container für die Anzeige aller von ihnen.

Herzlich willkommen <%= username %>
 
  Nachricht hinzufügen 
 
 

Für diese Ansicht haben wir nur ein paar Standard-HTML verwendet. Das einzige, was einer Erklärung bedarf, ist das <%= username %> Code, diese Art der Codierung ist nicht spezifisch für Sails, sondern die Syntax für EJS. Diese Syntax ist den kurzen Tags von PHP sehr ähnlich. <% ist das Äquivalent von in PHP und <%= ist das gleiche wie . Mit dem ersten EJS-Snippet können Sie Standard-JS-Code auf der Seite integrieren, während der zweite Code den darin enthaltenen Code ausgibt. Hier drucken wir nur den Benutzernamen aus, den wir vom Controller übergeben haben.

_.templateSettings = interpolieren: /\\(.+?)\\/g; var MessagesView = Backbone.View.extend (el: '#messagesContainer', initialize: function () this.collection.on ('add', this.render, this); this.render ();; template: _.Vorlage("
 Botschaft 
"), render: function () this. $ el.html (" "); this.collection.each (function (msg) this. $ el.append (this.template (msg.toJSON ())); , this)); var mView = new MessagesView (collection: messages);

module.exports = Funktion (req, res, next) if (req.session.user) var action = req.param ('action'); if (action == "create") req.body.userId = req.session.user.id; req.body.username = req.session.user.username;  Nächster();  else res.send ("Sie müssen angemeldet sein", 403); ;

module.exports.policies = '*': true, 'messages': 'MessagesPolicy';

Vorlage: _.template ("
 Nutzername :  Botschaft 
"),

var SailsCollection = Backbone.Collection.extend (sailsCollection: "", socket: null, sync: function (Methode, Modell, Optionen) var where = ; if (options.where) where = where: options. wo if (typeof this.sailsCollection === "string" && this.sailsCollection! == "") this.socket = io.connect (); this.socket.on ("connect", _.bind ( function () this.socket.request ("/" + this.sailsCollection, wobei _.bind (function (Benutzer) this.set (Benutzer);, this)); this.socket.on (") Nachricht ", _.bind (Funktion (msg) var m = msg.uri.split (" / "). pop (); if (m ===" create ") this.add (msg.data); else if (m === "update") this.get (msg.data.id) .set (msg.data); else if (m === "destroy") this.remove (this.get (msg.data.id));, this));, this)); else console.log ("Fehler: Modelle können nicht abgerufen werden, da sailsCollection der Eigenschaft nicht in der Auflistung festgelegt ist"); );

var wo = ; if (options.where) wo = wo: options.where

this.socket.on ("message", _.bind (function (msg) var m = msg.uri.split ("/"). pop (); if (m === "create") this. add (msg.data); else if (m === "update") this.get (msg.data.id) .set (msg.data); else if (m === "destroy") this.remove (this.get (msg.data.id));, this));