Thymeleaf技术咨询：逗号分隔字符串转List及DTO字段取值

分两种场景处理：

场景1：后端传递的逗号分隔字符串，在页面转为List展示 #

使用Thymeleaf内置的#strings.split()工具方法，将字符串按逗号拆分后遍历即可。

示例代码：
假设后端Model中存入了一个名为tagStr的字符串，值为"Java,Spring,Thymeleaf"，页面中可以这样处理：

<div>
  <h4>拆分后的列表：</h4>
  <ul>
    <li th:each="tag : ${#strings.split(tagStr, ',')}" th:text="${tag}"></li>
  </ul>
</div>

场景2：前端表单提交逗号分隔字符串，绑定到后端List参数 #

方式1：通过DTO的自定义setter处理 #

在接收参数的DTO中添加一个用于接收逗号分隔字符串的属性，并在setter中完成拆分逻辑：

public class SubmitDTO {
    private List<String> items;

    // 接收前端传入的逗号分隔字符串，自动拆分为List
    public void setItemsStr(String itemsStr) {
        if (itemsStr != null && !itemsStr.isBlank()) {
            this.items = Arrays.asList(itemsStr.split(","));
        }
    }

    // 标准getter
    public List<String> getItems() {
        return items;
    }
}

前端表单绑定这个辅助属性：

<form th:action="@{/submit}" th:object="${submitDTO}" method="post">
  <input type="text" th:field="*{itemsStr}" placeholder="输入逗号分隔的内容，如：苹果,香蕉,橙子" />
  <button type="submit">提交</button>
</form>

方式2：后端直接处理请求参数 #

如果不需要DTO，也可以在Controller中直接接收字符串参数，手动拆分：

@PostMapping("/submit")
public String submit(@RequestParam("itemsStr") String itemsStr) {
    List<String> items = new ArrayList<>();
    if (itemsStr != null && !itemsStr.isBlank()) {
        items = Arrays.asList(itemsStr.split(","));
    }
    // 业务逻辑处理
    return "result";
}

前端表单对应参数名：

<form th:action="@{/submit}" method="post">
  <input type="text" name="itemsStr" placeholder="输入逗号分隔的内容" />
  <button type="submit">提交</button>
</form>

假设后端已将ValuesDTO对象存入Model，属性名为nutrientValues，且DTO中存在对应字段的getter方法（如getEnergy()、getProtein()、getTotalFat()），直接使用Thymeleaf的点语法或内联表达式即可获取字段值。

示例代码：

<div class="nutrient-info">
  <p>Energy: <span th:text="${nutrientValues.energy}"></span></p>
  <p>Protein: <span th:text="${nutrientValues.protein}"></span></p>
  <p>Total Fat: <span th:text="${nutrientValues.totalFat}"></span></p>
</div>

也可以使用更简洁的内联表达式写法：

<div class="nutrient-info">
  <p>Energy: [[${nutrientValues.energy}]]</p>
  <p>Protein: [[${nutrientValues.protein}]]</p>
  <p>Total Fat: [[${nutrientValues.totalFat}]]</p>
</div>

注意：Thymeleaf通过类的getter方法访问字段，因此DTO必须包含对应字段的标准getter，否则无法正确获取值。

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