Научете как да интегрирате тази машина за шаблони във вашите Spring приложения.
Thymeleaf е машина за шаблони на Java. Той разработва шаблони както за уеб, така и за самостоятелни приложения. Тази машина за шаблони използва концепцията за естествени шаблони, за да инжектира логика във вашето оформление, без да прави компромис с вашия дизайн. С Thymeleaf ще имате контрол върху това как дадено приложение ще обработва шаблоните, които създавате.
Можете да използвате Thymeleaf за обработка на шест вида шаблони: HTML, XML, текст, JavaScript, CSS и RAW. Thymeleaf нарича всеки от шаблоните режим на шаблон, като HTML е най-популярният шаблон, създаден на този двигател.
Инициализиране на Thymeleaf във вашето приложение
Има два начина да добавите Thymeleaf към вашето Spring Boot приложение. Можете да изберете Thymeleaf като зависимост, когато генерирате своя шаблон с Инструментът за инициализация на Spring. Освен това имате възможност да го добавите по-късно към вашия файл със спецификация на компилация в раздела за зависимости.
Ако сте избрали една от опциите на проекта Gradle, файлът, който съдържа зависимостите, е build.gradle файл. Ако обаче сте избрали Maven, тогава този файл е pom.xml.
Вашият pom.xml файлът трябва да съдържа следната секция за зависимости:
<dependency><groupId>org.springframework.bootgroupId>
<artifactId>spring-boot-starter-thymeleafartifactId>
dependency>
Докато вашият build.gradle файлът трябва да съдържа следната секция за зависимости:
dependencies {implementation 'org.springframework.boot: spring-boot-starter-thymeleaf'
}
Примерното приложение, използвано в статията, е достъпно в това GitHub хранилище и е безплатен за използване под лиценза на MIT.
Като добавите Thymeleaf към вашето Spring приложение, вие ще получите достъп до неговата основна библиотека, която ви позволява да използвате Spring Standard Dialect на Thymeleaf. Spring Standard Dialect съдържа уникални атрибути и синтаксис, които можете да използвате, за да добавите различни функции към вашите оформления.
Използване на Thymeleaf в Spring Boot
Когато използвате Thymeleaf във вашето Spring приложение, първата стъпка е да създадете своя шаблонен документ. За това примерно приложение шаблонният документ е HTML. Винаги трябва да създавате своите шаблони за Thymeleaf в Spring Boot’s шаблони папка, която е достъпна във файла с ресурси.
Файлът home.html
html><htmlxmlns: th="http://www.thymeleaf.org">
<head>
<title>Generic Websitetitle>
head>
<body>body>
html>
Шаблонът Thymeleaf по-горе е общ HTML5 шаблон с един чужд атрибут (xmlns: th). Целта на xmlns: th атрибут е да осигури обхват за всички чт:* атрибути, които ще използвате в този HTML документ. Другите атрибути и етикети в шаблона Thymeleaf са традиционни HTML тагове и атрибути.
Създаване на заглавка
Един от първите и най-важни аспекти на всеки уебсайт или приложение е заглавката. Той казва какво представлява приложението (чрез логото) и ви помага лесно да навигирате във вашето приложение. Основният хедър трябва да има лого, както и няколко връзки за навигация.
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 ви позволява да добавите заглавката по-горе към всяка страница във вашето уеб приложение, като използвате th: вмъкване атрибут. The th: вмъкване и th: замени атрибутите приемат това, което Thymeleaf нарича стойности на израз на фрагмент. Фрагментните изрази ви позволяват да поставите фрагменти от маркиране на произволно място във вашето оформление.
<divth: insert="~{header:: #nav}">div>Вмъкване на маркирането по-горе в горната част на home.html ще вмъкне маркирането на заглавката в горната част на вашата начална страница. Фрагментният израз има няколко компонента, два са незадължителни и два са задължителни:
- Тилда (~), която не е задължителна.
- Двойка фигурни скоби ({}), която не е задължителна.
- Името на шаблона, който съдържа маркирането, което искате да вмъкнете (header.html).
- CSS селекторът на маркирането, което искате да вмъкнете (#nav).
И така, следното маркиране дава същия резултат като горното.
"header:: #nav">Попълване на тялото на вашия шаблон
Thymeleaf ви позволява да използвате пет вида изрази във вашите шаблони:
- Израз на фрагмент (~{…})
- Израз на съобщение (#{…})
- URL израз на връзката (@{…})
- Променлив израз (${…})
- Израз на променлива за избор (*{…})
Израз на съобщение ви позволява да добавяте външни фрагменти от текст към оформлението си. С изрази за съобщения можете лесно да замените или използвате повторно текста във вашето оформление. Когато използвате израз за съобщение, винаги трябва да поставяте външните текстови фрагменти в a .Имоти файл под ресурси папка.
За това примерно приложение този файл е съобщения.свойства, който съдържа следния фрагмент от текст:
placeholder.text=Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dolorem porro non quae obcaecati illo laboriosam.Трябва да имате предвид, че фрагментът от текст (или съобщението) по-горе има уникален ключ (placeholder.text). Това е така, защото всеки файл със съобщения може да съдържа колекция от различни съобщения. Така че ще ви е необходим ключ, за да вмъкнете конкретно съобщение във вашето оформление.
<pth: text="#{placeholder.text}">p>Вмъкването на маркирането по-горе в тялото на вашия HTML файл ефективно ще покаже текста на контейнера като параграф във вашия изглед. За разлика от фрагментния израз, всеки аспект на израза на съобщението е задължителен. Израз на съобщение изисква:
- Цифров знак (#).
- Двойка къдрави скоби ({}).
- Ключът, който съдържа съобщението, което искате да вмъкнете (placeholder.text).
Оформяне на вашия шаблон
Друг важен файл в ресурси папката е статичен файл. Този файл съхранява вашите CSS файлове и всички изображения, които планирате да използвате във вашето приложение. За да свържете вашия външен CSS файл с HTML шаблона Thymeleaf, ще трябва да използвате URL израза за връзка. Изразът на URL адреса на връзката се обработва както относителни, така и абсолютни URL адреси.
<linkrel="stylesheet"th: href="@{/css/style.css}" />Вмъкване на маркирането по-горе в на вашия HTML файл ще ви позволи да стилизирате вашия шаблон с помощта на a style.css файл. Този файл е наличен в a css папка под статичен раздел на ресурси файл на заявлението по образец. Винаги трябва да присвоявате URL израза на връзката към th: href атрибут.
Thymeleaf предоставя няколко други атрибута, които можете да използвате, за да подобрите дизайна на вашето оформление. Един такъв атрибут е th: стил атрибут, който можете да използвате, за да добавите изображения към вашето оформление.
<divid="showcase"th: style="'background: url(/images/background.jpg) no-repeat center center fixed;'">Маркирането по-горе използва th: стил атрибут за добавяне на фоново изображение към конкретен раздел от оформлението ви. Thymeleaf има над сто различни атрибута, които можете да използвате, за да добавите стил и функционалност към вашите оформления.
Променливият израз
Променливите изрази са най-популярните и може би най-сложните изрази, които Thymeleaf използва. Променливите изрази на Thymeleaf ви позволяват да събирате данни или от контекста на приложението, или от обект в приложението и да инжектирате тези данни в шаблона. В зависимост от източника на данните, които искате да изобразите във вашия изглед, има два типа променливи изрази, които можете да използвате.
Изразът на първичната променлива използва знака за долар и ви позволява да събирате данни от контекст на приложението (което представлява данни, свързани с различните задачи, които се изпълняват в приложение). Например, ако искате да заснемете данни на потребител от модал, тогава променливият израз със знака за долар е по-практичният избор. Ако изпълните примерния проект и преминете към http://localhost: 8080/ във вашия браузър ще видите следния модал:
След като или затворите модала, или изпратите име, приложението ще отиде до началната страница. На началната страница ще видите общ уебсайт, който показва думата „Добре дошли“, последвана от низа, който току-що сте изпратили в модала.
Примерното приложение използва променливия израз, за да завърши този процес. Простата форма в modal.html файлът има следното маркиране:
<formid="form"th: action="@{/home}"method="post"><inputtype="text"name="userName"class="form-control"placeholder="Your Name" />
<buttontype="submit"class="btn">Submitbutton>
form>
Когато потребител изпрати формуляра, той задейства th: действие атрибут, който има стойността на URL адрес на публикация, който можете да намерите в WebController клас.
@PostMapping("/home")public String processName(String userName, Model model){
model.addAttribute("userName", userName);
return"home";
}
The име на процес() методът приема низа, който потребителят предоставя на модала, след което присвоява този низ на променлива, наречена потребителско име. Използвайки израза на променливата, контролерът след това инжектира променливата на потребителското име в оформлението.
<h1>Welcome <spanth: text="${userName}">span>!h1>Изразът на променливата за избор използва звездичка и е най-полезен, когато работите с по-сложни приложения. Например, приложение, което изисква потребителите да влизат, може да използва израза на променливата за избор. Можете да съберете потребителското име от потребителския обект и да го вмъкнете в оформлението.
Алтернативни опции за шаблон и стил
Въпреки че Thymeleaf е по-популярната опция за шаблон за Spring Boot приложения, има няколко други еднакво жизнеспособни опции. Те включват JavaServer Pages (JSP), шаблони, базирани на Groovy, шаблони FreeMarker и шаблони Mustache. В допълнение към създаването на персонализиран CSS стил, можете също да изберете да използвате CSS рамка, за да стилизирате оформлението си.