Naučite kako integrirati ovaj predložak u svoje Spring aplikacije.
Thymeleaf je Java predložak. Razvija predloške za web i samostalne aplikacije. Ovaj mehanizam za predloške koristi koncept prirodnih predložaka za unošenje logike u vaš izgled, bez ugrožavanja vašeg dizajna. S Thymeleafom ćete imati kontrolu nad načinom na koji će aplikacija obraditi predloške koje stvorite.
Možete koristiti Thymeleaf za obradu šest vrsta predložaka: HTML, XML, tekst, JavaScript, CSS i RAW. Thymeleaf svaki od predložaka naziva načinom predloška, a HTML je najpopularniji predložak stvoren na ovom stroju.
Inicijalizacija Thymeleafa u vašoj aplikaciji
Postoje dva načina da dodate Thymeleaf u svoju Spring Boot aplikaciju. Možete odabrati Thymeleaf kao ovisnost prilikom generiranja vaše predloške s Springov alat za inicijalizaciju. Također imate mogućnost kasnijeg dodavanja u svoju datoteku specifikacije izrade u odjeljku ovisnosti.
Ako ste odabrali jednu od opcija projekta Gradle, datoteka koja sadrži ovisnosti je izgraditi.gradle datoteka. Međutim, ako ste odabrali Maven, ta datoteka jest pom.xml.
Vaš pom.xml datoteka treba sadržavati sljedeći odjeljak ovisnosti:
<dependency><groupId>org.springframework.bootgroupId>
<artifactId>spring-boot-starter-thymeleafartifactId>
dependency>
Dok je vaš izgraditi.gradle datoteka treba sadržavati sljedeći odjeljak ovisnosti:
dependencies {implementation 'org.springframework.boot: spring-boot-starter-thymeleaf'
}
Uzorak aplikacije korišten u članku dostupan je ovdje GitHub spremište i besplatan je za korištenje pod MIT licencom.
Dodavanjem Thymeleafa u vašu Spring aplikaciju dobit ćete pristup njegovoj temeljnoj biblioteci, koja vam omogućuje korištenje Thymeleafovog Spring Standard Dialecta. Spring Standard Dialect sadrži jedinstvene atribute i sintaksu koje možete koristiti za dodavanje različitih značajki svojim izgledima.
Korištenje Thymeleaf u Spring Boot
Kada koristite Thymeleaf u svojoj Spring aplikaciji, prvi korak je stvaranje vašeg predloška dokumenta. Za ovu oglednu aplikaciju predložak dokumenta je HTML. Uvijek biste trebali izraditi svoje predloške Thymeleaf u Spring Boot-u šablone mapu koja je dostupna u datoteci resursa.
Datoteka home.html
html><htmlxmlns: th="http://www.thymeleaf.org">
<head>
<title>Generic Websitetitle>
head>
<body>body>
html>
Gornji predložak Thymeleaf opći je HTML5 predložak, s jednim stranim atributom (xmlns: th). Svrha je xmlns: th atribut je pružiti opseg za sve čet:* atribute koje ćete koristiti u ovom HTML dokumentu. Ostali atributi i oznake u predlošku Thymeleaf su tradicionalni HTML oznake i atributi.
Stvaranje zaglavlja
Jedan od prvih i najvažnijih aspekata svake web stranice ili aplikacije je zaglavlje. Govori o čemu se radi u aplikaciji (putem logotipa) i pomaže vam u jednostavnom kretanju kroz aplikaciju. Osnovno zaglavlje mora imati logotip, kao i nekoliko navigacijskih veza.
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 omogućuje dodavanje gornjeg zaglavlja na bilo koju stranicu u vašoj web aplikaciji pomoću th: umetnuti atribut. The th: umetnuti i th: zamijeniti atributi prihvaćaju ono što Thymeleaf naziva vrijednostima izraza fragmenta. Izrazi fragmenata omogućuju vam postavljanje fragmenata označavanja na bilo koje mjesto u vašem izgledu.
<divth: insert="~{header:: #nav}">div>Umetanje gornje oznake na vrh dom.html oznaka će umetnuti oznaku zaglavlja na vrh vaše početne stranice. Izraz fragmenta ima nekoliko komponenti, dvije su izborne, a dvije su obavezne:
- Tilda (~), koja nije obavezna.
- Par vitičastih zagrada ({}), koji nije obavezan.
- Naziv predloška koji sadrži oznake koje želite umetnuti (zaglavlje.html).
- CSS selektor oznake koju želite umetnuti (#nav).
Dakle, sljedeće označavanje daje isti rezultat kao ono gore.
"header:: #nav">Popunjavanje tijela vašeg predloška
Thymeleaf vam omogućuje korištenje pet vrsta izraza u vašim predlošcima:
- Izraz fragmenta (~{…})
- Izraz poruke (#{…})
- Izraz URL-a veze (@{…})
- Varijabilni izraz (${…})
- Izraz varijable odabira (*{…})
Izraz poruke omogućuje vam dodavanje eksternaliziranih fragmenata teksta u vaš izgled. Pomoću izraza poruka možete jednostavno zamijeniti ili ponovno upotrijebiti tekst u svom izgledu. Kada koristite izraz poruke, uvijek biste trebali smjestiti vanjske fragmente teksta u a .Svojstva datoteka pod resursi mapa.
Za ovu oglednu aplikaciju ta je datoteka poruke.svojstva, koji sadrži sljedeći fragment teksta:
placeholder.text=Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dolorem porro non quae obcaecati illo laboriosam.Trebate imati na umu da fragment teksta (ili poruke) iznad ima jedinstveni ključ (rezervirano mjesto.tekst). To je zato što svaka datoteka s porukama može sadržavati kolekciju različitih poruka. Dakle, trebat će vam ključ za umetanje određene poruke u vaš izgled.
<pth: text="#{placeholder.text}">p>Umetanje gornje oznake u tijelo vaše HTML datoteke učinkovito će prikazati tekst rezerviranog mjesta kao odlomak u vašem prikazu. Za razliku od izraza fragmenta, svaki aspekt izraza poruke je obavezan. Izraz poruke zahtijeva:
- Brojčani znak (#).
- Par vitičastih zagrada ({}).
- Ključ koji sadrži poruku koju želite umetnuti (rezervirano mjesto.tekst).
Stiliziranje vašeg predloška
Još jedna važna datoteka u resursi mapa je statična datoteka. Ova datoteka pohranjuje vaše CSS datoteke i sve slike koje planirate koristiti u svojoj aplikaciji. Da biste svoju vanjsku CSS datoteku povezali s Thymeleaf HTML predloškom, morat ćete upotrijebiti izraz URL veze. Procesi URL izraza veze i relativni i apsolutni URL-ovi.
<linkrel="stylesheet"th: href="@{/css/style.css}" />Umetanje gornje oznake u vaše HTML datoteke omogućit će vam stiliziranje predloška pomoću a stil.css datoteka. Ova je datoteka dostupna u a css mapa pod statički odjeljak od resursi datoteka uzorka prijave. Uvijek biste trebali dodijeliti URL izraz veze na th: href atribut.
Thymeleaf nudi nekoliko drugih atributa koje možete koristiti za poboljšanje dizajna vašeg izgleda. Jedan takav atribut je th: stil atribut, koji možete koristiti za dodavanje slika u svoj izgled.
<divid="showcase"th: style="'background: url(/images/background.jpg) no-repeat center center fixed;'">Gore navedena oznaka koristi th: stil atribut za dodavanje pozadinske slike određenom dijelu vašeg izgleda. Thymeleaf ima više od stotinu različitih atributa koje možete koristiti za dodavanje stila i funkcionalnosti svojim izgledima.
Varijabilni izraz
Varijabilni izrazi su najpopularniji i vjerojatno najsloženiji izrazi koje Thymeleaf koristi. Izrazi varijable Thymeleaf omogućuju vam prikupljanje podataka ili iz konteksta aplikacije ili objekta u aplikaciji i ubacivanje tih podataka u predložak. Ovisno o izvoru podataka koje želite prikazati u svom prikazu, postoje dvije vrste varijabilnih izraza koje možete koristiti.
Izraz primarne varijable koristi znak dolara i omogućuje vam prikupljanje podataka iz kontekst aplikacije (što su podaci povezani s različitim zadacima koji se izvode u primjena). Na primjer, ako želite uhvatiti korisničke podatke iz modala, onda je izraz varijable sa znakom dolara praktičniji izbor. Ako izvršite ogledni projekt i prijeđete na http://localhost: 8080/ u svom pregledniku vidjet ćete sljedeći način:
Nakon što zatvorite modal ili pošaljete ime, aplikacija će otići na početnu stranicu. Na početnoj stranici vidjet ćete generičku web stranicu koja prikazuje riječ "Dobrodošli", nakon koje slijedi niz koji ste upravo poslali u modalnom.
Uzorak aplikacije koristi izraz varijable za dovršetak ovog procesa. Jednostavan oblik u modalno.html datoteka ima sljedeće oznake:
<formid="form"th: action="@{/home}"method="post"><inputtype="text"name="userName"class="form-control"placeholder="Your Name" />
<buttontype="submit"class="btn">Submitbutton>
form>
Kada korisnik pošalje obrazac, on pokreće th: akcija atribut koji ima vrijednost URL-a posta, koji možete pronaći u Webkontroler razreda.
@PostMapping("/home")public String processName(String userName, Model model){
model.addAttribute("userName", userName);
return"home";
}
The nazivprocesa() metoda prihvaća niz koji korisnik daje modalnom, zatim taj niz dodjeljuje varijabli tzv. Korisničko ime. Koristeći izraz varijable, kontroler zatim ubacuje varijablu korisničkog imena u izgled.
<h1>Welcome <spanth: text="${userName}">span>!h1>Izraz varijable odabira koristi zvjezdicu, a najkorisniji je kada imate posla sa složenijim aplikacijama. Na primjer, aplikacija koja zahtijeva prijavu korisnika može koristiti izraz varijable odabira. Možete prikupiti korisničko ime iz korisničkog objekta i umetnuti ga u izgled.
Alternativni predložak i opcije stila
Iako je Thymeleaf popularnija opcija predloška za Spring Boot aplikacije, postoji nekoliko drugih jednako održivih opcija. To uključuje JavaServer Pages (JSP), predloške temeljene na Groovyju, FreeMarker predloške i Mustache predloške. Osim stvaranja prilagođenog CSS stila, također možete odabrati korištenje CSS okvira za stiliziranje vašeg izgleda.