Arbejde med fragmenter i Thymeleaf

1. Oversigt

I denne vejledning viser vi, hvordan du gør det gør brug af Thymeleaf Fragments til at genbruge nogle fælles dele af et websted. Efter at have oprettet et meget simpelt Spring MVC-projekt vil vi fokusere på synspunkter.

Hvis du er ny hos Thymeleaf, kan du tjekke andre artikler på dette websted som denne introduktion, såvel som denne om 3.0-versionen af ​​motoren.

2. Maven-afhængigheder

Vi har brug for et par afhængigheder for at aktivere Thymeleaf:

 org.thymeleaf thymeleaf 3.0.11.RELEASE org.thymeleaf thymeleaf-spring5 3.0.11.RELEASE 

Den seneste version af thymeleaf og thymeleaf-spring5 kan findes på Maven Central.

3. Forårsprojekt

3.1. Spring MVC Configuration

For at aktivere Thymeleaf og indstille skabelonsuffikset skal vi konfigurer MVC med en view resolver og template resolver.

Vi indstiller også biblioteket til nogle statiske ressourcer:

@Bean public ViewResolver htmlViewResolver () {ThymeleafViewResolver resolver = ny ThymeleafViewResolver (); resolver.setTemplateEngine (templateEngine (htmlTemplateResolver ())); resolver.setContentType ("tekst / html"); resolver.setCharacterEncoding ("UTF-8"); resolver.setViewNames (ArrayUtil.array ("*. html")); returopløsning; } privat ITemplateResolver htmlTemplateResolver () {SpringResourceTemplateResolver resolver = ny SpringResourceTemplateResolver (); resolver.setApplicationContext (applicationContext); resolver.setPrefix ("/ WEB-INF / visninger /"); resolver.setCacheable (false); resolver.setTemplateMode (TemplateMode.HTML); returopløsning; } @Override public void addResourceHandlers (ResourceHandlerRegistry registry) {registry.addResourceHandler ("/ resources / **", "/ css / **") .addResourceLocations ("/ WEB-INF / resources /", "/ WEB-INF / css / "); }

Bemærk, at hvis vi bruger Spring Boot, er denne konfiguration muligvis ikke nødvendig, medmindre vi har brug for vores egne tilpasninger.

3.2. Controlleren

I dette tilfælde er controlleren bare et køretøj til visningerne. Hver visning viser et andet scenarie for brug af fragmenter.

Den sidste indlæser nogle data, der sendes gennem modellen for at blive vist på visningen:

@Controller public class FragmentsController {@GetMapping ("/ fragmenter") public String getHome () {return "fragments.html"; } @GetMapping ("/ markup") public String markupPage () {return "markup.html"; } @GetMapping ("/ params") offentlig String paramsPage () {returner "params.html"; } @GetMapping ("/ other") offentlig String otherPage (Model model) {model.addAttribute ("data", StudentUtils.buildStudents ()); returner "andet.html"; }}

Bemærk, at visningsnavne skal indeholde “.Html” suffiks på grund af den måde, vi konfigurerede vores resolver på. Vi specificerer også suffikset, når vi henviser til fragmentnavne.

4. Udsigten

4.1. Enkel fragmentering

Først og fremmest bruger vi almindelige dele til genbrug på vores sider.

Vi kan definere disse dele som fragmenter, enten i isolerede filer eller på en fælles side. I dette projekt defineres disse genanvendelige dele i en mappe med navnet fragmenter.

Der er tre grundlæggende måder at inkludere indhold fra et fragment på:

  • indsæt - indsætter indhold inde i tagget
  • udskift - erstatter det aktuelle tag med det tag, der definerer fragmentet
  • inkluderer - dette er udfaset, men det kan stadig vises i en ældre kode

Det næste eksempel, fragmenter.html, viser brugen af ​​alle tre måder. Denne Thymeleaf-skabelon tilføjer fragmenter i hovedet og dokumentets krop:

   Thymeleaf Fragments: hjem 

Gå til næste side for at se fragmenter i aktion

Lad os nu se på en side, der indeholder nogle fragmenter. Det hedder general.html, og det er som en hel side med nogle dele defineret som fragmenter klar til brug:

Gå til næste side for at se fragmenter i aktion

Dette er et sidebjælke Dette er et andet sidebjælke Indeks for fragmenter | Markup inklusion | Fragmentparametre Andet

Det sektionen indeholder kun et typografiark, men vi kunne anvende andre værktøjer såsom Bootstrap, jQuery eller Foundation, enten direkte eller ved hjælp af Webjars.

Bemærk, at alle de genanvendelige tags i denne skabelon har attributten th: fragment, men derefter vil vi se, hvordan man inkluderer enhver anden del af siden.

Efter gengivelse og inkludering af fragmenter er det returnerede indhold:

   Thymeleaf Fragments: hjem 

Gå til næste side for at se fragmenter i aktion

Fragmenter Indeks | Markup inklusion | Fragmentparametre Andet

4.2. Markup-vælgere til fragmenter

En af de store ting ved Thymeleaf Fragments er, at Vi kan også få fat i en hvilken som helst del af en skabelon ved hjælp af de enkle vælgere, gennem klasser, id'er eller blot ved tags.

Denne side indeholder for eksempel nogle komponenter fra general.html fil: en til side blokere og div. en anden blok:

4.3. Parametriserede fragmenter

Vi kan overføre parametre til enfragment for at ændre en bestemt del af det. For at gøre dette skal fragmentet defineres som et funktionsopkald, hvor vi skal erklære en liste over parametre.

I dette eksempel definerer vi et fragment til et generisk formfelt:

 Mark 

Og her er en simpel brug af det fragment, hvor vi sender parametre til det:

Og sådan vil det returnerede felt se ud:

 Navn 

4.4. Fragment Inklusion Udtryk

Thymeleaf fragmenter tilbyder andre interessante muligheder såsom support til betingede udtryk for at bestemme, om et fragment skal inkluderes.

Bruger Elvis operatør med et hvilket som helst af de udtryk, der leveres af Thymeleaf (f.eks. sikkerhed, strenge og samlinger), er vi i stand til at indlæse forskellige fragmenter.

For eksempel kan vi definere dette fragment med noget indhold, som vi viser afhængigt af en given tilstand. Dette kan være en fil, der indeholder forskellige slags blokke:

 Data modtaget Ingen data 

Og sådan kunne vi indlæse dem med et udtryk:

 0}? ~ {fragmenter / menuer.html :: dataPresent}: ~ {fragmenter / menuer.html :: noData} ">

For at lære mere om Thymeleaf Expressions, se vores artikel her.

4.5. Fleksible layout

Det næste eksempel viser også to andre interessante anvendelser af fragmenter til gengive en tabel med data. Dette er det genanvendelige tabelfragment med to vigtige dele: en tabeloverskrift, der kan ændres, og kroppen, hvor data gengives:

0Navn

Når vi vil bruge denne tabel, kan vi videregive vores egen tabeloverskrift ved hjælp af felter fungere. Overskriften henvises til klassen myFields. Tabelteksten indlæses ved at videregive data som en parameter til tableBody fungere:

IdNavn

Og sådan ser den sidste side ud:

 Data modtaget 
IdNavn
1001John Smith
1002Jane Williams
Fragmenter Indeks | Markup inklusion | Fragmentparametre Andet

5. Konklusion

I denne artikel har vi vist, hvordan man genbruger visningskomponenter ved hjælp af Thymeleaf Fragments, et kraftfuldt værktøj, der kan gøre skabelonadministration lettere.

Vi har også præsenteret nogle andre interessante funktioner, der går ud over det grundlæggende. Vi bør tage disse i betragtning, når vi vælger Thymeleaf som vores visningsmaskine.

Hvis du vil lære om andre Thymeleaf-funktioner, skal du helt sikkert se på vores artikel om Layout Dialects.

Som altid er den komplette implementeringskode for eksemplet tilgængelig på GitHub.


$config[zx-auto] not found$config[zx-overlay] not found