Co to jest Express.js i dlaczego warto go używać?

Express.js (lub „Express”) to framework sieciowy NodeJS używany na zapleczu (lub po stronie serwera) witryn i aplikacji internetowych. Express jest elastyczny i minimalistyczny, co oznacza, że ​​nie posiada obszernej kolekcji zbędnych bibliotek i pakietów, ani nie dyktuje, jak powinieneś budować swoją aplikację.

Framework Express buduje interfejsy API, które ułatwiają komunikację za pośrednictwem żądań i odpowiedzi HTTP. Jedną z niezwykłych rzeczy w Express jest to, że daje programistom pełną kontrolę nad żądaniami i odpowiedziami, które są powiązane z każdą z metod aplikacji.

W tym samouczku dowiesz się, jak i dlaczego warto używać Express we własnych projektach.

Instalowanie Express w Twoim projekcie

Zanim będziesz mógł korzystać z Express Framework, musisz zainstalować go w swoim katalogu projektu. Jest to prosty proces, który wymaga NodeJS i npm.

Pierwszą rzeczą, którą musisz zrobić, to stworzyć pakiet.json plik (w katalogu/folderze projektu) za pomocą następującego polecenia:

początek npm

Wykonanie powyższego polecenia zainicjuje proces, który poprosi o następujące dane wejściowe:

• Nazwa pakietu
• Wersja
• Opis
• Punkt wejścia
• Polecenie testowe
• Słowa kluczowe
• Autor
• Licencja

Pola nazwy pakietu, wersji, punktu wejścia i licencji mają wartości domyślne, które można łatwo zastąpić, podając swoje wartości. Jeśli jednak chcesz zachować wartości domyślne, możesz zamiast tego użyć następującego polecenia:

npm początek -y

Wykonanie powyższego polecenia wygeneruje następujące pakiet.json plik w katalogu twojego projektu:

{
"nazwa": "mojaaplikacja",
"wersja": "1.0.0",
"opis": "",
"main": "index.js",
"skrypty": {
"test": "echo \"Błąd: nie określono testu\" && wyjdź 1"
},
"słowa kluczowe": [],
"autor": "",
"licencja": "ISC",
}

Teraz możesz zainstalować Express za pomocą następującego polecenia:

npm install express --save

Instalacja Express wygeneruje pakiet-lock.json plik oraz node_modules teczka.

Zrozumienie pliku package.json

Powód, dla którego musisz stworzyć pakiet.json plik przed instalacją Express jest taki, że pakiet.json plik działa jak repozytorium, przechowując ważne metadane o twoim Projekty NodeJS.Zależności to nazwa jednego z tych pól metadanych, a Express to zależność.

Zainstalowanie Express w katalogu projektu spowoduje automatyczną aktualizację Twojego pakiet.json plik.

Zaktualizowany plik package.json

{
"nazwa": "mojaaplikacja",
"wersja": "1.0.0",
"opis": "",
"main": "index.js",
"skrypty": {
"test": "echo \"Błąd: nie określono testu\" && wyjdź 1"
},
"słowa kluczowe": [],
"autor": "",
"licencja": "ISC",
"zależności": {
"ekspresowy": "^4.17.1"
}
}

Teraz masz pole „zależności”, które ma jedną zależność — Express. A zależności obiekt przechowuje oprogramowanie, od którego zależy Twój projekt, aby działać poprawnie, co w tym przypadku jest frameworkiem Express.

Tworzenie serwera za pomocą Express

Posiadanie interfejsu API, który obsługuje przechowywanie i przenoszenie danych, jest wymagane dla każdej aplikacji z pełnym stosem, a Express sprawia, że ​​proces tworzenia serwera jest szybki i łatwy.

Spójrz wstecz na pakiet.json plik powyżej, a zobaczysz pole „główne”. To pole przechowuje punkt wejścia do aplikacji, którym w powyższym przykładzie jest „index.js”. Jeśli chcesz uruchomić swoją aplikację (lub w tym przypadku serwer, który zamierzasz zbudować), musisz wykonać index.js plik za pomocą następującego polecenia:

node index.js

Zanim jednak przejdziesz do etapu realizacji, musisz stworzyć index.js (lub aplikacji serwera) w katalogu projektu.

Tworzenie pliku index.js

const express = require('express');
const aplikacja = express();
stały port = 5000;
app.get('/', (req, res) => {
res.send('Twój serwer działa')
})
app.listen (port, () => {
console.log(`Serwer działa w: http://localhost:${port}`);
})

Powyższy plik importuje Express, a następnie używa go do tworzenia aplikacji Express. Aplikacja Express zapewnia następnie dostęp do dostwać oraz słuchać metody będące częścią modułu Express. ten app.listen() Metoda jest pierwszą, którą musisz skonfigurować. Jego celem jest wyświetlenie listy połączeń na określonym porcie komputera hosta, który jest port 5000 w powyższym przykładzie.

Celem app.get() Metoda polega na pobraniu danych z określonego zasobu. Ta metoda ma dwa argumenty: ścieżkę i funkcję zwrotną. Argument ścieżki w powyższym przykładzie ma ukośnik, który reprezentuje pozycję główną. Dlatego przechodząc do http://localhost: 5000 URL (który jest katalogiem głównym Twojej aplikacji), gdy powyższa aplikacja index.js jest uruchomiona, wyświetli w przeglądarce następujące dane wyjściowe:

ten app.get() Funkcja wywołania zwrotnego metody generuje powyższe dane wyjściowe. Ta funkcja zwrotna ma dwa argumenty — żądanie i odpowiedź. Odpowiedź (która jest res w powyższym przykładzie) to obiekt HTTP, który aplikacja Express wysyła po żądaniu HTTP (co robisz, wpisując powyższy adres URL w przeglądarce).

Udostępnianie statycznej strony internetowej za pomocą serwera Express

Serwery odgrywają znaczącą rolę w rozwoju interfejsów API, które pomagają przechowywać i przesyłać dynamiczne dane, i to właśnie tam najprawdopodobniej będziesz używać serwera Express we własnych projektach.

Jednak serwer Express może również obsługiwać pliki statyczne. Na przykład, jeśli chcesz utworzyć statyczną witrynę internetową (na przykład dla osobistego trenera, trenera życiowego lub stylisty), możesz użyć serwera Express do hostowania witryny.

Przykład statycznej witryny HTML

 Dom 







Witamy

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. Smutek, sequi differio!

Zobacz usługi

Powyższy kod HTML tworzy przyjemną, statyczną stronę główną osobistej witryny stylisty, łącząc się z następującym plikiem style.css:

*{
margines: 0;
wypełnienie: 0;
rozmiar pudełka: obramowanie-pudełko;
}
ciało {
rodzina czcionek: „Lato”, bezszeryfowa;
wysokość linii: 1,5;
}
a {
kolor: #333;
dekoracja tekstu: brak;
}
ul {
styl listy: brak;
}
P {
margines: .5rem 0;
}
h1{
margines lewy: 2rem;
}
/* Pożytek */
.pojemnik {
maksymalna szerokość: 1100px;
margines: auto;
wypełnienie: 0 2rem;
przelew: ukryty;
}
.btn {
wyświetlacz: inline-block;
granica: brak;
tło: #910505;
kolor: #fff;
wypełnienie: 0.5rem 1rem;
promień graniczny: 0.5rem;
}
.btn: najedź {
krycie: 0,9;
}
/* Pasek nawigacyjny */
#pasek nawigacyjny {
tło: #fff;
pozycja: lepka;
góra: 0;
indeks z: 2;
}
#pasek nawigacyjny .kontener {
wyświetlacz: siatka;
kolumny szablonu siatki: 6fr 3fr 2fr;
wypełnienie: 1rem;
wyrównaj-elementy: środek;
}
#pasek nawigacyjny h1 {
kolor: #b30707;
}
#navbar ul {
uzasadnić siebie: koniec;
wyświetlacz: elastyczny;
margines prawy: 3,5 rem;
}
#navbar ul li a {
wypełnienie: 0,5rem;
grubość czcionki: pogrubiona;
}
#navbar ul li a.bieżący {
tło: #b30707;
kolor: #fff;
}
#navbar ul li a: najedź {
tło: #f3f3f3;
kolor: #333;
}
#pasek nawigacyjny .społeczny {
uzasadnić siebie: centrum;
}
#navbar .social i {
kolor: #777;
margines prawy: .5rem;
}
/* Dom */
#Dom {
kolor: #fff;
tło: #333;
wypełnienie: 2rem;
pozycja: względna;
}
#dom: przed {
zawartość: '';
tło: adres URL ( https://source.unsplash.com/random) środek/okładka bez powtórzeń;
pozycja: bezwzględna;
góra: 0;
po lewej: 0;
szerokość: 100%;
wzrost: 100%;
krycie: 0,4;
}
#home .showcase-container {
wyświetlacz: siatka;
kolumny szablonu siatki: powtórz (2, 1fr);
uzasadnić-treść: centrum;
wyrównaj-elementy: środek;
wysokość: 100vh;
}
#home .treść-prezentacji {
indeks z: 1;
}
#home .treść-prezentacji p {
margines-dolny: 1rem;
}

Obsługa strony internetowej za pomocą serwera Express

const express = require('express');
const aplikacja = express();
stały port = 5000;
app.use (express.static('public'));
app.get('/', (req, res) => {
res.sendFile('index.html')
})
app.listen (port, () => {
console.log(`Serwer działa w: http://localhost:${port}`);
})

Powyższe pliki HTML i CSS znajdują się w publicznym folderze w głównym katalogu projektu. Lokalizacja pliku HTML sprawia, że ​​jest on dostępny dla serwera Express i jego funkcji.

Jedną z nowych funkcji na powyższym serwerze Express jest app.use() metoda. Montuje ekspres.statyczny() oprogramowanie pośredniczące, które obsługuje pliki statyczne. Umożliwia to korzystanie z res.sendFile() funkcja do obsługi statycznej index.html plik powyżej.

Nawigacja do http://localhost: 5000 lokalizacja w przeglądarce wyświetli coś podobnego do następującego wyniku:

Poznaj rozwój zaplecza

Framework Express umożliwia tworzenie określonych żądań HTTP i otrzymywanie odpowiednich odpowiedzi przy użyciu zestawu predefiniowanych metod. Jest to również jeden z najpopularniejszych obecnie frameworków backendowych.

Nauka korzystania z frameworka Express to świetny ruch. Ale jeśli naprawdę chcesz zostać profesjonalnym programistą backendowym, musisz się dużo więcej nauczyć.

Dowiedz się, jak zostać programistą backendowym w 2021 r.

Jeśli masz serce nastawione na karierę w IT, możesz zrobić gorzej niż nauczyć się umiejętności potrzebnych do bycia programistą backendowym.

Czytaj dalej

O autorze