Τι είναι το Express.js και γιατί πρέπει να το χρησιμοποιείτε;

Το Express.js (ή "Express") είναι ένα πλαίσιο web NodeJS που χρησιμοποιείται στο back-end (ή στην πλευρά του διακομιστή) ιστότοπων και εφαρμογών ιστού. Το Express είναι ευέλικτο και μινιμαλιστικό, πράγμα που σημαίνει ότι δεν διαθέτει μια εκτενή συλλογή περιττών βιβλιοθηκών και πακέτων, ούτε υπαγορεύει πώς πρέπει να δημιουργήσετε την εφαρμογή σας.

Το πλαίσιο Express δημιουργεί API που διευκολύνουν την επικοινωνία μέσω αιτημάτων και απαντήσεων HTTP. Ένα από τα αξιοσημείωτα πράγματα για το Express είναι ότι δίνει στους προγραμματιστές τον πλήρη έλεγχο των αιτημάτων και των απαντήσεων που σχετίζονται με κάθε μία από τις μεθόδους της εφαρμογής του.

Σε αυτό το σεμινάριο, θα μάθετε πώς και γιατί πρέπει να χρησιμοποιείτε το Express στα δικά σας έργα.

Εγκατάσταση του Express στο έργο σας

Για να μπορέσετε να χρησιμοποιήσετε το πλαίσιο Express, θα πρέπει να το εγκαταστήσετε στον κατάλογο του έργου σας. Αυτή είναι μια απλή διαδικασία που απαιτεί NodeJS και npm.

Το πρώτο πράγμα που θα πρέπει να κάνετε είναι να δημιουργήσετε ένα

πακέτο.json αρχείο (στον κατάλογο/φάκελο του έργου σας) χρησιμοποιώντας την ακόλουθη εντολή:

npm init

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

• Ονομα πακέτου
• Εκδοχή
• Περιγραφή
• Σημείο εισόδου
• Εντολή δοκιμής
• Λέξεις-κλειδιά
• Συγγραφέας
• Αδεια

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

npm init -y

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

{
"όνομα": "myapp",
"έκδοση": "1.0.0",
"περιγραφή": "",
"main": "index.js",
"σενάρια": {
"test": "echo \"Σφάλμα: δεν καθορίστηκε δοκιμή\" && έξοδος 1"
},
"λέξεις-κλειδιά": [],
"συγγραφέας": "",
"άδεια": "ISC",
}

Τώρα μπορείτε να εγκαταστήσετε το Express χρησιμοποιώντας την ακόλουθη εντολή:

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

Η εγκατάσταση του Express θα δημιουργήσει ένα πακέτο-κλείδωμα.json αρχείο καθώς και α node_modules ντοσιέ.

Κατανόηση του αρχείου package.json

Ο λόγος που πρέπει να δημιουργήσετε ένα πακέτο.json αρχείο πριν από την εγκατάσταση του Express είναι ότι το πακέτο.json Το αρχείο λειτουργεί ως αποθετήριο, αποθηκεύοντας σημαντικά μεταδεδομένα για το δικό σας Έργα NodeJS.Εξαρτήσεις είναι το όνομα ενός από αυτά τα πεδία μεταδεδομένων και το Express είναι α εξάρτηση.

Η εγκατάσταση του Express στον κατάλογο του έργου σας θα ενημερώσει αυτόματα πακέτο.json αρχείο.

Το ενημερωμένο αρχείο package.json

{
"όνομα": "myapp",
"έκδοση": "1.0.0",
"περιγραφή": "",
"main": "index.js",
"σενάρια": {
"test": "echo \"Σφάλμα: δεν καθορίστηκε δοκιμή\" && έξοδος 1"
},
"λέξεις-κλειδιά": [],
"συγγραφέας": "",
"άδεια": "ISC",
"εξαρτήσεις": {
"express": "^4.17.1"
}
}

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

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

Η ύπαρξη ενός API που χειρίζεται την αποθήκευση και τη μετακίνηση δεδομένων αποτελεί προϋπόθεση για οποιαδήποτε εφαρμογή πλήρους στοίβας και το Express κάνει τη διαδικασία δημιουργίας διακομιστή γρήγορη και εύκολη.

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

κόμβος index.js

Ωστόσο, πριν φτάσετε στο στάδιο της εκτέλεσης, θα χρειαστεί να δημιουργήσετε το index.js (ή εφαρμογή διακομιστή) στον κατάλογο του έργου σας.

Δημιουργία του Αρχείου index.js

const express = απαιτώ ('express');
const app = express();
const port = 5000;
app.get('/', (απαιτ., res) => {
res.send ('Ο διακομιστής σας είναι σε λειτουργία')
})
app.listen (port, () => {
console.log(`Ο διακομιστής εκτελείται σε: http://localhost:${port}`);
})

Το παραπάνω αρχείο εισάγει το Express και στη συνέχεια το χρησιμοποιεί για να δημιουργήσει μια εφαρμογή Express. Στη συνέχεια, η εφαρμογή Express παρέχει πρόσβαση στο παίρνω και ακούω μεθόδους που αποτελούν μέρος της ενότητας Express. ο app.listen() Η μέθοδος είναι η πρώτη που πρέπει να ρυθμίσετε. Ο σκοπός του είναι να δημιουργήσει λίστα για συνδέσεις σε μια συγκεκριμένη θύρα του κεντρικού υπολογιστή, η οποία είναι θύρα 5000 στο παραπάνω παράδειγμα.

Ο σκοπός του app.get() μέθοδος είναι η λήψη δεδομένων από έναν συγκεκριμένο πόρο. Αυτή η μέθοδος έχει δύο ορίσματα: μια διαδρομή και μια συνάρτηση επανάκλησης. Το όρισμα διαδρομής στο παραπάνω παράδειγμα έχει μια κάθετη προς τα εμπρός που αντιπροσωπεύει τη θέση ρίζας. Επομένως, πλοήγηση στο http://localhost: 5000 Η διεύθυνση URL (η οποία είναι η ρίζα της εφαρμογής σας), ενώ η παραπάνω εφαρμογή index.js εκτελείται, θα παράγει την ακόλουθη έξοδο στο πρόγραμμα περιήγησής σας:

ο app.get() Η συνάρτηση επανάκλησης μεθόδου δημιουργεί την παραπάνω έξοδο. Αυτή η συνάρτηση επανάκλησης έχει δύο ορίσματα — αίτημα και απάντηση. Η απάντηση (η οποία είναι res στο παραπάνω παράδειγμα) είναι το αντικείμενο HTTP που στέλνει μια εφαρμογή Express μετά από αίτημα HTTP (το οποίο κάνετε πληκτρολογώντας την παραπάνω διεύθυνση URL στο πρόγραμμα περιήγησής σας).

Εξυπηρέτηση στατικής ιστοσελίδας με τον Express Server σας

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

Ωστόσο, ένας διακομιστής Express μπορεί επίσης να εξυπηρετήσει στατικά αρχεία. Για παράδειγμα, εάν θέλετε να δημιουργήσετε έναν στατικό ιστότοπο (όπως έναν προσωπικό γυμναστή, έναν προπονητή ζωής ή έναν στυλίστα), τότε μπορείτε να χρησιμοποιήσετε τον διακομιστή Express σας για να φιλοξενήσετε τον ιστότοπο.

Παράδειγμα ιστότοπου στατικής HTML

 Σπίτι 







καλως ΗΡΘΑΤΕ

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus rerum officia quibusdam mollitia deserunt animi soluta laudantium. Quam sapiente a dolorum magnam necessitatibus quis tempore facere totam. Dolor, sequi distinctio!

Προβολή Υπηρεσιών

Ο παραπάνω κώδικας HTML δημιουργεί μια ευχάριστη στατική αρχική σελίδα ενός προσωπικού ιστότοπου στυλίστα με σύνδεση στο ακόλουθο αρχείο style.css:

*{
περιθώριο: 0;
γέμιση: 0;
box-sizing: border-box;
}
σώμα {
font-family: 'Lato', sans-serif;
Ύψος γραμμής: 1,5;
}
ένα {
χρώμα: #333;
κείμενο-διακόσμηση: κανένα;
}
ul {
στιλ λίστας: κανένας;
}
Π {
περιθώριο: .5 rem 0;
}
h1{
περιθώριο-αριστερά: 2rem;
}
/* Βοηθητικό πρόγραμμα */
.container {
μέγιστο πλάτος: 1100 px;
περιθώριο: αυτόματο;
padding: 0 2rem;
υπερχείλιση: κρυφό;
}
.btn {
οθόνη: inline-block;
σύνορο: κανένα;
φόντο: #910505;
χρώμα: #fff;
padding: 0,5rem 1rem;
ακτίνα συνόρων: 0,5 rem;
}
.btn: αιώρηση {
αδιαφάνεια: 0,9;
}
/* Γραμμή πλοήγησης */
#navbar {
φόντο: #fff;
θέση: κολλώδης;
κορυφή: 0;
z-index: 2;
}
#navbar .container {
οθόνη: πλέγμα;
πλέγμα-πρότυπο-στήλες: 6fr 3fr 2fr;
padding: 1rem;
στοίχιση-στοιχεία: κέντρο;
}
#navbar h1 {
χρώμα: #b30707;
}
#navbar ul {
justify-self: end;
οθόνη: flex;
margin-right: 3,5rem;
}
#navbar ul li a {
padding: 0,5rem;
βάρος γραμματοσειράς: έντονη γραφή;
}
#navbar ul li a.current {
φόντο: #b30707;
χρώμα: #fff;
}
#navbar ul li a: hover {
φόντο: #f3f3f3;
χρώμα: #333;
}
#navbar .social {
justify-self: κέντρο;
}
#navbar .social i {
χρώμα: #777;
margin-right: .5rem;
}
/* Σπίτι */
#Σπίτι {
χρώμα: #fff;
φόντο: #333;
padding: 2rem;
θέση: σχετική;
}
#home: πριν από {
περιεχόμενο: '';
φόντο: url ( https://source.unsplash.com/random) κέντρο/κάλυμμα χωρίς επανάληψη.
θέση: απόλυτη;
κορυφή: 0;
αριστερά: 0;
πλάτος: 100%;
ύψος: 100%;
αδιαφάνεια: 0,4;
}
#home .showcase-container {
οθόνη: πλέγμα;
πλέγμα-πρότυπο-στήλες: επανάληψη (2, 1fr);
justify-content: κέντρο;
στοίχιση-στοιχεία: κέντρο;
Ύψος: 100vh;
}
#home .showcase-content {
z-index: 1;
}
#home .showcase-content p {
περιθώριο-κάτω: 1rem;
}

Εξυπηρέτηση του ιστότοπου με τον διακομιστή Express

const express = απαιτώ ('express');
const app = express();
const port = 5000;
app.use (express.static('public'));
app.get('/', (απαιτ., res) => {
res.sendFile('index.html')
})
app.listen (port, () => {
console.log(`Ο διακομιστής εκτελείται σε: http://localhost:${port}`);
})

Τα παραπάνω αρχεία HTML και CSS βρίσκονται σε έναν δημόσιο φάκελο στον κύριο κατάλογο του έργου. Η τοποθεσία του αρχείου HTML το καθιστά προσβάσιμο στον διακομιστή Express και τις λειτουργίες του.

Μία από τις νέες λειτουργίες στον διακομιστή Express παραπάνω είναι η app.use() μέθοδος. Τοποθετεί το express.static() ενδιάμεσο λογισμικό, το οποίο εξυπηρετεί στατικά αρχεία. Αυτό καθιστά δυνατή τη χρήση του res.sendFile() λειτουργία για την εξυπηρέτηση του στατικού index.html αρχείο παραπάνω.

Πλοήγηση στο http://localhost: 5000 Η τοποθεσία στο πρόγραμμα περιήγησής σας θα εμφανίσει κάτι παρόμοιο με την ακόλουθη έξοδο:

Εξερευνήστε την Ανάπτυξη Backend

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

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

Μάθετε πώς να γίνετε προγραμματιστής Backend το 2021

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

Διαβάστε Επόμενο

Σχετικά με τον Συγγραφέα