streamalism.org

1. Introduksjon

I denne raske opplæringen skal vi lære hvordan du bruker CSS og JavaScript i våre Thymeleaf-maler.

Først går vi over den forventede mappestrukturen, slik at vi vet hvor filene våre skal legges. Etter det ser vi hva vi trenger å gjøre for å få tilgang til filene fra en Thymeleaf-mal.

Vi begynner med å legge til CSS-styling på siden vår, og deretter gå videre til å legge til litt JavaScript-funksjonalitet.

2. Oppsett

For å bruke Thymeleaf i applikasjonen vår, la oss legge til Spring Boot Starter for Thymeleaf i vår Maven-konfigurasjon:

 org.springframework.boot spring-boot-starter-thymeleaf 2.2.6.RELEASE 

3. Grunnleggende eksempel

3.1. Katalogstruktur

Nå, som en påminnelse, er Thymeleaf et malbibliotek som enkelt kan integreres med Spring Boot-applikasjoner. Som standard forventer Thymeleaf at vi legger disse malene i src / hoved / ressurser / maler mappe. Vi kan lage undermapper, så vi bruker en undermappe som heter cssandjs for dette eksemplet.

For CSS- og JavaScript-filer er standardkatalogen src / hoved / ressurser / statisk. La oss lage statisk / stiler / cssandjs og statisk / js / cssandjs mapper for henholdsvis CSS- og JS-filer.

3.2. Legger til CSS

La oss lage en enkel CSS-fil med navnet main.css i vår statisk / stiler / cssandjs mappe og definere noen grunnleggende styling:

h2 {font-family: sans-serif; skriftstørrelse: 1,5 em; tekst-transform: store bokstaver; } sterk {font-weight: 700; bakgrunnsfarge: gul; } p {font-family: sans-serif; }

La oss deretter lage en Thymeleaf-mal som heter styledPage.html i vår maler / cssandjs mappen for å bruke disse stilene:

    Legg til CSS og JS til Thymeleaf 
Forsiktig utformet overskrift
 Dette er tekst som vi vil bruke på veldig spesiell styling. 

Vi laster stilarket ved hjelp av koblingstaggen med Thymeleafs spesial th: href Egenskap. Hvis vi har brukt den forventede katalogstrukturen, trenger vi bare å spesifisere banen nedenfor src / hoved / ressurser / statisk. I dette tilfellet er det /style/cssandjs/main.css. De @ {/ styles / cssandjs / main.css} syntaksen er Thymeleafs måte å gjøre URL-lenking på.

Hvis vi kjører applikasjonen vår, ser vi at stilene våre er brukt:

3.3. Bruke JavaScript

Deretter skal vi lære hvordan du legger til en JavaScript-fil på Thymeleaf-siden vår.

La oss begynne med å legge til litt JavaScript i en fil i src / main / resources / static / js / cssandjs / actions.js:

function showAlert () {alert ("Det ble klikket på knappen!"); }

Så hopper vi tilbake til Thymeleaf-malen og legger til en tag som peker på JavaScript-filen vår:

Nå kaller vi metoden vår fra malen vår:

Vis varsel

Når vi kjører applikasjonen vår og klikker på Vis varsel knappen, ser vi varselvinduet.

Før vi pakker inn ting, la oss bygge videre på dette eksemplet ved å lære å bruke data fra vår kontroller i JavaScript.

La oss starte med å endre kontrolleren vår for å gi et navn til siden vår:

@GetMapping ("/ styled-page") public String getStyledPage (Model model) {model.addAttribute ("name", "Baeldung Reader"); returner "cssandjs / styledPage"; }

Deretter la oss legge til en funksjon i vår actions.js fil for å bruke dette navnet i et varsel:

function showName (name) {alert ("Her er navnet:" + name); }

Til slutt, for å ringe til funksjonen vår med dataene fra kontrolleren vår, må vi bruke skriptinnføring. Så la oss plassere Navn verdi i en lokal JavaScript-variabel:

 var nameJs = / * [[$ {name}]] * /; 

Ved å gjøre dette har vi opprettet en lokal JavaScript-variabel som inneholder Navn modellverdi fra vår kontroll som vi deretter kan bruke i JavaScript på resten av siden.

Nå som vi har gjort det, kan vi ringe JavaScript-funksjonen vår ved hjelp av navnJs variabel:

Vis navn

4. Konklusjon

I denne korte veiledningen lærte vi hvordan vi bruker CSS-styling og ekstern JavaScript-funksjonalitet på Thymeleaf-sidene våre. Vi startet med den anbefalte katalogstrukturen og jobbet oss opp med å ringe JavaScript med data gitt i vår vårkontrollerklasse.

Som alltid er koden tilgjengelig på GitHub.