Zarządzaj formularzami za pomocą Express

Jednym z najbardziej bezpośrednich sposobów, w jaki możemy uzyskać dane użytkownika w aplikacjach internetowych, są formularze, chociaż istnieje wiele mechanizmów, dzięki którym dane docierają do naszej logiki i kontrolerów aplikacji, w głębi muszą one przestrzegać tych samych zasad, co formularze HTML, użyj jakiejś metody HTTP wysłać informacje.
To sprawia, że ​​umiejętność przetwarzania i manipulowania formularzami jest niezbędna, jeśli chcemy tworzyć kompletne aplikacje internetowe, z funkcjonalnościami, które można wziąć pod uwagę i które rozwijają nasze pomysły.
1- Aby wykonać ten samouczek, musimy spełnić kilka poprzednich wymagań, najpierw musimy mieć instalację Node.js funkcjonalne, to musimy mieć projekt z WyrazićNie ma znaczenia, że ​​nie ma struktury folderów, ale potrzebujemy, aby framework był dostępny w lokalizacji.
2- Musimy mieć podstawowe pojęcia o npm, i HTML, ponieważ chociaż pojęcia są wyjaśnione w bardzo prosty sposób, istnieją podstawy, które nie są wyjaśnione, na przykład co to jest tag lub co jest atrybutem HTML.
3- Na koniec potrzebujemy przeglądarki i edytora tekstu, aby móc pisać i sprawdzać naszą aplikację.
Przed zobaczeniem operacji Wyrazić Aby przetworzyć formularze, musimy poznać nieco bardziej dogłębnie ich podstawowe aspekty, ponieważ są one istotną częścią konstrukcji naszych aplikacji, gdy chcemy lub musimy przechwycić dane użytkownika.
Zobaczmy poniższy kod, w którym stworzyliśmy prostą formę pola, które przechwytuje nasz ulubiony owoc.

Twój ulubiony owoc:Wysłać

W pierwszej kolejności formularz musi składać się z etykiety, w której musi być co najmniej jeden atrybut metoda który wskaże naszej przeglądarce sposób, w jaki prześle nam informacje, może to być POCZTA lub DOSTWAĆ, które są podstawowymi metodami HTTP, możemy również umieścić atrybut o nazwie akcjaJeśli tak nie jest, formularz zostanie wysłany na tę samą trasę, która go obsługuje, jeśli istnieje, zostanie wysłany na trasę określoną tak jak w przykładzie.
Główne cechyW naszej formie działają wszystkie etykiety HTML że chcemy, jednak ważniejsze są te dane jak w przypadku typów, ponieważ te etykiety i ich wartość są tymi, które zostaną wysłane w momencie wykonywania Zatwierdź który jest innym rodzajem danych wejściowych, których potrzebujemy, ponieważ jest to przycisk akcji. Otrzymamy dane o nazwie, którą nadaliśmy właściwościom mniam każdego z utworzonych przez nas pól, ważne jest również umieszczenie atrybutu id dla każdego pola i aby było ono unikalne, aby móc manipulować zawartymi w nim elementami. SŁOŃCE w elegancki sposób.
Jak widzimy formę HTML Pomimo tego, że jest bardzo prostym elementem, ma kilka szczegółów, które warto podkreślić, podkreślić i wyjaśnić, aby uniknąć zamieszania w przyszłości.
Po otrzymaniu formularza mamy też wiele możliwości, niezależnie od frameworka, którego używamy Wyrazić, Laravel, Djangoitp. Istnieje proces, który warto śledzić, ponieważ to ten, który powie naszemu użytkownikowi, czy jego dane zostały otrzymane, czy zostały przetworzone, czy wystąpił błąd. Proces ten można podzielić na dwie grupy, odpowiedź i przekierowanie.
OdpowiadaćW tej grupie akcji, gdy użytkownik prześle formularz i wykonamy przetwarzanie, możemy wysłać odpowiedź HTML jednocześnie, czyli drukujemy wiadomość, lub tworzymy nowy widok, tutaj możemy powiedzieć, czy dane były poprawne, czy wystąpił błąd. Ta odpowiedź może być typu AJAX, aby była generowana bez wczytywania strony do końca, lub przy ponownym wczytywaniu pokazywała nowy widok, lub po prostu generowała animowaną wiadomość z JavaScript.
PrzekierowanieW tej drugiej grupie, po przetworzeniu informacji, które przekierowujemy i wysyłamy użytkownika albo do innego widoku, albo po prostu do ekranu, na którym dziękujemy za korzystanie z naszej aplikacji, może wydawać się to samo, co odpowiedź, jednak to, co robimy, to wyślij użytkownika w inne miejsce w naszej aplikacji.
Aby przygotować naszą aplikację Wyrazić Aby przetwarzać formularze, musimy najpierw zainstalować wtyczkę o nazwie parser ciała, to pomoże nam manipulować danymi, które wysyła nam przeglądarka. Aby to zrobić w naszej konsoli Node.js musimy skorzystać z instrukcji:

 npm install --save body-parser

Zobaczmy odpowiedź wygenerowaną przez wykonanie tej instrukcji:

Wtedy już w naszym pliku app.js lub nazwę, którą umieściliśmy, po prostu musimy dołączyć to oprogramowanie pośredniczące, aby pomóc nam w interakcji:

 app.use (wymagaj ('body-parser') ());

Dzięki temu jesteśmy gotowi do przetwarzania treści naszych formularzy bezpośrednio w naszej aplikacji Wyrazić, Może się to wydawać nieco skomplikowane, ponieważ inne frameworki nie wymagają jednak tego typu instalacji Wyrazić robi to, aby dać nam swobodę przetwarzania informacji tak, jak chcemy, to tylko jedna ścieżka z wielu, które istnieją.
Zamierzamy utworzyć formularz, który będzie miał funkcję przechwytywania ulubionego owocu użytkownika. Dla większej wygody użyjemy tego, który stworzyliśmy w poprzedniej części samouczka, w naszym folderze, w którym zainstalowaliśmy Wyrazić, stwórzmy plik o nazwie serwer.js, app.js lub jakąkolwiek nazwę chcemy nadać, jednak treść jest ważna. Wewnątrz zaczniemy od wymagania użycia wyrazić, to musimy wygenerować obiekt aplikacji i to musi korzystać z oprogramowania pośredniego parser ciała.
Zdefiniuj trasyW następnym akcie musimy zdefiniować trasy, w naszym przypadku użyjemy trasy root do wyświetlenia formularza, więc przy bezpośrednim dostępie do naszej aplikacji będziemy mieli bezpośredni wynik, wtedy stworzymy trasę zwaną procesem, która odbiera metoda POCZTA, to co zrobi, to odbierze dane z formularza, aby w końcu wydrukować a HTML wskazując otrzymane dane.
Pozwoli nam to zrozumieć przepływ naszego programu, a tym samym przetwarzać bardziej złożone formy w przyszłości. Zobaczmy wyjaśniony kod poniżej:

 var express = wymagają ('ekspresowe'); var bodyParser = require ('body-parser'); var aplikacja = ekspres (); app.use (bodyParser ()); app.set ('port', process.env.PORT || 3001); app.get ('/', function (req, res) {var html = '' + '' + ''+' Twój ulubiony owoc: '+' '+'„+”„+” Wyślij „+”'+' '; res.wyślij (html); }); app.post ('/ process', function (req, res) {var fruit = req.body.fruit; var html =' Twój ulubiony owoc to: '+ owoc +'.
'+' Spróbuj ponownie '; res.wyślij (html); }); app.listen (app.get ('port'), function () {console.log ('Express uruchomiony na http: // localhost:' + app.get ('port') + '; naciśnij Ctrl-C, aby zamknąć serwer. ');});

Dzięki temu zakończyliśmy tworzenie naszej aplikacji, teraz przyjrzymy się, jak ją wyświetlić, w tym celu po prostu musimy napisać instrukcję:

 node server.js

Gdzie serwer.js Jest to nazwa, którą umieściliśmy w naszej aplikacji i w zależności od portu, który umieściliśmy, możemy wtedy zobaczyć nasz formularz w przeglądarce:

Oczywiście może to być bardziej estetyczne, używając Bootstrap, czyli style CSSJednak dla celów i zakresu tego samouczka jest to idealne narzędzie do zrozumienia obsługi formularzy. Jeśli wejdziemy z nim w interakcję, pisząc coś w polu i klikając wyślij, zobaczymy, jak dotrzemy do naszego URL proces:

W tym przypadku zostawiliśmy link do powrotu na początek, to przetwarzanie należy do typu przekierowania, skoro wysłaliśmy użytkownika na inną trasę i tam otrzymaliśmy wynik jego zapytania, oczywiście jest wiele walidacji, których nam brakuje w tym przykładzie, na przykład, czy puste pole jest wysyłane, w jaki sposób sprawdzamy, czy przesyłka jest wysłana z innego miejsca pochodzenia itp. Są to rzeczy ważne, ale wymykają się celowi samouczka, wspominamy o nich tylko po to, abyś wiedział, że inne kroki następują w ich rozwoju jako programiści w Wyrazić.
Na tym zakończyliśmy ten samouczek, jak widzimy Wyrazić Znacznie ułatwia nam to, gdy przenosimy informacje z Front-Endu do naszej logiki, uproszczona obsługa tras, a użycie oprogramowania pośredniczącego do dekodowania informacji sprawia, że ​​jest to idealne rozwiązanie, aby zaoszczędzić nam czasu na rozwój.Podobał Ci się i pomógł ten samouczek?Możesz nagrodzić autora, naciskając ten przycisk, aby dać mu pozytywny punkt