streamalism.org

1. Oversikt

I denne opplæringen viser vi hvordan du gjør det bruk Thymeleaf Fragments for å gjenbruke noen vanlige deler av et nettsted. Etter å ha satt opp et veldig enkelt Spring MVC-prosjekt, vil vi fokusere på synspunkter.

Hvis du ikke er kjent med Thymeleaf, kan du sjekke andre artikler på dette nettstedet som denne introduksjonen, så vel som denne om 3.0-versjonen av motoren.

2. Maven-avhengigheter

Vi trenger et par avhengigheter for å aktivere Thymeleaf:

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

Den siste versjonen av thymeleaf og thymeleaf-spring5 finner du på Maven Central.

3. Vårprosjekt

3.1. Vår MVC-konfigurasjon

For å aktivere Thymeleaf og angi malendelsen, må vi konfigurere MVC med en visningsoppløsning og maloppløsning.

Vi setter også katalogen for noen statiske ressurser:

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

Merk at hvis vi bruker Spring Boot, kan det hende at denne konfigurasjonen ikke er nødvendig med mindre vi trenger å bruke våre egne tilpasninger.

3.2. Kontrolleren

I dette tilfellet er kontrolleren bare et kjøretøy for utsikten. Hver visning viser et annet scenario for fragmentbruk.

Den siste laster inn noen data som sendes gjennom modellen som skal vises 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 () {return "params.html"; } @GetMapping ("/ other") offentlig String otherPage (modellmodell) {model.addAttribute ("data", StudentUtils.buildStudents ()); returner "annet.html"; }}

Merk at visningsnavnene må inneholde “.Html” suffiks på grunn av måten vi konfigurerte løseren på. Vi spesifiserer også suffikset når vi refererer til fragmentnavn.

4. Utsikten

4.1. Enkel inkludering av fragmenter

Først og fremst vil vi bruke gjenbruk av vanlige deler på sidene våre.

Vi kan definere disse delene som fragmenter, enten i isolerte filer eller på en felles side. I dette prosjektet er disse gjenbrukbare delene definert i en mappe som heter fragmenter.

Det er tre grunnleggende måter å inkludere innhold fra et fragment:

• sett inn - setter inn innhold i koden
• erstatte - erstatter den nåværende taggen med taggen som definerer fragmentet
• inkluderer - dette er utfaset, men det kan fremdeles vises i en eldre kode

Det neste eksemplet, fragmenter.html, viser bruken av alle tre måtene. Denne Thymeleaf-malen legger til fragmenter i hodet og hoveddelen av dokumentet:

   Thymeleaf Fragments: hjem 
Gå til neste side for å se fragmenter i aksjon

La oss nå se på en side som inneholder noen fragmenter. Det heter general.html, og det er som en hel side med noen deler definert som fragmenter klare til bruk:

Gå til neste side for å se fragmenter i aksjon
 Dette er en sidefelt Dette er en annen sidefelt Fragment Index | Markup inklusjon | Fragmentparametre | Annen 

De seksjonen inneholder bare et stilark, men vi kan bruke andre verktøy som Bootstrap, jQuery eller Foundation, enten direkte eller ved hjelp av Webjars.

Merk at alle gjenbrukbare tagger i denne malen har attributtet th: fragment, men neste får vi se hvordan du kan inkludere andre deler av siden.

Etter gjengivelse og inkludering av fragmenter er det returnerte innholdet:

   Thymeleaf Fragments: hjem 
Gå til neste side for å se fragmenter i aksjon
  Fragment Index | Markup inklusjon | Fragmentparametre | Annen 

4.2. Markup Selectors for Fragments

Noe av det som er bra med Thymeleaf Fragments er at vi kan også ta tak i hvilken som helst del av en mal bare ved å bruke de enkle velgerne, gjennom klasser, ID-er, eller ganske enkelt med tagger.

Denne siden inneholder for eksempel noen komponenter fra general.html fil: en til side blokk og div. en annen blokkere:

4.3. Parametriserte fragmenter

Vi kan overføre parametere til afragment for å endre en bestemt del av det. For å gjøre det, må fragmentet defineres som et funksjonsanrop, der vi må erklære en liste over parametere.

I dette eksemplet definerer vi et fragment for et generisk formfelt:

 Felt 

Og her er en enkel bruk av det fragmentet der vi overfører parametere til det:

Og slik vil det returnerte feltet se ut:

 Navn 

4.4. Fragment Inkluderingsuttrykk

Thymeleaf fragmenter tilbyr andre interessante alternativer som støtte for betingede uttrykk for å bestemme om et fragment skal inkluderes.

Bruker Elvis operatør med et av uttrykkene gitt av Thymeleaf (for eksempel sikkerhet, strenger og samlinger), kan vi laste forskjellige fragmenter.

For eksempel kan vi definere dette fragmentet med noe innhold som vi vil vise, avhengig av en gitt tilstand. Dette kan være en fil som inneholder forskjellige typer blokker:

 Data mottatt Ingen data 

Og slik kunne vi laste dem med et uttrykk:

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

For å lære mer om Thymeleaf Expressions, sjekk artikkelen vår her.

4.5. Fleksible oppsett

Det neste eksemplet viser også to andre interessante bruksområder for fragmenter til gjengi en tabell med data. Dette er det gjenbrukbare tabellfragmentet, med to viktige deler: en tabelloverskrift som kan endres, og kroppen der data blir gjengitt:

0
Navn

Når vi vil bruke denne tabellen, kan vi passere vår egen tabelloverskrift ved hjelp av Enger funksjon. Overskriften er referert til klassen myFields. Tabellens kropp lastes inn ved å sende data som en parameter til tableBody funksjon:

Id
Navn

Og slik vil den siste siden se ut:

 data motatt 
Id
Navn
1001
John Smith
1002
Jane Williams
  Fragment Index | Markup inklusjon | Fragmentparametre | Annen 

5. Konklusjon

I denne artikkelen har vi vist hvordan du kan bruke visningskomponenter på nytt ved bruk av Thymeleaf Fragments, et kraftig verktøy som kan gjøre maladministrasjon enklere.

Vi har også presentert noen andre interessante funksjoner som går utover det grunnleggende. Vi bør ta hensyn til disse når vi velger Thymeleaf som vår visningsgivermotor.

Hvis du vil lære om andre Thymeleaf-funksjoner, bør du definitivt ta en titt på artikkelen vår om Layout Dialects.

Som alltid er den komplette implementeringskoden for eksemplet tilgjengelig på GitHub.