Wraz ze wzrostem złożoności aplikacji rosną jej potrzeby. W pewnym momencie udostępnianie statycznych plików HTML może utrudnić postęp lub spowolnić działanie aplikacji. Zamiast tego będziesz chciał obsługiwać zawartość dynamiczną, zadanie, które umożliwiają silniki szablonów, takie jak Handlebars.
Handlebars to minimalny, pozbawiony logiki silnik szablonów dla NodeJS. To rozszerzenie silnika szablonów wąsów. Ponieważ jest to silnik pozbawiony logiki, możesz go użyć do ścisłego oddzielenia prezentacji od kodu bazowego.
Handlebars ma świetne wsparcie jako silnik szablonów z frameworka NestJS.
Co to jest silnik szablonów?
Silnik szablonów to narzędzie, które łączy znaczniki HTML i język programowania w celu stworzenia szablonu HTML z minimalnym kodem.
Silnik szablonów w czasie wykonywania wstrzykuje dane do szablonu HTML, aby renderować ostateczny widok w przeglądarce.
Konfiguracja silnika szablonów, takiego jak Handlebars, może okazać się skomplikowana, ponieważ obejmuje wiele kroków. Jednakże, framework serwera Express że NestJS domyślnie używa ma doskonałe wsparcie dla kierownicy.
Krok 1: Wygeneruj aplikację NestJS
Uruchom następujące polecenie, aby utworzyć szkielet nowej aplikacji Nest:
gniazdo nowe <nazwa Twojej aplikacji>
Krok 2: Zainstaluj kierownicę
Uruchom następujące polecenie, aby zainstalować kierownice za pomocą menedżer pakietów npm:
npm install express-handlebars@^5.3.0@typy/express-handlebars@^5.3.0
Krok 3: Skonfiguruj instancję ekspresową
Przejdź do swojego main.ts plik i import Aplikacja NestExpress z @nestjs/platform-express.
Przypisz NestExpressApplication jako typ ogólny do Stwórz metoda.
Tak jak:
stały aplikacja = czekać na NestFactory.create(Moduł aplikacji)
Przekazywanie NestExpressApplication do aplikacja obiekt daje mu dostęp do metod ekskluzywnych dla ExpressJS. Będziesz potrzebować tych metod, aby skonfigurować określone właściwości kierownicy.
Krok 4: Skonfiguruj kierownice
Najpierw musisz określić lokalizacje, w których aplikacja znajdzie kod HTML i inne pliki statyczne (arkusze stylów, obrazy itp.). Możesz przechowywać swoje pliki HTML w „wyświetlenia” i inne pliki statyczne w „publiczny” folder, odpowiednio.
Aby określić lokalizacje, zacznij od importu Przystąp z ścieżka. Następnie wewnątrz bootstrap funkcji, ustaw lokalizację stylów.
Tak jak:
app.useStaticAssets (join (__dirname, '..', 'publiczny'))
Funkcja join przyjmuje dowolną liczbę strunowy argumentów, łączy je i normalizuje wynikową ścieżkę. __nazwisko zwraca ścieżkę do folderu, w którym main.ts plik rezyduje.
Następnie ustaw lokalizację plików HTML, na przykład:
app.setBaseViewsDir (dołącz (__dirname, '..', 'wyświetlenia'));
Następnie zaimportuj kierownice do swojego main.ts plik:
import * jak hbs z „ekspresowe kierownice”;
Będziesz potrzebować hbs import, aby skonfigurować właściwości uchwytów, takie jak nazwa rozszerzenia itp.
Domyślna nazwa rozszerzenia pliku dla kierownicy to .kierownice.
Ta nazwa rozszerzenia jest długa, ale możesz ją skonfigurować za pomocą app.silnik połączenie. app.silnik jest natywną funkcją opakowującą wokół ekspres.silnik metoda. Wymaga dwóch argumentów: wew i funkcję zwrotną. Zobacz Ekspresowa dokumentacja na app.silnik aby dowiedzieć się więcej na ten temat.
Połączenie aplikacja.silnik(), a jako pierwszy argument przekaż ciąg „hbs”. Następnie, jako drugi argument, wywołaj funkcję hbs i przekaż obiekt konfiguracyjny z właściwością extname Ustawić „hbs”. To ustawienie zmienia nazwę rozszerzenia z .handlebars na .hbs.
aplikacja.silnik('hbs', hbs({ nazwa: 'hbs' }));
Na koniec ustaw silnik widoku na Kierownice w następujący sposób:
app.setViewEngine('hbs');
Krok 5: Utwórz foldery
W katalogu głównym projektu utwórz dwa nowe foldery. Użyjesz pierwszego, publiczny, aby przechowywać arkusze stylów dla Twojej aplikacji. W wyświetlenia, będziesz przechowywać wszystkie swoje pliki HTML.
Na tym kończy się konfigurowanie środowiska programistycznego. W następnej sekcji będziesz miał przegląd składni Handlebars i jej użycia w aplikacji NestJS.
Składnia kierownicy
W tej sekcji omówimy większość składni kierownicy, której potrzebujesz, aby dynamicznie obsługiwać swoje pliki.
Pomocnicy
Pomocnicy to funkcje, które przekształcają dane wyjściowe, iterują dane i renderują warunkowe dane wyjściowe.
Kierownica zapewnia dwa rodzaje pomocników (blokowe i wbudowane) i możesz tworzyć niestandardowe pomocniki dostosowane do swoich potrzeb.
Pomocnika oznaczasz, owijając go podwójnymi nawiasami klamrowymi. Poprzedź jego nazwę hashem (#) dla otwierającego znacznika pomocniczego i ukośnikiem (/) dla zamykającego znacznika.
Na przykład:
{{!-- jeśli wartość to PRAWDA, div zostanie wyrenderowany w przeciwnym razie, nie będzie --}}
{{#jeśli wartość}}
<div>Wartość została wyrenderowana</div>
{{/jeśli}}
Jeśli tworzysz niestandardowego pomocnika, musisz zarejestrować go w swoim hbs obiekt konfiguracyjny w twoim main.ts pliku, zanim będzie można go użyć w swojej aplikacji.
// main.ts
import { niestandardowy pomocnik } z './pomocnicy/hbs.pomocnicy';
// Wewnątrz funkcji ładowania początkowego
aplikacja.silnik('hbs', hbs({ nazwa: 'hbs', pomocnicy: { customHelper } }));
Wyrażenia
Wyrażenia są jednostką szablonu kierownicy. Twoje użycie wyrażeń różni się w zależności od złożoności zadania. Możesz użyć ich samodzielnie w szablonie, przekazać je jako dane wejściowe do pomocników i nie tylko.
Oznacz wyrażenia z podwójnymi nawiasami klamrowymi, na przykład:
<h1>{{wiadomość}}</h1>
Częściowe
Część odnosi się do fragmentu kodu HTML, który został wstępnie zapisany, ponieważ występuje w kilku plikach HTML. Na przykład paski nawigacyjne i stopki. Możesz przechowywać tę zawartość w jednym pliku i dołączyć ją w razie potrzeby.
Podobnie jak w przypadku plików statycznych i HTML, będziesz musiał również ustawić katalog częściowy w swoim app.silnik obiekt konfiguracyjny.
Zarejestruj katalog częściowy, dodając następujący kod do obiektu konfiguracyjnego:
// main.ts
partialsDir: join (__dirname, '..', 'widoki/częściowe'),
Dostęp do części można uzyskać za pomocą składni częściowego wywołania. W podwójnych nawiasach klamrowych wprowadź symbol większej niż (>), a następnie nazwę części.
Na przykład:
{{> nazwaCzęściowa}}
Układy
Układ Handlebars to strona HTML służąca do ustawiania podstawowych metadanych lub ogólnej struktury dla innych stron HTML w aplikacji. Działa jak kontener z symbolem zastępczym, do którego można wstrzykiwać dane dynamiczne.
Na przykład:
<!DOCTYPE html>
<html lang="en">
<głowa>
<zestaw znaków meta="UTF-8">
<meta http-equiv="Kompatybilny z X-UA" zawartość="IE=krawędź">
<nazwa meta="rzutnia" zawartość="szerokość=szerokość urządzenia, skala początkowa=1.0">
<tytuł>Tworzenie szablonów w NestJS z uchwytami</title>
</head>
<ciało>
<nagłówek>
{{!-- Częściowy pasek nawigacyjny --}}
{{>pasek nawigacyjny}}
</header>
<div>
{{!-- Symbol zastępczy treści --}}
{{{ciało}}}
</div>
{{!-- Stopka częściowa --}}
{{>stopka}}
</body>
</html>
Kiedy uruchamiasz swój kod, Handlebars pobiera zawartość .hbs plik, który chcesz wyrenderować i wstrzykuje go do pliku ciało symbol zastępczy. Następnie renderuje wynik jako ostateczną stronę HTML.
Musisz zarejestrować swój katalog układów w swoim app.silnik obiekt konfiguracyjny i ustaw domyślny plik układu. Domyślny plik układu to plik układu używany przez program Handlebars, jeśli nie zdefiniujesz określonego układu.
Dodaj następujący kod do obiektu konfiguracyjnego, aby zadeklarować układ domyślny i zarejestrować katalog układów:
domyślny układ: 'Nazwa pliku układu',
layoutsDir: join (__dirname, '..', 'widoki/układy'),
Renderowanie pliku .hbs
W pliku kontrolera zaimportuj Res dekorator z @nestjs/wspólne oraz Odpowiedź z wyrazić.
Następnie w programie obsługi trasy przekaż argument, res. Przypisz typ odpowiedzi do res i dodaj do niej adnotacje za pomocą dekoratora Res. Dekorator Res ujawnia natywne metody obsługi odpowiedzi Express i wyłącza standardowe podejście NestJS.
Następnie wywołaj metodę render na res i przekaż nazwę pliku, który chcesz renderować, jako pierwszy argument. Jako drugi argument przekaż obiekt zawierający nazwę układu i wartość zastępczą wyrażenia.
Kierownice będą używać domyślnego układu ustawionego w twoim app.silnik obiekt konfiguracyjny, jeśli nie podasz układu.
@Dostać()
pobierzHello(@Res() res: Odpowiedź){
return res.render('Nazwa pliku', { układ: 'nazwa układu', wiadomość: 'Witaj świecie' });
}
Alternatywy dla kierownicy
Kierownice to doskonałe narzędzie do tworzenia szablonów z wieloma przydatnymi funkcjami, takimi jak pomocniki i układy. Mimo to, w zależności od potrzeb, możesz wybrać alternatywę, taką jak EJS (Embedded JavaScript), Mops lub Wąsy.
