12 ikt - 3. Express.js Bevezetés: Express.js keretrendszer alapjai, routing és middleware

Az Express.js a Node.js egyik legnépszerűbb és legszélesebb körben használt keretrendszere. Ez egy minimalista és rugalmas webes keretrendszer, amely egyszerűsíti a webalkalmazások és API-k fejlesztését. Az Express.js a Node.js-re épül, és lehetővé teszi, hogy gyorsan és hatékonyan fejlesszünk webes szervereket, mivel számos olyan alapvető funkciót biztosít, amelyekkel különben kézzel kellene bajlódnunk.

Mi az az Express.js?

Az Express.js egy Node.js alapú, nyílt forráskódú webes alkalmazáskeretrendszer, amelyet főleg kiszolgálói alkalmazások készítésére használnak. Az Express segítségével gyorsan és könnyen létrehozhatunk weboldalakat és webes API-kat. Ez a keretrendszer azért vált népszerűvé, mert megkönnyíti a HTTP kérések és válaszok kezelését, a különböző útvonalak (routing) beállítását, valamint a middleware-ek alkalmazását, amelyek speciális funkciókat biztosítanak.

Az Express.js Telepítése

Mielőtt használni kezdhetjük az Express.js-t, telepítenünk kell. Ehhez először telepíteni kell a Node.js-t, majd a Node Package Manager (npm) segítségével az Express-t.

1.     Node.js telepítése:

• Töltsd le és telepítsd a Node.js-t a hivatalos weboldalról.
• A telepítés során az npm is telepítésre kerül.

2.     Express.js telepítése:

• Nyisd meg a terminált (vagy parancssort) és hozd létre az alkalmazásod mappáját:

mkdir my-express-app

cd my-express-app

• Inicializáld az npm-et a mappában:

npm init -y

• Telepítsd az Express.js-t:

npm install express --save

Egyszerű Express.js Alkalmazás Létrehozása

Az alábbi kód egy egyszerű Express.js alkalmazás, amely egy HTTP szervert hoz létre, és válaszol a bejövő kérésekre.

// Az express modul importálása

const express = require('express');

// Egy új express alkalmazás létrehozása

const app = express();

// Egy útvonal kezelése a gyökér URL-re ('/')

app.get('/', (req, res) => {

  res.send('Hello, Express.js!');

});

// A szerver elindítása és figyelés egy adott porton (3000)

app.listen(3000, () => {

  console.log('Szerver fut a http://localhost:3000 címen');

});

1.     const express = require('express');:

• Az express modul importálása szükséges ahhoz, hogy használni tudjuk az Express.js keretrendszert. Ez a sor betölti az Express modulját, amit később az app nevű változóban fogunk használni.

2.     const app = express();:

• Az express() meghívása létrehoz egy új Express alkalmazást, amely egy HTTP szerverként fog viselkedni. Az app nevű változóban tároljuk az alkalmazást, hogy később hozzáférjünk a különböző funkcióihoz.

3.     app.get('/', (req, res) => { ... });:

• Itt definiálunk egy útvonalat a gyökér URL-re (azaz a / útvonalra). Ez azt jelenti, hogy ha valaki meglátogatja az alkalmazást a böngészőjében a gyökér URL-en, akkor a megadott callback függvény fut le.
• A callback függvény két paramétert kap: req (request) és res (response). A req tartalmazza a kliens által küldött kérés részleteit, a res pedig azt az objektumot, amellyel válaszolhatunk a kliensnek.
• A res.send('Hello, Express.js!'); sor elküldi a válaszként a "Hello, Express.js!" szöveget a kliensnek.

4.     app.listen(3000, () => { ... });:

• Ezzel a sorral indítjuk el a szervert, és megadjuk, hogy melyik porton figyeljen (ebben az esetben a 3000-es porton). Amikor a szerver sikeresen elindul, a callback függvény fut le, és kiírja a konzolra, hogy a szerver fut.

3.2. Routing Express.js-ben

A routing az az eljárás, amellyel az alkalmazás meghatározza, hogyan válaszoljon a bejövő kérésekre egy adott URL-re. Az Express.js ezt rendkívül egyszerűvé teszi. Különböző HTTP módszereket (pl. GET, POST, PUT, DELETE) használhatunk, hogy különböző típusú kéréseket kezeljünk.

Erre példának, egy komplex feladatot fogunk megoldani közösen.

3.3. Middleware Az Express.js-ben

A middleware az Express.js egyik legfontosabb eleme. A middleware-ek olyan függvények, amelyek a bejövő kérések és a kiszolgált válaszok közötti folyamatokat kezelik. Ezek a függvények lehetővé teszik, hogy módosítsuk a kérés és válasz objektumokat, befejezzük a kérelem- és válaszfolyamatot, vagy továbblépjünk a következő middleware-re.

Példa Egy Egyszerű Middleware-re

const express = require('express');

const app = express();

// Egy egyszerű middleware, amely minden kérésnél lefut

app.use((req, res, next) => {

  console.log(`${req.method} kérés érkezett a(z) ${req.url} URL-re`);

  next(); // Tovább lép a következő middleware-re vagy útvonalra

});

// Kezelés a gyökér URL-re

app.get('/', (req, res) => {

  res.send('Kezdőlap');

});

// Kezelés az '/about' URL-re

app.get('/about', (req, res) => {

  res.send('About oldal');

});

app.listen(3000, () => {

  console.log('Szerver fut a http://localhost:3000 címen');

});

Middleware Kód Magyarázata

1. app.use((req, res, next) => { ... });:
• Az app.use metódussal definiálunk egy általános middleware-t, amely minden egyes bejövő kérésnél lefut.
• A middleware függvény három paramétert kap: req (kérés), res (válasz) és next (egy függvény, amely a következő middleware-t vagy útvonalkezelőt hívja meg).
• Ebben az esetben a middleware naplózza a konzolra a kérés típusát (pl. GET) és a kért URL-t. Ezután a next() meghívásával a folyamat továbbhalad a következő middleware-re vagy útvonalkezelőre.

Példák és Gyakorlati Feladatok

Példa 1: Alapvető Routing

Hozz létre egy Express.js alkalmazást, amely különböző útvonalakat kezel:

• GET /: Válaszoljon "Főoldal".
• GET /about: Válaszoljon "Rólunk".
• GET /contact: Válaszoljon "Kapcsolat".
• GET *: Válaszoljon "404 - Az oldal nem található", ha a felhasználó egy nem létező oldalra próbál navigálni.

Megoldás:

const express = require('express');

const app = express();

app.get('/', (req, res) => {

  res.send('Főoldal');

});

app.get('/about', (req, res) => {

  res.send('Rólunk');

});

app.get('/contact', (req, res) => {

  res.send('Kapcsolat');

});

app.get('*', (req, res) => {

  res.status(404).send('404 - Az oldal nem található');

});

app.listen(3000, () => {

  console.log('Szerver fut a http://localhost:3000 címen');

});

Példa 2: Middleware Használata

Adj hozzá egy middleware-t, amely naplózza a bejövő kéréseket és a kért URL-eket, majd kezelje az alábbi útvonalakat:

• GET /: Válaszoljon "Kezdőlap".
• GET /about: Válaszoljon "About oldal".

Megoldás:

const express = require('express');

const app = express();

app.use((req, res, next) => {

  console.log(`${req.method} kérés érkezett a(z) ${req.url} URL-re`);

  next();

});

app.get('/', (req, res) => {

  res.send('Kezdőlap');

});

app.get('/about', (req, res) => {

  res.send('About oldal');

});

app.listen(3000, () => {

  console.log('Szerver fut a http://localhost:3000 címen');