Στην ανάπτυξη Ιστού, η εμφάνιση δεδομένων από τον διακομιστή σε ιστοσελίδες είναι ζωτικής σημασίας για τη δημιουργία διαδραστικών και δυναμικών εμπειριών χρήστη. Αυτό είναι όπου Template Engine έρχονται Express.js στη διάσωση. Το A Template Engine είναι ένα εργαλείο που σας επιτρέπει να δημιουργείτε δυναμικά πρότυπα HTML εισάγοντας δεδομένα από τον διακομιστή σε κώδικα HTML.
Γιατί να χρησιμοποιήσετε Template Engine ;
Template Engine βοηθήστε να διαχωρίσετε τη σήμανση HTML από τα δεδομένα που προέρχονται από τον διακομιστή. Αυτό σας επιτρέπει να διαχειρίζεστε τον κώδικα HTML πιο εύκολα χωρίς να χρειάζεται να ενσωματώνετε δεδομένα σε κάθε γραμμή κώδικα. Αντίθετα, θα δημιουργήσετε "placeholders" ή "tags" εντός του κώδικα HTML, τον οποίο Template Engine αργότερα θα γεμίσετε με δεδομένα από την πλευρά του διακομιστή.
Χρήση Template Engine σε Express.js
Express.js υποστηρίζει διάφορα template engine, όπως το Pug(παλαιότερα γνωστό ως Jade) και το EJS(Embedded JavaScript). Ακολουθούν παραδείγματα χρήσης Pug και EJS σε Express.js:
Χρήση Pug Template Engine
Εγκατάσταση Pug: Πρέπει να εγκαταστήσετε το pug
πακέτο μέσω npm.
Διαμόρφωση Template Engine: Στο αρχείο διαμόρφωσης της εφαρμογής σας(π.χ. app.js
), ορίστε το Pug ως το template engine.
Δημιουργία προτύπου Pug: Δημιουργήστε αρχεία Pug στον views
κατάλογο. Για παράδειγμα, δημιουργήστε ένα index.pug
αρχείο:
Χειρισμός διαδρομής και απόδοση δεδομένων: Κατά τη διαχείριση διαδρομής, μπορείτε να μεταβιβάσετε δεδομένα στη template engine χρήση res.render()
.
Χρήση EJS Template Engine
Εγκατάσταση EJS: Εγκαταστήστε το ejs
πακέτο μέσω npm.
Ρύθμιση παραμέτρων Template Engine: Ορίστε το EJS ως το template engine στη διαμόρφωση της εφαρμογής σας.
Δημιουργία προτύπου EJS: Δημιουργήστε αρχεία EJS στον views
κατάλογο. Για παράδειγμα, δημιουργήστε ένα index.ejs
αρχείο:
Χειρισμός διαδρομής και απόδοση δεδομένων: Κατά τη διαχείριση διαδρομής, μεταβιβάστε δεδομένα στη template engine χρήση res.render()
.
συμπέρασμα
Η χρήση Template Engine του in Express.js σάς επιτρέπει να δημιουργείτε δυναμικές ιστοσελίδες και να εμφανίζετε πληροφορίες από τον διακομιστή στο πρόγραμμα περιήγησης του χρήστη. Χρησιμοποιώντας Pug, EJS ή άλλα template engine, μπορείτε να δημιουργήσετε διαδραστικές και ευέλικτες ιστοσελίδες που παρέχουν καλύτερη εμπειρία χρήστη και βελτιστοποιούν τη διαχείριση του κώδικα HTML και των δεδομένων.