Pierwsze kroki z Express.js

JavaScript przejmuje wiodącą rolę w tworzeniu stron internetowych, a bogactwo procedur przetwarzania w czasie rzeczywistym i towarzysząca im wszechstronność sprawiły, że jest to jeden z najszybciej rozwijających się języków w ciągu ostatnich 5 lat.

Od premiery Node.js Wiele już powiedziano o tworzeniu aplikacji korzystających z jednego języka, a dziś jest to możliwe, korzystając z frameworków Front-End, takich jak AngularJS lub Backbone.js, również za pomocą baz danych, takich jak MongoDB lub CouchDB i wreszcie po stronie serwera pracując z potężnymi Node.js.

Ale do pracy z dużymi aplikacjami od podstaw z Node.js musimy robić wiele powtarzających się i skomplikowanych rzeczy, tu właśnie się pojawia Express.js, który jest niczym innym jak frameworkiem MVC, który pomaga nam uprościć opracowanie naszej logiki Zapleczei opierając się na Node.js skutkuje dużymi aplikacjami wykonanymi w całości w JavaScript.

WymaganiaNasze wymagania są dość podstawowe, musimy tylko mieć Node.js zainstalowany i uruchomiony w naszym systemie, jeśli mamy najnowszą wersję, musimy upewnić się, że również mamy npm dostępne narzędzie, które pozwoli nam zainstalować różne pakiety, których potrzebujemy tak jak w przypadku frameworka, Express.js.

1. Express.js

Ten framework został zaprojektowany tak, aby zawierał pewne funkcje inspirowane innymi frameworkami, takimi jak Szyny lub Synatra, oznacza to, że gdy doświadczony programista dostanie go w swoje ręce, może czuć się komfortowo w obsłudze koncepcji, które już zna, ale z mocą Node.js i tylko przy użyciu JavaScript szybkość rozwoju jest zwielokrotniona.

Zanim zagłębimy się w ten temat, przyjrzyjmy się najpierw najważniejszym cechom Express.js:

MinimumIdeą frameworka jest nie angażowanie się w inne sprawy, które nie pośredniczą między naszą aplikacją a serwerem, ponieważ nie komplikuje nam to życia tysiącami komponentów, a jedynie dostarcza nam najpotrzebniejsze rzeczy.

ElastycznyDzięki swojej charakterystyce minimalizmu zyskujesz dużą elastyczność, ponieważ programista może wybrać sposób, w jaki chce pracować i może wdrażać własne rozwiązania lub włączać gotowe rozwiązania, takie jak ORM dla różnych typów Bazy danych.

Stworzone do zastosowańCel Express.js jest ułatwienie budowy aplikacji internetowych, czy są to strony, usługi ODPOCZYNEK, a nawet aplikacje hybrydowe.

2. Rusztowanie

Jest to termin, z którego być może widzieliśmy Szyny i innych frameworków, jest szeroko stosowany w Express.js i to nic innego jak framework generujący strukturę i kod bazowy, zwany także płyta kotłowa co pomaga nam uruchomić naszą aplikację.

W ten sposób możemy stworzyć szkielet projektu z polecenia i tym samym zapomnieć o konieczności pamiętania każdego z niezbędnych folderów i podstawowych plików. Oczywiście, ponieważ jest to coś tak ogólnego, wiele razy kończymy przepisywaniem wielu rzeczy lub tworzeniem własnych folderów, ale mieć punkt wyjścia jest idealny.

3. Zainstaluj Express.js

Instalacja frameworka jest dość prosta dzięki wykonywanym krokom npm, do instalacji Express.js musimy tylko przejść do konsoli poleceń, gdzie możemy wykonać npm i umieść następujące polecenie:

 npm install express --save

Spowoduje to, że nasz system pobierze cały niezbędny kod, aby móc generować nasze projekty, a także korzystać z różnych narzędzi, które udostępnia Express.js Do naszej dyspozycji w konsoli zobaczymy coś takiego jak poniżej, jeśli instalacja się powiodła.

Możemy zauważyć, że zainstalowano kilka powiązanych pakietów i że wersja Express.js w momencie pisania tego samouczka jest 4.11.2, tutaj należy podkreślić, że od wersji 4 nastąpiła wielka zmiana, więc ważne jest, aby szukać informacji, aby upewnić się, że dotyczy to wersji 4 i nowszych.

Nasza pierwsza aplikacjaDo naszej pierwszej aplikacji stworzymy stronę internetową z dwiema sekcjami, ponieważ dopiero poznajemy narzędzie, każda sekcja będzie miała mały tekst, ważne jest to, że będziemy musieli stworzyć mały serwer i obsłużyć prośby naszych użytkowników.

4. Serwer

Pierwszą rzeczą, którą musimy zrobić, to utworzyć folder, do którego trafi nasza aplikacja, a wewnątrz utworzyć plik o nazwie index.js, ta nazwa jest zwykle umieszczana jako konwencja, jednak może to być dowolna inna nazwa, w rzeczywistości zamierzamy zmienić rzeczy i umieścić nazwę naszego pliku helloexpress.js.

Gdy już mamy nasz plik, zaczniemy od włączenia wyrazić za pomocą instrukcji wymagać, dzięki temu będziemy mieli do dyspozycji wszystkie narzędzia frameworka, wtedy skorzystamy z metod ustawić() Tak posługiwać się (), gdzie pierwszym ustalimy port przez który nasz serwer powinien czekać na połączenia, a drugim ustalimy co ma się stać gdy otrzymamy błąd 404 lub błąd 500.

Wreszcie z metodą słuchać () sprawimy, że nasza aplikacja będzie działać, gdy uruchomimy nasz plik. Zobaczmy poniższy kod:

 var express = require ('express'); var app = express (); app.set ('port', process.env.PORT || 3001); app.use (function (req, res) {res.type ( „text / plain”); res.status (404); res.send („404 - nie znaleziono”);}); app.use (function (err, req, res, next) {console.error (err. stos); res.type ('text / plain'); res.status (500); res.send ('500 - Coś jest nie tak!');}); app.listen (app.get ('port') , function () {console.log ('Express został uruchomiony na http://localhost:' + app.get ('port') + '; naciśnij Ctrl-C, aby zamknąć serwer.');});

Teraz pozostaje nam tylko napisać w konsoli następującą komendę:

 węzeł helloexpress.js

Dzięki temu nasz serwer się podniesie. Problem w tym, że nic nie zobaczymy, jest tak dlatego, że nie ustaliliśmy tras aplikacji, ale jeśli widzimy poniższy ekran, to widzimy, że działa, ponieważ wyszedł nasz komunikat, który umieściliśmy dla 404.

POWIĘKSZAĆ

5. W tym trasy

Aby uzyskać wynik wykraczający poza wygenerowaną przez nas stronę 404, musimy uwzględnić trasy, co jest niczym innym jak informowaniem naszej aplikacji, że gdy użytkownik zażąda trasy z metodą HTTP w szczególności zwracany jest zdefiniowany przez nas wynik, a więc trasa dostwać to nie to samo co trasa Poczta dlatego oba, mimo że znajdują się pod tym samym kierunkiem, mogą dać nam różne wyniki.

Stwórzmy więc kilka tras dostwać, kod ten musi być umieszczony tuż przed kodem generującym 404, więc zamierzamy zmodyfikować nasz plik helloexpress.js a teraz powinno wyglądać następująco:

 var express = require ('express'); var app = express (); app.set ('port', process.env.PORT || 3001); app.get ('/', function (req, res) { res.type ('text / plain'); res.send ('Witaj, witaj w mojej pierwszej aplikacji');}); app.get ('/ inna ścieżka', function (req, res) {res.type ( ' text / plain '); res.send (' To kolejna ścieżka naszej aplikacji ');}); app.use (function (req, res) {res.type (' text / plain '); res.status ( 404); res.send ('404 - Nie znaleziono');}); app.use (function (err, req, res, next) {console.error (err.stack); res.type ('text / zwykły '); res.status (500); res.send (' 500 - Coś jest nie tak! ');}); app.listen (app.get (' port '), function () {console.log (' Express rozpoczęte pod adresem http://localhost: '+ app.get (' port ') +'; naciśnij Ctrl-C, aby zamknąć serwer. ');});

Jak możemy zauważyć metodę? dostwać otrzymuje trasę, a następnie funkcję anonimową, w ramach której wysyłamy typ odpowiedzi w tym przypadku Zwykły tekst a potem wysyłamy treść, jeśli uruchomimy nasz przykład w przeglądarce, w końcu dostaniemy coś takiego:

POWIĘKSZAĆ

Trasy Poczta Działają w podobny sposób, tylko wtedy musimy włączyć obsługę parametrów, które można uwzględnić, ale nie powinniśmy się tym zbytnio przejmować w tej chwili. Udało nam się wtedy sprawdzić, jak wpłynęliśmy na wynik tego, co użytkownik widzi bezpośrednio.

WażnyNależy zauważyć, że za każdym razem, gdy zmieniamy coś w naszym kodzie, musimy zamknąć aplikację i uruchomić ją ponownie, aby zmiany zaczęły obowiązywać. Ten początek może wydawać się bardzo prosty i chodzi o to, że możemy przyzwyczaić się do pracy w sposób, w jaki rozumiemy serwer i jak on działa, ponieważ w ten sposób możemy tworzyć aplikacje, które chcemy, z kodem, którego naprawdę chcemy i to jest magia Express.js.

Od tego momentu możemy zacząć eksperymentować z typami odpowiedzi i treściami, które chcemy wyświetlać, ale prawdziwa moc pojawia się, gdy zaczynamy implementować silnik szablonów, jednak jest to już nieco bardziej zaawansowany temat w tym samouczku.

Na tym zakończyliśmy ten samouczek, zbudowaliśmy małą aplikację, z którą możesz stawiać pierwsze kroki Express.js, jeśli wiedzieliśmy Node.js widzimy od razu, że sprawy są nieco bardziej bezpośrednie i prostsze. Ale prawdziwą moc zobaczymy, gdy zaczniemy wdrażać inne narzędzia, takie jak szablony czy modele.