Spring Boot 视图层架构与主流模板引擎集成实战 | 极客日志

Javajava

Spring Boot 视图层架构与主流模板引擎集成实战

Spring Boot 视图层开发涉及多种模板引擎选择，涵盖 Thymeleaf、Freemarker 及 Velocity 的集成配置。文章详细演示了后端实体类、Repository 及控制器的通用搭建流程，并对比了各引擎在模板语法上的差异。此外还包含静态资源管理方案与实际应用场景示例，帮助开发者快速构建 Web 界面。

指针猎手发布于 2026/3/270 浏览

Spring Boot 视图层架构与主流模板引擎集成实战

Spring Boot 视图层与模板引擎

视图层示意图

在 Spring Boot Web 开发中，视图层负责将后端数据渲染为前端页面。选择合适的模板引擎能显著提升开发效率与代码可维护性。本文将深入探讨 Spring Boot 视图层的构建方法，重点对比 Thymeleaf、Freemarker 和 Velocity 的集成细节。

一、视图层核心组件概览

Spring Boot 内置了对多种模板引擎的支持，常见的包括：

Thymeleaf：现代语义化模板，支持自然模板，生态最活跃。
Freemarker：功能强大，适合复杂逻辑处理。
Velocity：轻量级，语法简洁。

此外，静态资源（CSS、JS、图片）的管理也是视图层不可或缺的一环，通常放置在 src/main/resources/static 目录下。

二、后端基础搭建

无论使用哪种模板引擎，后端的实体类、Repository 及控制器结构基本一致。我们先统一搭建好这部分基础，后续只需关注模板文件的差异。

1. 依赖配置 (pom.xml)

<dependencies>
    <!-- Web 依赖 -->
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-web</artifactId>
    </dependency>
    <!-- JPA 数据访问 -->
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-data-jpa</artifactId>
    </dependency>
    <!-- H2 内存数据库 -->
    <dependency>
        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

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

@Repository
public interface ProductRepository extends JpaRepository<Product, Long> {
    List<Product> findBySalesGreaterThan(int 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";
    }
}

<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>

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

    <!-- 查询 TOP N -->
    <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>

<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-freemarker</artifactId>
</dependency>

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>

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

<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-velocity</artifactId>
    <version>1.5.22.RELEASE</version>
</dependency>

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>

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

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