版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq78442761/article/details/89005726
比如这个情况,当使用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)}]];
<script th:inline="javascript">
这个是关键,可以得到模板引擎的支持!