Čo je Express.js a prečo by ste ho mali používať?

Express.js (alebo "Express") je webový rámec NodeJS používaný na back-ende (alebo na strane servera) webových stránok a webových aplikácií. Express je flexibilný a minimalistický, čo znamená, že nemá rozsiahlu zbierku nepotrebných knižníc a balíkov, ani nediktuje, ako by ste si mali zostavovať svoju aplikáciu.

Rámec Express vytvára rozhrania API, ktoré uľahčujú komunikáciu prostredníctvom požiadaviek a odpovedí HTTP. Jednou z pozoruhodných vecí na Express je, že dáva vývojárom úplnú kontrolu nad požiadavkami a odpoveďami, ktoré sú spojené s každou z metód jeho aplikácie.

V tomto návode sa dozviete, ako a prečo by ste mali používať Express vo svojich vlastných projektoch.

Inštalácia Express vo vašom projekte

Skôr ako budete môcť používať expresný rámec, musíte ho nainštalovať do adresára projektu. Toto je priamy proces, ktorý vyžaduje NodeJS a npm.

Prvá vec, ktorú musíte urobiť, je vytvoriť a package.json súbor (v adresári/priečinku vášho projektu) pomocou nasledujúceho príkazu:

npm init

Vykonaním vyššie uvedeného príkazu sa spustí proces, ktorý vás vyzve na zadanie nasledujúcich vstupov:

• Názov balíka
• Verzia
• Popis
• Vstupný bod
• Testovací príkaz
• Kľúčové slová
• Autor
• Licencia

Názov balíka, verzia, vstupný bod a polia licencie majú všetky predvolené hodnoty, ktoré môžete jednoducho prepísať zadaním svojich hodnôt. Ak však chcete zachovať predvolené hodnoty, môžete namiesto toho jednoducho použiť nasledujúci príkaz:

npm init -y

Vykonaním vyššie uvedeného príkazu sa vygeneruje nasledovné package.json súbor v adresári vášho projektu:

{
"name": "moja aplikácia",
"version": "1.0.0",
"popis": "",
"main": "index.js",
"scripts": {
"test": "echo \"Chyba: nebol zadaný žiadny test\" && ukončenie 1"
},
"Kľúčové slová": [],
"autor": "",
"licencia": "ISC",
}

Teraz môžete nainštalovať Express pomocou nasledujúceho príkazu:

npm install express --save

Inštalácia Express vygeneruje a package-lock.json súbor, ako aj a node_modules priečinok.

Pochopenie súboru package.json

Dôvod, prečo musíte vytvoriť a package.json súbor pred inštaláciou Express je to package.json súbor funguje ako úložisko, v ktorom sú uložené dôležité metadáta o vašom Projekty NodeJS.Závislosti je názov jedného z týchto polí metaúdajov a Express je a závislosť.

Inštalácia Express do adresára projektu automaticky aktualizuje váš package.json súbor.

Aktualizovaný súbor package.json

{
"name": "moja aplikácia",
"version": "1.0.0",
"popis": "",
"main": "index.js",
"scripts": {
"test": "echo \"Chyba: nebol zadaný žiadny test\" && ukončenie 1"
},
"Kľúčové slová": [],
"autor": "",
"licencia": "ISC",
"dependencies": {
"expres": "^4.17.1"
}
}

Teraz máte pole „závislosti“, ktoré má jednu závislosť – Express. A závislosti objekt ukladá softvér, od ktorého správne fungovanie závisí váš projekt, čo je v tomto prípade rámec Express.

Vytvorenie servera pomocou Express

Rozhranie API, ktoré sa stará o ukladanie a presun údajov, je požiadavkou pre každú aplikáciu s úplným zásobníkom a Express umožňuje rýchly a jednoduchý proces vytvárania servera.

Pozrite sa späť na package.json súbor vyššie a uvidíte pole „hlavné“. Toto pole ukladá vstupný bod vašej aplikácie, ktorým je v príklade vyššie „index.js“. Keď chcete spustiť svoju aplikáciu (alebo v tomto prípade server, ktorý sa chystáte postaviť), musíte spustiť index.js súbor pomocou nasledujúceho príkazu:

node index.js

Predtým, ako sa dostanete do fázy vykonávania, budete musieť vytvoriť index.js (alebo serverovej aplikácie) v adresári projektu.

Vytvorenie súboru index.js

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

Vyššie uvedený súbor importuje Express a potom ho použije na vytvorenie expresnej aplikácie. Aplikácia Express potom poskytuje prístup k dostať a počúvaj metódy, ktoré sú súčasťou modulu Express. The app.listen() metóda je prvá, ktorú musíte nastaviť. Jeho účelom je vypísať zoznam pripojení na konkrétnom porte hostiteľského počítača, ktorý je port 5000 v príklade vyššie.

Účelom app.get() metóda je získať údaje z konkrétneho zdroja. Táto metóda má dva argumenty: cestu a funkciu spätného volania. Argument cesty vo vyššie uvedenom príklade má lomku, ktorá predstavuje koreňovú pozíciu. Preto navigácia na http://localhost: 5000 Adresa URL (ktorá je koreňovým adresárom vašej aplikácie), kým je spustená vaša aplikácia index.js vyššie, vytvorí vo vašom prehliadači nasledujúci výstup:

The app.get() funkcia spätného volania metódy generuje výstup vyššie. Táto funkcia spätného volania má dva argumenty – požiadavku a odpoveď. Odpoveď (čo je res vo vyššie uvedenom príklade) je objekt HTTP, ktorý aplikácia Express odosiela po požiadavke HTTP (čo urobíte zadaním adresy URL vyššie do prehliadača).

Poskytovanie statickej webovej stránky pomocou vášho expresného servera

Servery zohrávajú významnú úlohu pri vývoji rozhraní API, ktoré pomáhajú ukladať a prenášať dynamické údaje, a práve tu budete s najväčšou pravdepodobnosťou používať Express server vo svojich vlastných projektoch.

Expresný server však môže obsluhovať aj statické súbory. Ak ste napríklad chceli vytvoriť statickú webovú stránku (napríklad webovú stránku pre osobného trénera, životného kouča alebo stylistu), môžete na hosťovanie webovej stránky použiť svoj expresný server.

Príklad statickej HTML webovej stránky

 Domov 







Vitajte

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

Zobraziť služby

Vyššie uvedený kód HTML vytvára príjemnú statickú domovskú stránku webovej stránky osobného stylistu prepojením na nasledujúci súbor style.css:

*{
okraj: 0;
výplň: 0;
box-sizing: border-box;
}
telo {
font-family: 'Lato', bezpätkové;
výška riadku: 1,5;
}
a {
farba: #333;
text-dekorácia: žiadna;
}
ul {
štýl zoznamu: žiadny;
}
p {
okraj: ,5rem 0;
}
h1{
ľavý okraj: 2rem;
}
/* Utility */
.container {
max-width: 1100px;
okraj: auto;
výplň: 0 2rem;
prepad: skrytý;
}
.btn {
displej: inline-block;
hranica: žiadna;
pozadie: #910505;
farba: #fff;
výplň: 0,5rem 1rem;
hraničný rádius: 0,5rem;
}
.btn: podržte kurzor myši {
nepriehľadnosť: 0,9;
}
/* Navigačný panel */
#navbar {
pozadie: #fff;
poloha: lepkavá;
hore: 0;
z-index: 2;
}
#navbar .container {
displej: mriežka;
mriežka-šablóna-stĺpce: 6fr 3fr 2fr;
vypchávka: 1rem;
align-items: center;
}
#navbar h1 {
farba: #b30707;
}
#navbar ul {
ospravedlniť sa: koniec;
displej: flex;
pravý okraj: 3,5rem;
}
#navbar ul li a {
polstrovanie: 0,5rem;
váha písma: tučné;
}
#navbar ul li a.current {
pozadie: #b30707;
farba: #fff;
}
#navbar ul li a: podržte kurzor myši {
pozadie: #f3f3f3;
farba: #333;
}
#navbar .social {
ospravedlniť-seba: centrum;
}
#navbar .social i {
farba: #777;
pravý okraj: .5rem;
}
/* Domov */
#Domov {
farba: #fff;
pozadie: #333;
polstrovanie: 2rem;
poloha: relatívna;
}
#home: pred {
obsah: '';
pozadie: url ( https://source.unsplash.com/random) stredový stred/kryt bez opakovania;
pozícia: absolútna;
hore: 0;
vľavo: 0;
šírka: 100 %;
výška: 100 %;
nepriehľadnosť: 0,4;
}
#home .showcase-container {
displej: mriež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;
}

Poskytovanie webovej stránky pomocou expresného servera

const express = require('express');
const app = express();
konštantný port = 5000;
app.use (express.static('public'));
app.get('/', (req, res) => {
res.sendFile('index.html')
})
app.listen (port, () => {
console.log(`Server beží na: http://localhost:${port}`);
})

Vyššie uvedené súbory HTML a CSS sú vo verejnom priečinku v hlavnom adresári projektu. Umiestnenie súboru HTML ho sprístupňuje pre server Express a jeho funkcie.

Jednou z nových funkcií na Express serveri vyššie je app.use() metóda. Upevňuje sa express.static() middleware, ktorý obsluhuje statické súbory. To umožňuje použiť res.sendFile() funkciu obsluhovať statickú index.html súbor vyššie.

Navigácia na http://localhost: 5000 umiestnenie vo vašom prehliadači zobrazí niečo podobné ako nasledujúci výstup:

Preskúmajte vývoj backendu

Rámec Express vám umožňuje vytvárať špecifické požiadavky HTTP a prijímať vhodné odpovede pomocou sady preddefinovaných metód. Je to tiež jeden z najpopulárnejších backendových rámcov súčasnosti.

Naučiť sa používať rámec Express je skvelý krok. Ale ak sa skutočne chcete stať profesionálnym backendovým vývojárom, musíte sa naučiť oveľa viac.

Zistite, ako sa stať backendovým vývojárom v roku 2021

Ak máte srdce zapálené pre kariéru v IT, môžete to urobiť horšie, než sa naučiť zručnosti, ktoré potrebujete na to, aby ste boli backendovým vývojárom.

Prečítajte si ďalej

O autorovi