Στο σημερινό Οδηγό θα σου δείξω πώς να λαμβάνεις δεδομένα φόρμας σε έναν διακομιστή χρησιμοποιώντας το Node.js και το Express. Θα δημιουργήσουμε μαζί έναν απλό διακομιστή και θα περάσουμε τα απαραίτητα βήματα για τη δημιουργία φορμών που να στέλνουν δεδομένα σε αυτόν το διακομιστή. Αυτός ο οδηγός απευθύνεται σε όσους έχουν μια βασική κατανόηση του JavaScript και του Node.js και επιθυμούν να επεκτείνουν τις δεξιότητές τους στον τομέα της ανάπτυξης ιστοσελίδων.
Κύρια συμπεράσματα:
- Βασικές αρχές για τη δημιουργία ενός απλού διακομιστή Node.js με το Express
- Δημιουργία του καταλόγου έργου και εγκατάσταση των απαιτούμενων πακέτων
- Δημιουργία ενός HTML αρχείου για την προβολή και χρήση των φορμών
- Επεξεργασία των δεδομένων που στέλνονται από τον διακομιστή
Οδηγίες
Πρώτα πρέπει να δημιουργήσουμε έναν διακομιστή για να επεξεργαστούμε τα εισερχόμενα δεδομένα φόρμας. Γι' αυτό ξεκινάμε δημιουργώντας ένα νέο έργο Node.js.
Ανοίξτε τον επεξεργαστή κειμένου σας, όπως το Visual Studio Code, και ανοίξτε ένα τερματικό. Εναλλακτικά, μπορείτε να χρησιμοποιήσετε ένα κανονικό τερματικό. Βεβαιωθείτε ότι το Node.js είναι εγκατεστημένο στον υπολογιστή σας.
Πλοηγηθείτε στον κεντρικό φάκελό σας και δημιουργήστε ένα νέο υποφάκελο για την εφαρμογή σας διακομιστή. Σας προτείνω να ονομάσετε τον φάκελο "FormServerApp".
Μεταβείτε στον νεοδημιουργημένο φάκελο και αρχικοποιήστε ένα νέο έργο Node.js με την εντολή npm init. Θα σας ζητηθεί να εισαγάγετε μερικές πληροφορίες, όπως το όνομα του έργου, η έκδοση και το αρχείο εισόδου. Μπορείτε να δεχτείτε τις προεπιλεγμένες τιμές ή να εισάγετε τις δικές σας.
Μετά τη δημιουργία του έργου, θα βρείτε ένα αρχείο package.json στον φάκελο. Αυτό το αρχείο περιέχει όλα τα μεταδεδομένα του έργου σας. Τώρα πρέπει να εγκαταστήσουμε το Express, οπότε εκτελούμε την εντολή npm install express.
Αφού ολοκληρωθεί η εγκατάσταση, ελέγξτε στο package.json αν το Express εμφανίζεται ως εξάρτηση. Πρέπει να επιβεβαιώσετε ότι η εγκατάσταση ήταν επιτυχής πριν συνεχίσετε.
Στη συνέχεια δημιουργούμε ένα νέο αρχείο με το όνομα index.js, το οποίο λειτουργεί ως το σημείο εκκίνησης της εφαρμογής μας. Αυτό το αρχείο θα περιέχει την κύρια λογική για τον Express διακομιστή μας.
Αρχικά, μπορείτε να κάνετε έναν σύντομο έλεγχο, εισάγοντας console.log("FormServer"); στο αρχείο index.js και το εκτελείτε με node index.js για να βεβαιωθείτε ότι όλα λειτουργούν κανονικά.
Τώρα είναι η στιγμή να χρησιμοποιήσετε το Express στο αρχείο index.js. Προσθέστε τον απαιτούμενο κώδικα για την εισαγωγή του Express και δημιουργία μιας εφαρμογής Express. Εδώ είναι ένας απλός κώδικας για την αρχικοποίηση μιας εφαρμογής Express και την ακρόαση σε ένα λιμάνι.
Βεβαιωθείτε ότι ο διακομιστής λειτουργεί σε ένα συγκεκριμένο λιμάνι, για παράδειγμα 3000. Ελέγξτε αν η εφαρμογή λειτουργεί σωστά, ανοίγοντας τον περιηγητή στη διεύθυνση localhost:3000. Θα πρέπει να δείτε την έξοδο "Hello World".
Για να υποστηρίξετε τις φόρμες στην εφαρμογή σας, χρειάζεται τώρα ένα αρχείο index.html που θα περιέχει τη δομή HTML για τη φόρμα μας. Πρώτα δημιουργήστε ένα νέο φάκελο με το όνομα "public". Μέσα του τοποθετήστε το αρχείο index.html.
Στο αρχείο index.html μπορείτε να εισάγετε απλά ένα απλό σκελετό HTML με ένα φόρμα. Η φόρμα θα στέλνει τα δεδομένα που αποστέλλονται στον διακομιστή αργότερα.
Για να παρέχεις τα στατικά αρχεία (HTML, CSS, JS) μέσω του διακομιστή Express, χρησιμοποίησε τη μέθοδο app.use() για να ορίσεις τον φάκελο "public" ως στατικό φάκελο. Έτσι, ο browser μπορεί να ζητήσει το αρχείο index.html όταν καλείς το localhost:3000/index.html.
Όταν τώρα εκκινείς τον διακομιστή και φορτώνεις το index.html στον browser, θα πρέπει να είσαι σε θέση να εμφανίσεις σωστά τη φόρμα. Όταν συμπληρώσεις τη φόρμα και την υποβάλλεις, δεν θα συμβεί τίποτα ακόμη, γιατί δεν έχουμε υλοποιήσει ακόμη την server-side λογική.
Στο επόμενο βήμα, θα ασχοληθούμε με την server-side επεξεργασία των δεδομένων της φόρμας. Αυτό σημαίνει ότι θα πρέπει να προσθέσουμε μια διαδρομή που να λαμβάνει και να επεξεργάζεται τα δεδομένα που στέλνονται από τη φόρμα. Ετοιμάσου για τα επόμενα βήματα για να εξελίξεις την web εφαρμογή σου και να προσθέσεις λειτουργικότητες!
Σύνοψη
Σε αυτό το εγχειρίδιο έχεις μάθει πώς να στήσεις έναν απλό διακομιστή με το Node.js και το Express. Έχεις μάθει τις βασικές αρχές για τη δημιουργία ενός έργου με το Node.js, την εγκατάσταση εξαρτήσεων και την εισαγωγή σε φόρμες HTML. Αυτά τα βήματα είναι κρίσιμα για τη χειρισμό των web φορμών στην πλευρά του διακομιστή.
Συχνές Ερωτήσεις
Πώς εγκαθιστώ το Node.js;Το Node.js μπορεί να ληφθεί και να εγκατασταθεί από την επίσημη ιστοσελίδα.
Τι είναι το Express;Το Express είναι ένα ευέλικτο πλαίσιο εφαρμογών για το Node.js που παρέχει ποικίλες λειτουργίες για web και κινητές εφαρμογές.
Πώς μπορώ να στείλω τα δεδομένα της φόρμας μου στον διακομιστή;Μπορείς να δημιουργήσεις μια φόρμα HTML και να στείλεις τα δεδομένα στον server-side σημείο με τη χρήση του Fetch ή του AJAX.
