Føj CSS og JS til Thymeleaf

1. Introduktion

I denne hurtige vejledning lærer vi, hvordan du bruger CSS og JavaScript i vores Thymeleaf-skabeloner.

Først går vi over den forventede mappestruktur, så vi ved, hvor vi skal placere vores filer. Derefter ser vi, hvad vi skal gøre for at få adgang til disse filer fra en Thymeleaf-skabelon.

Vi starter med at tilføje CSS-styling til vores side og derefter gå videre til at tilføje nogle JavaScript-funktioner.

2. Opsætning

For at bruge Thymeleaf i vores applikation, lad os tilføje Spring Boot Starter til Thymeleaf til vores Maven-konfiguration:

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

3. Grundlæggende eksempel

3.1. Katalogstruktur

Som en påmindelse er Thymeleaf et skabelonbibliotek, der let kan integreres med Spring Boot-applikationer. Som standard forventer Thymeleaf, at vi placerer disse skabeloner i src / main / ressourcer / skabeloner folder. Vi kan oprette undermapper, så vi bruger en undermappe kaldet cssandjs til dette eksempel.

For CSS- og JavaScript-filer er standardmappen src / main / ressourcer / statisk. Lad os skabe statisk / stilarter / cssandjs og statisk / js / cssandjs mapper til henholdsvis vores CSS- og JS-filer.

3.2. Tilføjelse af CSS

Lad os oprette en simpel CSS-fil med navnet main.css i vores statisk / stilarter / cssandjs mappe og definer nogle grundlæggende styling:

h2 {font-familie: sans-serif; skriftstørrelse: 1,5 em; tekst-transformation: store bogstaver; } stærk {fontvægt: 700; baggrundsfarve: gul; } p {font-family: sans-serif; }

Lad os derefter oprette en Thymeleaf-skabelon med navnet styledPage.html i vores skabeloner / cssandjs mappe for at bruge disse stilarter:

    Føj CSS og JS til Thymeleaf Omhyggeligt stylet overskrift
 Dette er en tekst, som vi vil anvende meget speciel styling.

Vi indlæser typografiarket ved hjælp af linktagget med Thymeleafs special th: href attribut. Hvis vi har brugt den forventede katalogstruktur, behøver vi kun at angive stien nedenfor src / main / ressourcer / statisk. I dette tilfælde er det /style/cssandjs/main.css. Det @ {/ styles / cssandjs / main.css} syntaks er Thymeleafs måde at lave URL-link på.

Hvis vi kører vores applikation, ser vi, at vores stilarter er blevet anvendt:

3.3. Brug af JavaScript

Derefter lærer vi, hvordan du tilføjer en JavaScript-fil til vores Thymeleaf-side.

Lad os begynde med at tilføje noget JavaScript til en fil i src / main / resources / static / js / cssandjs / actions.js:

funktion showAlert () {alarm ("Der blev klikket på knappen!"); }

Derefter hopper vi tilbage til vores Thymeleaf-skabelon og tilføjer en tag, der peger på vores JavaScript-fil:

Nu kalder vi vores metode fra vores skabelon:

Vis underretning

Når vi kører vores applikation og klikker på Vis underretning knappen, ser vi alarmvinduet.

Før vi afslutter tingene, lad os bygge videre på dette eksempel ved at lære at bruge data fra vores Spring-controller i vores JavaScript.

Lad os starte med at ændre vores controller for at give et navn til vores side:

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

Lad os derefter tilføje en funktion til vores actions.js fil for at bruge dette navn i en advarsel:

funktion showName (navn) {alarm ("Her er navnet:" + navn); }

Endelig er vi nødt til at bruge script-inlining for at kunne kalde vores funktion med dataene fra vores controller. Så lad os placere navn værdi i en lokal JavaScript-variabel:

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

Ved at gøre dette har vi oprettet en lokal JavaScript-variabel, der indeholder navn modelværdi fra vores kontrol, som vi derefter kan bruge i vores JavaScript på resten af siden.

Nu hvor vi har gjort det, kan vi kalde vores JavaScript-funktion ved hjælp af navn Js variabel:

Vis navn

4. Konklusion

I denne korte vejledning lærte vi, hvordan vi anvender CSS-styling og ekstern JavaScript-funktionalitet på vores Thymeleaf-sider. Vi startede med den anbefalede bibliotekstruktur og arbejdede os op til at ringe til JavaScript med data leveret i vores Spring controller-klasse.

Som altid er koden tilgængelig på GitHub.

streamalism.org