Spring Boot 视图层集成：Thymeleaf、Freemarker 与 Velocity 实战 | 极客日志

Javajava

Spring Boot 视图层集成：Thymeleaf、Freemarker 与 Velocity 实战

综述由AI生成Spring Boot 视图层开发涉及多种模板引擎选择。本文对比了 Thymeleaf、Freemarker 和 Velocity 的集成方式，涵盖依赖配置、静态资源管理及实际代码示例。通过统一后端逻辑，重点展示不同引擎在 HTML 模板中的语法差异，帮助开发者根据项目需求快速搭建 Web 界面。

CoderByte发布于 2026/3/22更新于 2026/5/95 浏览

Spring Boot 视图层集成：Thymeleaf、Freemarker 与 Velocity 实战

Spring Boot 视图层集成：Thymeleaf、Freemarker 与 Velocity 实战

在 Spring Boot 的 Web 开发中，视图层负责将后端数据渲染为前端页面。虽然现代前后端分离架构很流行，但在管理后台、传统企业应用或快速原型开发中，服务端渲染（SSR）依然高效且必要。Spring Boot 对主流模板引擎提供了开箱即用的支持，主要包括 Thymeleaf、Freemarker 和 Velocity。

1. 统一的后端基础

无论选择哪种模板引擎，后端的实体类、Repository 和 Controller 逻辑基本一致。为了减少重复代码，我们首先搭建好通用的数据模型和控制层。

依赖配置

在 pom.xml 中引入 Web 和数据访问依赖即可，具体模板引擎依赖会在后续章节单独添加。

<dependencies>
    <!-- Web 依赖 -->
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-web</artifactId>
    </dependency>
    <!-- Data JPA 依赖 -->
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-data-jpa</artifactId>
    </dependency>
    <!-- H2 数据库依赖 (仅用于演示) -->
    <dependency>
        <groupId>com.h2database</groupId>
        <artifactId>h2</artifactId>
        <scope>runtime</scope>
    
    
    
        org.springframework.boot
        spring-boot-starter-test
        test

server.port=8080
spring.datasource.url=jdbc:h2:mem:testdb
spring.datasource.driver-class-name=org.h2.Driver
spring.datasource.username=sa
spring.datasource.password=password
spring.jpa.hibernate.ddl-auto=update
spring.jpa.show-sql=true
spring.h2.console.enabled=true
spring.h2.console.path=/h2-console

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/Setter 省略...
    public Product() {}
    
    public Product(String productId, String productName, double price, int sales) {
        this.productId = productId;
        this.productName = productName;
        this.price = price;
        this.sales = sales;
    }

    public Long getId() { return id; }
    public void setId(Long id) { this.id = id; }
    public String getProductId() { return productId; }
    public void setProductId(String productId) { this.productId = productId; }
    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/";
    }

    @GetMapping("/top-selling")
    public String getTopSellingProducts(@RequestParam int topN, Model model) {
        List<Product> products = productRepository.findBySalesGreaterThan(0);
        products.sort((p1, p2) -> p2.getSales() - p1.getSales());
        if (products.size() > topN) {
            products = products.subList(0, topN);
        }
        model.addAttribute("products", products);
        return "products";
    }
}

spring.thymeleaf.cache=false
spring.thymeleaf.prefix=classpath:/templates/
spring.thymeleaf.suffix=.html

<!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>产品 ID：</label>
            <input type="text" th:field="*{productId}" required><br>
            <label>产品名称：</label>
            <input type="text" th:field="*{productName}" required><br>
            <label>价格：</label>
            <input type="number" th:field="*{price}" step="0.01" required><br>
            <label>销量：</label>
            <input type="number" th:field="*{sales}" required><br>
            <button type="submit">添加产品</button>
        </form>
    </div>

    <!-- 查询表单 -->
    <div>
        <form th:action="@{/products/top-selling}" method="get">
            <label>销量 TOP：</label>
            <input type="number" name="topN" value="3" min="1" required>
            <button type="submit">查询</button>
        </form>
    </div>

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

spring.freemarker.cache=false
spring.freemarker.prefix=classpath:/templates/
spring.freemarker.suffix=.ftl

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>产品列表</title>
    <link rel="stylesheet" href="/css/style.css">
</head>
<body>
    <h1>产品列表</h1>
    
    <div>
        <form action="/products/" method="post">
            <label>产品 ID：</label>
            <input type="text" name="productId" required><br>
            <label>产品名称：</label>
            <input type="text" name="productName" required><br>
            <label>价格：</label>
            <input type="number" name="price" step="0.01" required><br>
            <label>销量：</label>
            <input type="number" name="sales" required><br>
            <button type="submit">添加产品</button>
        </form>
    </div>

    <div>
        <form action="/products/top-selling" method="get">
            <label>销量 TOP：</label>
            <input type="number" name="topN" value="3" min="1" required>
            <button type="submit">查询</button>
        </form>
    </div>

    <table>
        <thead>
            <tr><th>ID</th><th>产品 ID</th><th>产品名称</th><th>价格</th><th>销量</th></tr>
        </thead>
        <tbody>
            <#list products as product>
            <tr>
                <td>${product.id}</td>
                <td>${product.productId}</td>
                <td>${product.productName}</td>
                <td>${product.price?string("###,###.00")}</td>
                <td>${product.sales}</td>
            </tr>
            </#list>
        </tbody>
    </table>
</body>
</html>

spring.velocity.cache=false
spring.velocity.prefix=classpath:/templates/
spring.velocity.suffix=.vm

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>产品列表</title>
    <link rel="stylesheet" href="/css/style.css">
</head>
<body>
    <h1>产品列表</h1>
    
    <div>
        <form action="/products/" method="post">
            <label>产品 ID：</label>
            <input type="text" name="productId" required><br>
            <label>产品名称：</label>
            <input type="text" name="productName" required><br>
            <label>价格：</label>
            <input type="number" name="price" step="0.01" required><br>
            <label>销量：</label>
            <input type="number" name="sales" required><br>
            <button type="submit">添加产品</button>
        </form>
    </div>

    <div>
        <form action="/products/top-selling" method="get">
            <label>销量 TOP：</label>
            <input type="number" name="topN" value="3" min="1" required>
            <button type="submit">查询</button>
        </form>
    </div>

    <table>
        <thead>
            <tr><th>ID</th><th>产品 ID</th><th>产品名称</th><th>价格</th><th>销量</th></tr>
        </thead>
        <tbody>
            #foreach ($product in $products)
            <tr>
                <td>$product.id</td>
                <td>$product.productId</td>
                <td>$product.productName</td>
                <td>$product.price.format("###,###.00")</td>
                <td>$product.sales</td>
            </tr>
            #end
        </tbody>
    </table>
</body>
</html>