Dodajte CSS i JS u Thymeleaf

1. Uvod

U ovom brzom vodiču naučit ćemo kako koristiti CSS i JavaScript u našim predlošcima Thymeleaf.

Prvo ćemo pregledati očekivanu strukturu mapa kako bismo znali kamo smjestiti datoteke. Nakon toga vidjet ćemo što trebamo učiniti za pristup tim datotekama iz predloška Thymeleaf.

Počet ćemo dodavanjem CSS stila na našu stranicu, a zatim ćemo prijeći na dodavanje neke JavaScript funkcionalnosti.

2. Postavljanje

Da bismo koristili Thymeleaf u našoj aplikaciji, dodajmo Spring Boot Starter za Thymeleaf u našu Maven konfiguraciju:

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

3. Osnovni primjer

3.1. Struktura direktorija

Kao podsjetnik, Thymeleaf je predložak koja se lako može integrirati s programima Spring Boot. Prema zadanim postavkama, Thymeleaf očekuje da te predloške smjestimo u src / main / resources / predlošci mapu. Možemo stvoriti podmape, pa ćemo koristiti podmapu tzv cssandjs za ovaj primjer.

Za CSS i JavaScript datoteke zadani je direktorij src / main / resources / static. Stvarajmo static / stilovi / cssandjs i static / js / cssandjs mape za naše CSS i JS datoteke.

3.2. Dodavanje CSS-a

Stvorimo jednostavnu CSS datoteku s imenom glavni.css u našem static / stilovi / cssandjs mapu i definirajte neki osnovni stil:

h2 {obitelj fontova: sans-serif; veličina slova: 1,5em; transformacija teksta: velika slova; } jak {font-weight: 700; boja pozadine: žuta; } p {obitelj fontova: sans-serif; }

Dalje, kreirajmo predložak Thymeleaf s imenom styledPage.html u našem predlošci / cssandjs mapa za korištenje ovih stilova:

    Dodajte CSS i JS u Thymeleaf Pažljivo oblikovan naslov
 Ovo je tekst na koji se želimo primijeniti vrlo posebno stil.

Tablicu stilova učitavamo pomoću oznake veze s Thymeleafovom posebnom th: href atribut. Ako smo koristili očekivanu strukturu direktorija, trebamo samo navesti put u nastavku src / main / resources / static. U ovom slučaju to je /styles/cssandjs/main.css. The @ {/ stilovi / cssandjs / main.css} sintaksa je Thymeleaf-ov način povezivanja URL-a.

Ako pokrenemo našu aplikaciju, vidjet ćemo da su primijenjeni naši stilovi:

3.3. Koristeći JavaScript

Dalje ćemo naučiti kako dodati JavaScript datoteku na našu stranicu Thymeleaf.

Počnimo s dodavanjem JavaScripta u datoteku u src / main / resources / static / js / cssandjs / actions.js:

funkcija showAlert () {alert ("Kliknut je gumb!"); }

Zatim se vraćamo na naš predložak Thymeleaf i dodajemo a oznaka koja upućuje na našu JavaScript datoteku:

Sada našu metodu pozivamo iz našeg predloška:

Prikaži upozorenje

Kada pokrenemo našu aplikaciju i kliknemo na Prikaži upozorenje gumb, vidjet ćemo prozor upozorenja.

Prije nego što završimo stvari, nadogradimo se na ovom primjeru naučivši kako koristiti podatke iz našeg Spring kontrolera u našem JavaScript-u.

Počnimo s modificiranjem našeg kontrolera kako bi našoj stranici dao ime:

@GetMapping ("/ styled-page") javni String getStyledPage (model modela) {model.addAttribute ("name", "Baeldung Reader"); povratak "cssandjs / styledPage"; }

Dalje, dodajmo funkciju u naš akcije.js datoteka za upotrebu ovog imena u upozorenju:

funkcija showName (name) {alert ("Evo naziva:" + ime); }

Konačno, da bismo pozvali našu funkciju s podacima iz našeg kontrolera, trebamo koristiti ugrađivanje skripti. Postavimo Ime vrijednost u lokalnoj JavaScript varijabli:

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

Radeći to, stvorili smo lokalnu JavaScript varijablu koja sadrži Ime vrijednost modela iz naše kontrole koju zatim možemo koristiti u našem JavaScript-u na ostatku stranice.

Sad kad smo to učinili, možemo pozvati našu JavaScript funkciju pomoću imeJs varijabla:

Prikaži ime

4. Zaključak

U ovom kratkom vodiču naučili smo kako primijeniti CSS stil i vanjsku JavaScript funkcionalnost na naše stranice Thymeleaf. Počeli smo s preporučenom strukturom direktorija i dogurali do JavaScript-a s podacima navedenima u našoj klasi Spring kontrolera.

Kao i uvijek, kôd je dostupan na GitHub-u.

streamalism.org