Wat is Express.js en waarom zou je het gebruiken?

Express.js (of "Express") is een NodeJS-webframework dat wordt gebruikt op de back-end (of serverzijde) van websites en webapplicaties. Express is flexibel en minimalistisch, wat betekent dat het geen uitgebreide verzameling onnodige bibliotheken en pakketten heeft, en evenmin bepaalt hoe u uw toepassing moet bouwen.

Het Express-framework bouwt API's die communicatie via HTTP-verzoeken en -antwoorden vergemakkelijken. Een van de opmerkelijke dingen van Express is dat het ontwikkelaars volledige controle geeft over de verzoeken en reacties die zijn gekoppeld aan elk van de methoden van de app.

In deze zelfstudie leert u hoe en waarom u Express in uw eigen projecten moet gebruiken.

Express installeren in uw project

Voordat u het Express-framework kunt gebruiken, moet u het in uw projectdirectory installeren. Dit is een eenvoudig proces dat vereist NodeJS en npm.

Het eerste dat u hoeft te doen, is een pakket.json bestand (in uw projectdirectory/map) met behulp van de volgende opdracht:

npm init

Als u de bovenstaande opdracht uitvoert, wordt een proces gestart dat u om de volgende invoer vraagt:

• Verpakkingsnaam
• Versie
• Beschrijving
• Ingangspunt
• Testopdracht
• Trefwoorden
• Auteur
• Vergunning

De pakketnaam, versie, ingangspunt en licentievelden hebben allemaal standaardwaarden die u eenvoudig kunt overschrijven door uw waarden op te geven. Als u echter de standaardwaarden wilt behouden, kunt u in plaats daarvan eenvoudig de volgende opdracht gebruiken:

npm init -y

Als u de bovenstaande opdracht uitvoert, wordt het volgende gegenereerd: pakket.json bestand in uw projectmap:

{
"naam": "mijnapp",
"versie": "1.0.0",
"Beschrijving": "",
"main": "index.js",
"scripts": {
"test": "echo \"Fout: geen test opgegeven\" && exit 1"
},
"zoekwoorden": [],
"auteur": "",
"licentie": "ISC",
}

Nu kunt u Express installeren met de volgende opdracht:

npm install express --save

Als u Express installeert, wordt een package-lock.json bestand evenals een node_modules map.

Het bestand package.json begrijpen

De reden waarom u een moet maken pakket.json bestand voordat u Express installeert, is dat de pakket.json bestand fungeert als een opslagplaats en bewaart belangrijke metadata over uw NodeJS-projecten.afhankelijkheden is de naam van een van deze metadatavelden, en Express is een afhankelijkheid.

Als u Express in uw projectdirectory installeert, wordt uw pakket.json het dossier.

Het bijgewerkte bestand package.json

{
"naam": "mijnapp",
"versie": "1.0.0",
"Beschrijving": "",
"main": "index.js",
"scripts": {
"test": "echo \"Fout: geen test opgegeven\" && exit 1"
},
"zoekwoorden": [],
"auteur": "",
"licentie": "ISC",
"afhankelijkheden": {
"express": "^4.17.1"
}
}

Nu heb je een veld "afhankelijkheden" met één afhankelijkheid: Express. En de afhankelijkheden object slaat software op waarvan uw project afhankelijk is om correct te functioneren, in dit geval het Express-framework.

Een server maken met Express

Het hebben van een API die de opslag en verplaatsing van gegevens afhandelt, is een vereiste voor elke full-stack-applicatie, en Express maakt het proces voor het maken van servers snel en eenvoudig.

Kijk terug naar de pakket.json bestand hierboven en je ziet een "hoofd" -veld. In dit veld wordt het toegangspunt voor uw toepassing opgeslagen, dat in het bovenstaande voorbeeld 'index.js' is. Wanneer u uw applicatie (of in dit geval de server die u gaat bouwen) wilt uitvoeren, moet u de index.js bestand met de volgende opdracht:

knooppunt index.js

Voordat u echter in de uitvoeringsfase komt, moet u de index.js (of server-app) bestand in uw projectdirectory.

Het index.js-bestand maken

const express = vereisen('express');
const-app = express();
const poort = 5000;
app.get('/', (req, res) => {
res.send('Uw server is operationeel')
})
app.luister (poort, () => {
console.log(`Server draait op: http://localhost:${port}`);
})

Het bovenstaande bestand importeert Express en gebruikt het vervolgens om een ​​Express-toepassing te maken. De Express-applicatie geeft dan toegang tot de krijgen en luister methoden die deel uitmaken van de Express-module. De app.luisteren() methode is de eerste die u moet instellen. Het doel is om een ​​lijst te maken van verbindingen op een specifieke poort van de hostcomputer, namelijk: poort 5000 in het bovenstaande voorbeeld.

Het doel van de app.get() methode is om gegevens uit een specifieke bron te halen. Deze methode heeft twee argumenten: een pad en een callback-functie. Het padargument in het bovenstaande voorbeeld heeft een schuine streep naar voren die de hoofdpositie vertegenwoordigt. Navigeer daarom naar de http://localhost: 5000 URL (de hoofdmap van uw toepassing), terwijl uw index.js-app hierboven wordt uitgevoerd, produceert de volgende uitvoer in uw browser:

De app.get() methode callback-functie genereert de bovenstaande uitvoer. Deze callback-functie heeft twee argumenten: verzoek en antwoord. Het antwoord (dat is res in het bovenstaande voorbeeld) is het HTTP-object dat een Express-app verzendt na een HTTP-verzoek (wat u doet door de bovenstaande URL in uw browser te typen).

Een statische website aanbieden met uw Express-server

Servers spelen een belangrijke rol bij de ontwikkeling van API's die helpen bij het opslaan en overbrengen van dynamische gegevens, en dat is waar u hoogstwaarschijnlijk een Express-server in uw eigen projecten zult gebruiken.

Een Express-server kan echter ook statische bestanden bedienen. Als u bijvoorbeeld een statische website wilt maken (zoals een website voor een personal trainer, een lifecoach of een stylist), kunt u uw Express-server gebruiken om de website te hosten.

Een statisch HTML-websitevoorbeeld

 huis 







Welkom

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

Bekijk diensten

De bovenstaande HTML-code creëert een aangename statische startpagina van een persoonlijke stylist-website door te linken naar het volgende style.css-bestand:

*{
marge: 0;
opvulling: 0;
box-sizing: border-box;
}
lichaam {
font-familie: 'Lato', schreefloos;
lijnhoogte: 1,5;
}
een {
kleur: #333;
tekstdecoratie: geen;
}
ul {
lijststijl: geen;
}
P {
marge: .5rem 0;
}
h1{
marge-links: 2rem;
}
/* Nutsvoorziening */
.container {
maximale breedte: 1100px;
marge: automatisch;
opvulling: 0 2rem;
overloop verborgen;
}
.btn {
weergave: inline-blok;
grens: geen;
achtergrond: #910505;
kleur: #fff;
vulling: 0,5rem 1rem;
grensradius: 0,5rem;
}
.btn: zweef {
dekking: 0,9;
}
/* Navigatiebalk */
#navigatiebalk {
achtergrond: #fff;
positie: plakkerig;
boven: 0;
z-index: 2;
}
#navbar .container {
weergave: raster;
raster-sjabloon-kolommen: 6fr 3fr 2fr;
vulling: 1rem;
align-items: midden;
}
#navigatiebalk h1 {
kleur: #b30707;
}
#navbar ul {
rechtvaardig-zelf: einde;
weergave: flexibel;
marge-rechts: 3.5rem;
}
#navbar ul li a {
vulling: 0,5rem;
lettergewicht: vet;
}
#navbar ul li a.current {
achtergrond: #b30707;
kleur: #fff;
}
#navbar ul li a: hover {
achtergrond: #f3f3f3;
kleur: #333;
}
#navbar .sociaal {
rechtvaardig-zelf: centrum;
}
#navbar .social ik {
kleur: #777;
marge-rechts: .5rem;
}
/* huis */
#huis {
kleur: #fff;
achtergrond: #333;
vulling: 2rem;
positie: relatief;
}
#thuis: voor {
inhoud: '';
achtergrond: url ( https://source.unsplash.com/random) midden/omslag zonder herhaling;
positie: absoluut;
boven: 0;
links: 0;
breedte: 100%;
hoogte: 100%;
dekking: 0,4;
}
#home .showcase-container {
weergave: raster;
raster-sjabloon-kolommen: herhaal (2, 1fr);
rechtvaardigen-inhoud: centrum;
align-items: midden;
hoogte: 100vh;
}
#home .showcase-content {
z-index: 1;
}
#home .showcase-content p {
marge-onder: 1rem;
}

De website bedienen met de Express Server

const express = vereisen('express');
const-app = express();
const poort = 5000;
app.use (express.static('public'));
app.get('/', (req, res) => {
res.sendFile('index.html')
})
app.luister (poort, () => {
console.log(`Server draait op: http://localhost:${port}`);
})

De bovenstaande HTML- en CSS-bestanden bevinden zich in een openbare map in de hoofdprojectdirectory. De locatie van het HTML-bestand maakt het toegankelijk voor de Express-server en zijn functies.

Een van de nieuwe functies in de Express-server hierboven is de app.gebruik() methode. Het monteert de express.statisch() middleware, die statische bestanden bedient. Dit maakt het mogelijk om de opnieuw.sendFile() functie om de statische te dienen index.html bestand hierboven.

Navigeren naar de http://localhost: 5000 locatie in uw browser zal iets weergeven dat lijkt op de volgende uitvoer:

Backend-ontwikkeling verkennen

Met het Express-framework kunt u specifieke HTTP-verzoeken doen en de juiste antwoorden ontvangen met behulp van een reeks vooraf gedefinieerde methoden. Het is ook een van de meest populaire backend-frameworks van vandaag.

Leren hoe u het Express-framework kunt gebruiken, is een goede zet. Maar als je echt een professionele backend-ontwikkelaar wilt worden, moet je nog veel meer leren.

Leer hoe u een backend-ontwikkelaar kunt worden in 2021

Als je je zinnen hebt gezet op een carrière in de IT, kun je slechter doen dan de vaardigheden leren die je nodig hebt om een ​​backend-ontwikkelaar te worden.

Lees volgende

Over de auteur