Express keretrendszer
A Node.js® egy ingyenes, nyílt forráskódú, többplatformos JavaScript futtatókörnyezet, amely lehetővé teszi a fejlesztők számára szerverek, webalkalmazások, parancssori eszközök és szkriptek létrehozását.
Első node.js alkalmazás
mkdir firstapp
cd firstapp
npm init
Első HTTP szerver
// server.mjs
import { createServer } from 'node:http';
const server = createServer((req, res) => {
res.writeHead(200, { 'Content-Type': 'text/plain' });
res.end('Hello World!\n');
});
// starts a simple http server locally on port 3000
server.listen(3000, '127.0.0.1', () => {
console.log('Listening on 127.0.0.1:3000');
});
// run with `node server.mjs`
Klienstől érkező adatok fogadása
Útvonal paraméterek (req.params)
GET /users/123
app.get('/users/:id', (req, res) => {
const userId = req.params.id; // "123"
res.send(`User ID: ${userId}`);
});
Lekérdezési paraméterek (req.query)
GET /search?name=John&age=30
app.get('/search', (req, res) => {
const name = req.query.name; // "John"
const age = req.query.age; // "30"
res.send(`Name: ${name}, Age: ${age}`);
});
Törzs (body) paraméterek (req.body)
HTML:
<form method="POST" action="/users">
<input type="text" name="name">
<input type="number" name="age">
<button type="submit">Submit
</form>
JS:
app.use(express.urlencoded({ extended: true })); // Middleware az URL-kódolt adatok kezeléséhez
app.post('/users', (req, res) => {
const { name, age } = req.body;
res.send(`Received user: ${name}, Age: ${age}`);
});
Fájlok feltöltése (multer middleware-rel)
HTML:
<form action="/upload" method="POST" enctype="multipart/form-data">
<input type="file" name="myfile">
<button type="submit">Upload
</form>
JS:
const multer = require('multer');
const upload = multer({ dest: 'uploads/' }); // Mappába menti a fájlokat
app.post('/upload', upload.single('myfile'), (req, res) => {
res.send(`File uploaded: ${req.file.originalname}`);
});
Fejléc adatok (req.headers)
app.get('/headers', (req, res) => {
const userAgent = req.headers['user-agent'];
res.send(`User Agent: ${userAgent}`);
});
Cookie-k fogadása (cookie-parser middleware-rel)
const cookieParser = require('cookie-parser');
app.use(cookieParser());
app.get('/cookies', (req, res) => {
const myCookie = req.cookies.myCookieName;
res.send(`Cookie value: ${myCookie}`);
});
Middlewares
Olyan funkciók (függvények), amelyek hozzáférést biztosítanak a bejövő kérésekhez és módosíthatják azokat, illetve válaszokat generálhatnak vagy átadhatják a vezérlést a következő middleware-nek a láncban. A middleware-ek alapvető szerepet játszanak az alkalmazás logikájának kezelésében és szervezésében.
paraméterei
Amikor egy HTTP kérést kap a szerver, az Express végigfut a middleware láncon, és minden egyes middleware megkapja a következő három dolgot:
- Kérés objektumot (req) - A kliens által küldött kérésről szóló információk.
- Válasz objektumot (res) - válasz a kliensnek.
- Következő middleware hívása (next()) ez hívja meg a következő middleware-t a láncban.
app.use((req, res, next) => {
console.log('Alkalmazás szintű middleware.');
next();
});
CORS
A CORS (Cross-Origin Resource Sharing) egy olyan biztonsági mechanizmus, amelyet a böngészők alkalmaznak annak érdekében, hogy ellenőrizzék és szabályozzák a weboldalak közötti adatcserét, különösen akkor, amikor egy weboldal egy másik domain, protokoll vagy port erőforrásaihoz próbál hozzáférni.
Mi az az "origin"?
Egy weboldal origin-je az alábbi három részből áll:
- Protokoll (például: http:// vagy https://)
- Domain (például: example.com)
- Port (alapértelmezés szerint a 80-as port az HTTP-nél, és a 443-as port az HTTPS-nél)
CORS szükségessége
A böngészők azért korlátozzák a "cross-origin" kéréseket, hogy megakadályozzák a Cross-Site Scripting (XSS) vagy Cross-Site Request Forgery (CSRF) típusú támadásokat. A CORS mechanizmus lehetővé teszi a szerverek számára, hogy megadják, melyik originről érkezhetnek biztonságosan kérések. A kliens egy OPTION kéréssel (Preflight Requests) tájékozódik, hogy a szerver fogadja-e majd a kérést.
Mivel a fejlesztés során a szerver (http://localhost:3000) és kliens (http://localhost:80 vagy http://localhost:5500) ugyanazon a gépen futnak, de különböző portokon, ezért a CORS problémája felmerül. A böngésző ilyenkor védi az adatokat azáltal, hogy megköveteli, hogy a szerver kifejezetten engedélyezze ezeket a kéréseket.
CORS middleware
Egy CORS middleware segítségével jelezhetjük a böngészőnek, honnan és milyen kéréseket fogadunk.
function corsMiddleware(req, res, next) {
res.setHeader('Access-Control-Allow-Origin', '*');
res.setHeader('Access-Control-Allow-Methods', 'GET,POST,PUT,DELETE');
next();
}
Sablon motorok
Sablonmotor jelentősen megkönnyíti a kód és az adatok elválasztását, a weboldalak dinamikussá tételét, valamint a fejlesztés gyorsítását. Néhány feladat, amelyeknél a mindenképpen nyerhetsz az alkalmazásukkal:
Több nyelvű alkalmazás készítése
Többnyelvű oldalak esetén a sablonmotor segíthet az egyes nyelvi elemek beillesztésében, így a felületek könnyen fordíthatók anélkül, hogy az alap HTML-t módosítani kellene. Például egy webshop különböző országokban történő bevezetésekor a sablonokban könnyen cserélhetők a nyelvi és kulturális tartalmak. (pénznem, dátum, ...)
Üzleti levelek
E-mailek esetében szinte elengedhetetlen a sablonmotorok használata, mivel ezekkel lehet az adatokat (például a felhasználó nevét, ajánlatokat, stb.) egy szabványos HTML sablonba helyezni. Ez különösen hasznos a marketing e-mailekhez és értesítésekhez, mivel az egyedi adatokat a sablonmotor egyszerűen illeszti be.
Kód újrafelhasználásának biztosítása és moduláris struktúra kialakítása
Olyan alkalmazásoknál, amelyek komplex felületekkel és moduláris komponensekkel rendelkeznek (pl. egy online bolt, ahol a terméklistát, kosarat, profilokat dinamikusan kell kezelni). Itt a sablonmotor segít, hogy a különböző oldalakat (termékoldalak, kosár, ajánlók) könnyen lehessen kezelni és karbantartani, elválasztva az adatot a prezentációs rétegtől.
Üzleti adatok feldolgozása és jelentéskészítés
Ha adatokból automatikusan létrehozott jelentéseket vagy kimutatásokat kell készíteni (pl. heti vagy havi riportok), a sablonmotorokkal könnyen formázott HTML jelentéseket lehet generálni. Ezek a jelentések PDF-be is exportálhatók, amit később e-mailben lehet elküldeni az érintetteknek.
Komplex webes alkalmazások sablon-alapú komponensei
Nagyobb projektek esetén, ahol ugyanazok az elemek (fejléc, lábléc, menük, űrlapok) több oldalon is szerepelnek, a sablonmotorok lehetővé teszik a komponensek újrafelhasználását. Ez megkönnyíti a karbantartást és az átláthatóságot, hiszen egyetlen helyen lehet változtatni a közös elemeket.
E-mail sablonok készítése
Dinamikus HTML-generálás (backend-driven alkalmazások)
Ha szerveroldalon adatok alapján dinamikusan kell HTML-oldalakat előállítani (pl. profiloldalak, hírportálok), a sablonmotorral adatokat lehet HTML-be ágyazni, majd a felhasználók számára küldeni. Például egy Express.js alapú webalkalmazásban, ahol minden felhasználó személyre szabott tartalmat kap.
Amikor nem tudod kihasználni a bennük rejlő lehetőségeket
- SPA-k (Single Page Applications) esetén (pl. React, Vue, Angular alkalmazások).
- Egyszerű statikus oldalaknál
- Ha a szerveroldalon kizárólag API-kat készítesz, és az adatokat JSON formátumban szolgáltatod.
Néhány sablonmotor, amelyet az express is támogat:
- EJS (Embedded JavaScript)
<% %> és <%= %>
- Handlebars.js
{{ }}
- Pug (korábban Jade) alapértelmezett
- Mustache
{{ }}
- Nunjucks
{% %} és {{ }}