Preskoči na glavni sadržaj

Spring Boot integracija Thymeleaf template engine-a

Chenmo Wang ErJava enterprise razvojSpring Boot602 reči2 minuta

O Thymeleaf-u

Thymeleaf je odličan HTML šablon orijentisan ka Javi, sa bogatim jezikom oznaka i funkcijama. Nakon što je JSP izašao iz upotrebe, Thymeleaf ga je zamenio i postao šablon koji Spring Boot preporučuje.

Thymeleaf može normalno da radi i u okruženjima sa i bez mrežne konekcije; omogućava dizajnerima da u pregledaču vide statički izgled stranice, a programerima da na serveru vide dinamički izgled stranice sa podacima.

To je zato što Thymeleaf podržava HTML prototip — dodatnim atributima u HTML oznakama postiže način prikaza šablon + podaci.

Pregledač pri tumačenju HTML-a zanemaruje nedefinisane atribute oznaka, pa Thymeleaf može da radi statički; kada se podaci vrate na stranicu, Thymeleaf oznake dinamički zamenjuju statički sadržaj.

U nastavku su navedeni neki od često korišćenih Thymeleaf izraza, oznaka i funkcija.

1)Često korišćeni izrazi

  • ${...} izraz promenljive
  • *{...} izraz selekcije
  • #{...} izraz poruke
  • @{...} URL izraz
  • #maps izraz objekta

2)Često korišćene oznake

  • th:action definiše putanju kontrolora na serveru.
  • th:each naredba petlje
  • th:field polje forme
  • th:href URL link
  • th:id ID unutar div oznake
  • th:if uslovna provera
  • th:include uključuje fajl
  • th:fragment definiše isečak koda
  • th:object zamenjuje objekat
  • th:src adresa slike
  • th:text tekst
  • th:value vrednost atributa

3)Često korišćene funkcije

  • #dates funkcija za datume
  • #lists funkcija za liste
  • #arrays funkcija za nizove
  • #strings funkcija za stringove
  • #numbers funkcija za brojeve
  • #calendars funkcija za kalendar
  • #objects funkcija za objekte
  • #bools funkcija za logičke vrednosti

Za više Thymeleaf izraza, oznaka, funkcija i slično, posetite zvaničnu stranicu Thymeleaf-a:

https://www.thymeleaf.org/

Integracija Thymeleaf-a

Prvi korak: u pom.xml dodajte Thymeleaf starter.

<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>

Drugi korak: u application.yml dodajte konfiguraciju za Thymeleaf.

spring:
  thymeleaf:
    cache: false # tokom razvoja isključite keš, inače se stranica ne vidi u realnom vremenu

Za ostale konfiguracione stavke dovoljno je ostaviti podrazumevane vrednosti; ako želite da vidite koje su podrazumevane, globalno otvorite klasu ThymeleafProperties.java.

Thymeleaf template engine podrazumevano čita direktorijum templates u okviru direktorijuma resources; taj direktorijum služi za čuvanje HTML stranica.

Treći korak: napravite kontroler UserController.java.

@Controller
@RequestMapping("/user")
public class UserController {
    @Resource
    private UserService userService;

    @RequestMapping("/all")
    public String all(Model model) {
        model.addAttribute("users", userService.findAll());
        return "all";
    }
}
  • Anotacija @Controller ukazuje da je klasa kontroler.
  • Anotacija @RequestMapping služi za mapiranje adrese zahteva; može se koristiti na klasi ili na metodu.
  • Interfejs Model može da nosi podatke pročitane iz baze, a frontend ih može preuzeti iz modela.

Četvrti korak: u direktorijum resources/templates kreirajte fajl all.html (ime fajla odgovara stringu koji vraća metod all u kontroleru).

<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="content-type" content="text/html;charset=utf-8">
    <title>Thymeleaf</title>
</head>
<body>
    <table>
        <tr>
            <td>Korisničko ime</td>
            <td>Lozinka</td>
        </tr>
        <tr th:each="user:${users}">
            <td th:text="${user.name}"></td>
            <td th:text="${user.password}"></td>
        </tr>
    </table>
</body>
</html>

<html lang="zh" xmlns:th="http://www.thymeleaf.org"> jeste namespace Thymeleaf-a; uvođenjem namespace-a u HTML fajlu može se koristiti jezik oznaka Thymeleaf-a, pri čemu se oznake obeležavaju ključnom reči "th".

Peti korak: pokrenite glavnu klasu; ako vidite sledeću poruku, pokretanje je uspelo.

Šesti korak: u adresnu traku pregledača unesite http://localhost:8080/user/all kako biste pristupili interfejsu.

HTTP Client

Adresa izvornog koda