前端笔记-thymeleaf发送数据给JavaScript变量（普通变量和List）- 前端开发

比如这个情况，当使用echart的时候：

如下图：

下面给出thymeleaf发送List给JavaScript


    //入学手续界面
    @GetMapping("/procedure")
    public String procedure(Model model){
 
        model.addAttribute("someInfo", cardInfoDao.getCardInfo());
        System.out.println(cardInfoDao.getCardInfo());
 
        return "student/procedure";
    }

这里把某个结构体传过去即可：

这个结构体有如下的数据：


    public CardInfo(Integer id, Integer value1, Integer value2, Integer value3, Integer value4, Integer value5, Integer value6) {
        this.id = id;
        this.intValueList = new ArrayList<Integer>();
        this.intValueList.add(value1);
        this.intValueList.add(value2);
        this.intValueList.add(value3);
        this.intValueList.add(value4);
        this.intValueList.add(value5);
        this.intValueList.add(value6);
 
        this.strValueList = new ArrayList<String>();
        this.strValueList.add("拿校服");
        this.strValueList.add("拿饭卡");
        this.strValueList.add("拿被子");
        this.strValueList.add("拿X1");
        this.strValueList.add("拿X2");
        this.strValueList.add("拿X3");
 
    }

此时前端代码这么写：

就可以获取数据了！


<script th:inline="javascript">
		// 基于准备好的dom，初始化echarts实例
		var myChart = echarts.init(document.getElementById('main'));
 
		//这里暂时这么写，有需要再换吧
		var value1 = [[${someInfo.intValueList.get(0)}]];
		var value2 = [[${someInfo.intValueList.get(1)}]];
		var value3 = [[${someInfo.intValueList.get(2)}]];
		var value4 = [[${someInfo.intValueList.get(3)}]];
		var value5 = [[${someInfo.intValueList.get(4)}]];
		var value6 = [[${someInfo.intValueList.get(5)}]];
 
 
		var strValue1 = [[${someInfo.strValueList.get(0)}]];
		var strValue2 = [[${someInfo.strValueList.get(1)}]];
		var strValue3 = [[${someInfo.strValueList.get(2)}]];
		var strValue4 = [[${someInfo.strValueList.get(3)}]];
		var strValue5 = [[${someInfo.strValueList.get(4)}]];
		var strValue6 = [[${someInfo.strValueList.get(5)}]];rValueList.get(5)}]];