java thymeleaf如何使用相对路径下的html文件-CFANZ编程社区

Java Thymeleaf与相对路径下HTML文件的使用

在现代Web开发中，Java和Thymeleaf的结合成为了构建动态网页的一种常见方式。Thymeleaf是一个非常流行的Java模板引擎，它使得在服务器端生成动态HTML变得更加简单和优雅。本文将探讨如何在Java中使用Thymeleaf通过相对路径加载HTML文件，并解决实际项目中可能遇到的问题。

什么是Thymeleaf？

Thymeleaf是一个现代的服务器端Java模板引擎，它能够用来渲染Web页面、生成电子邮件内容或SVG图形等。与JSP等传统模板引擎相比，Thymeleaf提供了更好的可读性和可维护性，其语法相对简单易懂。

使用相对路径

在实际的Java开发过程中，往往需要将HTML文件放在项目的某个特定目录中，例如src/main/resources/templates。Thymeleaf会自动查找此位置中的HTML文件。因此，在项目中使用相对路径可以使模板的管理和维护变得更加高效。

实际问题

假设我们正在开发一个简单的Web应用程序，其中我们需要动态展示用户的信息和统计数据。我们希望在首页上展示用户的注册统计情况，以便更好地了解用户行为及趋势。

项目结构

为了实现上述功能，我们可以创建一个简单的Spring Boot项目，目录结构大致如下：

my-thymeleaf-app
│
├── src
│   ├── main
│   │   ├── java
│   │   │   └── com
│   │   │       └── example
│   │   │           └── mythymeleafapp
│   │   │               ├── MyThymeleafApp.java
│   │   │               └── controller
│   │   │                   └── UserController.java
│   │   └── resources
│   │       ├── static
│   │       └── templates
│   │           └── userStats.html
└── pom.xml

代码示例

创建Spring Boot应用入口

首先，在MyThymeleafApp.java中创建Spring Boot应用程序的入口。

package com.example.mythymeleafapp;

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

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

创建Controller

接下来，在UserController.java中，创建一个简单的控制器来处理用户统计数据的请求。

package com.example.mythymeleafapp.controller;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;

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

@Controller
public class UserController {

    @GetMapping("/user/stats")
    public String getUserStats(Model model) {
        // 模拟用户数据
        Map<String, Integer> userStats = new HashMap<>();
        userStats.put("新注册用户", 120);
        userStats.put("活跃用户", 80);
        userStats.put("停用用户", 30);

        model.addAttribute("userStats", userStats);
        return "userStats"; // 视图名称，Thymeleaf会自动加载src/main/resources/templates/userStats.html
    }
}

创建Thymeleaf模板

最后，在userStats.html中创建HTML模板来展示用户统计信息。

<!DOCTYPE html>
<html xmlns:th="
<head>
    <meta charset="UTF-8">
    <title>用户统计信息</title>
</head>
<body>
    用户统计信息
    <table>
        <thead>
            <tr>
                <th>统计项</th>
                <th>数量</th>
            </tr>
        </thead>
        <tbody>
            <tr th:each="stat : ${userStats}">
                <td th:text="${stat.key}">统计项</td>
                <td th:text="${stat.value}">数量</td>
            </tr>
        </tbody>
    </table>

    <h2>用户分布饼状图</h2>
    <div class="mermaid">
      pie
        title 用户分布
        "新注册用户" : 120
        "活跃用户" : 80
        "停用用户" : 30
    </div>
</body>
</html>