Przetwarzanie formularzy internetowych po stronie serwera przy użyciu Node.js i Express

W dzisiejszym poradniku pokażę ci, jak odbierać dane formularza na serwerze za pomocą Node.js i Express. Razem skonfigurujemy prosty serwer i przejdziemy przez niezbędne kroki, aby tworzyć formularze, które będą przesyłać dane do tego serwera. Ten samouczek jest przeznaczony dla tych, którzy posiadają podstawową wiedzę z zakresu JavaScript i Node.js i chcą rozwijać swoje umiejętności w dziedzinie tworzenia stron internetowych.

Najważniejsze informacje:

• Podstawy tworzenia prostego serwera Node.js z Express
• Ustawienie katalogu projektu i instalacja wymaganych pakietów
• Tworzenie pliku HTML do wyświetlania i obsługi formularzy
• Przetwarzanie wysłanych danych po stronie serwera

Krok po kroku

Najpierw musimy skonfigurować serwer, który będzie obsługiwał przychodzące dane formularza. Dlatego zaczniemy od utworzenia nowego projektu Node.js.

Otwórz swój edytor, na przykład Visual Studio Code, i uruchom terminal. Ewentualnie możesz użyć zwykłego terminala. Upewnij się, że Node.js jest zainstalowany na twoim komputerze.

Przejdź do głównego katalogu i utwórz nowy podkatalog dla swojej aplikacji serwerowej. Sugeruję nazwanie tego katalogu "FormServerApp".

Wejdź do nowego katalogu i zainicjuj nowy projekt Node.js za pomocą polecenia npm init. Zostaniesz poproszony o wprowadzenie kilku informacji, takich jak nazwa projektu, wersja i plik startowy. Możesz zaakceptować domyślne wartości lub wprowadzić własne.

Po utworzeniu projektu zobaczysz plik package.json w katalogu. Ten plik zawiera wszystkie metadane Twojego projektu. Teraz musimy zainstalować Express, więc wykonujemy polecenie npm install express.

Po zakończeniu instalacji sprawdź w pliku package.json, czy Express jest wymieniony w zależnościach. Koniecznie upewnij się, że instalacja zakończyła się powodzeniem, zanim przejdziesz dalej.

Teraz utworzymy nowy plik o nazwie index.js, który będzie służył jako punkt wejścia do naszej aplikacji. Ten plik będzie zawierał główną logikę dla naszego serwera Express.

Na początku możesz przeprowadzić krótki test, dodając console.log("FormServer"); do pliku index.js i uruchamiając go za pomocą node index.js, aby upewnić się, że wszystko działa.

Teraz przyszedł czas, aby użyć Express w swoim pliku index.js. Dodaj wymagany kod do importowania Express i utwórz aplikację Express. Oto prosty kod do zainicjowania aplikacji Express i nasłuchiwania na określonym porcie.

Upewnij się, że serwer działa na określonym porcie, na przykład 3000. Sprawdź, czy aplikacja działa poprawnie, otwierając w przeglądarce stronę localhost:3000. Powinieneś zobaczyć komunikat "Hello World".

Aby wspierać formularze w twojej aplikacji, potrzebujemy teraz pliku index.html, który będzie zawierał strukturę HTML dla naszego formularza. Na początek stwórz nowy folder o nazwie "public". W nim umieść plik index.html.

W pliku index.html możesz wstawić prostą strukturę HTML z formularzem. Formularz będzie wysyłał dane do serwera w późniejszym czasie.

Aby udostępnić pliki statyczne (HTML, CSS, JS) przez serwer Express, użyj metody app.use(), aby ustawić folder "public" jako katalog statyczny. W ten sposób przeglądarka może żądać pliku index.html, gdy odwiedzisz localhost:3000/index.html.

Teraz, po uruchomieniu serwera i załadowaniu index.html w przeglądarce, powinieneś móc poprawnie wyświetlić formularz. Jednak po wypełnieniu formularza i jego wysłaniu, jeszcze się nic nie stanie, ponieważ nie zaimplementowaliśmy jeszcze logiki po stronie serwera.

W kolejnym kroku zajmiemy się przetwarzaniem danych formularza po stronie serwera. Oznacza to, że musimy dodać trasę, która odbierze i przetworzy dane wysłane przez formularz. Bądź gotowy na kolejne kroki, aby rozwinąć swoją aplikację internetową i dodać funkcjonalności!

Podsumowanie

W tym samouczku nauczyłeś się, jak skonfigurować prosty serwer za pomocą Node.js i Express. Poznałeś podstawy tworzenia projektu Node.js, instalacji zależności i zaznajomienia się z formularzami HTML. Te kroki są kluczowe do obsługi formularzy internetowych po stronie serwera.