Spring Boot 视图层与模板引擎详解 | 极客日志

Javajava

Spring Boot 视图层与模板引擎详解

Spring Boot 视图层构建涉及多种模板引擎的选择与集成。对比 Thymeleaf、Freemarker 和 Velocity 的核心特性，展示依赖配置、控制器逻辑及静态资源管理的具体实现。通过产品管理系统案例，解析从实体类定义到页面渲染的全流程，提供实际开发中的选型建议与避坑指南。

292440837发布于 2026/3/23更新于 2026/5/1120 浏览

Spring Boot 视图层与模板引擎详解

Spring Boot 视图层与模板引擎详解

在 Spring Boot Web 应用中，视图层负责将数据渲染为用户可交互的页面。选择合适的模板引擎不仅能提升开发效率，还能确保代码的可维护性。本文将深入探讨 Spring Boot 中三种主流模板引擎（Thymeleaf、Freemarker、Velocity）的集成方式与核心差异，并通过一个完整的产品管理系统案例，展示从依赖配置到静态资源管理的全流程实践。

视图层概述

Spring Boot 的视图层主要通过模板引擎实现动态内容渲染。常见的组件包括 Thymeleaf、Freemarker 和 Velocity。它们各自拥有独特的语法特性，但集成到 Spring Boot 中的基本模式是相似的：引入 Starter、配置属性、编写控制器与模板。

集成 Thymeleaf

Thymeleaf 是目前 Spring Boot 生态中最推荐的默认模板引擎，它支持原生 HTML 解析，非常适合前后端分离前的传统服务端渲染场景。

1. 依赖与配置

首先需要在 pom.xml 中添加 spring-boot-starter-thymeleaf 依赖。同时，在 application.properties 中配置缓存策略及模板路径，通常建议开发环境关闭缓存以便即时预览修改。

<dependencies>
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-web</artifactId>
    </dependency>
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-thymeleaf</artifactId>
    </dependency>
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-data-jpa</artifactId>
    </dependency>
    
        com.h2database
        h2
        runtime

server.port=8080
spring.datasource.url=jdbc:h2:mem:testdb
spring.datasource.driver-class-name=org.h2.Driver
spring.jpa.hibernate.ddl-auto=update
spring.thymeleaf.cache=false
spring.thymeleaf.prefix=classpath:/templates/
spring.thymeleaf.suffix=.html

import javax.persistence.*;
import java.util.List;

@Entity
@Table(name = "product")
public class Product {
    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private Long id;
    private String productId;
    private String productName;
    private double price;
    private int sales;

    // Getter and Setter methods omitted for brevity
    public Long getId() { return id; }
    public void setId(Long id) { this.id = id; }
    public String getProductName() { return productName; }
    public void setProductName(String productName) { this.productName = productName; }
    public double getPrice() { return price; }
    public void setPrice(double price) { this.price = price; }
    public int getSales() { return sales; }
    public void setSales(int sales) { this.sales = sales; }
}

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.*;
import java.util.List;

@Controller
@RequestMapping("/products")
public class ProductController {
    @Autowired
    private ProductRepository productRepository;

    @GetMapping("/")
    public String getAllProducts(Model model) {
        List<Product> products = productRepository.findAll();
        model.addAttribute("products", products);
        model.addAttribute("product", new Product());
        return "products";
    }

    @PostMapping("/")
    public String addProduct(@ModelAttribute Product product) {
        productRepository.save(product);
        return "redirect:/products/";
    }
}

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>产品列表</title>
    <link rel="stylesheet" th:href="@{/css/style.css}">
</head>
<body>
    <h1>产品列表</h1>
    
    <!-- 添加表单 -->
    <div class="add-product">
        <form th:action="@{/products/}" method="post" th:object="${product}">
            <label>产品名称：</label>
            <input type="text" th:field="*{productName}" required><br>
            <label>价格：</label>
            <input type="number" th:field="*{price}" step="0.01" required><br>
            <button type="submit">添加产品</button>
        </form>
    </div>

    <!-- 数据展示 -->
    <table>
        <thead>
            <tr><th>ID</th><th>名称</th><th>价格</th></tr>
        </thead>
        <tbody>
            <tr th:each="product : ${products}">
                <td th:text="${product.id}"></td>
                <td th:text="${product.productName}"></td>
                <td th:text="${#numbers.formatDecimal(product.price, 0, 'COMMA', 2, 'POINT')}"></td>
            </tr>
        </tbody>
    </table>
</body>
</html>

<!DOCTYPE html>
<html>
<body>
    <#list products as product>
        <tr>
            <td>${product.id}</td>
            <td>${product.productName}</td>
            <td>${product.price?string("###.00")}</td>
        </tr>
    </#list>
</body>
</html>

<!DOCTYPE html>
<html>
<body>
    #foreach ($product in $products)
        <tr>
            <td>$product.id</td>
            <td>$product.productName</td>
            <td>$product.price</td>
        </tr>
    #end
</body>
</html>

/* src/main/resources/static/css/style.css */
table { border-collapse: collapse; width: 100%; }
th, td { border: 1px solid #ddd; padding: 8px; }