Samouczek Node.js Express.js Framework

W tym samouczku przyjrzymy się frameworkowi Express. Został on zbudowany w taki sposób, że działa jako minimalistyczny i elastyczny framework aplikacji internetowych Node.js, oferując solidny zestaw funkcji do tworzenia aplikacji internetowych jednostronicowych, wielostronicowych i hybrydowych.

Co to jest Express.js?

Express.js to framework serwera aplikacji internetowych Node.js, który został zaprojektowany specjalnie do tworzenia jednostronicowych, wielostronicowych i hybrydowych aplikacji internetowych.

Stał się standardowym frameworkiem serwerowym dla Node.js. Express jest częścią zaplecza czegoś znanego jako stos MEAN.

Wyraź warstwy routingu i oprogramowania pośredniczącego na rdzeniu Node.js HTTP, Strumienie i interfejsów API zdarzeń.

MEAN jest darmowym i otwartym oprogramowaniem JAVASCRIPT pakiet oprogramowania do tworzenia dynamicznych witryn internetowych i aplikacji internetowych, składający się z następujących komponentów:

1) MongoDB — Standardowa baza danych NoSQL

2) Express.js — Domyślna struktura aplikacji internetowych

3) angularjs - JavaSkrypt struktury MVC używany w aplikacjach internetowych

4) node.js — Struktura wykorzystywana w skalowalnych aplikacjach serwerowych i sieciowych.

Framework Express.js bardzo ułatwia tworzenie aplikacji, których można używać do obsługi wielu typów żądań, takich jak żądania GET, PUT, POST i DELETE.

Instalowanie i korzystanie z Expressu

Express instaluje się za pośrednictwem Node Package Manager. Można to zrobić, wykonując następujący wiersz w wierszu poleceń

npm zainstaluj ekspresowo

Powyższe polecenie żąda od Menedżera pakietów węzła pobrania wymaganego pliku express Moduły i zainstaluj je odpowiednio.

Uwaga dotycząca wersji: npm instaluje teraz Express 5.2; wiele projektów nadal przypina Express 4. Oba uruchamiają poniższe przykłady na obsługiwana wersja Node.js.

Wykorzystajmy nasz nowo zainstalowany framework Express i stwórzmy prostą aplikację „Hello World”.

Nasza aplikacja stworzy prosty moduł serwerowy który będzie nasłuchiwał na porcie numer 3000. W naszym przykładzie, jeśli żądanie zostanie wysłane poprzez przeglądarkę na ten numer portu, aplikacja serwera wyśle ​​do klienta odpowiedź „Hello World”.

var express=require('express');
var app=express();
app.get('/',function(req,res)
{
res.send('Hello World!');
});
var server=app.listen(3000,function() {});

Code Wyjaśnienie:

1. W pierwszym wierszu kodu używamy funkcji require w celu dołączenia „modułu ekspresowego”.
2. Zanim zaczniemy korzystać z modułu express, musimy zrobić z niego obiekt.
3. Tutaj tworzymy funkcję zwrotną. Ta funkcja będzie wywoływana za każdym razem, gdy ktoś przejdzie do katalogu głównego naszej aplikacji internetowej, czyli http://localhost:3000. Funkcja zwrotna będzie używana do wysyłania ciągu znaków „Hello World” na stronę internetową.
4. W funkcji wywołania zwrotnego odsyłamy do klienta ciąg znaków „Hello World”. Parametr „res” służy do wysyłania treści z powrotem na stronę internetową. Ten parametr „res” jest udostępniany przez moduł „żądanie”, aby umożliwić wysłanie treści z powrotem na stronę internetową.
5. Następnie używamy funkcji nasłuchiwania, aby nasza aplikacja serwerowa nasłuchiwała żądań klienta na porcie nr 3000. Tutaj możesz określić dowolny dostępny port.

Jeśli polecenie zostanie wykonane pomyślnie, po uruchomieniu kodu w przeglądarce zostanie wyświetlony następujący komunikat.

Wyjście:

Z wyjścia,

• Można to wyraźnie zobaczyć, jeśli przejdziesz do URL localhost na porcie 3000, na stronie zostanie wyświetlony napis „Hello World”.
• Ponieważ w naszym kodzie wspomnieliśmy konkretnie o tym, że serwer ma nasłuchiwać na porcie nr 3000, możemy wyświetlić dane wyjściowe podczas przeglądania tego portu. URL.

Co to są trasy?

Pojedyncza trasa główna stanowi tylko punkt początkowy.

Trasowanie określa sposób, w jaki aplikacja odpowiada na żądanie klienta przesyłane do określonego punktu końcowego.

Na przykład klient może wykonać żądanie HTTP GET, POST, PUT lub DELETE dla różnych URL takie jak te pokazane poniżej;

http://localhost:3000/Books
http://localhost:3000/Students

W powyższym przykładzie

• Jeżeli żądanie GET zostanie wysłane po raz pierwszy URL, to odpowiedź powinna idealnie być listą książek.
• Jeżeli żądanie GET zostanie wykonane dla drugiego URL, w takim przypadku odpowiedzią powinna być lista studentów.
• Więc na podstawie URL Do którego uzyskano dostęp, zostanie wywołana inna funkcjonalność na serwerze WWW, a następnie odpowiedź zostanie wysłana do klienta. Na tym właśnie polega koncepcja routingu.

Każda trasa może mieć jedną lub więcej funkcji obsługi, które są wykonywane po dopasowaniu trasy.

Ogólna składnia trasy jest pokazana poniżej

app.METHOD(PATH, HANDLER)

W którym,

1) aplikacja jest instancją modułu ekspresowego

2) METODA to metoda żądania HTTP (GET, POST, PUT lub DELETE)

3) PATH to ścieżka na serwerze.

4) HANDLER to funkcja wykonywana po dopasowaniu trasy.

⚠️ Express 5 Uwagi: te podpisy pozostały niezmienione, ale app.del() stało się app.delete(), res.sendfile() stało się res.sendFile(), a symbole wieloznaczne teraz wymagają nazw takich jak /*splat.

Przyjrzyjmy się przykładowi implementacji tras w Expressie. Nasz przykład utworzy 3 trasy jako

1. Trasa /Node, która wyświetli ciąg „Samouczek na węźle”, jeśli zostanie uzyskany dostęp do tej trasy
2. Trasa /Angular, która wyświetli ciąg „Tutorial on Angular”, jeśli zostanie uzyskany dostęp do tej trasy
3. Domyślna trasa / która wyświetli ciąg „Witamy w Guru99 samouczków.”

Nasz podstawowy kod pozostanie taki sam, jak w poprzednich przykładach. Poniższy fragment jest dodatkiem prezentującym sposób implementacji routingu.

var express = require('express');
var app = express();
app.route('/Node').get(function(req,res)
{
    res.send("Tutorial on Node");
});
app.route('/Angular').get(function(req,res)
{
    res.send("Tutorial on Angular");
});
app.get('/',function(req,res){
    res.send('Welcome to Guru99 Tutorials');
});

Code Wyjaśnienie:

1. Tutaj definiujemy trasę, jeśli URL http://localhost:3000/Node is selected in the browser. To the route, we are attaching a callback function which will be called when we browse to the Node URLFunkcja ma 2 parametry.
   • Głównym parametrem, którego będziemy używać, jest parametr „res”, którego można użyć do przesłania informacji z powrotem do klienta.
   • Parametr „req” zawiera informację o złożonym żądaniu. Czasami w ramach wysyłanego żądania mogą zostać przesłane dodatkowe parametry, dlatego też parametr „req” może zostać użyty do znalezienia wysyłanych dodatkowych parametrów.
2. Używamy funkcji send, aby wysłać ciąg „Tutorial on Node” z powrotem do klienta, jeśli wybrano trasę Node.
3. Tutaj definiujemy trasę, jeśli URL http://localhost:3000/Angular is selected in the browser. To the route, we are attaching a callback function which will be called when we browse to the Angular URL.
4. Używamy funkcji send, aby wysłać ciąg „Tutorial on Angular” z powrotem do klienta, jeśli wybrano trasę Angular.
5. Jest to domyślna trasa wybierana po przejściu do katalogu głównego aplikacji — http://localhost:3000. Po wybraniu trasy domyślnej wyświetla się komunikat „Witamy w Guru„99 samouczków” zostanie wysłanych do klienta.

Jeśli polecenie zostanie wykonane pomyślnie, po uruchomieniu kodu w przeglądarce zostanie wyświetlony następujący komunikat.

Wyjście:

Z wyjścia,

• Można to wyraźnie zobaczyć, jeśli przejdziesz do URL z localhost na porcie 3000, zobaczysz ciąg „Witamy w Guru99 samouczków wyświetlonych na stronie.
• Ponieważ w naszym kodzie wspomnieliśmy, że nasze domyślne URL wyświetli ten komunikat.

Następnie przejdź do /Node.

Z wyjścia,

• Można to zobaczyć, jeśli URL zmieniono na /Node, wybrana zostanie odpowiednia trasa węzła i wyświetlony zostanie ciąg znaków „Tutorial on Node”.

Następnie przejdź do /Angular.

Z wyjścia,

• Można to zobaczyć, jeśli URL zmieniono na /Angular, wybrana zostanie odpowiednia trasa węzła i wyświetlony zostanie ciąg „Tutorial on Angular”.

Przykładowy serwer WWW korzystający z express.js

W powyższym przykładzie zobaczyliśmy, jak możemy decydować o tym, jakie dane wyjściowe wyświetlić, na podstawie routingu. Ten rodzaj routingu jest używany w większości współczesnych aplikacji internetowych. Drugą częścią serwera WWW jest korzystanie z szablonów w Node.js.

Podczas tworzenia szybkich aplikacji Node.js w locie, łatwym i szybkim sposobem jest korzystanie z szablonów. Na rynku dostępnych jest wiele frameworków do tworzenia szablonów. W naszym przypadku posłużymy się przykładem frameworka Jade do tworzenia szablonów.

Jade instaluje się za pomocą Menedżera Pakietów Node. Można to zrobić, uruchamiając następujący wiersz poleceń.

npm zainstaluj jade

Powyższe polecenie żąda od Menedżera pakietów węzła pobrania wymaganych modułów Jade i ich odpowiedniej instalacji.

UWAGA: W najnowszej wersji Node jade jest przestarzały. Zamiast tego użyj mopsa.

⚠️ Współczesny odpowiednik: zainstalować MopsZmień nazwę pliku index.jade na index.pug i ustaw app.set('view engine','pug'). Pakiet jade nie otrzymuje żadnych aktualizacji; poniższe kroki nadal działają.

Skorzystajmy z nowo zainstalowanego frameworka Jade i utwórzmy kilka podstawowych szablonów.

Krok 1) Pierwszym krokiem jest utworzenie szablonu Jade. Utwórz plik o nazwie index.jade i wklej poniższy kod. Upewnij się, że plik znajduje się w folderze „views”.

1. Tutaj określamy, że tytuł strony zostanie zmieniony na dowolną wartość przekazaną po wywołaniu tego szablonu.
2. Określamy również, że tekst w znaczniku nagłówka zostanie zastąpiony tekstem przekazanym w szablonie Jade.

Poniżej znajduje się kod aplikacji, który to renderuje.

var express=require('express');
var app=express();
app.set('view engine','jade');
app.get('/',function(req,res)
{
res.render('index',
{title:'Guru99',message:'Welcome'})
});
var server=app.listen(3000,function() {});

Code Wyjaśnienie:

1. Pierwszą rzeczą, którą należy określić w aplikacji, jest „silnik widoku”, który będzie używany do renderowania szablonów. Ponieważ zamierzamy użyć Jade do renderowania naszych szablonów, określamy to odpowiednio.
2. Funkcja render służy do renderowania strony internetowej. W naszym przykładzie renderujemy szablon (index.jade), który został utworzony wcześniej.
3. Przekazujemy wartości „Guru99” i „Welcome” odpowiednio do parametrów „title” i „message”. Wartości te zostaną zastąpione parametrami „title” i „message” zadeklarowanymi w szablonie index.jade.

Jeśli polecenie zostanie wykonane pomyślnie, po uruchomieniu kodu w przeglądarce zostanie wyświetlony następujący komunikat.

Wyjście:

Z wyjścia,

• Możemy zobaczyć, że tytuł strony zostaje ustawiony na „Guru99”, a nagłówek strony zostaje ustawiony na „Witamy”.
• Dzieje się tak ze względu na szablon Jade, który jest wywoływany w naszej aplikacji Node.js.

FAQ