SpringBoot+Thymeleaf的配置以及依賴，前面已經(jīng)講過，這里順便一提Thymeleaf的配置文件以及js或者css的存放位置，方便記錄，我的配置文件如：
#配置thymeleaf緩存開發(fā)期間先關(guān)閉，否則影響測試
spring.thymeleaf.cache=false
spring.thymeleaf.prefix=classpath:/templates/
spring.mvc.static-path-pattern=/static/**
期間犯了一個(gè)錯(cuò)誤，我在templates文件夾下新建static，而且把相應(yīng)的js和css文件放入該目錄之中，導(dǎo)致無法加載該靜態(tài)文件，后查閱配置文件，方知templates和static這兩個(gè)文件夾應(yīng)該是同級，附上目錄結(jié)構(gòu)圖：
目錄結(jié)構(gòu)圖.png
Echarts插件，對于圖表操控是十分方便的，但是一般生產(chǎn)環(huán)境，是把數(shù)據(jù)通過Json的格式傳到HTML頁面，利用Ajax解析Json，所以我們來模擬一下該過程：
1、下載Echarts的js文件和Jquery.js
Echarts地址：http://echarts.baidu.com/download.html
Jquery地址：https://jquery.com/download/2、建一個(gè)Entity，引入簡單數(shù)據(jù)，Echarts：
package com.guxf.demo.domain;
public class Echars {
private String name;
private Integer num;
public Echars(String name, Integer num) {
super();
this.name = name;
this.num = num;
}
// getter和setter以及toString略
}
- 3、直接寫Controller（生產(chǎn)環(huán)境數(shù)據(jù)一般從數(shù)據(jù)庫中取，此處免掉）
package com.guxf.demo.controller;
import java.util.ArrayList;
import java.util.List;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import com.guxf.demo.domain.Echars;
@Controller
public class EcharsAction {
@RequestMapping(value = "/EcharsShow")
@ResponseBody
public List<Echars> findById(Model model) {
List<Echars> list = new ArrayList<Echars>();
list.add(new Echars("帽子",50));
list.add(new Echars("鞋子",126));
list.add(new Echars("毛衣",75));
list.add(new Echars("羽絨服",201));
list.add(new Echars("羊毛衫",172));
System.err.println(list.toString());
return list;
}
@GetMapping(value = "/Echars.do")
public String echarts4(Model model){
System.err.println("========開始");
return "Echars";
}
}
- 4、附上Html，文件名Echars.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>圖表</title>
<script src="../static/js/jquery.js" th:href=@{/js/jquery.js}></script>
<script src="../static/js/echarts.js" th:href=@{/js/echarts.js}></script>
</head>
<body>
<!-- 為ECharts準(zhǔn)備一個(gè)具備大小（寬高）的Dom -->
<div id="main" style="width: 800px;height:450px;"></div>
<script type="text/javascript">
$(document).ready(function(){
// 基于準(zhǔn)備好的dom，初始化echarts實(shí)例
var myChart = echarts.init(document.getElementById('main'));
//數(shù)據(jù)加載完之前先顯示一段簡單的loading動(dòng)畫
myChart.showLoading();
var names=[]; //橫坐標(biāo)數(shù)組（實(shí)際用來盛放X軸坐標(biāo)值）
var values=[]; //縱坐標(biāo)數(shù)組（實(shí)際用來盛放Y坐標(biāo)值）
$.ajax({
type : "post",
async : true, //異步請求（同步請求將會(huì)鎖住瀏覽器，用戶其他操作必須等待請求完成才可以執(zhí)行）
url : "/EcharsShow", //請求發(fā)送到dataActiont處
data : {},
dataType : "json", //返回?cái)?shù)據(jù)形式為json
success : function(result) {
//請求成功時(shí)執(zhí)行該函數(shù)內(nèi)容，result即為服務(wù)器返回的json對象
if (result) {
for(var i=0;i<result.length;i++){
names.push(result[i].name);
values.push(result[i].num);
}
myChart.hideLoading(); //隱藏加載動(dòng)畫
myChart.setOption({ //加載數(shù)據(jù)圖表
tooltip: {},
legend: {
data:['數(shù)量']
},
xAxis: {
data: names
},
yAxis: {
type: 'value'
},
series: [{
// 根據(jù)名字對應(yīng)到相應(yīng)的系列
name: '數(shù)量',//薪資 series not exists. Legend data should be same with series name or data name.
type: 'bar',
data: values
}]
});
}
},
error : function(errorMsg) {
//請求失敗時(shí)執(zhí)行該函數(shù)
alert("圖表請求數(shù)據(jù)失敗!");
myChart.hideLoading();
}
});//end ajax
});
</script>
</body>
</html>
- 5、啟動(dòng)application，輸入地址：http://localhost:8088/Echars.do
效果.png
