Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Code
  2. Web Development
Code

Práce s daty v Sails.js

by
Difficulty:IntermediateLength:LongLanguages:

Czech (Čeština) translation by Tereza Foretová (you can also view the original English article)

Sails.js je nahoru a nadcházející Node.js rámec, se zaměřením na inteligentní výchozí hodnoty a svobodu. V tomto článku budeme se podívat na některých funkcí plachty poskytuje out-of-the-box, pro snadné vytváření komplexní aplikace.


Proč je jiný než ostatní rámce plachty

Důvod, proč si vybrat plachty je nejlepší dát plachty tvůrce, Mike McNeil, "Plachty byla vytvořena z nutnosti". Mnoho rámců, které vidíte kolem, jsou postaveny téměř pro akademickou stránku věci, tyto rámce obvykle podporovat osvědčené postupy a vytvořit platformu pro vývojářům vytvářet věci rychlejší nebo lepší.

Plachty na straně druhé, byl vytvořen pro výrobu, to se nesnaží vás krmit, novou syntaxi nebo platformu, je to solidní základna pro vytváření "klient práce" s rychlostí. Kontrast může být decentní, ale existuje několik výrazných rozdílů.

Pro ilustraci, co mám na mysli, Pojďme se podívat na Meteor. Meteor je pravděpodobně vedoucí JS platforma kolem dnes, ale to je ukázkovým příkladem rámce, kvůli rámec. Teď to není špatná věc, já jsem velký zastánce z meteoru, co chci říct je, vydali se budovat rámec a udělali dobrou práci na to, Mike na straně druhé uvedené práce s klienty, aby rychleji. Plachty je jen prostředek k dosažení konce.

V Meteor skoro všechno je pryč abstraktně a všechno pomocí JavaScript plus Meteor API. Zatímco plachty není chtěl být novou platformu, tak nic není skryto.

Opírá se Socket.io a populární rámec Express, a máte přístup k nim v plném rozsahu, nativně. Začínáte vidět rozdíl?

Navíc vzhledem k tomu, plachty se zaměřuje na výrobu nejprve, je postaven s více možností pro změnu velikosti a bezpečnost.

Tam je hodně mluvit o tom, ale v tomto článku bych se chtěl zaměřit na jak plachty zpracovává data, a jak můžete využít některé z plachet pokročilejší funkce provést některé opravdu cool akce.


Instalace

V případě, že ještě nemáte intalled plachty, můžete tak učinit prostřednictvím NPM spuštěním:


Socket.IO & Express

Teď mluvme trochu o Socket.io a Express, než se dostaneme do plachty. Existuje řada dobře prémie na Express by Andrew Burgess, pokud budete mít zájem, ale povedu prostřednictvím příslušných základy obou těchto knihoven:

Socket.IO

Socket.IO je hospoda/sub/knihovna, která je spuštěna na serveru a v klientském počítači, a umožňuje jim mluvit prostřednictvím webových soketů.

Krátký příklad by mohl vypadat přibližně takto:

Tento kód začíná tím, že vyžaduje knihovnu socket.io naslouchání pro připojení, a pak když jiného připojení, odešle ho zprávu adresovanou welcomeMessage událostí a nakonec prochází podél některé JSON.

Dále na straně klienta by napsat něco jako:

Zde jsme se připojujete k serveru a poslouchání události welcomeMessage jsme právě vytvořili. Jak vidíte, je to poměrně jednoduché publikování / objednat server, který je obousměrná (klient mohl posílat zprávy na serveru).

Teď pojďme podívat na Express:

Express

Nejjednodušší forma Express trasy by mohla být něco jako:

To definuje jednoduchou cestu, aby když uživatel přejde na adresu vašeho serveru a pokusí o přístup ke stránce/Users, zobrazí se zpráva "Ahoj z ' / uživatelů!".

Takže Express je rámec pro zpracování požadavků HTTP a Socket.io je komunikační knihovna websocket. Co tým plachty udělali, je mapovat všechny Express trasy Socket.io interně. Co to znamená, můžete volat některý z HTTP prostřednictvím webových soketů.

Tak to je docela v pohodě! Ale je tu ještě jeden kus puzzle chybí a to je plány plachty.

Plachty umožňuje generovat modely stejně jako v jiných rámcích, rozdíl je v tom, plachty lze generovat také výrobu připravena spokojené API aby šel s nimi. To znamená, pokud generujete model s názvem "users" můžete okamžitě spustit spokojené dotazy ' / uživatelů prostředků bez kódování nezbytné.

Pokud jste nový na rozhraní RESTful API, to je jen způsob, jak přístup k datům, kde CRUD operace jsou mapovány na různé metody HTTP.

Takže GET požadavek na "/ uživatelé dostanou všechny uživatele, požadavek POST vytvoří nového uživatele, atd.

Tak co z toho všeho vyplývá?

To znamená, že máme k dispozici úplné rozhraní API spokojené namapovány na Socket.io přes plachty, bez napsat jediný řádek kódu!

Ale proč jsou soketů lépe na načítání dat pak žádosti Ajax? No kromě toho, že štíhlejší protokol, sokety zůstávají otevřené pro obousměrnou komunikaci a plachty využil tohoto. Nejenže bude plachty předávají data, ale to bude automaticky vás přihlásit k odběru aktualizací v této databázi, a pokaždé, když něco bude přidána, odstraněna, nebo aktualizován, váš klient obdrží oznámení prostřednictvím webové soketu, umožňujíce vám o tom vědět.

To je důvod, proč plachty je tak úžasné!


Plachty + páteřní

Další téma, které bych chtěl pokrýt je páteř integrace, protože pokud nepoužíváte JavaScript rámce, děláte to špatně.

S tímto na mysli plachty a páteř jsou dokonalý pár. Páteř, stejně jako plachty, je velmi nenápadný, všechny jeho funkce jsou k dispozici, schopen přepsáním a volitelné.

Pokud jste již používali páteř před, pak možná víte, spojuje nativně s REST API, takže po vybalení můžete synchronizovat data na front-end aplikace plachty.

Ale dost řečí pro teď, Podívejme se na to všechno v akci tím, že vytvoří základní chatovací aplikace. Chcete-li začít, otevřete okno terminálu a zadejte:

Tím vytvoříte novou aplikaci a generování některé soubory pro nás. Můžete vidět výše, existují dva různé zdroje, které můžete generovat; modely a řadiče. Pokud jste obeznámeni s návrhový vzor MVC, pak byste měli vědět, co to je, ale zkrátka, modely jsou vaše údaje a řadiče držet logiky kód. Budeme tedy potřebovat dvě kolekce, jeden pro uživatele a jeden pro zprávy.

Dále pro řadiče, potřebujeme jeden zpracování stránky cesty, jsem to nazval "hlavní", pak máme druhý řadič s názvem "zprávy". Teď možná vás zajímá, proč jsem vytvořil ovladače se stejným názvem jako náš model zprávy? No pokud si pamatujete, řekl jsem, že plachty lze vytvořit rozhraní REST API pro vás. Co se stane je, vytvořením prázdné řadiče se stejným názvem jako model, plachty bude vědět opět klesne a sestavení rozhraní REST API pro odpovídající prostředek.

Tak jsme vytvořili řadič pro náš model zprávy, ale není třeba vytvořit pro uživatele model, tak jsem ji prostě vynechal. A to je vše je pro tvorbu modelů a řadiče.

Další, musíme nastavit některé trasy.

Tras

Trasy jsou vždy bezpečné místo, kde začít, protože obvykle mají dobrou představu, které stránky jsou z toho bude.

Tak otevřený soubor routes.js, který je ve složce config, může to vypadat trochu ohromující na první, ale pokud odeberete všechny komentáře a přidat v těchto trasách budou ponechány s něčím, jako je tento:

Máme domovskou stránku, stránku konverzace a pak dvě stránky pro zpracování přihlášení a registrace stránky. Dala jsem je do stejného řadiče, ale v plachty, můžete vytvořit libovolný počet řadičů, jak byste chtěli.

Modely

Dále podívejme na modelu generované zprávy, které mohou být umístěny na "api video modely video Messages.js". Musíme přidat potřebné sloupce do našeho modelu. Teď to není nezbytně nutné, ale vytvoří některé pomocné funkce pro nás, že můžeme použít:

Pro zprávy model Začínáme s id uživatele, které patří tato zpráva, uživatelské jméno, takže nebudeme muset dotazu to zvlášť a pak skutečnou zprávu.

Nyní vyplníme v modelu uživatele:

A to je ono, máme jen atributy username a password. Dalším krokem je vytvořit naši trasu funkce uvnitř MainController.

Řadiče

Tak otevři MainController, které lze nalézt v "api video řadiče video MainController.js". Začněme tím, že vytvoří funkce pro každou z tras, které jsme definovali výše:

Pokud jste obeznámeni s Express, pak bude rád, že tyto funkce jsou standardní funkce Express trasy. Dostanou dvě proměnné, req požadavek HTTP a res k vytvoření odpovědi.

Po vzoru MVC plachty nabízí funkci pro vykreslení zobrazení. Domovská stránka není potřeba nic zvláštního, tak se pojďme jen vykreslení zobrazení.

Plachty se přiklání spíše k úmluvě nad konfigurací, takže když zavoláte res.view(); Zobrazit soubor (s příponou .ejs ve výchozím nastavení) bude hledat plachty pomocí následujícího vzorce: ' zobrazení video controllerName video methodName.ejs'. Tak pro tuto výzvu, bude vyhledávat "zobrazení video hlavní video index.ejs'. Také stojí za zmínku, tyto názory obsahovat pouze konkrétní části zobrazení stránky. Je-li se podívat na "zobrazení video layout.ejs, zobrazí se volání uprostřed < % tělo % video, je to, kde bude vložen zobrazení souboru. Ve výchozím nastavení používá tato "layout.ejs" soubor, ale lze použít jiné rozložení soubory pouhým předáním název rozvržení do funkce res.view() vlastnost s názvem "rozvržení". Například: "res.view ({rozložení:"other.ejs"});".

Já hodlám použít výchozí soubor odkazů rozložení s malou úpravou, budu přidat jQuery, páteř, a podtrhnout. Tak v "layout.ejs" soubor přímo před koncovou značku, přidejte následující řádky:

S tím na místě jsme nyní připraveni vytvořit domovskou stránku.

Domovská stránka

Pojďme vytvořit novou složku ve složce zobrazení s názvem hlavní a uvnitř naší nové hlavní složky, vytvoříme nový soubor s názvem "index.ejs".

Uvnitř souboru vytvoříme jen přihlašovací jméno a přihlašovací formulář:

Docela jednoduchá, jen základy.

Přihlášení a registrace oblasti

Dále potřebujeme přidat trochu JS získat tuto komunikaci se serverem. Teď to nebude konkrétní, že budeme jen poslat žádosti AJAX pomocí jQuery na server plachty plachty.

Tento kód lze buď uvedeny na samotné stránce nebo načteny v prostřednictvím samostatného souboru JS. Kvůli přehlednosti budu jen dát ji na konci téže stránky:

To je všem jen standardní JS a jQuery, jsme poslouchání události klepněte na tlačítko přihlášení, ujistěte se, pole uživatelské jméno a heslo jsou vyplněna a odesílání dat do ' / login "trasy. Je-li přihlášení úspěšné, můžeme přesměrovat uživatele na stránku chat, jinak budeme zobrazovat chyba vrácených serverem.

Dále vytvoříme totéž pro oblast signup:

Tento kód je téměř totožná, že natolik, že si asi jen abstraktní celou část Ajax ven do své vlastní funkce, ale pro tento kurz je to v pořádku.

Teď musíme jít zpět do naší "MainController" a zpracování těchto dvou tras, ale než to uděláme, chci nainstalovat modul uzlu. Budeme muset hash hesla, hesla v prostém textu nejsou dobrá věc, ani pro demonstraci! Našla jsem pěkný modul s názvem "hash hesla" David Wood, který bude fungovat dobře.

Chcete-li jej nainstalovat, přejděte kořenové aplikaci plachty z v rámci terminál a typ: Active hash hesla.

Jakmile se to nainstaluje, otevřeme MainController a implementovat dvě potřebné trasy. Začněme s zápis:

Je to trochu upovídaný, ale vše, co děláme tady čte uživatelské jméno a heslo z POST požadavku a ujistěte se, uživatelské jméno není již přijata. Můžete vidět také používám hasher hesla, které jsme právě nainstalovali, je to super jednoduché použití, stačí zadat heslo do generate metoda a to bude hash pomocí náhodné salt.

Je to také stojí za zmínku, že v každém umístění možné kde možná narazíme na chybu nebo problém, jsme odesílání zpět chybový kód HTTP a vrácení zprávy prostřednictvím vlastní hlavičku s názvem "Chyba", která, pokud si pamatujete, budeme zobrazovat v upozornění na indexu Stránka.

Další pozoruhodné bod, je skutečnost, že jsme pomocí funkce "magic" s názvem "findByUsername", to je možné, protože máme uživatelské jméno sloupce uvnitř našeho modelu uživatelům.

Konečně dole si můžete prohlédnout, pokud šlo všechno dobře, jsme ukládání uživatele v proměnné relace a vrácení s výchozí stavový kód 200, která vám řekne, jQuery, AJAX požadavek byl úspěšný. 

Dále napíšeme funkci přihlášení:

Opět to je velmi podobná předchozí zápis funkce, hledáme uživatele s stejné uživatelské jméno, která byla zaúčtována z formuláře a pokud jej nalezne, jsme zkontrolujte, zda heslo odpovídá pomocí že si Standa ověření metody. Důvod, proč nemůžeme jen hash hesla znovu a předat jej do modelů funkce najít proto, hasher používá náhodné sůl, takže pokud jsme zatříděna heslo znovu je rovno něco jiného.

Zbytek kódu je stejný; Pokud bude všechno, ukládáme uživateli v relaci a vrátit ji, jinak zasíláme zpět chybovou zprávu.

Přihlašovací systém je nyní dokončena a my jsme konečně mohli přesunout na budování funkci konverzace.

Budování funkci konverzace

Vzhledem k tomu, budeme používat páteř pro vzkazy, skutečná cesta funkce bude velmi jednoduché. Zde je kompletní chat funkce:

Začneme kontrolou, že pokud uživatel je přihlášen nebo ne, pokud to funguje, pak se načte zobrazení, předáním uživatelské jméno, která byla v relaci, jinak jsme jen přesměrování na domovskou stránku.

Teď pojďme vytvořit nové zobrazení s názvem "chat.ejs" uvnitř hlavní složky. Otevři to a pojďme vytvořit jednoduchý formulář pro zadání nové zprávy a div kontejner pro zobrazení všech z nich.

Tak za tento názor, jsme prostě některé docela standardní HTML. Jediná věc, která může vyžadovat nějaké vysvětlení je < % = uživatelské_jméno %> kód, tento styl kódování není specifické pro plachty, je ve skutečnosti syntaxe EJS. Tato syntaxe je velmi podobná PHP krátké značky. < % je ekvivalentem <? v PHP a < % = je stejný jako <? =. První fragment EJS umožňuje integrovat standardní JS kód na stránce, zatímco druhá vytiskne kód uvnitř. Zde jsme si jen tisk uživatelské jméno které jsme míjeli v z řadiče.

Zbytek našich chat funkce bude všechny JavaScript. Chcete-li začít, Pojďme se podívat na jak by napsat funkci konverzace pomocí standardní páteř a pak uvidíme jak využít webové sokety.

V dolní části stránky přidejte následující JS:

Vzhledem k tomu, plachty automaticky vytvoří rozhraní API, která páteř rozumí nativně, žádné extra server kód musí být napsán, nemůže to mnohem jednodušší, než to. Je to, co jsem mluvil o tom, kdy jsem řekl, že plachty nejmenoval se "rámec". Není pokusit budete používat vlastní syntaxi, byla provedena, aby se věci pohnuly a jak můžete vidět, to přináší.

Chcete-li otestovat, otevřete okno terminálu a přejděte do složky app plachty, pak typ "plachty výtah" to nastartovat. Ve výchozím nastavení se spustí do http://localhost:1337. Nyní jen zápis a zaúčtování několika zpráv.

Chcete-li zobrazit zaúčtované zprávy můžete console.log proměnné zprávy nebo se na to podívat uvnitř prohlížeče konzole. Teď další věc, kterou bychom měli provádět je výhled, takže můžeme vidět vystavené zprávy v prohlížeči.

Začneme tím, že definuje zobrazení, připojení do div, který jsme vytvořili dříve, pak můžeme přidat obslužné rutiny události v kolekci překreslit div, pokaždé, když nový model bude přidána do kolekce.

Můžete vidět nahoře, musel jsem změnit výchozí nastavení podtržení pomocí syntaxe EJS uvnitř šablony, použijte syntaxi si knír. To proto, že stránka je již dokument EJS, takže to by byly zpracovány na serveru a ne v podtržení.

Poznámka: nepřišel jsem s Regex pro to, že zásluhu na podtržení dokumenty sama.

Konečně dole vidíte, že jsme vytvořili nové instance tohoto názoru, předejte proměnnou pro kolekci.

Pokud vše půjde dobře, měli byste vidět vaše zprávy v prohlížeči a by měla aktualizovat pokaždé, když vytvoříte nový post.


Plachty politiky

Teď Možná jste si všimli, že jsme nejsou nastavení ID nebo uživatelské jméno, když předkládáme příspěvky, a to je z bezpečnostních důvodů.

Nechcete dát tento druh řízení na straně klienta. Pokud někdo musí udělat je změnit proměnnou JavaScriptu ovládat účet jiného uživatele, budete mít velký problém.

Tak jak by to zvládáš? No, s politikami samozřejmě.

Politiky jsou v podstatě middleware, které běží před skutečné webového požadavku, kde můžete ukončit, upravit nebo dokonce přesměrovat požadavek, podle potřeby.

Pro tuto aplikaci pojďme vytvořit zásadu pro naše zprávy. Jsou použity zásady řadičů, takže lze spustit i na běžných stránkách, ale pro tento kurz zůstaneme u jeden pro naše zprávy Model.

Vytvořte soubor s názvem "MessagesPolicy.js" uvnitř "api video složky politiky a zadejte následující:

Tak co se děje? Vidíte, tato funkce se podobá funkci normální cestou, rozdíl však je třetí parametr, který bude volat další middleware v zásobníku. Pokud jste na myšlenku middleware, může si to jako ruské panenky. Každá vrstva dostane žádost, spolu s odpovědí proměnných a oni mohou měnit tak, jak uznají za vhodné. Pokud projdou všechny požadavky, vrstva může předat dále, dokud nedorazí do centra, kde je cesta funkce.

Tak jsme tady, pokud uživatel je přihlášen, pokud uživatel není, můžeme zobrazit chybu číslo 403 a žádost zde končí. V opačném případě (tj. uživatel je zaznamenána) nazýváme next(); ji předávat dál. Výše uvedený kód je kde jsme aplikovat některé proměnné post. Zavádím to pro všechna volání na řadič "zprávy" (v podstatě API), tak jsme se na akci a zkontrolujte, pokud tento požadavek se pokouší o vytvoření nové zprávy, v tom případě přidáme Vystavovaná pole pro uživatelské jméno a id uživatele.

Dále otevřete soubor policies.js, který je ve složce config a přidat v zásadě, že jsme právě vytvořili. Takže váš soubor by měl vypadat takto:

S tímto dán na místo budeme muset odstranit všechny staré záznamy, neboť mají tyto nové kousky informací. Takže, zavřete tuto plachty (ctrl-c) a v stejný typ okna terminálu: rm - r TMP odebrat dočasné databáze nám dává čistý štít.

Dále přidáte uživatelské jméno do skutečných míst, tak v "chat.ejs" Změňte šablonu:

Restartujte server plachty (opět pomocí plachty výtah) a zápis jiný nový uživatel vyzkoušet si to. Pokud vše funguje správně, měli byste být schopni přidat zprávy a vidět své jméno v post.

V tuto chvíli máme docela dobré nastavení, můžeme načítat automaticky pomocí páteřní a API post, a máme některé základní bezpečnost na místě. Problém je v tom, že nebude aktualizovat, když ostatní lidé posílat zprávy. Teď to mohl vyřešit vytvořením JavaScript interval a dotazování pro aktualizace, ale můžeme dělat lépe.

Využití Websockets

Jsem zmínil, že plachty využívá websockets' obousměrné schopnosti o odebíraných data. Použití těchto aktualizací, můžeme poslouchat nové přírůstky do tabulky zpráv a aktualizovat kolekci.

Tak v chat.ejs souboru, pojďme vytvořit nový druh odběru; SailsCollection:

Teď to může být dlouhý, ale je to vlastně velmi jednoduché, pojďme projít. Začneme tím, že přidá dvě nové vlastnosti objektu kolekce, obsahující název plachty "modelu" a držet web soketu. Dále jsme upravit funkci synchronizace, pokud jste obeznámeni s páteří, pak budete vědět, že se jedná o funkci rozhraní, která se serverem, když zavoláte věci jako například načíst. Obvykle to vyvolá žádosti Ajax, ale my budeme přizpůsobit pro socket komunikace.

A teď nevyužíváme většinu funkcí, která funkce sync nabízí, hlavně proto, že jsme nepřidali možnost pro uživatele, aktualizovat nebo odstranit zprávy, ale jen proto, aby se úplné, budu zahrnovat je uvnitř definice funkce.

Pojďme se podívat na první část funkce sync:

Tento kód nejprve zkontroluje, zda jakékoli "kde" klauzule, které byly odeslány prostřednictvím, to by vám dělat věci, jako: messages.fetch ({kde: {id: 4}}); načíst pouze řádky, kde id se rovná čtyři.

Poté se pak máme některé kód, který zajišťuje, že byla nastavena vlastnost "sailsCollection", jinak jsme protokolu chybová zpráva. Poté jsme vytvořit nový socket a připojit k serveru, naslouchání pro připojení s on('connect') událostí.

Po připojení, požadujeme index "sailsCollection" uvedených v aktuálním seznamu modelů. Poté, co obdrží data, používáme funkci set kolekce nejprve nastavit modely.

Dobře teď tak daleko, máme ekvivalent příkazu standardní fetch. Další blok kódu je, kde stát push oznámení:

Nyní akce, která probíhá (ať jsme vytváření, aktualizace nebo zničení zpráva) lze nalézt uvnitř skutečné msg, které je pak uvnitř uri. Chcete-li získat akce, rozdělíme URI na lomítka (/) a chytit jen poslední segment pomocí funkce pop. Jsme pak zkuste kombinovat ji s třemi možnými akcemi vytvořit, aktualizovat, nebo zničit.

Zbytek je standardní páteř, jsme buď přidat, upravit nebo odebrat zadaného modelu. S naší novou třídou téměř kompletní, vše, co zbylo je změna aktuální MessageCollection. Místo rozšiřování páteřních kolekce, je třeba rozšířit naši novou kolekci, například takto:

K rozšíření naší nové kolekci, uděláme další změnu tak, aby namísto nastavování Urlvlastnost, jsme nyní nastavit vlastnost sailsCollection. A to je všechno tam je k němu. Otevřete aplikace do dvou různých prohlížečů (např. Chrome a Safari) a zápis dvou samostatných uživatelů. Měli byste vidět, že vystavené zprávy z některého z prohlížečů se projeví ihned na straně druhé, žádné dotazování, žádné potíže.

Chat Screenshot

Závěr

Plachty je závan čerstvého vzduchu, v rámci nepořádek rámců. Kontroluje své ego na dveře a dělá co může, aby pomoc vývojáře namísto značky. Jsem byli chatování s plachty devs a mohu vám říci, že tam je ještě více awesomeness v dílech, a to bude zajímavé sledovat, kam tento rámec.

Takže na závěr, jste se naučili, jak nastavit a používat zabezpečení dat z v rámci plachty i jak rozhraní s knihovně oblíbený páteř.

Jako vždy, pokud máte nějaké připomínky, neváhejte a nechte je níže nebo přidejte se k nám na Nettuts + IRC kanál ("#nettuts" na freenode). Děkujeme vám za čtení.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.