96 lines
3.7 KiB
TeX
96 lines
3.7 KiB
TeX
\section{Express.js}
|
|
|
|
\begin{frame}[fragile]{Miért nem elég a nyers \texttt{http} modul?}
|
|
\footnotesize
|
|
Emlékezzünk vissza az 1. héten írt szerverre: egyetlen callback-ben kellett eldöntenünk, milyen útvonalra és milyen metódussal érkezett a kérés.
|
|
|
|
\begin{lstlisting}[language=JavaScript,style=NodeJS]
|
|
const server = http.createServer((req, res) => {
|
|
if (req.url === '/users' && req.method === 'GET') {
|
|
// ...
|
|
} else if (req.url === '/users' && req.method === 'POST') {
|
|
// ...
|
|
} else if (req.url.startsWith('/users/') && req.method === 'GET') {
|
|
// egy adott felhasznalo -- id kezzel kivagva az URL-bol
|
|
} // es igy tovabb...
|
|
});
|
|
\end{lstlisting}
|
|
|
|
\begin{alertblock}{A probléma}
|
|
Tíz-húsz végpontnál ez a lánc kezelhetetlenné válik: nincs beépített segítség a paraméterek kiolvasásához, a JSON törzs feldolgozásához, vagy az útvonalak csoportosításához.
|
|
\end{alertblock}
|
|
\end{frame}
|
|
|
|
\begin{frame}{Mi az Express.js?}
|
|
\footnotesize
|
|
Az \textbf{Express.js} a legelterjedtebb Node.js webes keretrendszer (web framework): a nyers \texttt{http} modulra épül, és eltünteti a kézi \texttt{if-else} láncokat egy sokkal kényelmesebb, deklaratív routing API-val.
|
|
|
|
\begin{itemize}
|
|
\item Egyszerű, minimalista -- nem kényszerít ránk egy előírt projektszerkezetet
|
|
\item Beépített segítség: útvonal-paraméterek, query stringek, JSON válaszok
|
|
\item Hatalmas ökoszisztéma: middleware-ek szinte minden problémára (autentikáció, naplózás, CORS, stb.)
|
|
\item Ez lesz a tárgy hátralévő részének elsődleges keretrendszere
|
|
\end{itemize}
|
|
|
|
\begin{block}{Fontos}
|
|
Az Express \emph{nem} helyettesíti a Node.js-t -- ráépül. Amit az 1. héten a \texttt{http} modulról tanultunk (request/response ciklus), az Express alatt is pontosan úgy működik.
|
|
\end{block}
|
|
\end{frame}
|
|
|
|
\begin{frame}[fragile]{Az első Express alkalmazás}
|
|
\footnotesize
|
|
Néhány sorból már működő szerverünk van -- hasonlítsd össze az előző dia \texttt{if-else} láncával!
|
|
|
|
\begin{block}{Telepítés}
|
|
\begin{verbatim}
|
|
npm install express
|
|
\end{verbatim}
|
|
\end{block}
|
|
|
|
\begin{lstlisting}[language=JavaScript,style=NodeJS]
|
|
const express = require('express');
|
|
const app = express();
|
|
|
|
app.get('/', (req, res) => {
|
|
res.send('Hello, Express!');
|
|
});
|
|
|
|
app.listen(3000, () => {
|
|
console.log('Szerver fut: http://localhost:3000');
|
|
});
|
|
\end{lstlisting}
|
|
\end{frame}
|
|
|
|
\begin{frame}[fragile]{A middleware fogalma}
|
|
\footnotesize
|
|
Az Express legfontosabb koncepciója a \textbf{middleware}: egy függvény, ami a kérés és a válasz között fut le, és vagy továbbengedi a folyamatot (\texttt{next()}), vagy lezárja azt egy válasszal.
|
|
|
|
\begin{lstlisting}[language=JavaScript,style=NodeJS]
|
|
app.use((req, res, next) => {
|
|
console.log(`${req.method} ${req.url}`);
|
|
next(); // tovabb a kovetkezo middleware-hez/route-hoz
|
|
});
|
|
|
|
app.use(express.json()); // JSON body-t olvaso middleware
|
|
\end{lstlisting}
|
|
|
|
\begin{itemize}
|
|
\item A kérések egy "csövön" (pipeline) haladnak végig, middleware-eken keresztül
|
|
\item \texttt{express.json()} nélkül a \texttt{req.body} üres lenne POST/PUT kéréseknél
|
|
\item Naplózás, autentikáció, hibakezelés -- mind middleware-ként valósul meg
|
|
\end{itemize}
|
|
\end{frame}
|
|
|
|
\begin{frame}{Összefoglalás -- Express.js}
|
|
\footnotesize
|
|
\begin{block}{Express.js alapok}
|
|
\begin{itemize}
|
|
\item Node.js-re épülő, minimalista webes keretrendszer
|
|
\item Kiváltja a kézi \texttt{if-else} útvonal-elágazásokat
|
|
\item \texttt{app.listen()} -- szerver indítása, ugyanaz mint a nyers \texttt{http}-nél
|
|
\item Middleware: \texttt{app.use()} -- a kérés-válasz "csövének" építőeleme
|
|
\item \texttt{express.json()} -- beépített middleware a JSON törzs feldolgozásához
|
|
\end{itemize}
|
|
\end{block}
|
|
\end{frame}
|