Εκπαιδευτικό φυλλάδιο Node.js Express.js FrameWork

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

Τι είναι το Express.js;

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

Έχει γίνει το τυπικό πλαίσιο διακομιστή για το Node.js. Το Express είναι το τμήμα backend ενός στοιχείου που είναι γνωστό ως στοίβα MEAN.

Δρομολόγηση επιπέδων Express και middleware μέσω του πυρήνα Node.js HTTP, ροές και API συμβάντων.

Το MEAN είναι δωρεάν και ανοιχτού κώδικα JavaΓραφή στοίβα λογισμικού για τη δημιουργία δυναμικών ιστοσελίδων και εφαρμογών Ιστού που έχει τα ακόλουθα στοιχεία.

1) MongoDB — Η τυπική βάση δεδομένων NoSQL

2) Express.js — Το προεπιλεγμένο πλαίσιο εφαρμογών ιστού

3) AngularJS - Ο JavaΠλαίσιο MVC σεναρίου που χρησιμοποιείται για εφαρμογές web

4) Node.js — Πλαίσιο που χρησιμοποιείται για κλιμακούμενες εφαρμογές διακομιστή και δικτύωσης.

Το πλαίσιο Express.js καθιστά πολύ εύκολη την ανάπτυξη μιας εφαρμογής που μπορεί να χρησιμοποιηθεί για τη διαχείριση πολλών τύπων αιτημάτων όπως τα αιτήματα GET, PUT και POST και DELETE.

Εγκατάσταση και χρήση του Express

Το Express εγκαθίσταται μέσω του Node Package Manager. Αυτό μπορεί να γίνει εκτελώντας την ακόλουθη γραμμή στη γραμμή εντολών

npm εγκατάσταση express

Η παραπάνω εντολή ζητά από τον Node Package Manager να κατεβάσει το απαιτούμενο express ενότητες και εγκαταστήστε τα ανάλογα.

Σημείωση έκδοσης: Το npm εγκαθιστά τώρα το Express 5.2. Πολλά έργα εξακολουθούν να καρφιτσώνουν το Express 4. Και τα δύο εκτελούν τα παρακάτω παραδείγματα σε ένα υποστηριζόμενη έκδοση Node.js.

Ας χρησιμοποιήσουμε το πλαίσιο Express που εγκαταστήσαμε πρόσφατα και ας δημιουργήσουμε μια απλή εφαρμογή "Hello World".

Η εφαρμογή μας θα δημιουργήσει ένα απλό ενότητα διακομιστή η οποία θα ακούει στον αριθμό θύρας 3000. Στο παράδειγμά μας, εάν υποβληθεί ένα αίτημα μέσω του προγράμματος περιήγησης σε αυτόν τον αριθμό θύρας, τότε η εφαρμογή διακομιστή θα στείλει μια απάντηση «Hello World» στον πελάτη.

var express=require('express');
var app=express();
app.get('/',function(req,res)
{
res.send('Hello World!');
});
var server=app.listen(3000,function() {});

Code Επεξήγηση:

1. Στην πρώτη γραμμή κώδικα, χρησιμοποιούμε τη συνάρτηση απαίτησης για να συμπεριλάβουμε τη "μονάδα express".
2. Προτού μπορέσουμε να αρχίσουμε να χρησιμοποιούμε τη μονάδα express, πρέπει να δημιουργήσουμε ένα αντικείμενο.
3. Εδώ δημιουργούμε μια συνάρτηση επανάκλησης. Αυτή η συνάρτηση θα καλείται κάθε φορά που κάποιος περιηγείται στη ρίζα της διαδικτυακής μας εφαρμογής, η οποία είναι http://localhost:3000. Η συνάρτηση επανάκλησης θα χρησιμοποιηθεί για την αποστολή της συμβολοσειράς 'Hello World' στην ιστοσελίδα.
4. Στη συνάρτηση επανάκλησης, στέλνουμε τη συμβολοσειρά "Hello World" πίσω στον πελάτη. Η παράμετρος 'res' χρησιμοποιείται για την αποστολή περιεχομένου πίσω στην ιστοσελίδα. Αυτή η παράμετρος «res» είναι κάτι που παρέχεται από τη λειτουργική μονάδα «αίτημα» για να μπορέσει κάποιος να στείλει περιεχόμενο πίσω στην ιστοσελίδα.
5. Στη συνέχεια, χρησιμοποιούμε τη συνάρτηση listen για να κάνουμε την εφαρμογή διακομιστή μας να ακούει τα αιτήματα των πελατών στη θύρα 3000. Μπορείτε να καθορίσετε οποιαδήποτε διαθέσιμη θύρα εδώ.

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

Παραγωγή:

Από την έξοδο,

• Μπορείτε να το δείτε ξεκάθαρα αν περιηγηθείτε στο URL του localhost στη θύρα 3000, θα δείτε τη συμβολοσειρά 'Hello World' να εμφανίζεται στη σελίδα.
• Επειδή στον κώδικά μας έχουμε αναφέρει συγκεκριμένα ότι ο διακομιστής θα ακούει στη θύρα 3000, μπορούμε να δούμε την έξοδο κατά την περιήγηση σε αυτήν URL.

Τι είναι οι διαδρομές;

Μια μονοδιάστατη διαδρομή είναι μόνο το σημείο εκκίνησης.

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

Για παράδειγμα, ένας πελάτης μπορεί να κάνει ένα αίτημα http GET, POST, PUT ή DELETE για διάφορα URL όπως αυτά που φαίνονται παρακάτω·

http://localhost:3000/Books
http://localhost:3000/Students

Στο παραπάνω παράδειγμα,

• Εάν υποβληθεί αίτημα GET για το πρώτο URL, τότε η απάντηση θα πρέπει ιδανικά να είναι μια λίστα με βιβλία.
• Εάν το αίτημα GET υποβληθεί για το δεύτερο URL, τότε η απάντηση θα πρέπει ιδανικά να είναι μια λίστα Φοιτητών.
• Έτσι, με βάση το URL στο οποίο γίνεται πρόσβαση, θα ενεργοποιηθεί μια διαφορετική λειτουργικότητα στον διακομιστή ιστού και, κατά συνέπεια, η απόκριση θα σταλεί στον πελάτη. Αυτή είναι η έννοια της δρομολόγησης.

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

Η γενική σύνταξη για μια διαδρομή φαίνεται παρακάτω

app.METHOD(PATH, HANDLER)

Εν,

1) η εφαρμογή είναι μια εμφάνιση της μονάδας express

2) Η ΜΕΘΟΔΟΣ είναι μια μέθοδος αιτήματος HTTP (GET, POST, PUT ή DELETE)

3) PATH είναι μια διαδρομή στον διακομιστή.

4) HANDLER είναι η λειτουργία που εκτελείται όταν η διαδρομή αντιστοιχίζεται.

⚠️ Express 5 σημειώσεις: Αυτές οι υπογραφές παραμένουν αμετάβλητες, αλλά η app.del() έγινε app.delete(), η res.sendfile() έγινε res.sendFile() και οι χαρακτήρες μπαλαντέρ χρειάζονται πλέον ονόματα όπως /*splat.

Ας δούμε ένα παράδειγμα για το πώς μπορούμε να υλοποιήσουμε διαδρομές σε Express. Το παράδειγμά μας θα δημιουργήσει 3 διαδρομές ως εξής:

1. Μια διαδρομή /Κόμβος που θα εμφανίζει τη συμβολοσειρά "Tutorial on Node" εάν έχει πρόσβαση σε αυτήν τη διαδρομή
2. Μια /Angular διαδρομή που θα εμφανίζει τη συμβολοσειρά "Tutorial on Angular" εάν έχει πρόσβαση σε αυτήν τη διαδρομή
3. Μια προεπιλεγμένη διαδρομή / η οποία θα εμφανίζει τη συμβολοσειρά "Καλώς ορίσατε στο Guru99 εκπαιδευτικά σεμινάρια.

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

var express = require('express');
var app = express();
app.route('/Node').get(function(req,res)
{
    res.send("Tutorial on Node");
});
app.route('/Angular').get(function(req,res)
{
    res.send("Tutorial on Angular");
});
app.get('/',function(req,res){
    res.send('Welcome to Guru99 Tutorials');
});

Code Επεξήγηση:

1. Εδώ ορίζουμε μια διαδρομή εάν URL http://localhost:3000/Node is selected in the browser. To the route, we are attaching a callback function which will be called when we browse to the Node URLΗ συνάρτηση έχει 2 παραμέτρους.
   • Η κύρια παράμετρος που θα χρησιμοποιήσουμε είναι η παράμετρος 'res', η οποία μπορεί να χρησιμοποιηθεί για την αποστολή πληροφοριών πίσω στον πελάτη.
   • Η παράμετρος 'req' περιέχει πληροφορίες σχετικά με το αίτημα που υποβάλλεται. Μερικές φορές θα μπορούσαν να αποσταλούν πρόσθετες παράμετροι ως μέρος του αιτήματος που υποβάλλεται και, ως εκ τούτου, η παράμετρος «req» μπορεί να χρησιμοποιηθεί για την εύρεση των πρόσθετων παραμέτρων που αποστέλλονται.
2. Χρησιμοποιούμε τη συνάρτηση αποστολής για να στείλουμε τη συμβολοσειρά "Tutorial on Node" πίσω στον πελάτη, εάν έχει επιλεγεί η διαδρομή Κόμβου.
3. Εδώ ορίζουμε μια διαδρομή εάν URL http://localhost:3000/Angular is selected in the browser. To the route, we are attaching a callback function which will be called when we browse to the Angular URL.
4. Χρησιμοποιούμε τη συνάρτηση αποστολής για να στείλουμε τη συμβολοσειρά "Tutorial on Angular" πίσω στον πελάτη, εάν έχει επιλεγεί η Angular διαδρομή.
5. Αυτή είναι η προεπιλεγμένη διαδρομή που επιλέγεται όταν κάποιος περιηγείται στη ρίζα της εφαρμογής — http://localhost:3000. Όταν επιλεγεί η προεπιλεγμένη διαδρομή, εμφανίζεται το μήνυμα "Καλώς ορίσατε στο Guru«99 Tutorials» θα σταλούν στον πελάτη.

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

Παραγωγή:

Από την έξοδο,

• Μπορείτε να το δείτε ξεκάθαρα αν περιηγηθείτε στο URL του localhost στη θύρα 3000, θα δείτε τη συμβολοσειρά 'Καλώς ορίσατε στο' Guru99 εκπαιδευτικά βίντεο εμφανίζονται στη σελίδα.
• Επειδή στον κώδικά μας, έχουμε αναφέρει ότι η προεπιλογή μας URL θα εμφανίσει αυτό το μήνυμα.

Στη συνέχεια, μεταβείτε στο /Node.

Από την έξοδο,

• Μπορείτε να δείτε ότι αν το URL έχει αλλάξει σε /Node, θα επιλεγεί η αντίστοιχη διαδρομή Node και θα εμφανιστεί η συμβολοσειρά "Tutorial on Node".

Στη συνέχεια, μεταβείτε στο /Angular.

Από την έξοδο,

• Μπορείτε να δείτε ότι αν το URL έχει αλλάξει σε /Angular, θα επιλεγεί η αντίστοιχη διαδρομή κόμβου και θα εμφανιστεί η συμβολοσειρά "Tutorial on Angular".

Δείγμα διακομιστή Ιστού χρησιμοποιώντας το express.js

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

Όταν δημιουργείτε γρήγορες εφαρμογές Node.js άμεσα, ένας εύκολος και γρήγορος τρόπος είναι να χρησιμοποιήσετε πρότυπα για την εφαρμογή. Υπάρχουν πολλά frameworks διαθέσιμα στην αγορά για τη δημιουργία προτύπων. Στην περίπτωσή μας, θα πάρουμε ως παράδειγμα το framework Jade για τη δημιουργία προτύπων.

Η εγκατάσταση του Jade γίνεται μέσω του Node Package Manager. Αυτό μπορεί να γίνει εκτελώντας την ακόλουθη γραμμή στη γραμμή εντολών

npm εγκατάσταση νεφρίτη

Η παραπάνω εντολή ζητά από τον Node Package Manager να κατεβάσει τις απαιτούμενες ενότητες Jade και να τις εγκαταστήσει ανάλογα.

ΣΗΜΕΊΩΣΗ: Στην τελευταία έκδοση του Node, το jade έχει καταργηθεί. Αντ 'αυτού, χρησιμοποιήστε πατημασιά.

⚠️ Σύγχρονο ισοδύναμο: εγκαθιστώ Πατημασιά, μετονομάστε το index.jade σε index.pug και ορίστε το app.set('view engine','pug'). Το πακέτο jade δεν λαμβάνει ενημερώσεις. Τα παρακάτω βήματα εξακολουθούν να εκτελούνται.

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

Βήμα 1) Το πρώτο βήμα είναι να δημιουργήσετε ένα πρότυπο Jade. Δημιουργήστε ένα αρχείο με όνομα index.jade και εισάγετε τον παρακάτω κώδικα. Βεβαιωθείτε ότι έχετε δημιουργήσει το αρχείο στον φάκελο "views".

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

Ακολουθεί ο κώδικας της εφαρμογής που το αποδίδει.

var express=require('express');
var app=express();
app.set('view engine','jade');
app.get('/',function(req,res)
{
res.render('index',
{title:'Guru99',message:'Welcome'})
});
var server=app.listen(3000,function() {});

Code Επεξήγηση:

1. Το πρώτο πράγμα που πρέπει να καθοριστεί στην εφαρμογή είναι η «μηχανή προβολής» που θα χρησιμοποιηθεί για την απόδοση των προτύπων. Δεδομένου ότι πρόκειται να χρησιμοποιήσουμε το Jade για την απόδοση των προτύπων μας, το καθορίζουμε αναλόγως.
2. Η συνάρτηση render χρησιμοποιείται για την απόδοση μιας ιστοσελίδας. Στο παράδειγμά μας, αποδίδουμε το πρότυπο (index.jade) που δημιουργήθηκε νωρίτερα.
3. Μεταβιβάζουμε τις αξίες του «Guru99” και “Welcome” στις παραμέτρους “title” και “message” αντίστοιχα. Αυτές οι τιμές θα αντικατασταθούν από τις παραμέτρους 'title' και 'message' που δηλώνονται στο πρότυπο index.jade.

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

Παραγωγή:

Από την έξοδο,

• Μπορούμε να δούμε ότι ο τίτλος της σελίδας ορίζεται σε "Guru99" και η κεφαλίδα της σελίδας ορίζεται σε "Καλώς ορίσατε".
• Αυτό συμβαίνει λόγω του προτύπου Jade που καλείται στην εφαρμογή Node.js.

Συχνές Ερωτήσεις