Che cos'è Express.js e perché dovresti usarlo?

Express.js (o "Express") è un framework Web NodeJS utilizzato sul back-end (o lato server) di siti Web e applicazioni Web. Express è flessibile e minimalista, il che significa che non ha una vasta collezione di librerie e pacchetti non necessari, né detta come dovresti costruire la tua applicazione.

Il framework Express crea API che facilitano la comunicazione tramite richieste e risposte HTTP. Una delle cose notevoli di Express è che offre agli sviluppatori il controllo completo sulle richieste e le risposte associate a ciascuno dei metodi della sua app.

In questo tutorial imparerai come e perché dovresti usare Express nei tuoi progetti.

Installazione di Express nel tuo progetto

Prima di poter utilizzare il framework Express, dovrai installarlo nella directory del tuo progetto. Questo è un processo semplice che richiede NodeJS e npm.

La prima cosa che devi fare è creare un pacchetto.json file (all'interno della directory/cartella del progetto) utilizzando il seguente comando:

npm inizia

L'esecuzione del comando sopra avvierà un processo che richiederà i seguenti input:

• Nome del pacchetto
• Versione
• Descrizione
• Punto d'entrata
• Comando di prova
• parole chiave
• Autore
• Licenza

Il nome del pacchetto, la versione, il punto di ingresso e i campi della licenza hanno tutti valori predefiniti che puoi facilmente sovrascrivere fornendo i tuoi valori. Tuttavia, se desideri mantenere i valori predefiniti, puoi semplicemente utilizzare il seguente comando:

npm init -y

L'esecuzione del comando sopra genererà quanto segue pacchetto.json file nella directory del tuo progetto:

{
"nome": "miaapp",
"versione": "1.0.0",
"descrizione": "",
"main": "index.js",
"script": {
"test": "echo \"Errore: nessun test specificato\" && exit 1"
},
"parole chiave": [],
"autore": "",
"licenza": "ISC",
}

Ora puoi installare Express usando il seguente comando:

npm install express --save

L'installazione di Express genererà un pacchetto-lock.json file così come a node_modules cartella.

Comprensione del file package.json

Il motivo per cui devi creare un pacchetto.json file prima di installare Express è che il pacchetto.json il file funge da repository, memorizzando importanti metadati sul tuo Progetti NodeJS.dipendenze è il nome di uno di questi campi di metadati ed Express è a dipendenza.

L'installazione di Express nella directory del tuo progetto aggiornerà automaticamente il tuo pacchetto.json file.

Il file package.json aggiornato

{
"nome": "miaapp",
"versione": "1.0.0",
"descrizione": "",
"main": "index.js",
"script": {
"test": "echo \"Errore: nessun test specificato\" && exit 1"
},
"parole chiave": [],
"autore": "",
"licenza": "ISC",
"dipendenze": {
"espresso": "^4.17.1"
}
}

Ora hai un campo "dipendenze" che ha una dipendenza: Express. E il dipendenze object memorizza il software da cui il tuo progetto dipende per funzionare correttamente, che in questo caso è il framework Express.

Creazione di un server con Express

Avere un'API che gestisca l'archiviazione e lo spostamento dei dati è un requisito per qualsiasi applicazione full-stack ed Express rende il processo di creazione del server facile e veloce.

Guarda indietro al pacchetto.json file sopra e vedrai un campo "principale". Questo campo memorizza il punto di ingresso alla tua applicazione, che è "index.js" nell'esempio sopra. Quando vuoi eseguire la tua applicazione (o in questo caso, il server che stai per costruire), dovrai eseguire il index.js file utilizzando il seguente comando:

nodo index.js

Tuttavia, prima di arrivare alla fase di esecuzione, dovrai creare il index.js (o dell'app server) nella directory del progetto.

Creazione del file index.js

const express = require('express');
const app = express();
const porta = 5000;
app.get('/', (req, res) => {
res.send('Il tuo server è operativo')
})
app.listen (porta, () => {
console.log(`Il server è in esecuzione su: http://localhost:${port}`);
})

Il file sopra importa Express, quindi lo utilizza per creare un'applicazione Express. L'applicazione Express fornisce quindi l'accesso al ottenere e Ascoltare metodi che fanno parte del modulo Express. Il app.ascolta() metodo è il primo che devi impostare. Il suo scopo è quello di elencare le connessioni su una porta specifica del computer host, che è porta 5000 nell'esempio sopra.

Lo scopo del app.get() Il metodo consiste nell'ottenere dati da una risorsa specifica. Questo metodo ha due argomenti: un percorso e una funzione di callback. L'argomento percorso nell'esempio precedente ha una barra che rappresenta la posizione radice. Pertanto, navigando su http://localhost: 5000 URL (che è la radice della tua applicazione), mentre la tua app index.js sopra è in esecuzione, produrrà il seguente output nel tuo browser:

Il app.get() La funzione di callback del metodo genera l'output sopra. Questa funzione di callback ha due argomenti: richiesta e risposta. La risposta (che è res nell'esempio sopra) è l'oggetto HTTP che un'app Express invia dopo una richiesta HTTP (che è quello che fai digitando l'URL sopra nel tuo browser).

Servire un sito web statico con il tuo server Express

I server svolgono un ruolo significativo nello sviluppo di API che aiutano a memorizzare e trasferire dati dinamici, ed è qui che molto probabilmente utilizzerai un server Express nei tuoi progetti.

Tuttavia, un server Express può anche servire file statici. Ad esempio, se desideri creare un sito Web statico (come uno per un personal trainer, un life coach o uno stilista), puoi utilizzare il tuo server Express per ospitare il sito Web.

Un esempio di sito Web HTML statico

 casa 







Ben arrivato

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus rerum officia quibusdam mollitia deserunt animi soluta laudantium. Quam sapiente a dolorum magnam necessitatibus quis tempore facere totam. Dolor, sequi distintio!

Visualizza i servizi

Il codice HTML sopra crea una piacevole home page statica di un sito Web di stilista personale collegandosi al seguente file style.css:

*{
margine: 0;
imbottitura: 0;
box-size: border-box;
}
corpo {
font-family: 'Lato', sans-serif;
altezza della linea: 1,5;
}
un {
colore: #333;
decorazione del testo: nessuna;
}
ul {
stile elenco: nessuno;
}
P {
margine: 0,5rem 0;
}
h1{
margine sinistro: 2rem;
}
/* Utilità */
.contenitore {
larghezza massima: 1100 px;
margine: automatico;
imbottitura: 0 2rem;
trabocco: nascosto;
}
.btn {
display: blocco in linea;
confine: nessuno;
sfondo: #910505;
colore: #fff;
imbottitura: 0,5 rem 1 rem;
raggio di confine: 0,5 rem;
}
.btn: hover {
opacità: 0,9;
}
/* Barra di navigazione */
#barra di navigazione {
sfondo: #fff;
posizione: appiccicosa;
in alto: 0;
indice z: 2;
}
#navbar .contenitore {
visualizzazione: griglia;
colonne-modello-griglia: 6fr 3fr 2fr;
imbottitura: 1rem;
allinea-oggetti: centro;
}
#barra di navigazione h1 {
colore: #b30707;
}
#navbar ul {
giustificarsi: fine;
display: flessibile;
margine destro: 3.5rem;
}
#navbar ul li a {
imbottitura: 0,5 rem;
font-weight: grassetto;
}
#navbar ul li a.current {
sfondo: #b30707;
colore: #fff;
}
#navbar ul li a: hover {
sfondo: #f3f3f3;
colore: #333;
}
#barra di navigazione .social {
giustificarsi: centro;
}
#navbar .social i {
colore: #777;
margine destro: .5rem;
}
/* casa */
#casa {
colore: #fff;
sfondo: #333;
imbottitura: 2rem;
posizione: relativa;
}
#casa: prima {
contenuto: '';
sfondo: URL ( https://source.unsplash.com/random) centro/coperchio senza ripetizione centro;
posizione: assoluta;
in alto: 0;
sinistra: 0;
larghezza: 100%;
altezza: 100%;
opacità: 0,4;
}
#home .vetrina-contenitore {
visualizzazione: griglia;
colonne-modello-griglia: ripeti (2, 1fr);
giustificare-contenuto: centro;
allinea-oggetti: centro;
altezza: 100vh;
}
#home .showcase-content {
indice z: 1;
}
#home .vetrina-contenuto p {
margine inferiore: 1rem;
}

Servire il sito Web con Express Server

const express = require('express');
const app = express();
const porta = 5000;
app.use (express.static('public'));
app.get('/', (req, res) => {
res.sendFile('index.html')
})
app.listen (porta, () => {
console.log(`Il server è in esecuzione su: http://localhost:${port}`);
})

I file HTML e CSS sopra si trovano in una cartella pubblica nella directory principale del progetto. La posizione del file HTML lo rende accessibile al server Express e alle sue funzioni.

Una delle nuove funzioni nel server Express sopra è il app.use() metodo. Monta il express.static() middleware, che serve file statici. In questo modo è possibile utilizzare il res.sendFile() funzione per servire la statica index.html file sopra.

Navigando verso il http://localhost: 5000 posizione nel tuo browser mostrerà qualcosa di simile al seguente output:

Esplora lo sviluppo del backend

Il framework Express consente di effettuare richieste HTTP specifiche e ricevere risposte appropriate utilizzando una serie di metodi predefiniti. È anche uno dei framework di backend più popolari oggi.

Imparare a usare il framework Express è una grande mossa. Ma se vuoi davvero diventare uno sviluppatore backend professionale, c'è molto altro che devi imparare.

Scopri come diventare uno sviluppatore backend nel 2021

Se sei concentrato su una carriera nell'IT, puoi fare di peggio che acquisire le competenze necessarie per essere uno sviluppatore di backend.

Leggi Avanti

Circa l'autore