Βγαίνοντας για φαγητό και κατανόηση των βασικών στοιχείων του Express.js

Βγαίνοντας για φαγητό και κατανόηση των βασικών στοιχείων του Express.js

Εάν έχετε επισκεφθεί ποτέ ένα καθιστικό εστιατόριο, τότε μπορείτε να κατανοήσετε τα βασικά του Express. Αλλά αν αρχίζετε να χτίζετε το πρώτο σας Node.js back end… μπορεί να είστε σε μια ανώμαλη βόλτα.

Ναι - είναι σίγουρα πιο εύκολο να μάθετε τον κόμβο εάν έχετε εμπειρία στο παρελθόν με το JavaScript. Ωστόσο, οι προκλήσεις που θα αντιμετωπίσετε κατά τη δημιουργία ενός back-end είναι εντελώς διαφορετικές από αυτές που αντιμετωπίζετε κατά τη χρήση του JavaScript στη διεπαφή.

Όταν έμαθα το Node, διάλεξα τον σκληρό τρόπο. Σπούδασα επανειλημμένα ηλεκτρονικά βιβλία, γραπτά μαθήματα και βίντεο, μέχρι που κατάλαβα τελικά γιατί έκανα αυτό που έκανα.

Υπάρχει ένας ευκολότερος τρόπος. Θα χρησιμοποιήσω μια αναλογία εστιατορίου για να εξηγήσω τέσσερα βασικά μέρη της πρώτης σας εφαρμογής Express. Το Express.js είναι ένα δημοφιλές πλαίσιο για την οργάνωση του κώδικα σας και θα το συνιστούσα για κάθε αρχάριο. Θα εξηγήσω περαιτέρω σε μια στιγμή.

Εδώ είναι τα τέσσερα βασικά μέρη που θα καλύψουμε:

  1. Οι δηλώσεις απαιτήσεων
  2. Middleware
  3. Δρομολόγηση
  4. App.listen () / Εκκίνηση του διακομιστή

Σε αυτήν την αναλογία, είστε ιδιοκτήτης εστιατορίου που θέλει να προσλάβει έναν γενικό διευθυντή - το άτομο που δημιουργεί όλες τις διαδικασίες και διαχειρίζεται το μέρος έτσι ώστε να λειτουργεί ομαλά και οι πελάτες να αφήνουν χαρούμενους.

Ακολουθεί μια προεπισκόπηση του επόμενου:

Μέχρι το τέλος, θα κατανοήσετε τη λειτουργικότητα κάθε μέρους μιας βασικής εφαρμογής Express.

Βήμα 1: πρόσληψη του διαχειριστή (απαιτείται δήλωση)

Σε αυτό το παράδειγμα, είστε ο ιδιοκτήτης του εστιατορίου. Και πρέπει να προσλάβετε έναν ειδικό για να εκτελέσετε τις καθημερινές λειτουργίες του νέου σας εστιατορίου. Σίγουρα δεν είστε ειδικός και δεν μπορείτε να το αφήσετε στη σερβιτόρα και την κουζίνα για να το καταλάβετε.

Αν θέλετε να οργανώσετε ένα αποτελεσματικό και ασφαλές εστιατόριο, χρειάζεστε κάποιον για να διατηρήσετε το προσωπικό σας στη μέγιστη απόδοση. Η Express είναι ο νέος διευθυντής.

Το πρώτο μέρος είναι αρκετά απλό. Όπως και με οποιοδήποτε άλλο πακέτο NPM, πρέπει να εγκαταστήσετε το npm της μονάδας express και στη συνέχεια να χρησιμοποιήσετε μια δήλωση απαιτήσεων για να φορτώσετε τη μονάδα.

Σε αντίθεση με πολλά άλλα πακέτα NPM, πρέπει επίσης να χρησιμοποιήσετε αυτήν τη γραμμή:

const app = express();

Αυτό συμβαίνει επειδή χρειάζεστε μια μεταβλητή για να διατηρήσετε τη νέα σας εφαρμογή Express. Το Express δεν είναι προεπιλεγμένο μέρος του κόμβου.

Βήμα 2: λήψη αποφάσεων στο εστιατόριο (middleware)

Ας κάνουμε ένα βήμα πίσω εδώ. Ποιες είναι οι συνήθεις συνήθειες που συμβαίνουν στα εστιατόρια; Υπάρχουν τρία που πηδούν αμέσως στο μυαλό μου:

  1. Θέση νέων πελατών
  2. Λήψη παραγγελιών φαγητού
  3. Παρουσίαση της επιταγής στο τέλος του γεύματος

Για καθένα, υπάρχει μια σειρά ελέγχων που πρέπει να εκτελέσετε για να μπορέσετε να εκτελέσετε την ενέργεια. Για παράδειγμα, πριν ορίσετε πελάτες, πρέπει να γνωρίζετε:

  1. Φορούν ένα πουκάμισο και παπούτσια (και παντελόνι); Διαφορετικά, δεν μπορούν να καθίσουν.
  2. Εάν θέλουν να καθίσουν στο μπαρ, είναι 21 ετών (αν είστε στις Ηνωμένες Πολιτείες);

Αυτό δεν είναι beach bar! Ομοίως, στον κωδικό σας, θα πρέπει να επικυρώσετε ότι τα αιτήματα έχουν συγκεκριμένα κριτήρια για να μπορέσουν να συνεχίσουν. Για παράδειγμα, εάν ένα άτομο προσπαθεί να συνδεθεί στον ιστότοπό σας:

  1. Έχουν λογαριασμό;
  2. Εισήγαγαν τον σωστό κωδικό πρόσβασης;

Εδώ μπαίνει η έννοια του middleware . Οι λειτουργίες του Middleware σάς επιτρέπουν να αναλάβετε δράση σε οποιοδήποτε εισερχόμενο αίτημα και να το τροποποιήσετε πριν στείλετε μια απάντηση.

Στο εστιατόριό σας, χρειάζεστε μια σειρά κανόνων για να αποφασίσετε εάν θα πρέπει να φιλοξενήσετε εισερχόμενα άτομα ή όχι. Ας πούμε ότι ένα ζευγάρι περπατά μέσα από την πόρτα σας. Έχετε έναν κανόνα πριν τους δώσετε ένα τραπέζι: φορούν πουκάμισο και παπούτσια;

Αρχικά, ξεκινάτε με το app.use (). Αυτό σημαίνει ότι αυτοί είναι απλώς κανόνες που πρέπει να εφαρμοστούν για τις επόμενες διαδρομές. Δεν είναι GET, POST, PUT ή DELETE.

Στη γραμμή 4, έχετε μια ανώνυμη συνάρτηση με τις παραμέτρους req, res και next. Για τους σκοπούς αυτού του μπλοκ κώδικα, απλώς ελέγχετε το αίτημα (req) για να δείτε αν έχει πουκάμισο και παπούτσια.

Πρέπει επίσης να χρησιμοποιήσετε την επόμενη () συνάρτηση στο τέλος, επειδή απλώς επικυρώνετε τα ρούχα εδώ. Αργότερα, στις διαδρομές, θα επιτρέψετε στους επισκέπτες να πάρουν ένα πραγματικό τραπέζι.

Στις γραμμές 5 και 6, ελέγχετε αν έχουν πουκάμισο και παπούτσια.

Και στις γραμμές 7-9, προχωράτε μόνο εάν έχουν και τα δύο.

Το παραπάνω μπλοκ κώδικα λείπει ένα σημαντικό πράγμα: Μια διαδρομή . Αυτή είναι η συγκεκριμένη συμβολοσειρά που περιλαμβάνεται στο αίτημα. Και επειδή λείπει μια διαδρομή, θα εκτελείται σε κάθε αίτημα.

Φαντάζεσαι? Όταν οι πελάτες μπήκαν στο εστιατόριο… παραγγείλουν φαγητό… ζήτησαν την επιταγή… οι υπάλληλοι θα αναγκάζονταν να τους κοιτάξουν πάνω και κάτω για να βεβαιωθούν ότι ήταν ντυμένοι! Αυτός είναι ένας γρήγορος τρόπος για να βγείτε από την επιχείρηση.

Έτσι, αλλάζουμε τη γραμμή 4 στο παραπάνω παράδειγμα. Τώρα, θα εκτελέσουμε αυτόν τον κώδικα μόνο όταν ένας χρήστης ζητήσει κατά μήκος της διαδρομής '/ table'.

Η πλήρης εξήγηση:

Βήμα 3: εκτέλεση κοινών ρουτίνων (δρομολόγηση)

Ας συνεχίσουμε με το παράδειγμα καθισμάτων. Μέχρι στιγμής, γνωρίζουμε μόνο πώς να επικυρώσουμε εάν κάποιος πρέπει να καθίσει ή όχι. Αλλά δεν ξέρουμε πώς να τους οδηγήσουμε σε ένα τραπέζι και να τους καθίσουμε.

Αυτό είναι όπου διαδρομές μπαίνουν. Οι διαδρομές μας επιτρέψει στις ενέργειες συγκεκριμένων σενάριο βασίζεται στην πορεία . Οι επιλογές είναι GET, POST, PUT και DELETE, αλλά θα επικεντρωθούμε στο GET και POST προς το παρόν.

Στο πλαίσιο ενός εστιατορίου, πρέπει να δημιουργήσουμε ένα αίτημα GET για να επιλέξουμε ένα συγκεκριμένο τραπέζι και να καθίσουμε τους επισκέπτες. Τα GET δεν τροποποιούν ή προσθέτουν στη βάση δεδομένων σας. Ανακτούν απλώς πληροφορίες βάσει συγκεκριμένων παραμέτρων.

Σε αυτήν την περίπτωση, ας πούμε ότι πρέπει να δημιουργήσετε μια διαδικασία για να οργανώσετε ένα πάρτι δύο. Ο αριθμός 2 προήλθε από το αίτημα του πελάτη .

Εντάξει, πριν εξηγήσω: Ναι, αυτό στέλνει μόνο ένα μήνυμα στο τέλος. Δεν βρήκε ακόμη συγκεκριμένο τραπέζι για να διευκολύνει τον πελάτη. Θα ήθελα να αναζητήσω έναν πίνακα για έναν ανοιχτό πίνακα, να έχω περισσότερα από μια ιστορία πίσω ... που είναι εκτός του πεδίου αυτού του σεμιναρίου.

Στη γραμμή 12, ορίζουμε τη διαδικασία εύρεσης ενός πίνακα όταν ένας επισκέπτης ζητά κατά μήκος της διαδρομής '/ table' . Ακριβώς όπως το παραπάνω παράδειγμα, έχουμε διαθέσιμες παραμέτρους αιτήματος και απόκρισης. Έχει επίσης μια παράμετρο , ποσό. Αυτό είναι δύο, σε αυτό το παράδειγμα.

Στην πραγματικότητα, όλα μετά τη δήλωση συνάρτησης στη γραμμή 12 είναι τεχνικά ενδιάμεσο λογισμικό δεδομένου ότι τροποποιεί ένα αίτημα χρήστη. Θα δείτε στο διάγραμμα στο τέλος.

Στη γραμμή 13, έχουμε πρόσβαση στον αριθμό των ατόμων στο πάρτι από τις παραμέτρους του αντικειμένου αιτήματος. Αυτό δεν δηλώνεται πουθενά από τότε που το αίτημα προήλθε από τον χρήστη και δεν διαθέτουμε κώδικα διεπαφής. Λοιπόν, εδώ είναι το αίτημα εάν θα ήταν μια πραγματική εφαρμογή:

req = { params: { amount: 2; }}

Στη γραμμή 13, η μεταβλητή συμβαλλόμενου μέρους μας έχει πρόσβαση στο ποσό ιδιοκτησίας του αντικειμένου params εντός του αιτήματος .

Τέλος, στη γραμμή 14, στέλνουμε μια απάντηση στον πελάτη: ψάχνουμε για το κατάλληλο μέγεθος τραπεζιού.

Αυτό είναι πολλά ταυτόχρονα. Εδώ είναι ένα διάγραμμα:

Βήμα 3.5: Κάνοντας το εστιατόριο σας αποτελεσματικό (δρομολογητής)

Τώρα μπορείτε να εντοπίσετε ολόκληρη τη διαδρομή από το αίτημα έως την απάντηση. Όμως, καθώς η εφαρμογή σας μεγαλώνει, δεν θα θέλετε να κωδικοποιήσετε τους κανόνες για κάθε διαδρομή ξεχωριστά. Θα διαπιστώσετε ότι ορισμένες διαδρομές μοιράζονται τους ίδιους κανόνες, οπότε πρέπει να βρείτε έναν τρόπο εφαρμογής ενός συνόλου κανόνων σε πολλές διαδρομές.

Όσον αφορά τα καθίσματα, μπορείτε είτε να καθίσετε τους πελάτες σας στο μπαρ είτε σε ένα τραπέζι. Αυτοί έχουν τους κοινούς κανόνες όπως το πουκάμισο + τα παπούτσια, αλλά το κάθισμα στο μπαρ απαιτεί κάθε μέλος του πάρτι να είναι 21.

Και, όσον αφορά την εξυπηρέτηση των πελατών, θα πρέπει να χρησιμοποιήσετε μια ελαφρώς διαφορετική διαδικασία για την εξυπηρέτηση του ορεκτικού, του κυρίως πιάτου και του δείπνου. Όμως, αυτές οι τρεις διαδρομές έχουν πολλά κοινά επίσης.

Εδώ μπαίνει ο δρομολογητής . Ο δρομολογητής σάς επιτρέπει να ομαδοποιείτε τις διαδρομές σας ώστε να μπορείτε να δημιουργήσετε κοινούς κανόνες.

Πρέπει να δημιουργήσουμε μεσαίο λογισμικό για να καλύψουμε κάθε μία από αυτές τις περιπτώσεις. Θα καλύψω μόνο τις θήκες καθισμάτων για τώρα, καθώς θα αντικαταστήσει τον παραπάνω κώδικα.

Ακολουθεί το πλήρες απόσπασμα κώδικα:

Θα καλύψω κάθε μέρος ξεχωριστά.

Στη γραμμή 4, δηλώνουμε τον δρομολογητή μας.

Στις γραμμές 6 και 14, έχουμε τώρα το seatRouter.use () στη θέση του app.use () για να υποδείξουμε ότι αυτό το ενδιάμεσο λογισμικό σχετίζεται μόνο με τις θέσεις του καθιστικού δρομολογητή.

Τέλος, στη γραμμή 21, προσθέτουμε περισσότερο μεσαίο λογισμικό για να δείξουμε ότι κάθε διαδρομή καθίσματος δρομολογητή ξεκινά με «/ καθίσματα». Έτσι, εάν κάποιος ζήτησε θέση στο μπαρ, το πλήρες μονοπάτι θα ήταν «/ καθιστικό / μπαρ». Αυτό μπορεί να αισθάνεται λίγο εκτός τάξης, καθώς μπορεί να περιμένετε να καθοριστεί η διαδρομή κατά τη δημιουργία του δρομολογητή στη γραμμή 4. Αυτό είναι φυσιολογικό!

Εδώ είναι αυτό σε μορφή διαγράμματος:

Και, όταν προσθέτετε μια διαδρομή GET, πηγαίνει πάνω από την τελευταία δήλωση όπου εκχωρείτε διαδρομές στο δρομολογητή.

Βήμα 4: άνοιγμα για επιχειρήσεις (λιμάνια)

Εντάξει, τελευταίο μέρος. Μέχρι στιγμής, έχετε προσλάβει έναν διαχειριστή, έχετε ορίσει τι πρέπει να κάνετε προτού αποδεχτείτε τα αιτήματα πελατών και έχετε αποφασίσει τι να κάνετε με συγκεκριμένα αιτήματα πελατών μόλις εισέλθουν. Τώρα, πρέπει απλώς να καθορίσετε τη διεύθυνση για την τοποθεσία όπου θα συμβούν όλα αυτά.

Ο διακομιστής σας διαθέτει θύρες που μοιάζουν με τη διεύθυνση του ίδιου του εστιατορίου.Επειδή ο διακομιστής σας μπορεί να χειριστεί πολλούς τύπους εστιατορίων (ή σενάρια διακομιστή) ταυτόχρονα, πρέπει να του πείτε πού πρέπει να εκτελείται κάθε σενάριο.

Στο παραπάνω παράδειγμα, η θύρα είναι 3000 και βρίσκεται στον υπολογιστή σας. Αν πληκτρολογήσετε:

//localhost:3000/

στο πρόγραμμα περιήγησής σας και εκτελείτε την εφαρμογή Node, ο διακομιστής ξέρει να εκτελεί το συγκεκριμένο σενάριο. Σε αυτήν την περίπτωση, μόλις εισαγάγετε τη διεύθυνση URL, θα καταγράψετε το μήνυμα στην κονσόλα και θα μπορείτε να χρησιμοποιήσετε οποιαδήποτε από τις διαδρομές σας . Εάν το ίδιο το εστιατόριο είναι ολόκληρη η εφαρμογή σας, τότε είναι πλέον ανοιχτό για επιχειρήσεις στη διεύθυνση 3000.

Σας άρεσε αυτό; Δώστε ένα χειροκρότημα για να το ανακαλύψουν και άλλοι. Και, αν θέλετε να λαμβάνετε ειδοποίηση όταν δημοσιεύω μελλοντικά σεμινάρια που χρησιμοποιούν αναλογίες, εγγραφείτε εδώ: