Καθώς μια εφαρμογή μεγαλώνει σε πολυπλοκότητα, τόσο αυξάνονται οι ανάγκες της. Σε κάποιο σημείο, η προβολή στατικών αρχείων HTML μπορεί να εμποδίσει την πρόοδο ή να καθυστερήσει τη λειτουργικότητα της εφαρμογής. Αντίθετα, θα θελήσετε να προβάλετε δυναμικό περιεχόμενο, μια εργασία που καθιστούν δυνατή τη δημιουργία προτύπων μηχανών όπως το Handlebars.
Το Handlebars είναι ένας ελάχιστος κινητήρας προτύπων χωρίς λογική για το NodeJS. Είναι μια επέκταση της μηχανής προτύπου μουστάκι. Καθώς είναι μια μηχανή χωρίς λογική, μπορείτε να τη χρησιμοποιήσετε για να διαχωρίσετε αυστηρά την παρουσίαση από τον υποκείμενο κώδικα.
Το Handlebars έχει μεγάλη υποστήριξη ως μηχανή προτύπων από το πλαίσιο NestJS.
Τι είναι μια μηχανή προτύπων;
Μια μηχανή προτύπων είναι ένα εργαλείο που συνδυάζει ετικέτες HTML και μια γλώσσα προγραμματισμού για να δημιουργήσει ένα πρότυπο HTML με ελάχιστο κώδικα.
Η μηχανή προτύπων κατά το χρόνο εκτέλεσης εισάγει δεδομένα στο πρότυπο HTML για να αποδώσει την τελική προβολή στο πρόγραμμα περιήγησης.
Μπορεί να σας φαίνεται περίπλοκο να ρυθμίσετε μια μηχανή προτύπων όπως το Handlebars, καθώς περιλαμβάνει πολλά βήματα. Ωστόσο, το πλαίσιο του διακομιστή Express που χρησιμοποιεί το NestJS από προεπιλογή έχει εξαιρετική υποστήριξη για Handlebars.
Βήμα 1: Δημιουργήστε μια εφαρμογή NestJS
Εκτελέστε την ακόλουθη εντολή για να δημιουργήσετε μια νέα εφαρμογή Nest:
φωλιά καινούργια <όνομα της εφαρμογής σας>
Βήμα 2: Εγκατάσταση χειρολαβών
Εκτελέστε την ακόλουθη εντολή για να εγκαταστήσετε το Handlebars χρησιμοποιώντας ο διαχειριστής πακέτων npm:
npm εγκατάσταση express-handlebars@^5.3.0@τύποι/express-handlebars@^5.3.0
Βήμα 3: Διαμόρφωση του Express Instance
Πλοηγηθείτε στο δικό σας κύρια.τς αρχείο και εισαγωγή NestExpressApplication από @nestjs/platform-express.
Εκχωρήστε το NestExpressApplication ως γενικό τύπο στο δημιουργώ μέθοδος.
Όπως έτσι:
συνθ εφαρμογή = αναμένω NestFactory.create(AppModule)
Διαβίβαση του NestExpressApplication στο εφαρμογή Το αντικείμενο του δίνει πρόσβαση σε αποκλειστικές μεθόδους ExpressJS. Θα χρειαστείτε αυτές τις μεθόδους για να διαμορφώσετε συγκεκριμένες ιδιότητες Handlebars.
Βήμα 4: Διαμόρφωση χειρολαβών
Αρχικά, θα πρέπει να καθορίσετε τις τοποθεσίες όπου η εφαρμογή σας θα βρει το HTML και άλλα στατικά αρχεία (φύλλα στυλ, εικόνες κ.λπ.). Μπορείτε να αποθηκεύσετε τα αρχεία HTML σας σε ένα "προβολές" φάκελος και άλλα στατικά αρχεία σε "δημόσιο» φάκελο, αντίστοιχα.
Για να καθορίσετε τις τοποθεσίες, ξεκινήστε με την εισαγωγή Συμμετοχή από μονοπάτι. Στη συνέχεια, μέσα στο bootstrap λειτουργία, ορίστε τη θέση για τα στυλ.
Όπως έτσι:
app.useStaticAssets (join (__dirname, '..', 'δημόσιο'))
Η συνάρτηση ένωσης παίρνει έναν αυθαίρετο αριθμό σειρά ορίσματα, τα ενώνει και κανονικοποιεί τη διαδρομή που προκύπτει. __dirname επιστρέφει τη διαδρομή του φακέλου όπου το κύρια.τς αρχείο βρίσκεται.
Στη συνέχεια, ορίστε τη θέση για τα αρχεία HTML, όπως:
app.setBaseViewsDir (join (__dirname, '..', 'προβολές'));
Στη συνέχεια, εισαγάγετε Handlebars στο δικό σας κύρια.τς αρχείο:
εισαγωγή * όπως και hbs από «εξπρές-τιμόνι»·
θα χρειαστείτε το hbs εισαγωγή για να ρυθμίσετε τις ιδιότητες του Handlebars, όπως το όνομα της επέκτασης, κ.λπ.
Το προεπιλεγμένο όνομα επέκτασης αρχείου για το Handlebars είναι .τιμόνι.
Αυτό το όνομα επέκτασης είναι μεγάλο, αλλά μπορείτε να το διαμορφώσετε με το app.engine κλήση. app.engine είναι μια εγγενής συνάρτηση περιτυλίγματος γύρω από το express.μηχανή μέθοδος. Χρειάζονται δύο επιχειρήματα: εσωτ και μια λειτουργία επανάκλησης. Δείτε το Express τεκμηρίωση σε app.engine για να μάθετε περισσότερα για αυτό.
Κλήση app.engine(), και ως πρώτο όρισμα, περάστε τη συμβολοσειρά 'hbs'. Στη συνέχεια, ως δεύτερο όρισμα, καλέστε τη συνάρτηση hbs και περάστε σε ένα αντικείμενο διαμόρφωσης με μια ιδιότητα επώνυμο οριστεί σε "hbs". Αυτή η ρύθμιση αλλάζει το όνομα της επέκτασης από .handlebars σε .hbs.
app.engine('hbs', hbs({ extname: 'hbs' }));
Τέλος, ρυθμίστε τη μηχανή προβολής σε Handlebars ως εξής:
app.setViewEngine('hbs');
Βήμα 5: Δημιουργία φακέλων
Στον ριζικό κατάλογο του έργου σας, δημιουργήστε δύο νέους φακέλους. Θα χρησιμοποιήσετε το πρώτο, δημόσιο, για να αποθηκεύσετε τα φύλλα στυλ για την εφαρμογή σας. Σε προβολές, θα αποθηκεύσετε όλα τα αρχεία HTML σας.
Αυτό ολοκληρώνει τη ρύθμιση του περιβάλλοντος ανάπτυξής σας. Στην επόμενη ενότητα, θα έχετε μια επισκόπηση της σύνταξης Handlebars και της χρήσης της σε μια εφαρμογή NestJS.
Η Σύνταξη του Τιμονιού
Αυτή η ενότητα θα καλύψει το μεγαλύτερο μέρος της σύνταξης του τιμονιού που χρειάζεστε για να εξυπηρετήσετε τα αρχεία σας δυναμικά.
Βοηθοί
Οι βοηθοί είναι συναρτήσεις που μετασχηματίζουν την έξοδο, επαναλαμβάνουν δεδομένα και αποδίδουν την έξοδο υπό όρους.
Το Handlebars παρέχει δύο τύπους βοηθών (Block και Built-in) και μπορείτε να δημιουργήσετε προσαρμοσμένους βοηθούς που ταιριάζουν στις ανάγκες σας.
Υποδηλώνεις ένα βοηθό τυλίγοντάς το σε διπλά σγουρά τιράντες. Προσθέστε πρόθεμα το όνομά του με έναν κατακερματισμό (#) για μια βοηθητική ετικέτα ανοίγματος και μια κάθετο προς τα εμπρός (/) για μια ετικέτα κλεισίματος.
Για παράδειγμα:
{{!-- αν η τιμή είναι αληθής, το div θα αποδοθεί αλλού, δεν θα --}}
{{#if value}}
<div>Η τιμή έχει αποδοθεί</div>
{{/αν}}
Εάν δημιουργήσετε έναν προσαρμοσμένο βοηθό, πρέπει να τον καταχωρήσετε στο δικό σας hbs αντικείμενο διαμόρφωσης στο δικό σας κύρια.τς αρχείο πριν μπορέσετε να το χρησιμοποιήσετε στην εφαρμογή σας.
// κύρια.τσ
εισαγωγή { customHelper } από './helpers/hbs.helpers';
// Μέσα στη συνάρτηση bootstrap
app.engine('hbs', hbs({ extname: 'hbs', βοηθοί: { customHelper } }));
Εκφράσεις
Οι εκφράσεις είναι η μονάδα ενός προτύπου τιμονιού. Η χρήση των εκφράσεων ποικίλλει ανάλογα με την πολυπλοκότητα της εργασίας. Μπορείτε να τα χρησιμοποιήσετε μόνα τους σε ένα πρότυπο, να τα μεταφέρετε ως είσοδο σε βοηθούς και πολλά άλλα.
Υποδηλώστε εκφράσεις με διπλά σγουρά άγκιστρα, για παράδειγμα:
<h1>{{μήνυμα}}</h1>
Μερικά
Το μερικό αναφέρεται σε ένα κομμάτι HTML που είναι προαποθηκευμένο επειδή εμφανίζεται σε πολλά αρχεία HTML. Για παράδειγμα, γραμμές πλοήγησης και υποσέλιδα. Μπορείτε να αποθηκεύσετε αυτό το περιεχόμενο σε ένα αρχείο και να το συμπεριλάβετε όταν είναι απαραίτητο.
Όπως και με τα στατικά και HTML αρχεία σας, θα πρέπει επίσης να ορίσετε έναν μερικό κατάλογο στο δικό σας app.engine αντικείμενο διαμόρφωσης.
Καταχωρίστε τον τμηματικό σας κατάλογο προσθέτοντας τον ακόλουθο κώδικα στο αντικείμενο διαμόρφωσης:
// κύρια.τσ
partialsDir: join (__dirname, '..', 'όψεις/τμηματικά'),
Μπορείτε να αποκτήσετε πρόσβαση σε ένα τμήμα χρησιμοποιώντας τη σύνταξη μερικής κλήσης. Σε διπλά σγουρά άγκιστρα, εισαγάγετε ένα σύμβολο μεγαλύτερο από (>) ακολουθούμενο από το όνομα του μερικού.
Για παράδειγμα:
{{> nameOfPartial}}
Διατάξεις
Η διάταξη Handlebars είναι μια σελίδα HTML που χρησιμοποιείται για τον ορισμό υποκείμενων μεταδεδομένων ή γενικής δομής για άλλες σελίδες HTML στην εφαρμογή. Λειτουργεί ως κοντέινερ με ένα σύμβολο κράτησης θέσης στο οποίο μπορείτε να εισάγετε δυναμικά δεδομένα.
Για παράδειγμα:
<!DOCTYPE html>
<html lang="en">
<κεφάλι>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Συμβατό" περιεχόμενο="IE=ακμή">
<μετα όνομα="θέαση" περιεχόμενο="πλάτος=πλάτος συσκευής, αρχική κλίμακα=1,0">
<τίτλος>Πρότυπο στο NestJS με Handlebars</title>
</head>
<σώμα>
<επί κεφαλής>
{{!-- Μερική γραμμή πλοήγησης --}}
{{>γραμμή πλοήγησης}}
</header>
<div>
{{!-- Body Placeholder --}}
{{{σώμα}}}
</div>
{{!-- Μερικό υποσέλιδο --}}
{{>υποσέλιδο}}
</body>
</html>
Όταν εκτελείτε τον κώδικά σας, το Handlebars παίρνει τα περιεχόμενα του .hbs αρχείο που θέλετε να αποδώσετε και τα εισάγει στο σώμα κράτησης θέσης. Στη συνέχεια, αποδίδει το αποτέλεσμα ως την τελική σελίδα HTML.
Θα χρειαστεί να καταχωρήσετε τον κατάλογο των διατάξεων στο δικό σας app.engine αντικείμενο διαμόρφωσης και ορίστε ένα προεπιλεγμένο αρχείο διάταξης. Ένα προεπιλεγμένο αρχείο διάταξης είναι το αρχείο διάταξης που χρησιμοποιεί το Handlebars εάν δεν ορίσετε μια συγκεκριμένη διάταξη.
Προσθέστε τον ακόλουθο κώδικα στο αντικείμενο διαμόρφωσης για να δηλώσετε μια προεπιλεγμένη διάταξη και να καταχωρήσετε έναν κατάλογο διατάξεων:
προεπιλεγμένη διάταξη: 'Όνομα του αρχείου διάταξης',
layoutsDir: join (__dirname, '..', 'προβολές/διατάξεις'),
Απόδοση αρχείου .hbs
Στο αρχείο ελεγκτή σας, εισαγάγετε το Res διακοσμητής από @nestjs/common και Απάντηση από εξπρές.
Στη συνέχεια, στο πρόγραμμα χειρισμού διαδρομής, περάστε ένα όρισμα, res. Αντιστοιχίστε έναν τύπο απάντησης στο res και σχολιάστε το με τον διακοσμητή Res. Ο διακοσμητής Res εκθέτει τις εγγενείς μεθόδους χειρισμού απόκρισης της Express και απενεργοποιεί την τυπική προσέγγιση NestJS.
Στη συνέχεια, καλέστε τη μέθοδο render on res και περάστε το όνομα του αρχείου που θέλετε να αποδώσετε ως πρώτο όρισμα. Για το δεύτερο όρισμα, περάστε ένα αντικείμενο που περιέχει το όνομα της διάταξης και την υποκατάστατη τιμή για μια παράσταση.
Το τιμόνι θα χρησιμοποιεί την προεπιλεγμένη διάταξη που έχει οριστεί στο δικό σας app.engine αντικείμενο διαμόρφωσης εάν δεν παρέχετε διάταξη.
@Παίρνω()
γεια σου(@Res() res: Απάντηση){
επιστροφή res.render('Όνομα αρχείου', { διάταξη: 'όνομα διάταξης', μήνυμα: 'Γειά σου Κόσμε' });
}
Εναλλακτικές λύσεις για το τιμόνι
Το Handlebars είναι ένα εξαιρετικό εργαλείο δημιουργίας προτύπων με πολλά εύχρηστα χαρακτηριστικά, όπως βοηθητικά προγράμματα και διατάξεις. Ωστόσο, ανάλογα με τις ανάγκες σας, μπορείτε να επιλέξετε μια εναλλακτική όπως EJS (Ενσωματωμένη JavaScript), Pug ή Μουστάκι.