Hva er Express.js og hvorfor bør du bruke det?

Express.js (eller "Express") er et NodeJS-nettverk som brukes på baksiden (eller serversiden) av nettsteder og nettapplikasjoner. Express er fleksibel og minimalistisk, noe som betyr at den ikke har en omfattende samling av unødvendige biblioteker og pakker, og den dikterer heller ikke hvordan du skal bygge applikasjonen din.

Express-rammeverket bygger APIer som letter kommunikasjon gjennom HTTP-forespørsler og svar. En av de bemerkelsesverdige tingene med Express er at den gir utviklere full kontroll over forespørslene og svarene som er knyttet til hver av appens metoder.

I denne opplæringen lærer du hvordan og hvorfor du bør bruke Express i dine egne prosjekter.

Installere Express i prosjektet ditt

Før du kan bruke Express-rammeverket, må du installere det i prosjektkatalogen. Dette er en enkel prosess som krever NodeJS og npm.

Det første du må gjøre er å lage en package.json fil (i prosjektkatalogen/mappen) ved å bruke følgende kommando:

npm init

Utførelse av kommandoen ovenfor vil starte en prosess som vil be deg om følgende inndata:

• Pakkenavn
• Versjon
• Beskrivelse
• Inngangspunkt
• Test kommando
• Nøkkelord
• Forfatter
• Tillatelse

Feltene for pakkenavn, versjon, inngangspunkt og lisens har alle standardverdier som du enkelt kan overstyre ved å oppgi verdiene dine. Men hvis du vil beholde standardverdiene, kan du ganske enkelt bruke følgende kommando i stedet:

npm init -y

Utførelse av kommandoen ovenfor vil generere følgende package.json fil i prosjektkatalogen din:

{
"name": "minapp",
"versjon": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "ekko \"Feil: ingen test spesifisert\" && avslutt 1"
},
"søkeord": [],
"author": "",
"license": "ISC",
}

Nå kan du installere Express ved å bruke følgende kommando:

npm install express --save

Installering av Express vil generere en package-lock.json fil samt en node_modules mappe.

Forstå filen package.json

Grunnen til at du må lage en package.json filen før du installerer Express er at package.json filen fungerer som et depot, og lagrer viktige metadata om din NodeJS-prosjekter.Avhengigheter er navnet på et av disse metadatafeltene, og Express er en avhengighet.

Installering av Express i prosjektkatalogen din vil automatisk oppdatere din package.json fil.

Den oppdaterte package.json-filen

{
"name": "minapp",
"versjon": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "ekko \"Feil: ingen test spesifisert\" && avslutt 1"
},
"søkeord": [],
"author": "",
"license": "ISC",
"avhengigheter": {
"express": "^4.17.1"
}
}

Nå har du et "avhengigheter"-felt som har én avhengighet – Express. Og avhengigheter objekt lagrer programvare som prosjektet ditt er avhengig av for å fungere korrekt, som i dette tilfellet er Express-rammeverket.

Opprette en server med Express

Å ha et API som håndterer lagring og bevegelse av data er et krav for alle fullstackapplikasjoner, og Express gjør serveropprettingsprosessen rask og enkel.

Se tilbake på package.json filen ovenfor, og du vil se et "hoved"-felt. Dette feltet lagrer inngangspunktet til applikasjonen din, som er "index.js" i eksemplet ovenfor. Når du vil kjøre applikasjonen din (eller i dette tilfellet serveren du skal bygge), må du kjøre index.js fil ved å bruke følgende kommando:

node index.js

Men før du kommer til utførelsesstadiet, må du opprette index.js (eller serverapp) fil i prosjektkatalogen din.

Opprette index.js-filen

const express = require('express');
const app = express();
const port = 5000;
app.get('/', (req, res) => {
res.send('Serveren din er i drift')
})
app.listen (port, () => {
console.log(`Server kjører på: http://localhost:${port}`);
})

Filen ovenfor importerer Express og bruker den deretter til å lage en Express-applikasjon. Express-applikasjonen gir deretter tilgang til få og lytte metoder som er en del av Express-modulen. De app.listen() metoden er den første du må sette opp. Dens formål er å liste etter tilkoblinger på en bestemt port på vertsdatamaskinen, som er port 5000 i eksemplet ovenfor.

Hensikten med app.get() Metoden er å hente data fra en bestemt ressurs. Denne metoden har to argumenter: en bane og en tilbakeringingsfunksjon. Baneargumentet i eksemplet ovenfor har en skråstrek som representerer rotposisjonen. Derfor navigerer du til http://localhost: 5000 URL (som er roten til applikasjonen din), mens index.js-appen ovenfor kjører, vil produsere følgende utdata i nettleseren din:

De app.get() metode tilbakeringingsfunksjonen genererer utdataene ovenfor. Denne tilbakeringingsfunksjonen har to argumenter - forespørsel og svar. Svaret (som er res i eksemplet ovenfor) er HTTP-objektet som en Express-app sender etter en HTTP-forespørsel (som er det du gjør ved å skrive inn URL-en ovenfor i nettleseren din).

Betjene et statisk nettsted med din ekspressserver

Servere spiller en betydelig rolle i utviklingen av APIer som hjelper til med å lagre og overføre dynamiske data, og det er der du mest sannsynlig vil bruke en Express-server i dine egne prosjekter.

En Express-server kan imidlertid også vise statiske filer. Hvis du for eksempel ønsker å lage et statisk nettsted (for eksempel en for en personlig trener, en livscoach eller en stylist), kan du bruke Express-serveren til å være vert for nettstedet.

Eksempel på et statisk HTML-nettsted

 hjem 







Velkommen

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 distinctio!

Se tjenester

HTML-koden ovenfor skaper en hyggelig statisk hjemmeside for et personlig stylistnettsted ved å koble til følgende style.css-fil:

*{
margin: 0;
polstring: 0;
boksstørrelse: border-box;
}
kropp {
font-family: 'Lato', sans-serif;
linjehøyde: 1,5;
}
en {
farge: #333;
tekst-dekor: ingen;
}
ul {
liste-stil: ingen;
}
p {
margin: .5rem 0;
}
h1{
marg-venstre: 2rem;
}
/* Nytte */
.container {
maks-bredde: 1100px;
margin: auto;
polstring: 0 2rem;
overløp: skjult;
}
.btn {
display: inline-blokk;
grense: ingen;
bakgrunn: #910505;
farge: #fff;
polstring: 0,5rem 1rem;
kantradius: 0,5rem;
}
.btn: hover {
opasitet: 0,9;
}
/* Navbar */
#navbar {
bakgrunn: #fff;
posisjon: klebrig;
topp: 0;
z-indeks: 2;
}
#navbar .container {
display: rutenett;
rutenett-mal-kolonner: 6fr 3fr 2fr;
polstring: 1rem;
align-items: center;
}
#navbar h1 {
farge: #b30707;
}
#navbar ul {
rettferdiggjøre-selv: slutt;
display: flex;
marg-høyre: 3,5rem;
}
#navbar ul li a {
polstring: 0,5rem;
font-weight: fet;
}
#navbar ul li a.current {
bakgrunn: #b30707;
farge: #fff;
}
#navbar ul li a: hover {
bakgrunn: #f3f3f3;
farge: #333;
}
#navbar .social {
rettferdiggjøre-selv: senter;
}
#navbar .social i {
farge: #777;
marg-høyre: .5rem;
}
/* hjem */
#hjem {
farge: #fff;
bakgrunn: #333;
polstring: 2rem;
stilling: pårørende;
}
#hjem: før {
innhold: '';
bakgrunn: url ( https://source.unsplash.com/random) ingen gjentakelse i midten/dekselet;
posisjon: absolutt;
topp: 0;
venstre: 0;
bredde: 100 %;
høyde: 100 %;
opasitet: 0,4;
}
#home .showcase-container {
display: rutenett;
rutenett-mal-kolonner: gjenta (2, 1fr);
rettferdiggjøre-innhold: senter;
align-items: center;
høyde: 100vh;
}
#home .showcase-content {
z-indeks: 1;
}
#home .showcase-content p {
marg-bunn: 1rem;
}

Betjene nettstedet med ekspressserveren

const express = require('express');
const app = express();
const port = 5000;
app.use (express.static('public'));
app.get('/', (req, res) => {
res.sendFile('index.html')
})
app.listen (port, () => {
console.log(`Server kjører på: http://localhost:${port}`);
})

HTML- og CSS-filene ovenfor er i en offentlig mappe i hovedprosjektkatalogen. HTML-filens plassering gjør den tilgjengelig for Express-serveren og dens funksjoner.

En av de nye funksjonene i Express-serveren ovenfor er app.use() metode. Den monterer express.static() mellomvare, som serverer statiske filer. Dette gjør det mulig å bruke res.sendFile() funksjon for å betjene det statiske index.html filen ovenfor.

Navigerer til http://localhost: 5000 plassering i nettleseren din vil vise noe som ligner på følgende utdata:

Utforsk Backend-utvikling

Express-rammeverket lar deg lage spesifikke HTTP-forespørsler og motta passende svar ved å bruke et sett med forhåndsdefinerte metoder. Det er også et av de mest populære backend-rammeverkene i dag.

Å lære å bruke Express-rammeverket er et flott trekk. Men hvis du virkelig ønsker å bli en profesjonell backend-utvikler, er det mye mer du trenger å lære.

Lær hvordan du blir en backend-utvikler i 2021

Hvis du har fokus på en karriere innen IT, kan du gjøre verre enn å lære deg ferdighetene du trenger for å være backend-utvikler.

Les Neste

Om forfatteren