在Thymeleaf中，用何种Java对象生成类JS数组并给Morris.js加载数据？

嘿，我来帮你搞定这两个问题！

一、哪种Java对象能生成类似JavaScript数组的结构？ #

在Thymeleaf里，任何实现了Iterable接口的Java集合类都能被序列化成类似JS数组的结构，其中最常用的是：

• List（比如ArrayList）：有序集合，和JS数组的顺序性完美匹配，是最推荐的选择
• Java数组：比如String[]、自定义对象数组也可以
• 其他集合：比如Set，但因为它无序，可能不符合你需要的顺序展示需求

另外，如果集合里的元素是**POJO（普通Java对象）**或者Map，Thymeleaf会自动把它们序列化成JS对象（也就是键值对结构），刚好符合Morris.js需要的{ "period": "...", "Users Registered": ... }这种格式。

二、如何通过模型属性加载Morris.js所需的数据？ #

你的代码思路是对的，只需要后端准备好对应格式的数据，再通过Thymeleaf的JavaScript内联功能传递给前端就行，具体步骤如下：

1. 后端准备数据（两种方式可选） #

方式一：用List<Map<String, Object>>快速构建

这种方式不需要额外创建类，适合快速开发：

@GetMapping("/your-page")
public String loadChartData(Model model) {
    List<Map<String, Object>> usersRegistered = new ArrayList<>();
    
    // 一月数据
    Map<String, Object> janData = new HashMap<>();
    janData.put("period", "Jan");
    janData.put("Users Registered", 16);
    usersRegistered.add(janData);
    
    // 二月数据
    Map<String, Object> febData = new HashMap<>();
    febData.put("period", "Feb");
    febData.put("Users Registered", 54);
    usersRegistered.add(febData);
    
    // 把数据放到模型里
    model.addAttribute("usersRegistered", usersRegistered);
    return "your-template-name";
}

方式二：用POJO类（更规范，适合复杂场景）

如果数据结构固定，创建一个专门的POJO类会更易维护，注意用@JsonProperty注解映射带空格的键名：

import com.fasterxml.jackson.annotation.JsonProperty;

public class RegistrationStats {
    private String period;
    
    // 因为JS里的键是"Users Registered"，Java属性名不能有空格，所以用注解指定映射
    @JsonProperty("Users Registered")
    private Integer usersRegistered;
    
    // 构造函数、getter和setter
    public RegistrationStats(String period, Integer usersRegistered) {
        this.period = period;
        this.usersRegistered = usersRegistered;
    }

    // getter和setter（如果不用Lombok的话需要手动写）
    public String getPeriod() { return period; }
    public void setPeriod(String period) { this.period = period; }
    public Integer getUsersRegistered() { return usersRegistered; }
    public void setUsersRegistered(Integer usersRegistered) { this.usersRegistered = usersRegistered; }
}

然后后端把数据添加到模型：

@GetMapping("/your-page")
public String loadChartData(Model model) {
    List<RegistrationStats> usersRegistered = Arrays.asList(
        new RegistrationStats("Jan", 16),
        new RegistrationStats("Feb", 54)
    );
    model.addAttribute("usersRegistered", usersRegistered);
    return "your-template-name";
}

2. 前端Thymeleaf内联JavaScript加载数据 #

你的代码示例已经很接近了，只需要在初始化Morris.js的时候直接使用这个变量就行：

<!-- 先引入Morris.js的依赖（确保路径正确） -->
<script src="path/to/morris.min.js"></script>
<script src="path/to/raphael.min.js"></script>

<script type="text/javascript" th:inline="javascript">
/*<![CDATA[*/
// Thymeleaf会自动把模型里的usersRegistered序列化成符合要求的JS数组
var chartData = [[${usersRegistered}]];

// 初始化Morris折线图（根据你的需求调整参数）
new Morris.Line({
    element: 'user-reg-chart', // 你的图表容器ID，页面上要对应有<div id="user-reg-chart"></div>
    data: chartData,
    xkey: 'period', // 对应数据里的period字段
    ykeys: ['Users Registered'], // 对应数据里的Users Registered字段
    labels: ['Users Registered'], // 图表上的标签
    // 其他可选配置，比如颜色、大小等
    lineColors: ['#2ecc71'],
    pointFillColors: ['#ffffff'],
    pointStrokeColors: ['#2ecc71']
});
/*]]>*/
</script>

关键注意点 #

• 确保项目里有Jackson依赖（Spring Boot默认已经包含），Thymeleaf靠它来完成Java对象到JSON的序列化。
• 如果用POJO，一定要用@JsonProperty处理带空格的键名，否则序列化出来的键名会是Java属性名（比如usersRegistered），Morris.js无法识别。
• 必须给script标签加上th:inline="javascript"，否则Thymeleaf不会解析[[${...}]]表达式。

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