Node.js Express.js FrameWork oktatóanyag

Ebben az oktatóanyagban az Express keretrendszert fogjuk tanulmányozni. Ez a keretrendszer úgy van felépítve, hogy minimális és rugalmas Node.js webes alkalmazás-keretrendszerként működjön, robusztus funkciókészletet biztosítva egyoldalas, többoldalas és hibrid webes alkalmazások létrehozásához.

Mi az Express.js?

Az Express.js egy Node.js webes alkalmazáskiszolgáló keretrendszer, amelyet kifejezetten egyoldalas, többoldalas és hibrid webalkalmazások létrehozására terveztek.

Ez lett a Node.js szabványos szerver keretrendszere. Az Express a MEAN veremként ismert backend része.

Express rétegek útválasztása és köztes szoftverek a Node.js HTTP magján keresztül, patakok és események API-jai.

A MEAN egy ingyenes és nyílt forráskódú JavaForgatókönyv szoftververem dinamikus webhelyek és webalkalmazások létrehozásához, amely a következő összetevőkkel rendelkezik;

1) MongoDB — A szabványos NoSQL adatbázis

2) Express.js — Az alapértelmezett webes alkalmazáskeretrendszer

3) AngularJS - A JavaWebes alkalmazásokhoz használt Script MVC keretrendszer

4) node.js — Skálázható szerveroldali és hálózati alkalmazásokhoz használt keretrendszer.

Az Express.js keretrendszer nagyon egyszerűvé teszi egy olyan alkalmazás fejlesztését, amely többféle kérés kezelésére használható, mint például a GET, PUT, POST és DELETE kérések.

Express telepítése és használata

Az Express telepítése a Node Package Manageren keresztül történik. Ezt a parancssorban a következő sor végrehajtásával teheti meg

npm install express

A fenti parancs arra kéri a Node csomagkezelőt, hogy töltse le a szükséges expressz fájlt. modulok és ennek megfelelően telepítse őket.

Verzió megjegyzés: az npm most telepíti az Express 5.2-t; sok projekt továbbra is az Express 4-et használja. Mindkettő az alábbi példákat futtatja egy támogatott Node.js kiadás.

Használjuk az újonnan telepített Express keretrendszerünket, és hozzunk létre egy egyszerű „Hello World” alkalmazást.

Az alkalmazásunk egy egyszerű szerver modul amely a 3000-es porton fog figyelni. Példánkban, ha egy kérés érkezik a böngészőn keresztül ezen a porton, akkor a szerveralkalmazás egy „Hello World” választ küld a kliensnek.

var express=require('express');
var app=express();
app.get('/',function(req,res)
{
res.send('Hello World!');
});
var server=app.listen(3000,function() {});

Code Magyarázat:

1. A kód első sorában a követelmény függvényt használjuk az „expressz modul” beépítésére.
2. Mielőtt elkezdhetnénk használni az expressz modult, egy objektumot kell készítenünk belőle.
3. Itt egy visszahívó függvényt hozunk létre. Ez a függvény akkor hívódik meg, amikor valaki a webes alkalmazásunk gyökerére látogat, ami a http://localhost:3000. A visszahívó függvény a 'Hello World' karakterlánc weboldalra küldésére szolgál.
4. A visszahívás funkcióban a „Hello World” karakterláncot küldjük vissza az ügyfélnek. A „res” paraméter a tartalom visszaküldésére szolgál a weboldalra. Ezt a „res” paramétert a „request” modul biztosítja, hogy lehetővé tegye a tartalom visszaküldését a weboldalra.
5. Ezután a listen függvényt használjuk arra, hogy a szerveralkalmazásunk a 3000-es porton figyelje a klienskéréseket. Itt megadhat bármely elérhető portot.

Ha a parancsot sikeresen végrehajtották, a következő kimenet jelenik meg, amikor futtatja a kódot a böngészőben.

output:

A kimenetből,

• Ezt jól láthatod, ha böngészel a URL A localhost 3000-es portjánál a 'Hello World' karakterlánc jelenik meg az oldalon.
• Mivel a kódunkban kifejezetten említettük, hogy a szerver a 3000-es porton figyeljen, a kimenetet böngészés közben is megtekinthetjük. URL.

Mik azok az útvonalak?

Egyetlen gyökérútvonal csak a kiindulópont.

Az útvonalválasztás határozza meg, hogy egy alkalmazás hogyan válaszol egy adott végponthoz intézett klienskérésre.

Például egy kliens GET, POST, PUT vagy DELETE http kéréseket küldhet különféle URL mint például az alább láthatók;

http://localhost:3000/Books
http://localhost:3000/Students

A fenti példában

• Ha GET kérés érkezik az elsőhöz URL, akkor a válasznak ideális esetben egy könyvlistának kell lennie.
• Ha a GET kérés a második URL, akkor a válasznak ideális esetben a Tanulók listájának kell lennie.
• Tehát a URL amelyhez hozzáférnek, a webszerver egy másik funkciója kerül meghívásra, és ennek megfelelően a válasz elküldésre kerül a kliensnek. Ez az útvonalválasztás koncepciója.

Minden útvonalnak lehet egy vagy több kezelői funkciója, amelyek az útvonal egyeztetésekor hajtódnak végre.

Az útvonal általános szintaxisa alább látható

app.METHOD(PATH, HANDLER)

ahol,

1) az alkalmazás az expressz modul egy példánya

2) A METHOD egy HTTP kérési módszer (GET, POST, PUT vagy DELETE)

3) A PATH egy elérési út a szerveren.

4) A HANDLER az útvonal egyeztetésekor végrehajtott funkció.

⚠️ Express 5 Megjegyzés: Ezek az aláírások változatlanok maradtak, de az app.del() névből app.delete() lett, a res.sendfile() névből res.sendFile() név, és a helyettesítő karaktereknek mostantól olyan nevekkel kell rendelkezniük, mint például a /*splat.

Nézzünk egy példát arra, hogyan valósíthatunk meg útvonalakat Expressben. Példánkban 3 útvonalat fogunk létrehozni a következőképpen:

1. Egy /Node útvonal, amely az „Oktatóanyag a csomóponton” karakterláncot jeleníti meg, ha ez az útvonal elérhető
2. Egy /Angular útvonal, amely a „Tutorial on Angular” karakterláncot jeleníti meg, ha ez az útvonal elérhető
3. Egy alapértelmezett útvonal /, amely a „Welcome to” karakterláncot jeleníti meg Guru99 Oktatóanyag.

Alapkódunk ugyanaz marad, mint a korábbi példákban. Az alábbi részlet egy kiegészítő, amely bemutatja az útválasztás megvalósítását.

var express = require('express');
var app = express();
app.route('/Node').get(function(req,res)
{
    res.send("Tutorial on Node");
});
app.route('/Angular').get(function(req,res)
{
    res.send("Tutorial on Angular");
});
app.get('/',function(req,res){
    res.send('Welcome to Guru99 Tutorials');
});

Code Magyarázat:

1. Itt akkor definiálunk egy útvonalat, ha a URL http://localhost:3000/Node is selected in the browser. To the route, we are attaching a callback function which will be called when we browse to the Node URLA függvénynek 2 paramétere van.
   • A fő paraméter, amelyet használni fogunk, a „res” paraméter, amellyel információkat küldhetünk vissza a kliensnek.
   • A 'req' paraméter információkat tartalmaz a kérésről. Néha további paramétereket is el lehet küldeni a kérés részeként, így a „req” paraméter használható a további elküldött paraméterek megkeresésére.
2. A küldés funkciót használva küldjük vissza az „Oktatóanyag a csomóponton” karakterláncot az ügyfélnek, ha a csomóponti útvonalat választja.
3. Itt akkor definiálunk egy útvonalat, ha a URL http://localhost:3000/Angular is selected in the browser. To the route, we are attaching a callback function which will be called when we browse to the Angular URL.
4. A küldés funkciót használva küldjük vissza a „Tutorial on Angular” karakterláncot a kliensnek, ha az Angular útvonalat választja.
5. Ez az alapértelmezett útvonal, amelyet a rendszer akkor választ ki, amikor az alkalmazás gyökeréhez böngészik – http://localhost:3000. Amikor az alapértelmezett útvonalat választja, a „Welcome to…” üzenet jelenik meg. Guru99 Oktatóanyag” című anyagot küldünk el az ügyfélnek.

Ha a parancsot sikeresen végrehajtották, a következő kimenet jelenik meg, amikor futtatja a kódot a böngészőben.

output:

A kimenetből,

• Ezt jól láthatod, ha böngészel a URL a localhost 3000-es portján, akkor a következő karakterláncot fogja látni: „Üdvözöljük a Guru99 oktatóanyag jelenik meg az oldalon.
• Mivel a kódunkban említettük, hogy az alapértelmezett URL ezt az üzenetet jelenítené meg.

Ezután keresse meg a /Node mappát.

A kimenetből,

• Láthatod, hogy ha a URL ha a /Node értékre változott, akkor a megfelelő csomópont útvonal kerül kiválasztásra, és a „Csomódszer a csomópontról” karakterlánc jelenik meg.

Ezután keresse meg az /Angular mappát.

A kimenetből,

• Láthatod, hogy ha a URL ha az /Angular értékre változott, akkor a megfelelő csomópont útvonal kerül kiválasztásra, és az „Angular oktatóanyag” karakterlánc jelenik meg.

Minta webszerver express.js használatával

A fenti példánkból láthattuk, hogyan dönthetjük el, hogy milyen kimenetet jelenítsünk meg az útvonalválasztás alapján. Ezt a fajta útvonalválasztást használják a legtöbb modern webes alkalmazásban. A webszerver másik része a Node.js sablonjainak használatáról szól.

Gyors, menet közbeni Node.js alkalmazások létrehozásakor egy egyszerű és gyors módszer a sablonok használata az alkalmazáshoz. Számos keretrendszer érhető el a piacon sablonok készítéséhez. Esetünkben a Jade keretrendszert vesszük példaként a sablonokhoz.

A Jade telepítése a Node csomagkezelőn keresztül történik. Ezt a következő parancssor végrehajtásával tehetjük meg a parancssorban:

npm install jade

A fenti parancs arra kéri a Node csomagkezelőt, hogy töltse le a szükséges Jade modulokat, és telepítse azokat ennek megfelelően.

JEGYZET: A Node legújabb verziójában a jade elavult. Ehelyett használjon mopszot.

⚠️ Modern megfelelője: telepíteni pisze orr, nevezd át az index.jade fájlt index.pug névre, és állítsd be az app.set('view engine','pug') beállítást. A jade csomag nem kap frissítéseket; az alábbi lépések továbbra is futnak.

Használjuk az újonnan telepített Jade keretrendszerünket, és hozzunk létre néhány alapvető sablont.

Step 1) Az első lépés egy Jade sablon létrehozása. Hozz létre egy index.jade nevű fájlt, és illeszd be az alábbi kódot. Ügyelj arra, hogy a fájl a „views” mappában legyen.

1. Itt azt adjuk meg, hogy az oldal címe bármilyen értékre módosul, amikor ez a sablon meghívásra kerül.
2. Azt is meghatározzuk, hogy a fejléccímkében lévő szöveg a Jade sablonban átadott szövegre cserélődik.

Az azt megjelenítő alkalmazáskód a következő.

var express=require('express');
var app=express();
app.set('view engine','jade');
app.get('/',function(req,res)
{
res.render('index',
{title:'Guru99',message:'Welcome'})
});
var server=app.listen(3000,function() {});

Code Magyarázat:

1. Az alkalmazásban először a „view engine”-t kell megadni, amelyet a sablonok rendereléséhez fogunk használni. Mivel a Jade-et fogjuk használni a sablonok rendereléséhez, ezt ennek megfelelően adjuk meg.
2. A renderelési funkció egy weboldal megjelenítésére szolgál. Példánkban a korábban létrehozott sablont (index.jade) jelenítjük meg.
3. Átadjuk a „Guru99” és „Welcome” értékeket a „title” és „message” paraméterekhez. Ezeket az értékeket az index.jade sablonban deklarált „title” és „message” paraméterek fogják lecserélni.

Ha a parancsot sikeresen végrehajtották, a következő kimenet jelenik meg, amikor futtatja a kódot a böngészőben.

output:

A kimenetből,

• Láthatjuk, hogy az oldal címe a következőre lesz állítva: „Guru99”, és az oldal fejléce „Üdvözöljük”-re lesz állítva.
• Ez a Node.js alkalmazásunkban meghívott Jade sablon miatt van.

GYIK