Ací es mostren les diferències entre la revisió seleccionada i la versió actual de la pàgina.
Ambdós costats versió prèvia Revisió prèvia Següent revisió | Revisió prèvia | ||
nodejs_express [2022/09/09 08:13] albert_palacios_jimenez [Configurant les URLs amb Express] |
nodejs_express [2022/09/16 03:11] (actual) albert_palacios_jimenez [Configurant una carpeta d'arxiu estàtics] |
||
---|---|---|---|
Línia 25: | Línia 25: | ||
\\ | \\ | ||
- | ===== Autoload amb nodemon | + | ===== Fer anar l' |
- | Com que estarem fent continuament canvis en codi i el servidor no els actualitza si no parem i reengeguem el servidor, ens anirà molt bé una eina anomenada '' | + | |
- | $ npm install nodemon | + | |
- | + | ||
- | Necessitem configurar el projecte per tal que arrenqui '' | + | |
- | " | + | Necessitem dues maneres de fer anar l' |
- | " | + | |
- | } | + | |
- | L' | + | * Mentre desenvolupem, |
+ | * Mentre l'aplicació està en funcionament, | ||
- | { | + | Per la primera farem servir el paquet '' |
- | " | + | |
- | " | + | |
- | " | + | |
- | " | + | |
- | " | + | |
- | " | + | |
- | " | + | |
- | " | + | |
- | "nodemon": " | + | |
- | }, | + | |
- | " | + | |
- | " | + | |
- | } | + | |
- | } | + | |
- | + | ||
- | I arrenquem l' | + | |
- | $ npm run development | + | |
- | | + | |
- | \\ | + | $ npm install nodemon |
+ | $ npm install forever | ||
- | ===== Supervisant | + | El paquet '' |
- | La manera de fer anar l' | + | El paquet '' |
- | $ npm install forever | ||
| | ||
- | '' | + | Hem de configurar l'arxiu '' |
" | " | ||
Línia 72: | Línia 49: | ||
} | } | ||
- | I ha de quedar | + | L' |
{ | { | ||
Línia 91: | Línia 68: | ||
} | } | ||
} | } | ||
+ | | ||
+ | Per arrencar l' | ||
- | I per arrencar l' | + | $ npm run development |
- | $ npm run app | + | |
+ | Per arrencar l' | ||
+ | $ npm run app | ||
\\ | \\ | ||
+ | |||
===== El servidor més simple ===== | ===== El servidor més simple ===== | ||
Línia 106: | Línia 88: | ||
const port = 3000 | const port = 3000 | ||
- | app.get('/', | + | app.get('/', |
- | | + | async function getHello |
- | }) | + | res.send(`Hello World`) |
+ | } | ||
app.listen(port, | app.listen(port, | ||
Línia 116: | Línia 99: | ||
</ | </ | ||
- | Aleshores ja pots navegar a: [[http:// | + | Ja pots navegar a: [[http:// |
Les claus d' | Les claus d' | ||
Línia 122: | Línia 105: | ||
* Fa servir ' | * Fa servir ' | ||
* Escolta les peticions a través del port 3000 | * Escolta les peticions a través del port 3000 | ||
- | * Qualsevolr | + | * Qualsevol |
* Al iniciar-se mostra el text " | * Al iniciar-se mostra el text " | ||
Línia 136: | Línia 119: | ||
const port = 3000 | const port = 3000 | ||
- | app.get('/ | + | app.get('/ |
- | res.send('Llista de clients') | + | async function getClients |
- | }) | + | res.send(`Llista de clients`) |
+ | } | ||
- | app.get('/ | + | app.get('/ |
- | res.send('Entra al sistema') | + | async function getLogin |
- | }) | + | res.send(`Entra al sistema`) |
+ | } | ||
- | app.get('/', | + | app.get('/', |
- | | + | async function getHello |
- | }) | + | res.send(`Hello World`) |
+ | } | ||
app.listen(port, | app.listen(port, | ||
Línia 164: | Línia 150: | ||
===== Configurant una carpeta d' | ===== Configurant una carpeta d' | ||
- | \\ | + | Habitualment, |
- | ===== Agafant paràmetres | + | Crea una carpeta anomenada '' |
+ | |||
+ | Aleshores afegeix aquesta línia de configuració al codi: | ||
+ | |||
+ | app.use(express.static(' | ||
+ | |||
+ | Per tal que quedi semblant a aquest codi: | ||
+ | |||
+ | <code javascript> | ||
+ | const express | ||
+ | const app = express() | ||
+ | const port = 3000 | ||
+ | |||
+ | app.use(express.static(' | ||
+ | |||
+ | app.get('/ | ||
+ | async function getClients (req, res) { | ||
+ | res.send(`Llista de clients`) | ||
+ | } | ||
+ | |||
+ | app.get('/ | ||
+ | async function getLogin (req, res) { | ||
+ | res.send(`Entra al sistema`) | ||
+ | } | ||
+ | |||
+ | app.get('/', | ||
+ | async function getHello (req, res) { | ||
+ | res.send(`Hello World`) | ||
+ | } | ||
+ | |||
+ | app.listen(port, | ||
+ | | ||
+ | }) | ||
+ | |||
+ | </ | ||
+ | |||
+ | Ara pots accedir als arxius | ||
+ | |||
+ | [[http:// | ||
+ | |||
+ | Fixa't que la carpeta '' | ||
\\ | \\ | ||
- | ===== Escollint el tipus de resposta | + | ===== Agafant paràmetres |
+ | |||
+ | Les URLs poden contenir paràmetres, | ||
+ | |||
+ | [[http:// | ||
+ | |||
+ | L' | ||
+ | |||
+ | Per veure els paràmetres de la URL i els seus valors, des del codi de Node ho podem fer així: | ||
+ | |||
+ | <code javascript> | ||
+ | const express = require(' | ||
+ | const url = require(' | ||
+ | const app = express() | ||
+ | const port = 3000 | ||
+ | |||
+ | app.get('/ | ||
+ | let query = url.parse(req.url, | ||
+ | if (query.cerca && query.color) { | ||
+ | | ||
+ | } else { | ||
+ | res.send(' | ||
+ | } | ||
+ | }) | ||
+ | |||
+ | app.listen(port, | ||
+ | | ||
+ | }) | ||
+ | |||
+ | </ | ||
+ | |||
+ | Comprova la diferència al navegar a aquestes direccions: | ||
+ | |||
+ | * [[http:// | ||
+ | * [[http:// | ||
\\ | \\ | ||
+ | |||
+ | |||
===== Utilitzant plantilles EJS ===== | ===== Utilitzant plantilles EJS ===== |