如何使用Thymeleaf以非表格形式遍历展示对象列表？

完全可以实现这个需求，Thymeleaf的遍历语法和表达式支持正好适配这种动态生成卡片式布局的场景，以下是具体实现步骤：

1. 后端准备数据 #

假设你有一个封装应用信息的实体类（比如App），包含以下核心属性：

public class App {
    private String name;       // 应用名称
    private String description;// 应用描述
    private String imageName;  // 图片文件名（如"todo-app.png"）
    // 省略getter/setter
}

后端将应用列表数据存入Model，传递给前端：

@GetMapping("/apps")
public String showApps(Model model) {
    List<App> appList = // 从数据库/配置中获取应用列表
    model.addAttribute("appList", appList);
    return "app-list"; // 对应你的HTML视图文件名
}

2. 改造静态HTML卡片结构 #

找到你已有的静态卡片代码，用Thymeleaf标签替换静态内容，实现动态遍历：

静态示例（参考） #

<div class="card-container">
    <div class="card">
        <img src="/images/todo-app.png" alt="待办应用">
        <h3>待办应用</h3>
        <p>高效管理日常任务的工具</p>
    </div>
    <!-- 更多静态卡片... -->
</div>

动态改造后代码 #

<div class="card-container">
    <!-- 遍历appList集合，每个循环项命名为app -->
    <div class="card" th:each="app : ${appList}">
        <!-- 动态生成图片路径，假设图片存放在/static/images/目录下 -->
        <img th:src="@{/images/{img}(img=${app.imageName})}" th:alt="${app.name}">
        <!-- 动态填充应用名称 -->
        <h3 th:text="${app.name}">应用名称</h3>
        <!-- 动态填充应用描述 -->
        <p th:text="${app.description}">应用描述</p>
    </div>
    <!-- 空数据提示 -->
    <div th:if="${#lists.isEmpty(appList)}" class="empty-tip">
        暂无可用应用
    </div>
</div>

关键标签说明 #

• th:each="app : ${appList}"：遍历Model中的appList集合，每次循环将当前应用对象赋值给app变量
• th:src="@{/images/{img}(img=${app.imageName})}"：Thymeleaf URL表达式，自动拼接上下文路径，避免部署时的路径问题
• th:text="${app.name}"：将对象属性值填充到标签中，静态文本作为默认占位符（页面未渲染时显示）

3. 样式兼容 #

你已有的卡片布局CSS（比如Flex/Grid排列卡片的样式）无需修改，Thymeleaf生成的DOM结构和静态版本完全一致，样式会自动生效。

内容的提问来源于stack exchange，提问作者Syed