Spring Boot 集成 Thymeleaf 的快速实现示例，无法渲染页面问题解决

以下是一个完整的 ​​Spring Boot 集成 Thymeleaf​​ 的快速实现示例，包含代码、配置和项目结构说明。所有步骤均基于最新实践整理，可直接用于开发。

---

1. ​​项目依赖（pom.xml）​​

添加 Spring Boot Web 和 Thymeleaf 依赖：

    
    
        org.springframework.boot
        spring-boot-starter-web
    
    
    
        org.springframework.boot
        spring-boot-starter-thymeleaf
    
    
    
        org.springframework.boot
        spring-boot-devtools
        runtime
    

---

2. ​​配置文件（application.yml）​​

配置模板路径、缓存等（开发阶段建议关闭缓存）：

spring:
  thymeleaf:
    prefix: classpath:/templates/  # 模板存放目录
    suffix: .html                  # 文件后缀
    cache: false                   # 禁用缓存（开发环境）
    encoding: UTF-8                # 编码
    mode: HTML                     # 模板模式

---

3. ​​项目结构​​

src/
├── main/
│   ├── java/
│   │   └── com/example/demo/
│   │       ├── DemoApplication.java   # 启动类
│   │       └── controller/
│   │           └── HelloController.java  # 控制器
│   ├── resources/
│       ├── static/    # 静态资源（CSS/JS）
│       └── templates/ # Thymeleaf 模板
│           └── hello.html

---

4. ​​启动类（DemoApplication.java）​​

package com.example.demo;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

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

---

5. ​​控制器（HelloController.java）​​

处理请求并传递数据到模板：

package com.example.demo.controller;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;

@Controller
public class HelloController {
    
    @GetMapping("/hello")
    public String hello(Model model) {
        // 向模板传递数据
        model.addAttribute("name", "Thymeleaf");
        model.addAttribute("users", new String[]{"Alice", "Bob", "Charlie"});
        return "hello"; // 对应 templates/hello.html
    }
}

重点、重点、重点：

注解用@Controller ，而不是@RestController

因为@RestController包括

@Controller
@ResponseBody

会导致，页面只显示"hello"，不渲染页面。

API需要返回数据类容，API要加注解@ResponseBody

---

6. ​​Thymeleaf 模板（hello.html）​​

使用 Thymeleaf 语法渲染动态内容：

    


    
默认文本（无数据时显示）
    
    
    
用户列表：
    
    
    

        

    
    
    
    

        
        提交
    

---

7. ​​运行与验证​​

1. 启动 DemoApplication 主类。
2. 访问 http://localhost:8080/hello，页面将显示：
   • 标题：Hello, Thymeleaf!
   • 用户列表：Alice、Bob、Charlie
   • 表单输入框

---

8. ​​关键功能说明​​

​​功能​​	​​实现方式​​
​​数据绑定​​	通过 model.addAttribute("key", value) 传递数据，模板中用 ${key} 引用
​​条件渲染​​	th:if / th:unless 控制元素显示
​​循环遍历​​	th:each="item : ${list}" 遍历集合
​​表单绑定​​	th:action="@{/url}" 和 th:field="*{fieldName}" 绑定表单数据
​​静态资源引用​​	使用 @{/path/to/resource} 引用 static/ 目录下的 CSS/JS

---

扩展：表单提交处理

// 表单提交处理示例
@PostMapping("/submit")
public String submitForm(@RequestParam String username) {
    System.out.println("收到用户名：" + username);
    return "redirect:/success"; // 重定向到成功页
}