Node.js Express FrameWork Tutorial – Μάθετε σε 10 λεπτά

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Επεξήγηση κώδικα:

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

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

Παραγωγή:

Express.js

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

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

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

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

Για παράδειγμα, ένας πελάτης μπορεί να κάνει ένα αίτημα 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. Το παράδειγμά μας θα δημιουργήσει 3 διαδρομές ως

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

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

Διαδρομές στο Node.js

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');
}));

Επεξήγηση κώδικα:

  1. Εδώ ορίζουμε μια διαδρομή εάν η διεύθυνση URL http://localhost:3000/Node επιλέγεται στο πρόγραμμα περιήγησης. Στη διαδρομή, επισυνάπτουμε μια συνάρτηση επανάκλησης που θα καλείται όταν περιηγηθούμε στη διεύθυνση URL του κόμβου. Η συνάρτηση έχει 2 παραμέτρους.
  • Η κύρια παράμετρος που θα χρησιμοποιήσουμε είναι η παράμετρος 'res', η οποία μπορεί να χρησιμοποιηθεί για την αποστολή πληροφοριών πίσω στον πελάτη.
  • Η παράμετρος 'req' περιέχει πληροφορίες σχετικά με το αίτημα που υποβάλλεται. Μερικές φορές θα μπορούσαν να αποσταλούν πρόσθετες παράμετροι ως μέρος του αιτήματος που υποβάλλεται και, ως εκ τούτου, η παράμετρος «req» μπορεί να χρησιμοποιηθεί για την εύρεση των πρόσθετων παραμέτρων που αποστέλλονται.
  1. Χρησιμοποιούμε τη συνάρτηση αποστολής για να στείλουμε τη συμβολοσειρά "Tutorial on Node" πίσω στον πελάτη, εάν έχει επιλεγεί η διαδρομή Κόμβου.
  2. Εδώ ορίζουμε μια διαδρομή εάν η διεύθυνση URL http://localhost:3000/Angular επιλέγεται στο πρόγραμμα περιήγησης. Στη διαδρομή, επισυνάπτουμε μια συνάρτηση επανάκλησης που θα καλείται όταν περιηγηθούμε στη διεύθυνση URL της γωνίας.
  3. Χρησιμοποιούμε τη συνάρτηση αποστολής για να στείλουμε τη συμβολοσειρά "Tutorial on Angular" πίσω στον πελάτη, εάν έχει επιλεγεί η Angular διαδρομή.
  4. Αυτή είναι η προεπιλεγμένη διαδρομή που επιλέγεται όταν κάποιος περιηγείται στη διαδρομή της εφαρμογής – http://localhost:3000. Όταν επιλεγεί η προεπιλεγμένη διαδρομή, θα σταλεί στον πελάτη το μήνυμα "Καλώς ήρθατε στα Guru99 Tutorials".

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

Παραγωγή:

Διαδρομές στο Node.js

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

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

Διαδρομές στο Node.js

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

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

Διαδρομές στο Node.js

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

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

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

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

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

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

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

Η παραπάνω εντολή ζητά από τον διαχειριστή πακέτων Node να κατεβάσει τις απαιτούμενες μονάδες jade και να τις εγκαταστήσει ανάλογα.

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

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

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

Δείγμα διακομιστή Web με χρήση του Express.js

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

Δείγμα διακομιστή Web με χρήση του Express.js

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() {});

Επεξήγηση κώδικα:

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

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

Παραγωγή:

Δείγμα διακομιστή Web με χρήση του Express.js

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

  • Μπορούμε να δούμε ότι ο τίτλος της σελίδας ορίζεται σε "Guru99" και η κεφαλίδα της σελίδας ορίζεται σε "Welcome".
  • Αυτό οφείλεται στο πρότυπο jade που καλείται στην εφαρμογή μας node js.

Περίληψη

  • Το πλαίσιο express είναι το πιο κοινό πλαίσιο που χρησιμοποιείται για την ανάπτυξη εφαρμογών Node js. Το πλαίσιο express είναι χτισμένο πάνω από το πλαίσιο node.js και βοηθά στη γρήγορη ανάπτυξη εφαρμογών που βασίζονται σε διακομιστή.
  • Οι διαδρομές χρησιμοποιούνται για την εκτροπή των χρηστών σε διαφορετικά μέρη των εφαρμογών Ιστού με βάση το αίτημα που υποβλήθηκε. Η απόκριση για κάθε διαδρομή μπορεί να ποικίλλει ανάλογα με το τι πρέπει να εμφανιστεί στον χρήστη.
  • Τα πρότυπα μπορούν να χρησιμοποιηθούν για την έγχυση περιεχομένου με αποτελεσματικό τρόπο. Το Jade είναι μια από τις πιο δημοφιλείς μηχανές προτύπων που χρησιμοποιούνται σε εφαρμογές Node.js.