FreeMarker列表的创建、添加及删除操作咨询（结合HTML）

1. 创建列表 #

FreeMarker作为模板引擎，列表数据通常由后端传入模板，再渲染为HTML列表。以下是完整示例：

后端数据准备（Java示例） #

// 构造列表数据
List<String> fruitList = new ArrayList<>();
fruitList.add("苹果");
fruitList.add("香蕉");
fruitList.add("橙子");
// 将数据传入FreeMarker模板
Map<String, Object> dataModel = new HashMap<>();
dataModel.put("fruits", fruitList);

FreeMarker模板（FTL）渲染HTML列表 #

<!DOCTYPE html>
<html>
<head>
    <title>水果列表</title>
</head>
<body>
    <h3>我的水果列表</h3>
    <ul>
        <!-- FreeMarker遍历列表生成HTML列表项 -->
        <#list fruits as fruit>
            <li>${fruit}</li>
        </#list>
    </ul>
</body>
</html>

渲染后会生成包含三个水果项的HTML无序列表。

2. 向列表中添加项 #

添加操作需要前端提交新项，后端更新列表数据后重新渲染模板，步骤如下：

1）HTML表单（嵌入FTL模板） #

在原有列表页面添加提交新项的表单：

<!DOCTYPE html>
<html>
<head>
    <title>水果列表</title>
</head>
<body>
    <h3>我的水果列表</h3>
    <ul>
        <#list fruits as fruit>
            <li>${fruit}</li>
        </#list>
    </ul>

    <!-- 添加新项的表单 -->
    <form method="post" action="/add-fruit">
        <input type="text" name="newFruit" placeholder="输入新水果">
        <button type="submit">添加</button>
    </form>
</body>
</html>

2）后端处理添加请求（Java示例） #

@PostMapping("/add-fruit")
public String addFruit(@RequestParam("newFruit") String newFruit, Model model, HttpSession session) {
    // 从会话中获取现有列表（实际场景可替换为数据库操作）
    List<String> fruitList = (List<String>) session.getAttribute("fruitList");
    if (fruitList == null) {
        fruitList = new ArrayList<>();
    }
    fruitList.add(newFruit);
    session.setAttribute("fruitList", fruitList);
    // 将更新后的列表传入模板
    model.addAttribute("fruits", fruitList);
    return "fruit-list"; // 返回模板名称
}

提交表单后，后端将新项加入列表，再重新渲染列表页面。

3. 从列表中删除项 #

删除操作通过点击列表项的删除按钮，提交删除请求，后端移除对应项后重新渲染：

1）FTL模板中添加删除按钮 #

修改列表项，为每个项添加删除表单：

<!DOCTYPE html>
<html>
<head>
    <title>水果列表</title>
</head>
<body>
    <h3>我的水果列表</h3>
    <ul>
        <#list fruits as fruit>
            <li>
                ${fruit}
                <!-- 提交删除请求的表单 -->
                <form method="post" action="/delete-fruit" style="display: inline;">
                    <input type="hidden" name="fruitToDelete" value="${fruit}">
                    <button type="submit">删除</button>
                </form>
            </li>
        </#list>
    </ul>

    <form method="post" action="/add-fruit">
        <input type="text" name="newFruit" placeholder="输入新水果">
        <button type="submit">添加</button>
    </form>
</body>
</html>

2）后端处理删除请求（Java示例） #

@PostMapping("/delete-fruit")
public String deleteFruit(@RequestParam("fruitToDelete") String fruitToDelete, Model model, HttpSession session) {
    List<String> fruitList = (List<String>) session.getAttribute("fruitList");
    if (fruitList != null) {
        fruitList.remove(fruitToDelete);
        session.setAttribute("fruitList", fruitList);
    }
    model.addAttribute("fruits", fruitList);
    return "fruit-list";
}

点击删除按钮后，后端从列表中移除对应项，再重新渲染列表页面。

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