Naučite se integrirati ta mehanizem predloge v svoje aplikacije Spring.

Thymeleaf je mehanizem predlog Java. Razvija predloge za spletne in samostojne aplikacije. Ta mehanizem za predloge uporablja koncept Natural Templates za vnos logike v vašo postavitev, ne da bi pri tem ogrozili vaš dizajn. S Thymeleafom boste imeli nadzor nad tem, kako bo aplikacija obdelala predloge, ki jih ustvarite.

Thymeleaf lahko uporabite za obdelavo šestih vrst predlog: HTML, XML, besedilo, JavaScript, CSS in RAW. Thymeleaf vsako od predlog označuje kot način predloge, pri čemer je HTML najbolj priljubljena predloga, ustvarjena na tem motorju.

Inicializacija Thymeleaf v vaši aplikaciji

Thymeleaf lahko dodate v aplikacijo Spring Boot na dva načina. Thymeleaf lahko izberete kot odvisnost, ko ustvarjate svojo predlogo z Springovo orodje za inicializacijo. Imate tudi možnost, da ga pozneje dodate v datoteko s specifikacijo gradnje v razdelku odvisnosti.

Če ste izbrali eno od možnosti projekta Gradle, je datoteka, ki vsebuje odvisnosti

instagram viewer
build.gradle mapa. Vendar, če ste izbrali Maven, potem je ta datoteka pom.xml.

Vaš pom.xml datoteka mora vsebovati naslednji razdelek odvisnosti:

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


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

Medtem ko vaš build.gradle datoteka mora vsebovati naslednji razdelek odvisnosti:

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

Vzorčna aplikacija, uporabljena v članku, je na voljo tukaj Repozitorij GitHub in je brezplačen za uporabo pod licenco MIT.

Če dodate Thymeleaf svoji aplikaciji Spring, boste pridobili dostop do njegove osnovne knjižnice, ki vam omogoča uporabo Thymeleafovega Spring Standard Dialecta. Spring Standard Dialect vsebuje edinstvene atribute in sintakso, ki jih lahko uporabite za dodajanje različnih funkcij svojim postavitvam.

Uporaba Thymeleaf v Spring Boot

Ko uporabljate Thymeleaf v svoji aplikaciji Spring, je prvi korak ustvarjanje dokumenta predloge. Za to vzorčno aplikacijo je dokument predloge HTML. Svoje predloge Thymeleaf vedno ustvarite v Spring Boot's predloge mapo, ki je na voljo v datoteki virov.

Datoteka home.html

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


<head>


<title>Generic Websitetitle>


head>


<body>body>
html>

Zgornja predloga Thymeleaf je splošna predloga HTML5 z enim tujim atributom (xmlns: th). Namen xmlns: th atribut je zagotoviti obseg za vse čt:* atribute, ki jih boste uporabili v tem dokumentu HTML. Drugi atributi in oznake v predlogi Thymeleaf so tradicionalni Oznake in atributi HTML.

Ustvarjanje glave

Eden od prvih in najpomembnejših vidikov vsakega spletnega mesta ali aplikacije je glava. Pove, za kaj gre v aplikaciji (prek logotipa), in vam pomaga pri preprostem krmarjenju po aplikaciji. Osnovna glava mora vsebovati logotip in več navigacijskih povezav.

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 vam omogoča, da dodate zgornjo glavo na katero koli stran v vaši spletni aplikaciji z uporabo th: vstavi atribut. The th: vstavi in th: zamenjaj atributi sprejemajo tisto, kar Thymeleaf imenuje vrednosti izraza fragmentov. Izrazi fragmentov vam omogočajo, da fragmente oznak postavite na poljubno mesto v vaši postavitvi.

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

Vstavljanje zgornje oznake na vrh domov.html bo vstavil oznako glave na vrh vaše domače strani. Izraz fragmenta ima več komponent, dve sta neobvezni in dve obvezni:

  • Tilda (~), ki ni obvezna.
  • Par zavitih oklepajev ({}), ki ni obvezen.
  • Ime predloge, ki vsebuje oznako, ki jo želite vstaviti (header.html).
  • Izbirnik CSS oznake, ki jo želite vstaviti (#nav).

Torej, naslednja oznaka daje enak rezultat kot zgornja.

"header:: #nav">

Polnjenje telesa predloge

Thymeleaf vam omogoča uporabo petih vrst izrazov v vaših predlogah:

  • Izraz fragmenta (~{…})
  • Izraz sporočila (#{…})
  • Izraz URL povezave (@{…})
  • Spremenljiv izraz (${…})
  • Izraz spremenljivke izbire (*{…})

Izraz sporočila vam omogoča, da svoji postavitvi dodate eksternalizirane fragmente besedila. Z izrazi za sporočila lahko preprosto zamenjate ali ponovno uporabite besedilo v svoji postavitvi. Ko uporabljate izraz sporočila, morate zunanje fragmente besedila vedno postaviti v a .lastnosti datoteka pod virov mapo.

Za ta vzorčni program je ta datoteka sporočila.lastnosti, ki vsebuje naslednji del besedila:

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

Upoštevati morate, da ima zgornji del besedila (ali sporočila) edinstven ključ (placeholder.text). To je zato, ker lahko vsaka sporočilna datoteka vsebuje zbirko različnih sporočil. Torej boste potrebovali ključ za vstavljanje določenega sporočila v vašo postavitev.

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

Če zgornjo oznako vstavite v telo vaše datoteke HTML, bo besedilo nadomestnega mesta dejansko prikazano kot odstavek v vašem pogledu. Za razliko od izraza fragmenta je vsak vidik izraza sporočila obvezen. Izraz sporočila zahteva:

  • Številčni znak (#).
  • Par zavitih oklepajev ({}).
  • Ključ, ki vsebuje sporočilo, ki ga želite vstaviti (placeholder.text).

Oblikovanje vaše predloge

Še ena pomembna datoteka v virov mapa je statična datoteka. Ta datoteka shranjuje vaše datoteke CSS in vse slike, ki jih nameravate uporabiti v svoji aplikaciji. Če želite povezati zunanjo datoteko CSS s predlogo HTML Thymeleaf, boste morali uporabiti izraz povezave URL. Procesi izraza URL povezave relativni in absolutni URL-ji.

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

Vstavljanje zgornje oznake v vaše datoteke HTML vam bo omogočilo oblikovanje predloge z uporabo a style.css mapa. Ta datoteka je na voljo v a css mapo pod statična del od virov datoteko vzorčne vloge. Izraz URL povezave morate vedno dodeliti th: href atribut.

Thymeleaf ponuja več drugih atributov, ki jih lahko uporabite za izboljšanje oblikovanja vaše postavitve. Eden takih atributov je th: slog atribut, ki ga lahko uporabite za dodajanje slik vaši postavitvi.

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

Zgornja oznaka uporablja th: slog dodate sliko ozadja v določen del vaše postavitve. Thymeleaf ima več kot sto različnih atributov, s katerimi lahko svojim postavitvam dodate slog in funkcionalnost.

Izraz spremenljivke

Izrazi spremenljivk so najbolj priljubljeni in verjetno najbolj zapleteni izrazi, ki jih uporablja Thymeleaf. Izrazi spremenljivke Thymeleaf vam omogočajo zbiranje podatkov iz konteksta aplikacije ali predmeta v aplikaciji in vstavljanje teh podatkov v predlogo. Odvisno od vira podatkov, ki jih želite upodobiti v svojem pogledu, lahko uporabite dve vrsti spremenljivih izrazov.

Izraz primarne spremenljivke uporablja znak za dolar in vam omogoča zbiranje podatkov iz kontekst aplikacije (ki so podatki, povezani z različnimi nalogami, ki se izvajajo v aplikacija). Na primer, če želite zajeti uporabnikove podatke iz modala, potem je izraz spremenljivke z znakom za dolar bolj praktična izbira. Če izvedete vzorčni projekt in se pomaknete do http://localhost: 8080/ v brskalniku boste videli naslednji način:

Ko zaprete modal ali pošljete ime, se bo aplikacija pomaknila na domačo stran. Na domači strani boste videli generično spletno mesto, ki prikazuje besedo »Dobrodošli«, ki ji sledi niz, ki ste ga pravkar vnesli v modal.

Vzorčna aplikacija za dokončanje tega postopka uporablja izraz spremenljivke. Preprosta oblika v modal.html datoteka ima naslednje oznake:

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


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


form>

Ko uporabnik odda obrazec, ta sproži th: akcija atribut, ki ima vrednost URL-ja objave, ki ga najdete v WebController razred.

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


 model.addAttribute("userName", userName);


return"home";
 }

The imeprocesa() metoda sprejme niz, ki ga uporabnik posreduje modalnemu, nato ta niz dodeli spremenljivki, imenovani uporabniško ime. Z izrazom spremenljivke krmilnik nato v postavitev vstavi spremenljivko uporabniškega imena.

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

Izraz izbirne spremenljivke uporablja zvezdico in je najbolj uporaben, ko imate opravka z bolj zapletenimi aplikacijami. Na primer, aplikacija, ki od uporabnikov zahteva prijavo, lahko uporabi izraz spremenljivke izbire. Uporabniško ime lahko zberete iz uporabniškega objekta in ga vstavite v postavitev.

Nadomestna predloga in možnosti oblikovanja

Čeprav je Thymeleaf bolj priljubljena možnost predloge za aplikacije Spring Boot, obstaja več drugih enako izvedljivih možnosti. Sem spadajo JavaServer Pages (JSP), predloge, ki temeljijo na Groovy, predloge FreeMarker in predloge Moustache. Poleg ustvarjanja slogov CSS po meri se lahko odločite tudi za uporabo ogrodja CSS za oblikovanje vaše postavitve.