Spring Boot 视图层开发：主流模板引擎集成实战 | 极客日志

Javajava

Spring Boot 视图层开发：主流模板引擎集成实战

Spring Boot 视图层开发涉及多种模板引擎的选择与集成。本文对比了 Thymeleaf、Freemarker 和 Velocity 在 Spring Boot 中的配置流程，涵盖依赖引入、配置文件设置及模板语法差异。通过产品列表管理示例，展示了实体类、控制器与静态资源管理的完整链路，帮助开发者在实际项目中快速搭建后端渲染架构。

GitMaster发布于 2026/3/210 浏览

Spring Boot 视图层开发：主流模板引擎集成实战

Spring Boot 视图层与模板引擎

在这里插入图片描述

概述

在 Spring Boot Web 应用中，视图层主要负责页面渲染、数据展示以及用户交互。Spring Boot 本身不强制绑定特定的模板引擎，而是提供了对多种流行引擎的自动配置支持，其中 Thymeleaf、Freemarker 和 Velocity 是最常用的选择。

集成 Thymeleaf

Thymeleaf 是 Spring Boot 默认推荐的模板引擎，特别适合现代 HTML5 应用，它允许在浏览器中直接预览静态页面。

依赖与配置

首先需要在 pom.xml 中添加 Starter 依赖，并在配置文件中指定模板路径。

pom.xml

<dependencies>
    <!-- Web 依赖 -->
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-web</artifactId>
    </dependency>
    <!-- Thymeleaf 依赖 -->
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-thymeleaf</artifactId>
    </dependency>
    <!-- Data JPA 依赖 -->
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <>spring-boot-starter-data-jpa
    
    
    
        com.h2database
        h2
        runtime
    
    
    
        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
# JPA 配置
spring.jpa.hibernate.ddl-auto=update
spring.jpa.show-sql=true
# H2 数据库控制台
spring.h2.console.enabled=true
spring.h2.console.path=/h2-console
# Thymeleaf 配置
spring.thymeleaf.cache=false
spring.thymeleaf.prefix=classpath:/templates/
spring.thymeleaf.suffix=.html

import javax.persistence.*;

@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;

    public Product() {}

    public Product(String productId, String productName, double price, int sales) {
        this.productId = productId;
        this.productName = productName;
        this.price = price;
        this.sales = sales;
    }

    // Getter 和 Setter 方法省略，保持标准 JavaBean 规范
}

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);
        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";
    }
}

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>产品列表</title>
    <style>
        table { border-collapse: collapse; width: 100%; }
        th, td { border: 1px solid #ddd; padding: 8px; text-align: left; }
        th { background-color: #f2f2f2; }
        .add-product { margin-bottom: 20px; }
    </style>
</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>
    <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>
    <style>
        table { border-collapse: collapse; width: 100%; }
        th, td { border: 1px solid #ddd; padding: 8px; text-align: left; }
        th { background-color: #f2f2f2; }
        .add-product { margin-bottom: 20px; }
    </style>
</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>
    <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>
    <style>
        table { border-collapse: collapse; width: 100%; }
        th, td { border: 1px solid #ddd; padding: 8px; text-align: left; }
        th { background-color: #f2f2f2; }
        .add-product { margin-bottom: 20px; }
    </style>
</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>
    <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>

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