bytes.cat

La wiki d'FP d'informàtica

Eines de l'usuari

Eines del lloc

Camí:
nodejs_express

Diferències

Ací es mostren les diferències entre la revisió seleccionada i la versió actual de la pàgina.

Enllaç a la visualització de la comparació

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'aplicació =====
-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 ''nodemon'', que autocarregarà els canvis: +
-  $ npm install nodemon +
-   +
-Necessitem configurar el projecte per tal que arrenqui ''nodemon'' quan estem desenvolupant o fent canvis a l'estructura de directoris. Podem fer-ho configurant un script a l'arxiu ''package.json''. Amb un editor de text afegeix les següents línies a l'arxiu ''package.json'':+
  
-  "scripts": { +Necessitem dues maneres de fer anar l'aplicació
-     "development": "nodemon app.js" +
-  }+
  
-L'arxiu ''package.json'' ha de ser semblant a aquest:+  * Mentre desenvolupem, necessitem fer reinicis continuament per veure els nous canvis 
 +  * Mentre l'aplicació està en funcionament, s'ha de reiniciar sola si es penja o s'atura
  
-  { +Per la primera farem servir el paquet ''nodemon'', i per la segona el paquet ''forever''.
-    "name": "myApp", +
-    "version": "1.0.0", +
-    "description": "", +
-    "main": "index.js", +
-    "author": "", +
-    "license": "ISC", +
-    "dependencies": { +
-      "express": "^4.18.1", +
-      "nodemon": "^2.0.19" +
-    }, +
-    "scripts": { +
-      "development": "nodemon app.js" +
-    } +
-  } +
-   +
-I arrenquem l'aplicació en mode de desenvolupament amb: +
-  $ npm run development +
-  +
  
-\\+  $ npm install nodemon 
 +  $ npm install forever
  
-===== Supervisant l'aplicació =====+El paquet ''nodemon'' observa l'estructura de directoris i reinicia el servidor si hi ha canvis, així podem desenvolupar sense la molèstia d'anar reiniciant nosaltres el servidor
  
-La manera de fer anar l'aplicació quan desenvolupem (i fem canvis al codi o als arxius) és diferent de quan està funcionant pels clients. Habitualment l'aplicació ha de funcionar de manera ininterrompuda, per aquest motiu necessitem el paquet anomenat ''forever''+El paquet ''forever'' observa el servidor i el reinicia si veu que s'ha aturat o quedat penjat, així sabem que funciona encara que no estiguem vigilant contínuament
  
-  $ npm install forever 
      
-''forever'' vigila que l'aplicació no es pengi o s'aturi, i la reinicia en cas necessari. Per configurar-lo cal afegir l'script a l'arxiu ''package.json'':+Hem de configurar l'arxiu ''package.json'' per poder arrencar el servidor en mode desenvolupament o en mode d'aplicació. Podem fer-ho amb un editor de text afegint ''scripts'':
  
     "scripts": {     "scripts": {
Línia 72: Línia 49:
     }     }
  
-I ha de quedar semblant a aquest:+L'arxiu ''package.json'' ha de ser semblant a aquest:
  
   {   {
Línia 91: Línia 68:
     }     }
   }   }
 +  
 +Per arrencar l'aplicació quan estem desenvolupant:
  
-I per arrencar l'aplicació en mode de funcionament (no de desenvolupament): +  $ npm run development 
-  $ npm run app+   
 +Per arrencar l'aplicació quan funciona normalment:
  
 +  $ 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('/', (req, res) => { +    app.get('/', getHello) 
-     res.send('Hello World!') +    async function getHello (req, res) { 
-    })+        res.send(`Hello World`) 
 +    }
  
     app.listen(port, () => {     app.listen(port, () => {
Línia 116: Línia 99:
 </code> </code>
  
-Aleshores ja pots navegar a: [[http://localhost:3000|http://localhost:3000]] i comprovar que el servidor funciona+Ja pots navegar a: [[http://localhost:3000|http://localhost:3000]] i comprovar que el servidor funciona
  
 Les claus d'aquest codi són: Les claus d'aquest codi són:
Línia 122: Línia 105:
   * Fa servir 'express' per iniciar el servidor   * Fa servir 'express' per iniciar el servidor
   * Escolta les peticions a través del port 3000   * Escolta les peticions a través del port 3000
-  * Qualsevolr URL retorna el text 'Hello World!'+  * Qualsevol URL retorna el text 'Hello World!'
   * Al iniciar-se mostra el text "Example app ... 3000" a través del terminal   * Al iniciar-se mostra el text "Example app ... 3000" a través del terminal
  
Línia 136: Línia 119:
     const port = 3000     const port = 3000
    
-    app.get('/clients', (req, res) => { +    app.get('/clients', getClients) 
-      res.send('Llista de clients') +    async function getClients (req, res) { 
-    })+        res.send(`Llista de clients`) 
 +    }
    
-    app.get('/login', (req, res) => { +    app.get('/login', getLogin) 
-      res.send('Entra al sistema') +    async function getLogin (req, res) { 
-    })+        res.send(`Entra al sistema`) 
 +    }
    
-    app.get('/', (req, res) => { +    app.get('/', getHello) 
-     res.send('Hello World!') +    async function getHello (req, res) { 
-    })+        res.send(`Hello World`) 
 +    }
    
     app.listen(port, () => {     app.listen(port, () => {
Línia 155: Línia 141:
 Fixa't que cada entrada de '.get' configura una direcció, i que es segueix la preferència segons s'han definit al codi. Ara ja es pot navegar a les diferents web: Fixa't que cada entrada de '.get' configura una direcció, i que es segueix la preferència segons s'han definit al codi. Ara ja es pot navegar a les diferents web:
  
-  * http://localhost:3000|http://localhost:3000  +  * [[http://localhost:3000|http://localhost:3000]]  
-  * http://localhost:3000/clients|http://localhost:3000/clients +  * [[http://localhost:3000/clients|http://localhost:3000/clients]] 
-  * http://localhost:3000/login|http://localhost:3000/login+  * [[http://localhost:3000/login|http://localhost:3000/login]]
      
  
Línia 164: Línia 150:
 ===== Configurant una carpeta d'arxiu estàtics ===== ===== Configurant una carpeta d'arxiu estàtics =====
  
-\\+Habitualment, els servidors tenen una carpeta de la que es serveixen els arxius tal i com estàn al disc, sense modificacions. D'aquests arxius en diem ''arxius estàtics''. I normalment aquesta carpeta es diu ''public'' perquè quedi clar que el què conté està publicat a través de la xarxa.
  
-===== Agafant paràmetres de la URL  =====+Crea una carpeta anomenada ''public'' i posa-hi dins una foto anomenada ''foto.jpg'' 
 + 
 +Aleshores afegeix aquesta línia de configuració al codi: 
 + 
 +    app.use(express.static('public')) 
 + 
 +Per tal que quedi semblant a aquest codi: 
 + 
 +<code javascript> 
 +    const express = require('express') 
 +    const app = express() 
 +    const port = 3000 
 +     
 +    app.use(express.static('public')) 
 +  
 +    app.get('/clients', getClients) 
 +    async function getClients (req, res) { 
 +        res.send(`Llista de clients`) 
 +    } 
 +  
 +    app.get('/login', getLogin) 
 +    async function getLogin (req, res) { 
 +        res.send(`Entra al sistema`) 
 +    } 
 +  
 +    app.get('/', getHello) 
 +    async function getHello (req, res) { 
 +        res.send(`Hello World`) 
 +    } 
 +  
 +    app.listen(port, () => { 
 +     console.log(`Example app listening on port ${port}`) 
 +    }) 
 +     
 +</code> 
 + 
 +Ara pots accedir als arxius de la carpeta ''public'' posant-ne la direcció com si fós una URL: 
 + 
 +[[http://localhost:3000/foto.jpg|http://localhost:3000/foto.jpg]] 
 + 
 +Fixa't que la carpeta ''public'' té preferència perquè està configurada la primera, però que les altres direccions continuen funcionant
  
 \\ \\
  
-===== Escollint el tipus de resposta que donem al client =====+===== Agafant paràmetres de la URL (Objecte 'req')  ===== 
 + 
 +Les URLs poden contenir paràmetres, i aquests fan que es rebin uns continguts o uns altres. Els paràmetres van al final de la URL darrera d'un símbol de ''?'' com en aquest exemple: 
 + 
 +[[http://localhost:3000/llistat?cerca=cotxe|http://localhost:3000/llistat?cerca=cotxe]] 
 + 
 +L'objecte ''req'' ens dóna informació de la crida que ens fa el client, i part d'aquesta informació són els paràmetres de la URL. 
 + 
 +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('express') 
 +  const url = require('url') 
 +  const app = express() 
 +  const port = 3000 
 + 
 +  app.get('/llistat', (req, res) => { 
 +   let query = url.parse(req.url, true).query; 
 +    if (query.cerca && query.color) { 
 +     res.send(`Aquí tens el llistat de ${query.cerca} de color ${query.color}`) 
 +    } else { 
 +      res.send('Paràmetres incorrectes') 
 +    } 
 +  }) 
 + 
 +  app.listen(port, () => { 
 +   console.log(`Example app listening on port ${port}`) 
 +  }) 
 + 
 +</code> 
 + 
 +Comprova la diferència al navegar a aquestes direccions: 
 + 
 +  * [[http://localhost:3000/llistat?cerca=cotxes&&color=blau|http://localhost:3000/llistat?cerca=cotxes&&color=blau]] 
 +  * [[http://localhost:3000/llistat?cerca=radio&&color=verd|http://localhost:3000/llistat?cerca=readio&&color=verd]]
  
 \\ \\
 +
 +
  
 ===== Utilitzant plantilles EJS ===== ===== Utilitzant plantilles EJS =====
nodejs_express.1662711209.txt.gz · Darrera modificació: 2022/09/09 08:13 per albert_palacios_jimenez

Eines de la pàgina

Excepte on es digui una altra cosa, el contingut d'aquest wiki està subjecte a la llicència següent: CC Attribution-Share Alike 4.0 International
CC Attribution-Share Alike 4.0 International Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki