Dowiedz się, jak zintegrować ten silnik szablonów z aplikacjami Spring.

Thymeleaf to silnik szablonów Java. Tworzy szablony zarówno dla aplikacji internetowych, jak i samodzielnych. Ten silnik szablonów wykorzystuje koncepcję Natural Templates, aby wprowadzić logikę do układu bez uszczerbku dla projektu. Dzięki Thymeleaf będziesz mieć kontrolę nad tym, jak aplikacja będzie przetwarzać utworzone przez Ciebie szablony.

Możesz użyć Thymeleaf do przetwarzania sześciu typów szablonów: HTML, XML, Text, JavaScript, CSS i RAW. Thymeleaf określa każdy z szablonów jako tryb szablonowy, przy czym HTML jest najpopularniejszym szablonem tworzonym na tym silniku.

Inicjowanie Thymeleaf w Twojej aplikacji

Istnieją dwa sposoby dodania Thymeleaf do aplikacji Spring Boot. Możesz wybrać Thymeleaf jako zależność podczas generowania szablonu za pomocą Narzędzie inicjujące Springa. Możesz także dodać go później do pliku specyfikacji kompilacji w sekcji zależności.

Jeśli wybrałeś jedną z opcji projektu Gradle, plikiem zawierającym zależności będzie plik

instagram viewer
kompilacja.gradle plik. Jeśli jednak wybierzesz Mavena, wówczas ten plik będzie pom.xml.

Twój pom.xml plik powinien zawierać następującą sekcję zależności:

<dependency>
<groupId>org.springframework.bootgroupId>


<artifactId>spring-boot-starter-thymeleafartifactId>
dependency>

Podczas gdy twój kompilacja.gradle plik powinien zawierać następującą sekcję zależności:

dependencies {
 implementation 'org.springframework.boot: spring-boot-starter-thymeleaf'
}

Przykładowa aplikacja wykorzystana w artykule jest dostępna w tym miejscu Repozytorium GitHuba i jest darmowy do użytku na licencji MIT.

Dodając Thymeleaf do swojej aplikacji Spring, uzyskasz dostęp do jej podstawowej biblioteki, która pozwala na korzystanie ze standardowego dialektu Thymeleaf. Dialekt Spring Standard zawiera unikalne atrybuty i składnię, których możesz użyć, aby dodać różne funkcje do swoich układów.

Używanie Thymeleaf w Spring Boot

Kiedy używasz Thymeleaf w aplikacji Spring, pierwszym krokiem jest utworzenie dokumentu szablonu. W przypadku tej przykładowej aplikacji dokumentem szablonowym jest HTML. Zawsze powinieneś tworzyć szablony Thymeleaf w Spring Boot szablony folderze, który jest dostępny w pliku Resources.

Plik home.html

html>
<htmlxmlns: th="http://www.thymeleaf.org">


<head>


<title>Generic Websitetitle>


head>


<body>body>
html>

Powyższy szablon Thymeleaf jest ogólnym szablonem HTML5 z jednym obcym atrybutem (xmlns: th). Celem xmlns: th atrybutem jest zapewnienie zakresu dla wszystkich t:* atrybuty, których będziesz używać w tym dokumencie HTML. Pozostałe atrybuty i znaczniki w szablonie Thymeleaf są tradycyjne Tagi i atrybuty HTML.

Tworzenie nagłówka

Jednym z pierwszych i najważniejszych aspektów każdej strony internetowej lub aplikacji jest nagłówek. Informuje, o czym jest aplikacja (poprzez logo) i pomaga w łatwej nawigacji po aplikacji. Podstawowy nagłówek powinien zawierać logo oraz kilka linków nawigacyjnych.

html>
<htmlxmlns: th="http://www.thymeleaf.org">


 <body>


<divid="nav">


<h1>LOGOh1>


<ul>


<li><aid="current">Home a>li>


<li><a>Abouta>li>


<li><a>Servicesa>li>


ul>


div>


 body>


html>

Thymeleaf pozwala dodać powyższy nagłówek do dowolnej strony w aplikacji internetowej za pomocą t: wstaw atrybut. The t: wstaw I t: wymienić atrybuty akceptują to, co Thymeleaf nazywa wartościami wyrażeń fragmentów. Wyrażenia fragmentów umożliwiają umieszczanie fragmentów znaczników w dowolnym miejscu układu.

<divth: insert="~{header:: #nav}">div>

Wstawianie znaczników powyżej na górze pliku strona główna.html tag wstawi znacznik nagłówka na górze strony głównej. Wyrażenie fragmentu składa się z kilku komponentów, dwa są opcjonalne, a dwa wymagane:

  • Tylda (~), która jest opcjonalna.
  • Para nawiasów klamrowych ({}), która jest opcjonalna.
  • Nazwa szablonu zawierającego znaczniki, które chcesz wstawić (nagłówek.html).
  • Selektor CSS znacznika, który chcesz wstawić (#nav).

Zatem następujący znacznik daje taki sam wynik jak ten powyżej.

"header:: #nav">

Wypełnianie treści szablonu

Thymeleaf umożliwia użycie pięciu typów wyrażeń w szablonach:

  • Wyrażenie fragmentu (~{…})
  • Wyrażenie wiadomości (#{…})
  • Wyrażenie adresu URL łącza (@{…})
  • Wyrażenie zmiennej (${…})
  • Wyrażenie zmiennej wyboru (*{…})

Wyrażenie komunikatu umożliwia dodanie do układu zewnętrznych fragmentów tekstu. Dzięki wyrażeniom wiadomości możesz łatwo zastąpić lub ponownie wykorzystać tekst w swoim układzie. Używając wyrażenia komunikatu, należy zawsze umieszczać zewnętrzne fragmenty tekstu w a .nieruchomości plik pod zasoby teczka.

W przypadku tej przykładowej aplikacji jest to plik wiadomości.właściwości, w którym znajduje się następujący fragment tekstu:

placeholder.text=Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dolorem porro non quae obcaecati illo laboriosam.

Należy pamiętać, że powyższy fragment tekstu (lub wiadomość) posiada unikalny klucz (tekst zastępczy). Dzieje się tak, ponieważ każdy plik wiadomości może zawierać zbiór różnych wiadomości. Będziesz więc potrzebował klucza, aby wstawić konkretną wiadomość do swojego układu.

<pth: text="#{placeholder.text}">p>

Wstawienie powyższego znacznika do treści pliku HTML spowoduje skuteczne wyświetlenie tekstu zastępczego jako akapitu w Twoim widoku. W przeciwieństwie do wyrażenia fragmentowego, każdy aspekt wyrażenia komunikatu jest obowiązkowy. Wyrażenie komunikatu wymaga:

  • Znak liczbowy (#).
  • Para nawiasów klamrowych ({}).
  • Klucz przechowujący wiadomość, którą chcesz wstawić (tekst zastępczy).

Stylizowanie szablonu

Kolejny ważny plik w zasoby folder jest plikiem statycznym. W tym pliku przechowywane są pliki CSS i wszelkie obrazy, które planujesz użyć w swojej aplikacji. Aby połączyć zewnętrzny plik CSS z szablonem HTML Thymeleaf, musisz użyć wyrażenia URL łącza. Procesy wyrażeń adresu URL łącza zarówno względne, jak i bezwzględne adresy URL.

<linkrel="stylesheet"th: href="@{/css/style.css}" />

Wstawienie powyższego znacznika do pliku pliku HTML umożliwi stylizację szablonu za pomocą pliku styl.css plik. Ten plik jest dostępny w formacie css folderze pod statyczny sekcja zasoby plik przykładowej aplikacji. Zawsze powinieneś przypisywać wyrażenie adresu URL łącza do t: href atrybut.

Thymeleaf udostępnia kilka innych atrybutów, których możesz użyć do ulepszenia projektu swojego układu. Jednym z takich atrybutów jest t: styl atrybut, którego możesz użyć do dodania obrazów do swojego układu.

<divid="showcase"th: style="'background: url(/images/background.jpg) no-repeat center center fixed;'">

Powyższy znacznik wykorzystuje t: styl atrybut, aby dodać obraz tła do określonej sekcji układu. Thymeleaf ma ponad sto różnych atrybutów, których możesz użyć, aby dodać styl i funkcjonalność do swoich układów.

Wyrażenie zmienne

Wyrażenia zmienne są najpopularniejszymi i prawdopodobnie najbardziej złożonymi wyrażeniami używanymi przez Thymeleaf. Wyrażenia zmiennych Thymeleaf umożliwiają zbieranie danych z kontekstu aplikacji lub obiektu w aplikacji i wstrzykiwanie tych danych do szablonu. W zależności od źródła danych, które chcesz wyświetlić w widoku, możesz użyć dwóch typów wyrażeń zmiennych.

Podstawowe wyrażenie zmiennej wykorzystuje znak dolara i umożliwia zbieranie danych z kontekst aplikacji (czyli dane powiązane z różnymi zadaniami uruchomionymi w aplikacji aplikacja). Na przykład, jeśli chcesz przechwycić dane użytkownika z modalu, bardziej praktycznym wyborem będzie wyrażenie zmiennej ze znakiem dolara. Jeśli wykonasz przykładowy projekt i przejdziesz do http://localhost: 8080/ w przeglądarce zobaczysz następujący moduł:

Po zamknięciu modalu lub przesłaniu nazwy aplikacja przejdzie do strony głównej. Na stronie głównej zobaczysz ogólną witrynę internetową, która wyświetla słowo „Witamy”, po którym następuje ciąg znaków przesłany właśnie w trybie modalnym.

Przykładowa aplikacja używa wyrażenia zmiennej do zakończenia tego procesu. Prosta forma w modal.html plik ma następujący znacznik:

<formid="form"th: action="@{/home}"method="post">
<inputtype="text"name="userName"class="form-control"placeholder="Your Name" />


<buttontype="submit"class="btn">Submitbutton>


form>

Kiedy użytkownik wysyła formularz, uruchamia się t: akcja atrybut, który ma wartość adresu URL posta, który można znaleźć w pliku Kontroler sieciowy klasa.

@PostMapping("/home")
public String processName(String userName, Model model){


 model.addAttribute("userName", userName);


return"home";
 }

The Nazwa procesu() Metoda akceptuje ciąg znaków dostarczony przez użytkownika do modułu modalnego, a następnie przypisuje ten ciąg do zmiennej o nazwie nazwa użytkownika. Korzystając z wyrażenia zmiennej, kontroler następnie wstawia zmienną nazwy użytkownika do układu.

<h1>Welcome <spanth: text="${userName}">span>!h1>

Wyrażenie zmiennej wyboru używa gwiazdki i jest najbardziej przydatne, gdy masz do czynienia z bardziej złożonymi aplikacjami. Na przykład aplikacja wymagająca zalogowania się użytkownika może użyć wyrażenia zmiennej wyboru. Możesz pobrać nazwę użytkownika z obiektu użytkownika i wstawić ją do układu.

Alternatywny szablon i opcje stylizacji

Chociaż Thymeleaf jest bardziej popularną opcją szablonu dla aplikacji Spring Boot, istnieje kilka innych, równie realnych opcji. Należą do nich JavaServer Pages (JSP), szablony oparte na Groovy, szablony FreeMarker i szablony Mustache. Oprócz tworzenia niestandardowej stylizacji CSS, możesz także zdecydować się na użycie struktury CSS do stylizacji układu.