close

Χρήση Template Engine σε Express.js

Στην ανάπτυξη Ιστού, η εμφάνιση δεδομένων από τον διακομιστή σε ιστοσελίδες είναι ζωτικής σημασίας για τη δημιουργία διαδραστικών και δυναμικών εμπειριών χρήστη. Αυτό είναι όπου 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.

npm install pug --save

Διαμόρφωση Template Engine: Στο αρχείο διαμόρφωσης της εφαρμογής σας(π.χ. app.js), ορίστε το Pug ως το template engine.

app.set('view engine', 'pug');

Δημιουργία προτύπου Pug: Δημιουργήστε αρχεία Pug στον views κατάλογο. Για παράδειγμα, δημιουργήστε ένα index.pug αρχείο:

doctype html  
html  
  head  
    title My Express App  
  body  
    h1 Welcome to My Express App  
    p #{message}

Χειρισμός διαδρομής και απόδοση δεδομένων: Κατά τη διαχείριση διαδρομής, μπορείτε να μεταβιβάσετε δεδομένα στη template engine χρήση res.render().

app.get('/',(req, res) => {  
  const message = 'Hello from Express!';  
  res.render('index', { message });  
});

Χρήση EJS Template Engine

Εγκατάσταση EJS: Εγκαταστήστε το ejs πακέτο μέσω npm.

npm install ejs --save

Ρύθμιση παραμέτρων Template Engine: Ορίστε το EJS ως το template engine στη διαμόρφωση της εφαρμογής σας.

app.set('view engine', 'ejs');

Δημιουργία προτύπου EJS: Δημιουργήστε αρχεία EJS στον views κατάλογο. Για παράδειγμα, δημιουργήστε ένα index.ejs αρχείο:

<!DOCTYPE html>  
<html>  
<head>  
  <title>My Express App</title>  
</head>  
<body>  
  <h1>Welcome to My Express App</h1>  
  <p><%= message %></p>  
</body>  
</html>

Χειρισμός διαδρομής και απόδοση δεδομένων: Κατά τη διαχείριση διαδρομής, μεταβιβάστε δεδομένα στη template engine χρήση res.render().

app.get('/',(req, res) => {  
  const message = 'Hello from Express!';  
  res.render('index', { message });  
});

 

συμπέρασμα

Η χρήση Template Engine του in Express.js σάς επιτρέπει να δημιουργείτε δυναμικές ιστοσελίδες και να εμφανίζετε πληροφορίες από τον διακομιστή στο πρόγραμμα περιήγησης του χρήστη. Χρησιμοποιώντας Pug, EJS ή άλλα template engine, μπορείτε να δημιουργήσετε διαδραστικές και ευέλικτες ιστοσελίδες που παρέχουν καλύτερη εμπειρία χρήστη και βελτιστοποιούν τη διαχείριση του κώδικα HTML και των δεδομένων.