Voeg CSS en JS toe aan Thymeleaf

1. Inleiding

In deze korte tutorial leren we hoe we CSS en JavaScript kunnen gebruiken in onze Thymeleaf-sjablonen.

Eerst bespreken we de verwachte mappenstructuur, zodat we weten waar we onze bestanden moeten plaatsen. Daarna zullen we zien wat we moeten doen om toegang te krijgen tot die bestanden vanuit een Thymeleaf-sjabloon.

We beginnen met het toevoegen van CSS-stijl aan onze pagina en gaan dan verder met het toevoegen van wat JavaScript-functionaliteit.

2. Installatie

Laten we, om Thymeleaf in onze applicatie te gebruiken, de Spring Boot Starter voor Thymeleaf toevoegen aan onze Maven-configuratie:

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

3. Basisvoorbeeld

3.1. Directory-structuur

Ter herinnering: Thymeleaf is een sjabloonbibliotheek die eenvoudig kan worden geïntegreerd met Spring Boot-applicaties. Thymeleaf verwacht standaard dat we die sjablonen in het src / main / resources / templates map. We kunnen submappen maken, dus we gebruiken een submap met de naam cssandjs voor dit voorbeeld.

Voor CSS- en JavaScript-bestanden is de standaardmap src / main / resources / static. Laten we creëren static / styles / cssandjs en statisch / js / cssandjs mappen voor respectievelijk onze CSS- en JS-bestanden.

3.2. CSS toevoegen

Laten we een eenvoudig CSS-bestand maken met de naam main.css in onze static / styles / cssandjs map en definieer enkele basisstijlen:

h2 {font-family: sans-serif; lettergrootte: 1.5em; text-transform: hoofdletters; } sterk {font-weight: 700; achtergrondkleur: geel; } p {font-family: sans-serif; }

Laten we vervolgens een Thymeleaf-sjabloon maken met de naam styledPage.html in onze sjablonen / cssandjs map om deze stijlen te gebruiken:

    Voeg CSS en JS toe aan Thymeleaf Zorgvuldig vormgegeven koers
 Dit is tekst waarop we willen solliciteren heel speciaal styling.

We laden de stylesheet met behulp van de link-tag met Thymeleaf's special th: href attribuut. Als we de verwachte directorystructuur hebben gebruikt, hoeven we alleen het onderstaande pad op te geven src / main / resources / static. In dit geval is dat /styles/cssandjs/main.css. De @ {/ styles / cssandjs / main.css} syntaxis is de manier van Thymeleaf om URL's te linken.

Als we onze applicatie uitvoeren, zullen we zien dat onze stijlen zijn toegepast:

3.3. JavaScript gebruiken

Vervolgens gaan we leren hoe we een JavaScript-bestand aan onze Thymeleaf-pagina kunnen toevoegen.

Laten we beginnen met het toevoegen van wat JavaScript aan een bestand in src / main / resources / static / js / cssandjs / actions.js:

function showAlert () {alert ("Er is op de knop geklikt!"); }

Dan springen we terug naar onze Thymeleaf-sjabloon en voegen een tag die verwijst naar ons JavaScript-bestand:

Nu noemen we onze methode vanuit onze sjabloon:

Toon waarschuwing

Wanneer we onze applicatie starten en op het Toon waarschuwing knop, zien we het waarschuwingsvenster.

Laten we, voordat we afronden, een beetje op dit voorbeeld voortbouwen door te leren hoe we gegevens van onze Spring-controller in ons JavaScript kunnen gebruiken.

Laten we beginnen met het aanpassen van onze controller om een naam aan onze pagina te geven:

@GetMapping ("/ style-page") public String getStyledPage (Modelmodel) {model.addAttribute ("name", "Baeldung Reader"); retourneer "cssandjs / styledPage"; }

Laten we vervolgens een functie toevoegen aan onze actions.js bestand om deze naam in een waarschuwing te gebruiken:

functie showName (naam) {alert ("Hier is de naam:" + naam); }

Ten slotte, om onze functie aan te roepen met de gegevens van onze controller, moeten we script inlining gebruiken. Dus laten we de naam waarde in een lokale JavaScript-variabele:

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

Door dit te doen, hebben we een lokale JavaScript-variabele gemaakt die de naam modelwaarde van onze controle die we vervolgens in ons JavaScript op de rest van de pagina kunnen gebruiken.

Nu we dat hebben gedaan, kunnen we onze JavaScript-functie aanroepen met de naamJs variabele:

Toon naam

4. Conclusie

In deze korte tutorial hebben we geleerd hoe we CSS-stijl en externe JavaScript-functionaliteit kunnen toepassen op onze Thymeleaf-pagina's. We zijn begonnen met de aanbevolen directorystructuur en hebben ons opgewerkt tot het aanroepen van JavaScript met gegevens uit onze Spring-controllerklasse.

Zoals altijd is de code beschikbaar op GitHub.

streamalism.org