ZetCode

Spring Boot Thymeleaf

最后修改于 2023 年 7 月 29 日

在本文中，我们将展示如何使用Thymeleaf模板引擎和H2数据库创建一个简单的Spring Boot Web应用程序。

Spring 是一个流行的 Java 应用程序框架。Spring Boot 旨在以最小的努力创建独立的、生产级的基于 Spring 的应用程序。

H2 是一个完全用 Java 编写的开源关系数据库管理系统。它可以嵌入到 Java 应用程序中，也可以在客户端-服务器模式下运行。它易于部署和安装，并且占用资源少。

Thymeleaf

Thymeleaf是一个现代的服务器端Java模板引擎，适用于Web和独立环境。它基于自然模板的概念：可以直接在浏览器中打开并仍然正确显示为网页的模板文件。

Spring Boot Thymeleaf 示例

下一个示例创建了一个使用Thymeleaf引擎的Spring Boot Web应用程序。数据存储在H2数据库中。

build.gradle
...
src
├── main
│   ├── java
│   │   └── com
│   │       └── zetcode
│   │           ├── Application.java
│   │           ├── controller
│   │           │   └── MyController.java
│   │           ├── model
│   │           │   └── City.java
│   │           └── service
│   │               ├── CityService.java
│   │               └── ICityService.java
│   └── resources
│       ├── application.properties
│       ├── application.yml
│       ├── data-h2.sql
│       ├── schema-h2.sql
│       ├── static
│       │   └── css
│       │       └── style.css
│       └── templates
│           ├── cities.html
│           └── index.html
└── test
    ├── java
    └── resources

这是项目结构。Thymeleaf模板文件默认位于src/main/resources/templates目录中。

build.gradle 
plugins {
    id 'org.springframework.boot' version '3.1.1'
    id 'io.spring.dependency-management' version '1.1.0'
    id 'java'
}

group = 'com.zetcode'
version = '0.0.1-SNAPSHOT'
sourceCompatibility = '17'

repositories {
    mavenCentral()
}

dependencies {
    implementation 'org.springframework.boot:spring-boot-starter-jdbc'
    implementation 'org.springframework.boot:spring-boot-starter-web'
    implementation 'org.springframework.boot:spring-boot-starter-thymeleaf'

    runtimeOnly 'com.h2database:h2'
}

spring-boot-starter-thymeleaf是一个用于构建带有Thymeleaf的Spring MVC应用程序的启动器。spring-boot-starter-jdbc是一个用于在Spring Boot中使用JDBC的启动器。h2包含H2数据库引擎。

com/zetcode/model/City.java 
package com.zetcode.model;

import java.util.Objects;
import java.util.StringJoiner;

public class City {

    private Long id;
    private String name;
    private int population;

    public City() {
    }

    public City(Long id, String name, int population) {
        this.id = id;
        this.name = name;
        this.population = population;
    }

    public Long getId() {
        return id;
    }

    public void setId(Long id) {
        this.id = id;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public int getPopulation() {
        return population;
    }

    public void setPopulation(int population) {
        this.population = population;
    }

    @Override
    public boolean equals(Object o) {
        if (this == o) return true;
        if (o == null || getClass() != o.getClass()) return false;
        City city = (City) o;
        return population == city.population &&
                Objects.equals(id, city.id) &&
                Objects.equals(name, city.name);
    }

    @Override
    public int hashCode() {
        return Objects.hash(id, name, population);
    }

    @Override
    public String toString() {
        return new StringJoiner(", ", City.class.getSimpleName() + "[", "]")
                .add("id=" + id)
                .add("name='" + name + "'")
                .add("population=" + population)
                .toString();
    }
}

这是City模型类。它包含项目ID、名称和人口属性。

resources/application.yml 
spring:
  main:
    banner-mode: off
    log-startup-info: false
  sql:
    init:
      platform: h2

application.yml是主要的Spring Boot配置文件。通过banner-mode属性，我们关闭了Spring横幅。通过log-startup-info属性，我们关闭了Spring Boot启动日志消息。平台值用于SQL初始化脚本：schema-${platform}.sql和data-${platform}.sql。

请注意，我们没有配置数据源；如果没有任何配置数据，Spring会自动在内存模式下配置H2。我们希望有一个内存数据库，所以我们让Spring自动配置。

resources/schema-h2.sql 
CREATE TABLE cities(id BIGINT PRIMARY KEY AUTO_INCREMENT,
    name VARCHAR(255), population INT);

此 SQL 脚本创建 cities 表。

resources/data-h2.sql 
INSERT INTO cities(name, population) VALUES('Bratislava', 432000);
INSERT INTO cities(name, population) VALUES('Budapest', 1759000);
INSERT INTO cities(name, population) VALUES('Prague', 1280000);
INSERT INTO cities(name, population) VALUES('Warsaw', 1748000);
INSERT INTO cities(name, population) VALUES('Los Angeles', 3971000);
INSERT INTO cities(name, population) VALUES('New York', 8550000);
INSERT INTO cities(name, population) VALUES('Edinburgh', 464000);
INSERT INTO cities(name, population) VALUES('Berlin', 3671000);

此脚本用数据填充表。这两个脚本都位于类路径的根目录。

com/zetcode/service/ICityService.java 
package com.zetcode.service;

import com.zetcode.model.City;
import java.util.List;

public interface ICityService {

    List<City> findAll();
}

ICityService 提供了一个契约方法，用于从数据源获取所有城市。

com/zetcode/service/CityService.java 
package com.zetcode.service;

import com.zetcode.model.City;
import org.springframework.jdbc.core.BeanPropertyRowMapper;
import org.springframework.jdbc.core.JdbcTemplate;
import org.springframework.stereotype.Service;

import java.util.List;

@Service
public class CityService implements ICityService {

    private final JdbcTemplate jtm;

    public CityService(JdbcTemplate jtm) {
        this.jtm = jtm;
    }

    @Override
    public List<City> findAll() {

        String sql = "SELECT * FROM cities";

        return jtm.query(sql, new BeanPropertyRowMapper<>(City.class));
    }
}

CityService 包含 findAll 方法的实现。我们借助 JdbcTemplate 从 cities 表中检索所有城市。

private final JdbcTemplate jtm;

public CityService(JdbcTemplate jtm) {
    this.jtm = jtm;
}

JdbcTemplate 已注入。

String sql = "SELECT * FROM cities";

这是要执行的SQL。我们从 cities 表中选择所有城市。

return jtm.query(sql, new BeanPropertyRowMapper<>(City.class));

BeanPropertyRowMapper 将一行转换为指定映射目标类的新实例。

com/zetcode/controller/MyController.java 
package com.zetcode.controller;

import com.zetcode.model.City;
import com.zetcode.service.ICityService;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.servlet.ModelAndView;

import java.util.HashMap;
import java.util.List;
import java.util.Map;

@Controller
public class MyController {

    private final ICityService cityService;

    public MyController(ICityService cityService) {
        this.cityService = cityService;
    }

    @GetMapping("/")
    public String index(Model model) {

        return "index";
    }

    @GetMapping("/cities")
    public ModelAndView showCities() {

        List<City> cities = cityService.findAll();

        Map<String, Object> params = new HashMap<>();
        params.put("cities", cities);

        return new ModelAndView("cities", params);
    }
}

这是Spring Boot Web应用程序的控制器类。控制器用@Controller注解修饰。控制器有两个映射：一个用于主页，一个用于列出所有城市。

private final ICityService cityService;

public MyController(ICityService cityService) {
    this.cityService = cityService;
}

我们将CityService注入到字段中。

@GetMapping("/")
public String index(Model model) {

    return "index";
}

"index"是位于预定义的template目录中的视图的名称。它是一个简单的静态主页。

@GetMapping("/cities")
public ModelAndView showCities() {

    List<City> cities = cityService.findAll();

    Map<String, Object> params = new HashMap<>();
    params.put("cities", cities);

    return new ModelAndView("cities", params);
}

此控制器方法提供城市列表。我们从城市服务中找到所有城市对象，并将结果列表放入参数中。Spring将找到名为cities的Thymeleaf视图，并让引擎将模板与模型数据连接起来。

resources/static/css/style.css 
h2 {color: blue}

style.css是一个静态文件，位于src/main/resources/static/css目录中。它将h2标签设置为蓝色。

resources/templates/index.html 
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
    <head>
        <title>Home page</title>
        <meta charset="UTF-8"/>
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    </head>
    <body>
        <a href="cities">Show cities</a>
    </body>
</html>

index.html是应用程序的主页。它包含一个检索所有城市的链接。

resources/templates/cities.html 
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <title>Cities</title>
    <link rel="stylesheet" th:href="@{/css/style.css}" />
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body>

<h2>List of cities</h2>

<table>

    <tr>
        <th>Id</th>
        <th>Name</th>
        <th>Population</th>
    </tr>

    <tr th:each="city : ${cities}">
        <td th:text="${city.id}">id</td>
        <td th:text="${city.name}">name</td>
        <td th:text="${city.population}">price</td>
    </tr>

</table>

</body>
</html>

cities.html是一个Thymeleaf模板文件，其中包含要用来自模型的数据填充的占位符。要访问数据，我们使用${}变量表达式。

<link rel="stylesheet" th:href="@{/css/style.css}" />

我们使用Thymeleaf链接表达式@{}包含静态CSS文件。链接表达式会自动添加服务器上下文路径。

<tr th:each="city : ${cities}">
    <td th:text="${city.id}">id</td>
    <td th:text="${city.name}">name</td>
    <td th:text="${city.population}">price</td>
</tr>

我们遍历城市列表，并将每个城市的详细信息放入一个表格行中。

com/zetcode/Application.java 
package com.zetcode;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

@SpringBootApplication
public class Application {

    public static void main(String[] args) {
        SpringApplication.run(Application.class, args);
    }
}

我们设置Spring Boot应用程序。 @SpringBootApplication 注解启用自动配置和组件扫描。

$ ./gradlew bootRun

我们运行应用程序并定位到localhost:8080。

在本文中，我们使用Thymeleaf和H2创建了一个Spring Boot Web应用程序。

作者

我叫Jan Bodnar，是一个充满激情的程序员，拥有丰富的编程经验。自2007年以来，我一直在撰写编程文章。到目前为止，我撰写了超过1,400篇文章和8本电子书。我拥有超过十年的编程教学经验。

列出 所有 Spring Boot 教程。