Sužinokite, kaip integruoti šį šablono variklį į savo pavasario programas.

„Thymeleaf“ yra „Java“ šablonų variklis. Jis kuria šablonus tiek žiniatinklio, tiek atskiroms programoms. Šis šablonų variklis naudoja natūralių šablonų koncepciją, kad įterptų logiką į jūsų išdėstymą, nepakenkiant dizainui. Naudodami Thymeleaf galėsite valdyti, kaip programa apdoros jūsų sukurtus šablonus.

Naudodami Thymeleaf galite apdoroti šešių tipų šablonus: HTML, XML, tekstą, „JavaScript“, CSS ir RAW. Thymeleaf nurodo kiekvieną šabloną kaip šablono režimą, o HTML yra populiariausias šablonas, sukurtas naudojant šį variklį.

Thymeleaf inicijavimas jūsų programoje

Yra du būdai, kaip „Thymeleaf“ pridėti prie „Spring Boot“ programos. Galite pasirinkti Thymeleaf kaip priklausomybę, kai kuriate katilinę Pavasario inicijavimo įrankis. Taip pat turite galimybę vėliau jį įtraukti į savo kūrimo specifikacijų failą priklausomybių skiltyje.

Jei pasirinkote vieną iš Gradle projekto parinkčių, failas, kuriame yra priklausomybės, yra statyti.gradle failą. Tačiau, jei pasirinkote Maven, tada tas failas yra pom.xml.

instagram viewer

Tavo pom.xml faile turi būti ši priklausomybės skiltis:

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


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

Nors tavo statyti.gradle faile turi būti ši priklausomybės skiltis:

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

Straipsnyje naudotą programos pavyzdį rasite čia GitHub saugykla ir jūs galite nemokamai naudotis pagal MIT licenciją.

Pridėję Thymeleaf prie savo pavasario programos, gausite prieigą prie pagrindinės jos bibliotekos, kuri leidžia naudoti Thymeleaf pavasario standartinę tarmę. Pavasario standartinėje tarmėje yra unikalių atributų ir sintaksės, kurias galite naudoti norėdami pridėti įvairių funkcijų į savo maketus.

Thymeleaf naudojimas Spring Boot

Kai naudojate Thymeleaf savo pavasario programoje, pirmiausia turite sukurti šablono dokumentą. Šios pavyzdinės programos dokumento šablonas yra HTML. „Thymeleaf“ šablonus visada turėtumėte kurti „Spring Boot's“. šablonus aplanką, kuris yra išteklių faile.

Failas home.html

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


<head>


<title>Generic Websitetitle>


head>


<body>body>
html>

Aukščiau pateiktas Thymeleaf šablonas yra bendras HTML5 šablonas su vienu svetimu atributu (xmlns: th). Tikslas xmlns: th atributas yra suteikti apimtį visiems d.:* atributus, kuriuos naudosite šiame HTML dokumente. Kiti Thymeleaf šablono atributai ir žymos yra tradiciniai HTML žymos ir atributai.

Antraštės kūrimas

Vienas iš pirmųjų ir svarbiausių bet kurios svetainės ar programos aspektų yra antraštė. Jame nurodoma, kas yra programa (per logotipą), ir padeda lengvai naršyti programoje. Pagrindinėje antraštėje turėtų būti logotipas, taip pat kelios naršymo nuorodos.

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“ leidžia pridėti aukščiau esančią antraštę prie bet kurio žiniatinklio programos puslapio naudojant th: įterpti atributas. The th: įterpti ir th: pakeisti atributai priima tai, ką Thymeleaf vadina fragmentų išraiškos reikšmėmis. Fragmentų išraiškos leidžia įdėti žymėjimo fragmentus bet kurioje išdėstymo vietoje.

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

Žymėjimo įterpimas viršuje, viršuje home.html žyma įterps antraštės žymėjimą pagrindinio puslapio viršuje. Fragmento išraišką sudaro keli komponentai, du yra neprivalomi ir du privalomi:

  • Tildė (~), kuri yra neprivaloma.
  • Garbanotų petnešų pora ({}), kuri yra neprivaloma.
  • Šablono, kuriame yra žymėjimas, kurį norite įterpti, pavadinimas (header.html).
  • Norimo įterpti žymėjimo CSS parinkiklis (#nav).

Taigi, šis žymėjimas duoda tą patį rezultatą kaip ir aukščiau.

"header:: #nav">

Užpildykite savo šablono turinį

„Thymeleaf“ leidžia šablonuose naudoti penkių tipų išraiškas:

  • Fragmento išraiška (~{…})
  • Pranešimo išraiška (#{…})
  • Nuorodos URL išraiška (@{…})
  • Kintamoji išraiška (${…})
  • Pasirinkimo kintamojo išraiška (*{…})

Pranešimo išraiška leidžia į maketą įtraukti išorinių teksto fragmentų. Naudodami pranešimų išraiškas galite lengvai pakeisti arba pakartotinai panaudoti tekstą savo makete. Naudodami pranešimo išraišką, visada turėtumėte įdėti išorinius teksto fragmentus į a .ypatybės failą pagal išteklių aplanką.

Šios programos pavyzdyje tas failas yra pranešimai.ypatybės, kuriame yra šis teksto fragmentas:

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

Turėtumėte atkreipti dėmesį, kad aukščiau esantis teksto fragmentas (arba pranešimas) turi unikalų raktą (vietos rezervuaras.tekstas). Taip yra todėl, kad kiekviename pranešimo faile gali būti įvairių pranešimų rinkinys. Taigi, jums reikės rakto, kad į savo maketą įterptumėte konkretų pranešimą.

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

Įdėjus aukščiau esantį žymėjimą į HTML failo turinį, rezervuotos vietos tekstas bus veiksmingai rodomas kaip pastraipa jūsų rodinyje. Skirtingai nuo fragmento išraiškos, kiekvienas pranešimo išraiškos aspektas yra privalomas. Pranešimo išraiška reikalauja:

  • Skaičiaus ženklas (#).
  • Garbanotų petnešų pora ({}).
  • Raktas, kuriame yra pranešimas, kurį norite įterpti (vietos rezervuaras.tekstas).

Jūsų šablono stilius

Kitas svarbus failas išteklių aplankas yra statinis failas. Šiame faile saugomi jūsų CSS failai ir visi vaizdai, kuriuos planuojate naudoti programoje. Norėdami susieti išorinį CSS failą su Thymeleaf HTML šablonu, turėsite naudoti nuorodos URL išraišką. Nuorodos URL išraiškos procesai tiek santykiniai, tiek absoliutūs URL.

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

Aukščiau esančio žymėjimo įterpimas į HTML failo leis jums nustatyti šablono stilių naudojant a stilius.css failą. Šis failas pasiekiamas a css aplanką po statinis skyrių išteklių paraiškos pavyzdžio failą. Nuorodos URL išraišką visada turėtumėte priskirti prie th: href atributas.

Thymeleaf suteikia keletą kitų atributų, kuriuos galite naudoti norėdami patobulinti savo maketo dizainą. Vienas iš tokių atributų yra th: stilius atributas, kurį galite naudoti norėdami pridėti vaizdų į savo maketą.

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

Aukščiau pateiktas žymėjimas naudoja th: stilius atributas, kad pridėtumėte fono paveikslėlį į konkrečią išdėstymo dalį. Thymeleaf turi daugiau nei šimtą skirtingų atributų, kuriuos galite naudoti norėdami suteikti savo maketams stiliaus ir funkcionalumo.

Kintamoji išraiška

Kintamieji posakiai yra populiariausi ir, ko gero, sudėtingiausi Thymeleaf vartojami posakiai. Thymeleaf kintamųjų išraiškos leidžia rinkti duomenis iš programos konteksto arba objekto programoje ir įterpti tuos duomenis į šabloną. Atsižvelgiant į duomenų, kuriuos norite pateikti savo rodinyje, šaltinį, galite naudoti dviejų tipų kintamąsias išraiškas.

Pirminė kintamojo išraiška naudoja dolerio ženklą ir leidžia rinkti duomenis iš programos kontekstas (tai yra duomenys, susieti su įvairiomis užduotimis, kurios vykdomos taikymas). Pavyzdžiui, jei norite užfiksuoti vartotojo duomenis iš modalo, dolerio ženklo kintamojo išraiška yra praktiškesnis pasirinkimas. Jei vykdote pavyzdinį projektą ir pereinate prie http://localhost: 8080/ naršyklėje pamatysite šį modalą:

Kai uždarysite modalą arba pateiksite pavadinimą, programa pereis į pagrindinį puslapį. Pagrindiniame puslapyje pamatysite bendrą svetainę, kurioje rodomas žodis „Sveiki atvykę“, o po jo – eilutė, kurią ką tik pateikėte modale.

Pavyzdinė programa naudoja kintamojo išraišką, kad užbaigtų šį procesą. Paprasta forma modal.html failas turi tokį žymėjimą:

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


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


form>

Kai vartotojas pateikia formą, ji suaktyvina th: veiksmas atributas, turintis įrašo URL reikšmę, kurį galite rasti WebController klasė.

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


 model.addAttribute("userName", userName);


return"home";
 }

The proceso pavadinimas() metodas priima eilutę, kurią vartotojas pateikia modalui, tada priskiria tą eilutę kintamajam, vadinamam Vartotojo vardas. Naudodamas kintamojo išraišką, valdiklis įveda vartotojo vardo kintamąjį į maketą.

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

Pasirinkimo kintamojo išraiška naudoja žvaigždutę, ir ji yra naudingiausia, kai dirbate su sudėtingesnėmis programomis. Pavyzdžiui, programa, kuriai naudotojai turi prisijungti, gali naudoti pasirinkimo kintamojo išraišką. Galite surinkti vartotojo vardą iš vartotojo objekto ir įterpti jį į maketą.

Alternatyvios šablono ir stiliaus parinktys

Nors „Thymeleaf“ yra populiaresnė „Spring Boot“ programų šablono parinktis, yra keletas kitų vienodai perspektyvių variantų. Tai apima „JavaServer“ puslapius (JSP), „Groovy“ pagrindu sukurtus šablonus, „FreeMarker“ šablonus ir „Moustache“ šablonus. Be pasirinktinio CSS stiliaus kūrimo, taip pat galite pasirinkti naudoti CSS sistemą, kad sukurtumėte išdėstymą.