Hvad er Express.js, og hvorfor skal du bruge det?

Express.js (eller "Express") er en NodeJS-webramme, der bruges på back-end (eller server-side) af websteder og webapplikationer. Express er fleksibel og minimalistisk, hvilket betyder, at den ikke har en omfattende samling af unødvendige biblioteker og pakker, og den dikterer heller ikke, hvordan du skal bygge din applikation.

Express-rammen bygger API'er, der letter kommunikationen gennem HTTP-anmodninger og -svar. En af de bemærkelsesværdige ting ved Express er, at det giver udviklere fuldstændig kontrol over de anmodninger og svar, der er forbundet med hver af dens apps metoder.

I denne vejledning lærer du, hvordan og hvorfor du skal bruge Express i dine egne projekter.

Installation af Express i dit projekt

Før du kan bruge Express-rammen, skal du installere den i din projektmappe. Dette er en ligetil proces, der kræver NodeJS og npm.

Den første ting du skal gøre er at oprette en package.json fil (i din projektmappe/mappe) ved hjælp af følgende kommando:

npm init

Udførelse af kommandoen ovenfor vil starte en proces, der vil bede dig om følgende input:

• Pakkenavn
• Version
• Beskrivelse
• Indgang
• Test kommando
• Nøgleord
• Forfatter
• Licens

Felterne for pakkenavn, version, indgangspunkt og licens har alle standardværdier, som du nemt kan tilsidesætte ved at angive dine værdier. Men hvis du vil beholde standardværdierne, kan du blot bruge følgende kommando i stedet:

npm init -y

Udførelse af kommandoen ovenfor vil generere følgende package.json fil i din projektmappe:

{
"name": "minapp",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "ekko \"Fejl: ingen test angivet\" && afslut 1"
},
"søgeord": [],
"author": "",
"license": "ISC",
}

Nu kan du installere Express ved at bruge følgende kommando:

npm installer express --save

Installation af Express vil generere en package-lock.json fil samt en node_modules folder.

Forstå filen package.json

Grunden til at du skal oprette en package.json fil, før du installerer Express er, at package.json fil fungerer som et arkiv, der gemmer vigtige metadata om din NodeJS projekter.Afhængigheder er navnet på et af disse metadatafelter, og Express er en afhængighed.

Installation af Express i dit projektbibliotek vil automatisk opdatere din package.json fil.

Den opdaterede package.json-fil

{
"name": "minapp",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "ekko \"Fejl: ingen test angivet\" && afslut 1"
},
"søgeord": [],
"author": "",
"license": "ISC",
"afhængigheder": {
"express": "^4.17.1"
}
}

Nu har du et felt "afhængigheder", der har én afhængighed - Express. Og afhængigheder objekt gemmer software, som dit projekt afhænger af for at fungere korrekt, hvilket i dette tilfælde er Express-rammeværket.

Oprettelse af en server med Express

At have en API, der håndterer lagring og bevægelse af data, er et krav for enhver fuld stack-applikation, og Express gør serveroprettelsesprocessen hurtig og nem.

Se tilbage på package.json fil ovenfor, og du vil se et "hoved" felt. Dette felt gemmer indgangspunktet til din applikation, som er "index.js" i eksemplet ovenfor. Når du vil udføre din applikation (eller i dette tilfælde serveren, som du er ved at bygge), skal du udføre index.js fil ved hjælp af følgende kommando:

node index.js

Men før du kommer til udførelsesstadiet, skal du oprette index.js (eller server app) fil i dit projektbibliotek.

Oprettelse af filen index.js

const express = require('express');
const app = express();
const port = 5000;
app.get('/', (req, res) => {
res.send('Din server er operationel')
})
app.listen (port, () => {
console.log(`Serveren kører på: http://localhost:${port}`);
})

Filen ovenfor importerer Express og bruger den derefter til at oprette en Express-applikation. Express-applikationen giver derefter adgang til få og Lyt metoder, der er en del af Express-modulet. Det app.listen() metoden er den første, du skal konfigurere. Dens formål er at liste for forbindelser på en specifik port på værtscomputeren, dvs port 5000 i eksemplet ovenfor.

Formålet med app.get() metode er at hente data fra en bestemt ressource. Denne metode har to argumenter: en sti og en tilbagekaldsfunktion. Stiargumentet i eksemplet ovenfor har en skråstreg, der repræsenterer rodpositionen. Derfor skal du navigere til http://localhost: 5000 URL (som er roden af ​​din applikation), mens din index.js app ovenfor kører, vil producere følgende output i din browser:

Det app.get() metode tilbagekaldsfunktionen genererer output ovenfor. Denne tilbagekaldsfunktion har to argumenter - anmodning og svar. Svaret (som er res i eksemplet ovenfor) er HTTP-objektet, som en Express-app sender efter en HTTP-anmodning (hvilket er, hvad du gør ved at indtaste URL-adressen ovenfor i din browser).

Betjening af et statisk websted med din ekspresserver

Servere spiller en væsentlig rolle i udviklingen af ​​API'er, der hjælper med at lagre og overføre dynamiske data, og det er her, du højst sandsynligt vil bruge en Express-server i dine egne projekter.

En Express-server kan dog også tjene statiske filer. Hvis du f.eks. ønskede at oprette en statisk hjemmeside (såsom en til en personlig træner, en livscoach eller en stylist), så kan du bruge din Express-server til at hoste hjemmesiden.

Eksempel på et statisk HTML-websted

 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 skaber en behagelig statisk startside for et personligt stylistwebsted ved at linke til følgende style.css-fil:

*{
margin: 0;
polstring: 0;
box-sizing: border-box;
}
krop {
font-family: 'Lato', sans-serif;
line-højde: 1,5;
}
en {
farve: #333;
tekst-dekoration: ingen;
}
ul {
liste-stil: ingen;
}
p {
margin: .5rem 0;
}
h1{
margin-venstre: 2rem;
}
/* Hjælpeprogram */
.container {
max-bredde: 1100px;
margin: auto;
polstring: 0 2rem;
overløb: skjult;
}
.btn {
display: inline-blok;
grænse: ingen;
baggrund: #910505;
farve: #fff;
polstring: 0,5rem 1rem;
grænse-radius: 0,5rem;
}
.btn: hover {
opacitet: 0,9;
}
/* Navbar */
#navbar {
baggrund: #fff;
stilling: klæbrig;
top: 0;
z-indeks: 2;
}
#navbar .container {
display: gitter;
gitter-skabelon-kolonner: 6fr 3fr 2fr;
polstring: 1rem;
align-items: center;
}
#navbar h1 {
farve: #b30707;
}
#navbar ul {
retfærdiggøre-selv: ende;
display: flex;
margin-højre: 3,5rem;
}
#navbar ul li a {
polstring: 0,5rem;
font-weight: fed;
}
#navbar ul li a.current {
baggrund: #b30707;
farve: #fff;
}
#navbar ul li a: hover {
baggrund: #f3f3f3;
farve: #333;
}
#navbar .social {
retfærdiggøre-selv: center;
}
#navbar .social i {
farve: #777;
margin-højre: .5rem;
}
/* hjem */
#hjem {
farve: #fff;
baggrund: #333;
polstring: 2rem;
stilling: relativ;
}
#hjem: før {
indhold: '';
baggrund: url ( https://source.unsplash.com/random) center/dæksel uden gentagelse;
position: absolut;
top: 0;
venstre: 0;
bredde: 100%;
højde: 100%;
opacitet: 0,4;
}
#home .showcase-container {
display: gitter;
gitter-skabelon-kolonner: gentag (2, 1fr);
retfærdiggøre-indhold: center;
align-items: center;
højde: 100vh;
}
#home .showcase-content {
z-indeks: 1;
}
#home .showcase-content p {
margin-bund: 1rem;
}

Betjening af webstedet med Express Server

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(`Serveren kører på: http://localhost:${port}`);
})

HTML- og CSS-filerne ovenfor er i en offentlig mappe i hovedprojektbiblioteket. HTML-filens placering gør den tilgængelig for Express-serveren og dens funktioner.

En af de nye funktioner i Express-serveren ovenfor er app.use() metode. Den monterer express.static() middleware, som serverer statiske filer. Dette gør det muligt at bruge res.sendFile() funktion til at betjene det statiske index.html fil ovenfor.

Navigerer til http://localhost: 5000 placering i din browser vil vise noget, der ligner følgende output:

Udforsk Backend-udvikling

Express-rammen giver dig mulighed for at lave specifikke HTTP-anmodninger og modtage passende svar ved hjælp af et sæt foruddefinerede metoder. Det er også en af ​​de mest populære backend-frameworks i dag.

At lære at bruge Express-rammen er et fantastisk træk. Men hvis du virkelig ønsker at blive en professionel backend-udvikler, er der meget mere, du skal lære.

Lær hvordan du bliver backend-udvikler i 2021

Hvis du har hjertet indstillet på en karriere inden for IT, kan du gøre det værre end at lære de færdigheder, du skal bruge for at være backend-udvikler.

Læs Næste

Om forfatteren