A mai útmutatóban megmutatom neked, hogyan tudsz űrlapadatokat fogadni egy szerveren Node.js és Express segítségével. Egy egyszerű szerver létrehozását fogjuk közösen elkészíteni, és át fogjuk menni az szükséges lépéseken ahhoz, hogy űrlapokat hozzunk létre, amelyek adatokat küldenek erre a szerverre. Ez az útmutató azoknak szól, akik rendelkeznek alapvető JavaScript és Node.js ismeretekkel, és szeretnék webfejlesztési készségeiket kibővíteni.
Legrészletesebb megismerés:
- Alapok a Node.js Express-szel történő egyszerű szerver létrehozásához
- A projekt mappastruktúrájának beállítása és a szükséges csomagok telepítése
- Egy HTML fájl létrehozása az űrlapok megjelenítéséhez és használatához
- A küldött adatok szerveroldali feldolgozása
Lépésről lépésre útmutató
Első lépésként szükségünk van egy szerver felállítására az érkező űrlapadatok feldolgozására. Kezdjük tehát egy új Node.js projekt létrehozásával.
Nyiss meg egy szerkesztőt, például a Visual Studio Code-ot, és nyiss meg egy terminált. Egyébként használhatsz egy normál terminált. Győződj meg róla, hogy a Node.js telepítve van a számítógépeden.
Navigálj a főkönyvtáradba, és hozz létre egy új almappát a szerver-alkalmazásod számára. Javaslom, hogy a könyvtárat „FormServerApp”-nak nevezd el.
Navigálj az újonnan létrehozott mappába, és inicializálj egy új Node.js projektet az npm init parancs segítségével. Fel fognak kérni néhány információ megadására, például a projekt nevét, verzióját és belépési pont fájlját. A megadott alapértelmezett értékeket elfogadhatod, vagy sajátjaidat adhatod meg.
A projekt létrehozása után látni fogsz egy package.json fájlt a könyvtárban. Ez a fájl tartalmazza a projekt összes metaadatait. Most telepítenünk kell az Express-t, tehát futtassuk le az npm install express parancsot.
A telepítés befejeztével ellenőrizd a package.json fájlban, hogy az Express szerepel-e a függőségek között. Ügyelj arra, hogy a telepítés sikeres volt, mielőtt továbblépnél.
Most készítünk egy új fájlt index.js néven, amely az alkalmazásunk belépési pontja lesz. Ez a fájl fogja tartalmazni az Express szerver fő logikáját.
Kezdetnek végezhetsz egy rövid tesztet azzal, hogy beírod a console.log("FormServer"); sort az index.js fájlba, majd futtatod node index.js paranccsal, hogy megbizonyosodj róla, hogy minden működik.
Most itt az ideje használni az Express-t az index.js fájlban. Add hozzá a szükséges kódot az Express importálásához és egy Express-alkalmazás létrehozásához. Íme egy egyszerű kód, ami egy Express alkalmazást inicializál és figyel egy portra.
Győződj meg arról, hogy a szervert egy adott porton, például 3000-en futtatod. Ellenőrizd, hogy az alkalmazás helyesen működik-e, a böngészőben hívd meg a localhost:3000 címet. Látnod kell a "Hello World" kimenetet.
Az alkalmazás űrlapjainak támogatásához most létre kell hoznunk egy index.html fájlt, amely tartalmazni fogja az űrlapunk HTML szerkezetét. Először hozz létre egy „public” nevű új mappát. Helyezd ebbe az index.html fájlt.
Az index.html fájlban egyszerű HTML vázat egy űrlappal helyezz el. Az űrlap majd a későbbiekben elküldi az adatokat a szerverre.
A statikus fájlokat (HTML, CSS, JS) az Express szerveren keresztül biztosítani szeretnéd, használd az app.use() módszert, hogy a "public" mappát statikus könyvtárként határozd meg. Így a böngésző az index.html fájlt fogja kérni, ha a localhost:3000/index.html-t hívod meg.
Ha most elindítod a szervert és a böngészőben betöltöd az index.html-t, akkor képesnek kell lenned a űrlapot helyesen megmutatni. Amikor kitöltöd az űrlapot és elküldöd, mégsem történik semmi, mert még nem implementáltuk az adatokat serveroldali logikával.
A következő lépésben a formuláris adatok serveroldali feldolgozásával foglalkozunk. Ez azt jelenti, hogy egy olyan útvonalat kell hozzáadnunk, amely fogadja és feldolgozza az űrlap által küldött adatokat. Készülj fel a következő lépésekkel, hogy továbbfejleszthesd webalkalmazásod és funkcionalitásokat adj hozzá!
Összefoglalás
Ebben a bemutatóban megtanultad, hogyan hozz létre egy egyszerű szervert Node.js és Express segítségével. Megismerted a Node.js projekt létrehozásának alapjait, a függőségek telepítését és az HTML űrlapok kezelését. Ezek a lépések elengedhetetlenek a webes űrlapok serveroldali kezeléséhez.
Gyakran Ismételt Kérdések
Hogyan lehet telepíteni a Node.js-t?A Node.js-t letöltheted és telepítheted a hivatalos oldalról.
Mi az az Express?Az Express egy rugalmas Node.js webalkalmazás-keretrendszer, amely sokoldalú funkciókat nyújt webes és mobilalkalmazásokhoz.
Hogyan küldhetem el az űrlapadataimat a szervernek?Létrehozhatsz egy HTML űrlapot és az adatokat a Fetch vagy AJAX segítségével küldheted az adatközponti végpontra.
