Kezdje az Express.js-t

A böngészővel szembeni alkalmazások létrehozása a csomópontokkal. Express.js egy JavaScript keretrendszer A NODE.JS környezetben tárolt egyoldalas és többoldalas alkalmazásokra.

• 29 Webes tervezési eszközök a munkafolyamat felgyorsításához

Ez egy vékony réteg alapvető internetes alkalmazás funkciók, amelyek nem takarják a node.js funkciókat már ismeri, így biztos lehet benne, hogy a kész alkalmazás lesz akár a semmiből teljesítmény-bölcs. És ez is nagy létrehozására robusztus API, köszönhetően egy rakás HTTP közüzemi módszerek és middleware használatra kész.

Ha kevesebb komplex opciót szeretne, létrehozhat egy webhelyet a kódolás nélkül a weboldal építője . Akárhogy is, győződjön meg róla, hogy megkapja web hosting szolgáltatás. El akar menni? Itt van mit kell tudni az expressz.js-ről.

01. Munkaváltószerkezet létrehozása

Express.js büszke arra, hogy "unopinionált" - vagyis a keret lehetővé teszi a fejlesztő számára az architektúrák, sablonos és jelölő motorok tekintetében. Sajnos nagy hatással van nagy felelősséggel.

Az Express Developer Team arra törekszik, hogy lágyítsa a csapást egy projektgenerátor bevezetésével (ha egy csapat mellett tervezi, telepítse a legjobbat felhő tároló a dolgok kohéziójának tartása érdekében). Az NPM-csomag formájában a munkaállomásról van szó, és segíti kísérleteinket a következő keretrendszerrel:

 Tamhan @ Tamhan-ThinkPad: ~ / Asztal /
Cucc / 2018Aug / FutureExpressjs /
Munkaterület $ sudo NPM Telepítés
expressz-generátor -g 

A generátor több tucat projekt opciót is tartalmaz - a jelen lépést kísérő ábra mutatja a teljes súgó kimenetet. Az egyszerűség kedvéért az alapértelmezett beállítások alapján korlátozzuk magunkat egy projekthez. Kikapcsolja a generációs folyamatot:

 Tamhan @ Tamhan-ThinkPad: ~ / Asztal /
Cucc / 2018Aug / FutureExpressjs /
Munkaterület $ Express Futuretest 

FIGYELMEZTETÉS: Az alapértelmezett nézet motor nem lesz Jade a jövőbeni kiadásokban.

Ha végzett, az aktuális munkakönyvtár egy új mappát tartalmaz, az úgynevezett "Futuretest". A tesztprojektünk otthona, és az NPM csomag letöltési parancsával kell konfigurálni. Abban az időben az írás, a generátor magában foglalja a Jade nézet generátor - a projekt tervezi megváltoztatni ezt a közeljövőben, kötelezi, hogy át a paraméter adja meg a nézet motor szánták. Alternatív megoldásként kérje a mopsz használatát - ez a jade motor hivatalos utódja:

 CD Futuretest /
NPM Telepítés 

02. Értsd meg az alkalmazásstruktúrát

Most, hogy a projekt generátora elvégezte a dolgot, nyissa meg az App.js-t a választott szerkesztőben. A - sokkal rövidített - struktúrája az alábbiak szerint történik:

 VAR indexrouter = igényel ('./
útvonalak / index ');
var felhasználókRouter = szükséges ('./
útvonalak / felhasználók);
var app = expressz ();
// A motor beállítása megtekintése
app.set ("nézetek", path.join (__
dirname, "nézetek");
app.set ('View engine', 'jade');
app.use (Logger ('Dev');
app.use (express.json ());
app.use (expressz.urlencoded ({
Bővített: FALSE}))));
app.use (cookieparser ());
app.USE (expressz.Static (útvonal.
Csatlakozás (__ Dirname, "Public")))))); 

Az expressz.js nagyon moduláris. Az App.js belépési pontként szolgál, ahol egy vagy több "Használat ()" funkció lehetővé teszi a különböző kérések kezelésére szánt komponensek hozzáadását. A "SET ()" behívásai lehetővé teszik a motor paramétereit - amelyek közül az egyik az előző lépésben említett Jade View motor telepítése.

A webes tartalom tényleges kibocsátása az útválasztó osztályokban történik. A rövidség kedvéért korlátozzuk magunkat az index.js-nek:

 VAR Express = szükséges ("Express");
var router = express.Router ();
router.get.get ('/', funkció (req, res,
következő) {
  Res.render ("index", {cím: Cím:
'Expressz' });
});
modul.Exports = router; 

„Get ()” van látva egy matcher húr és egy eseménykezelő, amely válik lefut, valahányszor egy megfelelő esemény történik. A mi esetünkben a kiválasztott sablon motor renderelési módját meg kell mondani, hogy visszaadja a tartalmat a bejelentkezett felhasználó böngészőjének.

03. Futtassa a weboldalt

Ezen a ponton készen állunk arra, hogy először vegye be a weboldalt egy spinért. Visszatérés az Express.js telepítést tartalmazó terminálhoz, és hívja az NPM-t a hibakeresési zászlóval:

 Debug = MyApp: * NPM START 

Ha kész, adja meg a http: // localhost: 3000 / a választott böngészőbe, hogy megnézze a projekt generátor által létrehozott állványzatot. Ha kész, nyomja meg a gombot ctrl + C Az ablak bezárása és a vezérlés visszaállítása a parancssorba tolmács - Ne feledje, hogy ez is bezárja a hibakeresési webszervert.

04. Ez az útválasztásról és a végpontokról szól

Az egyszerűség kedvéért értesítsük egyetértünk azzal, hogy egy webes alkalmazás általában a belépési pontok sorozatából áll. Az expressz.js ezeket a router osztályon keresztül kezeli - gondolja rá, mint a bejövő kérésre adott válaszokat.

Új végpont hozzáadása egy alkalmazáshoz egy új munkavállaló hozzáadásával történik a sorba. Auto-generált példa két router típusot hoz létre, amelyek mindegyikét a "igény" módszerrel emelik fel:

 VAR indexrouter = igényel ('./
Útvonalak /
index');
var felhasználókRouter = szükséges ('./
Útvonalak /
felhasználók); 

A következő lépésben az "app.use" regisztrálja a routereket, és összekapcsolja azokat a kérésszeletekhez. A kód továbbá olyan hibakezelőt ad hozzá, amely meghívja, ha egy nem meglévő URL-t ad meg a rendszerbe:

 app.use ('/', IndexRouter);
app.use ('/ felhasználók, felhasználói is);
app.USE (funkció (req, res, következő)
{
  Következő (CreateError (404));
}); 

05. Új útvonal létrehozása

Nyissa meg a felhasználókat.js, és módosítsa kódját az alábbiak szerint:

 router.get ('/ user1', funkció (req,
gyan
következő) {
  res.send ('Future szerint hello
1 ');
});
router.get.get ('/', funkció (req, res,
következő) {
  res.send (válaszoljon a
forrás');
}); 

Új útvonalak hozzáadása az expressz.js mechanikai folyamat. Fogja meg a választás routerobjektumát, és hívja meg a HTTP igéknek megfelelő módszert, amelyet kezelni kíván. Ezután adjon át egy olyan karakterláncot, amely hozzáadódik az "App.USE" regisztrált "Offset" -hez. Ettől a pillanattól kezdve mind http: // localhost: 3000 / felhasználók / user1 és http: // localhost: 3000 / felhasználók / Visszatérés érvényes válasz.

Ne feledje, hogy az expressz.js nem korlátozódik a "kap" erőforrások kezelésére. „Post ()”, „put ()” és a „delete ()” kezeli a hagyományos négy HTTP kérések, a több tucat további ige módszerek vendéglátás szokatlan igényeket. Végül a "REQ" objektum hozzáférést biztosít a kérés fejlécéhez - a paraméterek vagy ügyféladatok elemzése során jó felhasználásra kerül.

06. Speciális illesztés

Útvonalak hozzáadása kézzel unalmas, mint a program komplexitás növekedése. Express.js a probléma megoldásához mind a helyettesítő, mind a rendszeres kifejezés támogatása. Például nézze meg az alábbi nyilatkozatot, amely rendszeres kifejezést alkalmaz, hogy megfeleljen a karaktersoros kutyát tartalmazó különböző karakterláncok ellen.

 app.get (/.* kutya $ /, funkció (REQ,
res) {
  ...}) 

07. rendellenes útválasztás

Miközben a négy HTTP kérés kezelése elegendőnek kell lennie mindenkinek (kalap tipp a számlához), az Express.js további protokollokkal is működhet. Expressz-ws Ez a szakasz különösen ízletes jelöltje - kiterjeszti az Express.js elérését a WebSocket kommunikációhoz.

Miután a bővítmény hozzáadódik a fő Express.js projekthez, lehetővé téve, hogy ez "igényel" híváson keresztül érhető el. Visszaadja az összes, de egy módszert tartalmazó segítő objektumot - hívja meg a kapcsolatot az útválasztó és a plugin között:

 var expressws = szükség van ("kifejezés
ws ')
alkalmazás);
Ezt követően, egy új módszer az úgynevezett „ws ()” lehet hivatkozni, hogy új útvonalakat alapul WebSocket technológia:
app.ws ('/', függvény (ws, req) {
  Ws.on ('Message', Funkció (MSG)
{
    konzol.log (MSG);
  });
  console.log ('Socket', req.
tesztelés); }); 

Az prototípus abban különbözik a normális útvonalak jelenléte miatt a „WS” objektum - hozzáférést biztosít a mögöttes WebSocket fokon csatlakozik a kliens felelős a kapcsolatot.

08. Integrálja az adatbázisokat és a sablonozómotorokat

A NODE.JS-en alapulva azt jelenti, hogy a gazdag plugin-ökoszisztéma a webes alkalmazásokon dolgozik. Például eléréséhez SQL és NoSQL adatbázisok - általában rendkívül unalmas feladat - lehet kezelni a bővítmények által biztosított adatbázis-forgalmazók. A tényleges telepítés olyan egyszerű, mint telepítését a szükséges NPM modul - ha a kód eléréséhez Redis adatbázis, egyszerűen csak hozzá a következő:

var redis = szükség ("redis")
var client = redis.createclient ()
ügyfél.set ('Stringkey', 'Aval',
redis.print)
. . 

Természetesen a memória sqlite is támogatott:

 VAR SQLITE3 = szükséges ('sqlite3').
bőbeszédű()
var db = új sqlite3.
Adatbázis (: Memória: ')
db.serialize (funkció () {
  db.run ('Táblázat lorem létrehozása
(Info szöveg) ') 

Ne feledje, hogy a NODE.JS integráció nem korlátozódik az adatbázis-bővítményekre. A kalandos fejlesztők olyan mértékben tudtak menni, hogy olyan termékeket tartalmazzák, mint a Tessel, ezáltal olyan webes alkalmazások létrehozása, amelyek szintén kölcsönhatásba léphetnek A dolgok internete eszközök.

09. Stílusos sablon

Az egyik terület, ahol az egyszerű és a valódi programok eltérnek a nézetek megteremtése. Míg egy kis példa projekt általában kézzel készített húrokat használ, összeszerelve a HTML nagy vastagságait, amelyek egy sorban csatlakoztatott dolgok nagyon bosszantóak.

A sablonmotorok rendes megoldást biztosítanak. Lehetővé teszik az előre definiált sémák létrehozását, amelyek programozhatóak a végrehajtásban.

Példaink esetén a nézetek a .jade fájlokban fekszenek. A nyitó index feltárja a következő struktúrát:

 kiterjeszti az elrendezést
blokk tartalom
  H1 = cím
  P Üdvözöljük a # {cím} 

A göndör zárójelben lévő kifejezések olyan sablonmezőként működnek, amelyek értékeit futásidőben kell cserélni. Az index.js olyan paraméterobjektummal hívja be, amely a következő lépést kísérő ábrán látható kezdőoldal megjelenítéséhez vezet:

 router.get ('/', funkció (req, res,
következő) {
  Res.render ("index", {cím: Cím:
'Expressz' });
}); 

A legtöbb sablonos motor szintén elemezheti a tömböket, ha egy elem sablont tartalmaz. Ebben az esetben a tömb minden sorát a DOM modell egy példányával jeleníti meg - hasonlóságokat az Androidban található listák megjelenítési modelljével tisztán véletlen. Az Express.js nem korlátozódik az előre meghatározott sablító motorokra. Ha úgy érzed, hogy valamilyen oknál fogva úgy érzi, egyszerűen kövesse a leírt lépéseket itt - Elvileg felül kell írnia az összes funkciót.

10. A statikus tartalmak kezelése

Express.js alkalmazások általában CSS-fájlokat és képeket tartalmaznak. A renderfunkción keresztül történő kiszolgálás nem hatékony - az intelligens módon a hagyományos HTTP-kéréssel kívánja küldeni őket vidám módon. Ez az "Express.Static ()" funkción keresztül érhető el, amely a teljes mappákat exportálhatja:

 app.use (express.Static ('Public')))
app.use (express.Static ('fájlok)) 

11. Módosítsa az eseményáramlást

Végül hagyja, hogy röviddel említsük a middleware kifejezést. Az Express.js Parance-ben a Middleware egy vagy több olyan alkatrészkészlet, amely integrálja magát az érintett folyamatábra. Ezután felhasználható, hogy módosítsák a kéréseket, mivel átmennek az útválasztó rendszeren keresztül - helyesen hajtják végre, korlátlan funkciókat lehet elérni.

Ezenkívül néhány kész alkatrész található itt - Látogassa meg ezt az oldalt, mielőtt egy nagyméretű fejlesztési projektet indítana.

12. Hogyan lehet egy expressz.js alkalmazást fogadni

A Testing Express.js-alapú alkalmazások egyszerűek. Problémák merülnek fel, ha szeretné, hogy az oldal, hogy legyen elérhető harmadik felek - mivel azt állítja elő a node.js környezet, nincs módja, hogy egy statikus kép alkalmas FTP telepítési web hosting szolgáltatások.

Elméletileg semmi sem rendelkezik a Raspberry Pi, az OrangePi, egy dedikált szerver vagy virtuális gép használatával, amely egy felhőszolgáltatásból vagy egy webes host szolgáltatóból bérelhető, amely virtuális tárhelyet kínál. A teljes virtuális gép bérlése azonban terheli Önt a végrehajtási környezet és az operációs rendszer megtartásának feladata.

Ha ez a feladat nem az ízlése, a Platform-as-a-Service szolgáltató lehet vonzóbb (bár a legtöbb esetben elég drága) választás.

Sok fejlesztő fontolja meg Heroku-t, az árképzésével a bokszdal kísérő ábrán látható, hogy az arany standard minden olyan dologhoz, amely a NODE.JS hostinghez kapcsolódik.

Ez azonban egy kicsit tisztességtelen az igazságban - az Amazon rugalmas beavéta, a Google Cloud Platform és a Microsoft Azure mind hasonló támogatást nyújt a csomópontok távoli végrehajtásához. Mindegyik rendszerben a fő kérdés kezelése - míg az Azure a lassú telepítésekről ismert, más szolgáltatók terhek a rendkívül összetett konfigurációs rendszerek nehézkes hátlási szolgáltatásaival.

Ezenkívül a NODE.js környezet támogatott verziója eltér a szolgáltatótól a szolgáltatótól. Természetesen nincs elég helyünk a téma mélyreható fedezésére. Látogatás Mozilla telepítési bemutatója és expressz.js ' teljesítmény és megbízhatóság és Biztonság A legjobb gyakorlatok oldalak néhány kérdésre. Győződjön meg róla, hogy nézze meg a szolgáltató dokumentációját, hogy jobban beváltabb gyakorlatok legyenek.

13. Jövőbeli bizonyíték Az alkalmazások

Express.js fejlesztési ciklusa messze nem zökkenőmentes: a fejlesztők jól ismertek az ügyfélkód átírását igénylő gyakori API-változásokról. A kapcsoló 3.x-ről 4,X-re különösen fájdalmas volt, ezért az 5.x közelgő kiadása meglehetősen kényelmetlenül érezheti magát.

Míg az Express.js 5.0 néhány törésváltozást eredményez, az ütközés korlátozottabb. Először is, egy már elavult funkciókészlet eltávolításra kerül a valódi - ha a kód továbbra is használja őket, az 5.x-es korszerűsítés igényel karbantartást igényel.

A view motorok tervezőknek ellenőrizniük kell a "Res.render ():" rangsor növekedését a renderelők megtekintéséhez, amely néhány szinkron implementációhoz vezetett. A keretrendszer 5. verziója fokozza a teljesítményt az aszinkron renderelés érvényesítésével.

Ezen túlmenően a napfény javítása és a dokumentált változások száma itt Megnézi a korábbi verziók néhány kihalt funkcióját - továbbá néhány hosszú távú hibákat rögzítenek az új kiadásban.

Végül vegye figyelembe, hogy már kipróbálhatja az új verziót. Egyszerűen hozzon létre egy másolatot a forráskód, ragadd meg a terminált és írja be a következő parancsot, hogy letölt egy archívum értékű alig tesztelt vérzés-edge JavaScript. Biztonságosan.

 $ NPM Telepítés Express @ & GT; = 5.0.0-
Alpha.1 - Saját 

Ez a cikk eredetileg megjelent a szóban forgó 279 kreatív web design magazin Web Designer. Vásároljon 279 kérdést vagy Iratkozzon fel itt a webdesignerre .

Kapcsolódó cikkek:

• Minden, amit tudnod kell az új node.js 8-ról
• 20 node.js modulok, amelyeket tudnod kell
• 25 JavaScript eszköz