Vad är Express.js och varför ska du använda det?

Express.js (eller "Express") är ett NodeJS webbramverk som används på back-end (eller serversidan) av webbplatser och webbapplikationer. Express är flexibelt och minimalistiskt, vilket innebär att det inte har en omfattande samling av onödiga bibliotek och paket, och det dikterar inte heller hur du ska bygga din applikation.

Express-ramverket bygger API: er som underlättar kommunikation genom HTTP-förfrågningar och svar. En av de anmärkningsvärda sakerna med Express är att det ger utvecklare fullständig kontroll över de förfrågningar och svar som är associerade med var och en av dess appmetoder.

I den här handledningen får du lära dig hur och varför du bör använda Express i dina egna projekt.

Installera Express i ditt projekt

Innan du kan använda Express-ramverket måste du installera det i din projektkatalog. Detta är en enkel process som kräver NodeJS och npm.

Det första du behöver göra är att skapa en package.json fil (inom din projektkatalog/mapp) med följande kommando:

npm init

Om du kör kommandot ovan initieras en process som kommer att uppmana dig att göra följande:

• Paketnamn
• Version
• Beskrivning
• Inkörsport
• Testkommando
• Nyckelord
• Författare
• Licens

Fälten för paketnamn, version, ingångspunkt och licens har alla standardvärden som du enkelt kan åsidosätta genom att ange dina värden. Men om du vill behålla standardvärdena kan du helt enkelt använda följande kommando istället:

npm init -y

Om du kör kommandot ovan genereras följande package.json fil i din projektkatalog:

{
"name": "minapp",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Fel: inget test specificerat\" && avsluta 1"
},
"nyckelord": [],
"author": "",
"license": "ISC",
}

Nu kan du installera Express med följande kommando:

npm installera express --save

När du installerar Express genereras en package-lock.json fil samt en node_modules mapp.

Förstå filen package.json

Anledningen till att du behöver skapa en package.json filen innan du installerar Express är att package.json filen fungerar som ett arkiv och lagrar viktig metadata om din NodeJS-projekt.Beroenden är namnet på ett av dessa metadatafält, och Express är en beroende.

Om du installerar Express i din projektkatalog uppdateras din package.json fil.

Den uppdaterade filen package.json

{
"name": "minapp",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Fel: inget test specificerat\" && avsluta 1"
},
"nyckelord": [],
"author": "",
"license": "ISC",
"beroenden": {
"express": "^4.17.1"
}
}

Nu har du ett "beroende"-fält som har ett beroende - Express. Och den beroenden objekt lagrar programvara som ditt projekt är beroende av för att fungera korrekt, vilket i det här fallet är Express-ramverket.

Skapa en server med Express

Att ha ett API som hanterar lagring och rörelse av data är ett krav för alla fullstackapplikationer, och Express gör processen att skapa servern snabb och enkel.

Titta tillbaka på package.json filen ovan och du ser ett "huvud"-fält. Det här fältet lagrar ingångspunkten till din applikation, som är "index.js" i exemplet ovan. När du vill köra din applikation (eller i det här fallet servern som du ska bygga), måste du köra index.js fil med följande kommando:

nod index.js

Men innan du kommer till exekveringsstadiet måste du skapa index.js (eller serverapp) fil i din projektkatalog.

Skapar filen index.js

const express = require('express');
const app = express();
const port = 5000;
app.get('/', (req, res) => {
res.send('Din server är i drift')
})
app.listen (port, () => {
console.log(`Server körs på: http://localhost:${port}`);
})

Filen ovan importerar Express och använder den sedan för att skapa en Express-applikation. Express-applikationen ger sedan åtkomst till skaffa sig och lyssna metoder som är en del av Express-modulen. De app.listen() metoden är den första du behöver ställa in. Dess syfte är att lista för anslutningar på en specifik port på värddatorn, dvs port 5000 i exemplet ovan.

Syftet med app.get() Metoden är att hämta data från en specifik resurs. Denna metod har två argument: en sökväg och en återuppringningsfunktion. Sökvägsargumentet i exemplet ovan har ett snedstreck som representerar rotpositionen. Därför navigerar du till http://localhost: 5000 URL (som är roten till din applikation), medan din index.js-app ovan körs, kommer att producera följande utdata i din webbläsare:

De app.get() metod callback-funktionen genererar utdata ovan. Denna återuppringningsfunktion har två argument – ​​begäran och svar. Svaret (som är res i exemplet ovan) är HTTP-objektet som en Express-app skickar efter en HTTP-förfrågan (vilket är vad du gör genom att skriva webbadressen ovan i din webbläsare).

Servera en statisk webbplats med din expressserver

Servrar spelar en betydande roll i utvecklingen av API: er som hjälper till att lagra och överföra dynamisk data, och det är där du med största sannolikhet kommer att använda en Express-server i dina egna projekt.

Men en Express-server kan också visa statiska filer. Om du till exempel vill skapa en statisk webbplats (som en för en personlig tränare, en livscoach eller en stylist), kan du använda din Express-server för att vara värd för webbplatsen.

Exempel på statisk HTML-webbplats

 Hem 







Välkommen

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!

Visa tjänster

HTML-koden ovan skapar en trevlig statisk hemsida för en personlig stylistwebbplats genom att länka till följande style.css-fil:

*{
marginal: 0;
stoppning: 0;
box-storlek: border-box;
}
kropp {
font-family: 'Lato', sans-serif;
linjehöjd: 1,5;
}
en {
färg: #333;
text-dekoration: ingen;
}
ul {
list-stil: ingen;
}
p {
marginal: .5rem 0;
}
h1{
marginal-vänster: 2rem;
}
/* Verktyg */
.behållare {
max-bredd: 1100px;
marginal: auto;
stoppning: 0 2rem;
overflow: gömd;
}
.btn {
display: inline-block;
gräns: ingen;
bakgrund: #910505;
färg: #fff;
stoppning: 0,5rem 1rem;
gränsradie: 0,5 rem;
}
.btn: hover {
opacitet: 0,9;
}
/* Navbar */
#navbar {
bakgrund: #fff;
position: klibbig;
topp: 0;
z-index: 2;
}
#navbar .container {
display: rutnät;
rutnät-mall-kolumner: 6fr 3fr 2fr;
stoppning: 1rem;
align-items: center;
}
#navbar h1 {
färg: #b30707;
}
#navbar ul {
rättfärdiga-jag: sluta;
display: flex;
marginal-höger: 3,5 rem;
}
#navbar ul li a {
stoppning: 0,5rem;
font-weight: fet;
}
#navbar ul li a.current {
bakgrund: #b30707;
färg: #fff;
}
#navbar ul li a: hover {
bakgrund: #f3f3f3;
färg: #333;
}
#navbar .social {
rättfärdiga-jag: centrera;
}
#navbar .social i {
färg: #777;
margin-right: .5rem;
}
/* Hem */
#Hem {
färg: #fff;
bakgrund: #333;
stoppning: 2rem;
position: relativ;
}
#hem: före {
innehåll: '';
bakgrund: url ( https://source.unsplash.com/random) mitten/locket utan upprepning;
position: absolut;
topp: 0;
vänster: 0;
bredd: 100%;
höjd: 100%;
opacitet: 0,4;
}
#home .showcase-container {
display: rutnät;
rutnät-mall-kolumner: upprepa (2, 1fr);
motivera-innehåll: center;
align-items: center;
höjd: 100vh;
}
#home .showcase-content {
z-index: 1;
}
#home .showcase-content p {
marginal-botten: 1rem;
}

Servera webbplatsen med Express-servern

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 körs på: http://localhost:${port}`);
})

HTML- och CSS-filerna ovan finns i en offentlig mapp i projektkatalogen. HTML-filens plats gör den tillgänglig för Express-servern och dess funktioner.

En av de nya funktionerna i Express-servern ovan är app.use() metod. Den monterar express.static() middleware, som serverar statiska filer. Detta gör det möjligt att använda res.sendFile() funktion för att tjäna det statiska index.html filen ovan.

Navigerar till http://localhost: 5000 plats i din webbläsare kommer att visa något som liknar följande utdata:

Utforska Backend-utveckling

Express-ramverket låter dig göra specifika HTTP-förfrågningar och ta emot lämpliga svar med hjälp av en uppsättning fördefinierade metoder. Det är också ett av de mest populära backend-ramverken idag.

Att lära sig använda Express-ramverket är ett bra drag. Men om du verkligen vill bli en professionell backend-utvecklare finns det mycket mer du behöver lära dig.

Lär dig hur du blir en backend-utvecklare 2021

Om du har ditt hjärta inriktat på en karriär inom IT kan du göra värre än att lära dig de färdigheter du behöver för att vara en backend-utvecklare.

Läs Nästa

Om författaren