Co je Express.js a proč byste jej měli používat?

Express.js (nebo "Express") je webový rámec NodeJS používaný na back-endu (nebo na straně serveru) webových stránek a webových aplikací. Express je flexibilní a minimalistický, což znamená, že nemá rozsáhlou sbírku zbytečných knihoven a balíčků, ani nediktuje, jak byste měli svou aplikaci sestavit.

Framework Express vytváří rozhraní API, která usnadňují komunikaci prostřednictvím požadavků a odpovědí HTTP. Jednou z pozoruhodných věcí na Expressu je, že poskytuje vývojářům úplnou kontrolu nad požadavky a odpověďmi, které jsou spojeny s každou z metod jeho aplikace.

V tomto tutoriálu se dozvíte, jak a proč byste měli používat Express ve svých vlastních projektech.

Instalace Express ve vašem projektu

Než budete moci používat rámec Express, musíte jej nainstalovat do adresáře projektu. Jedná se o přímočarý proces, který vyžaduje NodeJS a npm.

První věc, kterou musíte udělat, je vytvořit a package.json souboru (v adresáři/složce vašeho projektu) pomocí následujícího příkazu:

npm init

Provedením výše uvedeného příkazu zahájíte proces, který vás vyzve k zadání následujících vstupů:

• Název balíčku
• Verze
• Popis
• Vstupní bod
• Testovací příkaz
• Klíčová slova
• Autor
• Licence

Název balíčku, verze, vstupní bod a pole licence mají všechny výchozí hodnoty, které můžete snadno přepsat zadáním svých hodnot. Pokud však chcete zachovat výchozí hodnoty, můžete jednoduše použít následující příkaz:

npm init -y

Provedením výše uvedeného příkazu se vygeneruje následující package.json soubor v adresáři vašeho projektu:

{
"name": "moje aplikace",
"version": "1.0.0",
"popis": "",
"main": "index.js",
"scripts": {
"test": "echo \"Chyba: nebyl zadán test\" && ukončení 1"
},
"klíčová slova": [],
"autor": "",
"licence": "ISC",
}

Nyní můžete nainstalovat Express pomocí následujícího příkazu:

npm install express --save

Instalace Express vygeneruje a package-lock.json soubor stejně jako a node_modules složka.

Vysvětlení souboru package.json

Důvod, proč musíte vytvořit a package.json soubor před instalací Express je to package.json soubor funguje jako úložiště, které ukládá důležitá metadata o vašem projekty NodeJS.Závislosti je název jednoho z těchto polí metadat a Express je a závislost.

Instalace Express do adresáře projektu automaticky aktualizuje váš package.json soubor.

Aktualizovaný soubor package.json

{
"name": "moje aplikace",
"version": "1.0.0",
"popis": "",
"main": "index.js",
"scripts": {
"test": "echo \"Chyba: nebyl zadán test\" && ukončení 1"
},
"klíčová slova": [],
"autor": "",
"licence": "ISC",
"dependencies": {
"expres": "^4.17.1"
}
}

Nyní máte pole „závislosti“, které má jednu závislost – Express. A závislosti objekt ukládá software, na jehož správném fungování závisí váš projekt, což je v tomto případě rámec Express.

Vytvoření serveru pomocí Express

Mít rozhraní API, které zpracovává ukládání a přesun dat, je požadavkem pro jakoukoli aplikaci s plným zásobníkem a Express umožňuje rychlý a snadný proces vytváření serveru.

Podívejte se zpět na package.json soubor výše a uvidíte pole „hlavní“. Toto pole ukládá vstupní bod vaší aplikace, kterým je ve výše uvedeném příkladu „index.js“. Když chcete spustit aplikaci (nebo v tomto případě server, který se chystáte postavit), budete muset spustit index.js soubor pomocí následujícího příkazu:

node index.js

Než se však dostanete do fáze provádění, budete muset vytvořit index.js (nebo serverová aplikace) ve vašem projektovém adresáři.

Vytvoření souboru index.js

const express = require('express');
const app = express();
const port = 5000;
app.get('/', (req, res) => {
res.send('Váš server je funkční')
})
app.listen (port, () => {
console.log(`Server běží na: http://localhost:${port}`);
})

Výše uvedený soubor importuje Express a poté jej použije k vytvoření aplikace Express. Aplikace Express pak poskytuje přístup k dostat a poslouchat metody, které jsou součástí modulu Express. The app.listen() metoda je první, kterou musíte nastavit. Jeho účelem je vypsat seznam připojení na konkrétním portu hostitelského počítače, který je port 5000 ve výše uvedeném příkladu.

Účelem app.get() metoda je získat data z konkrétního zdroje. Tato metoda má dva argumenty: cestu a funkci zpětného volání. Argument cesty ve výše uvedeném příkladu má lomítko, které představuje kořenovou pozici. Proto navigace na http://localhost: 5000 Adresa URL (což je kořen vaší aplikace), zatímco je spuštěna vaše výše uvedená aplikace index.js, vytvoří ve vašem prohlížeči následující výstup:

The app.get() funkce zpětného volání metody generuje výše uvedený výstup. Tato funkce zpětného volání má dva argumenty – požadavek a odpověď. Odpověď (což je res ve výše uvedeném příkladu) je objekt HTTP, který aplikace Express odesílá po požadavku HTTP (což uděláte zadáním adresy URL výše do prohlížeče).

Poskytování statického webu s vaším expresním serverem

Servery hrají významnou roli ve vývoji rozhraní API, která pomáhají ukládat a přenášet dynamická data, a právě zde budete s největší pravděpodobností používat Express server ve svých vlastních projektech.

Express server však může obsluhovat i statické soubory. Pokud jste například chtěli vytvořit statický web (jako je web pro osobního trenéra, životního kouče nebo stylistu), můžete k hostování webu použít svůj Express server.

Příklad statického HTML webu

 Domov 







Vítejte

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

Zobrazit služby

Výše uvedený HTML kód vytváří příjemnou statickou domovskou stránku webu osobního stylisty odkazem na následující soubor style.css:

*{
okraj: 0;
výplň: 0;
box-sizing: border-box;
}
tělo {
font-family: 'Lato', sans-serif;
výška řádku: 1,5;
}
a {
barva: #333;
text-dekorace: žádná;
}
ul {
styl seznamu: žádný;
}
p {
okraj: ,5rem 0;
}
h1{
okraj-levý: 2rem;
}
/* Utility */
.container {
max-width: 1100px;
okraj: auto;
polstrování: 0 2rem;
přepad: skrytý;
}
.btn {
displej: inline-block;
hranice: žádná;
pozadí: #910505;
barva: #fff;
polstrování: 0,5rem 1rem;
border-radius: 0,5rem;
}
.btn: hover {
krytí: 0,9;
}
/* Navigační lišta */
#navbar {
pozadí: #fff;
poloha: lepivý;
nahoře: 0;
z-index: 2;
}
#navbar .container {
displej: mřížka;
mřížka-šablona-sloupce: 6fr 3fr 2fr;
polstrování: 1rem;
align-items: center;
}
#navbar h1 {
barva: #b30707;
}
#navbar ul {
ospravedlnit-se: konec;
displej: flex;
pravý okraj: 3,5rem;
}
#navbar ul li a {
polstrování: 0,5rem;
váha písma: tučné;
}
#navbar ul li a.current {
pozadí: #b30707;
barva: #fff;
}
#navbar ul li a: hover {
pozadí: #f3f3f3;
barva: #333;
}
#navbar .social {
ospravedlnit-se: centrum;
}
#navbar .social i {
barva: #777;
pravý okraj: .5rem;
}
/* Domov */
#Domov {
barva: #fff;
pozadí: #333;
polstrování: 2rem;
poloha: relativní;
}
#home: před {
obsah: '';
pozadí: url ( https://source.unsplash.com/random) střed/kryt bez opakování;
pozice: absolutní;
nahoře: 0;
vlevo: 0;
šířka: 100 %;
výška: 100 %;
krytí: 0,4;
}
#home .showcase-container {
displej: mřížka;
grid-template-columns: repeat (2, 1fr);
justify-content: center;
align-items: center;
výška: 100vh;
}
#home .showcase-content {
z-index: 1;
}
#home .showcase-content p {
okraj-dole: 1rem;
}

Poskytování webových stránek pomocí expresního serveru

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 běží na: http://localhost:${port}`);
})

Výše uvedené soubory HTML a CSS jsou ve veřejné složce v hlavním adresáři projektu. Umístění souboru HTML jej zpřístupňuje serveru Express a jeho funkcím.

Jednou z nových funkcí na Express serveru výše je app.use() metoda. Připevňuje se k express.static() middleware, který obsluhuje statické soubory. To umožňuje používat res.sendFile() funkce, která slouží statickému index.html soubor výše.

Navigace na http://localhost: 5000 umístění ve vašem prohlížeči zobrazí něco podobného následujícímu výstupu:

Prozkoumejte vývoj backendu

Rámec Express vám umožňuje provádět specifické požadavky HTTP a přijímat příslušné odpovědi pomocí sady předdefinovaných metod. Je to také jeden z nejpopulárnějších backendových frameworků současnosti.

Naučit se používat Express framework je skvělý krok. Ale pokud se skutečně chcete stát profesionálním backendovým vývojářem, musíte se naučit mnohem víc.

Přečtěte si, jak se v roce 2021 stát vývojářem backendu

Pokud máte své srdce na kariéře v IT, můžete udělat horší věci, než se naučit dovednosti, které potřebujete k tomu, abyste byli backendovým vývojářem.

Přečtěte si další

O autorovi