SpringBoot+JSON+AJAX+ECharts+Fiddler實現(xiàn)前后端分離開發(fā)可視化
0x01 新建SpringBoot項目
1. 新建maven工程
ps：在上一教程的基礎(chǔ)上操作，就不用新建項目了，請參考文章：SpringBoot+Thymeleaf+ECharts實現(xiàn)大數(shù)據(jù)可視化（基礎(chǔ)篇）
2. 編寫代碼
a. 新建Product實體類：
package com.example.demo;
/**
* @Auther: 邵奈一
* @Date: 2019/02/01 上午 9:08
* @Description: 商品實體類
*/
public class Product {
public String productName;
public Integer nums;
public String getProductName() {
return productName;
}
public void setProductName(String productName) {
this.productName = productName;
}
public Integer getNums() {
return nums;
}
public void setNums(Integer nums) {
this.nums = nums;
}
}
b. 新建一個HelloController類（使用前面實驗的HelloController即可），添加返回json數(shù)據(jù)的方法：
@RequestMapping("/project")
@ResponseBody
public List<Product> myProject(){
ArrayList<Product> productArrayList = new ArrayList<Product>();
Product product1 = new Product();
product1.setProductName("襪子");
product1.setNums(15);
Product product2 = new Product();
product2.setProductName("羊毛衫");
product2.setNums(20);
Product product3 = new Product();
product3.setProductName("雪紡衫");
product3.setNums(24);
Product product4 = new Product();
product4.setProductName("高跟鞋");
product4.setNums(30);
productArrayList.add(product1);
productArrayList.add(product2);
productArrayList.add(product3);
productArrayList.add(product4);
return productArrayList;
}
c. 啟動項目，訪問路徑可看到后臺返回了json數(shù)據(jù)：localhost:8080/project
3. 代碼講解
a. 注解@RequestMapping("/project")：訪問/project路徑則執(zhí)行下面的方法
b. 注解@ResponseBody：以json格式返回數(shù)據(jù)
c. ArrayList<Product> productArrayList = new ArrayList<Product>();：構(gòu)建一個用于裝product對象的集合，此處表示裝了4個product
d. return productArrayList;：返回數(shù)據(jù)給前端
所以到最后訪問localhost:8080/project可以查看到數(shù)據(jù)，8080是SpringBoot項目默認(rèn)的端口。localhost表示本地IP，我們的IDEA項目點擊執(zhí)行，其實就是在我們windows本地啟動了項目。瀏覽器方式打開默認(rèn)是GET請求，而@RequestMapping("/project")不寫，GET也可以訪問得到。
0x02 JSON與AJAX結(jié)合
1. 編寫html界面
a. 新建一個view.html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ECharts</title>
<script src="js/echarts.min.js"></script>
<script src="js/jquery-3.1.1.js"></script>
</head>
<body>
<!-- 為 ECharts 準(zhǔn)備一個具備大?。▽捀撸┑?DOM -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
// 基于準(zhǔn)備好的dom，初始化echarts實例
var myChart = echarts.init(document.getElementById('main'));
// 新建productName與nums數(shù)組來接受數(shù)據(jù)，因為我們
var productName = [];
var nums = [];
//AJAX接收數(shù)據(jù)主體
$.ajax({
type:"GET",
url:"/project",
dataType:"json",
async:false,
success:function (result) {
for (var i = 0; i < result.length; i++){
productName.push(result[i].productName);
nums.push(result[i].nums);
}
},
error :function(errorMsg) {
alert("獲取后臺數(shù)據(jù)失敗！");
}
});
// 指定圖表的配置項和數(shù)據(jù)
var option = {
title: {
text: 'ECharts 入門示例'
},
tooltip: {},
legend: {
data:['銷量']
},
xAxis: {
//結(jié)合
data: productName
},
yAxis: {},
series: [{
name: '銷量',
type: 'bar',
//結(jié)合
data: nums
}]
};
// 使用剛指定的配置項和數(shù)據(jù)顯示圖表。
myChart.setOption(option);
</script>
</body>2. 編寫訪問界面方法
a. 在HelloController類中添加方法
@RequestMapping("/view")
public String myView(){
return "view";
}
b. 重啟項目，打開瀏覽器（localhost:8080/view），可看到：
3. 代碼講解
a. AJAX請求
$.ajax({//JQuery的ajax請求方法
type:"GET",//以GET方式請求
url:"/project",//請求的路徑是/project，即我們有商品返回的路徑
dataType:"json",//數(shù)據(jù)格式，json格式
async:false,//是否異步請求
success:function (result) {//請求成功執(zhí)行的方法
//將請求到的結(jié)果拼裝進(jìn)我們自行的空數(shù)組productName與nums
for (var i = 0; i < result.length; i++){
productName.push(result[i].productName);
nums.push(result[i].nums);
}
},
error :function(errorMsg) {//請求成功執(zhí)行的方法
alert("獲取后臺數(shù)據(jù)失?。?);
}
});
b. 數(shù)據(jù)展示
xAxis: {
//x軸為商品名稱
data: productName
},
yAxis: {},
series: [{
name: '銷量',
type: 'bar',
//y軸為商品數(shù)量
data: nums
}]
0x03 意外驚喜
1. 是彩蛋啊
a. 在HelloController類中添加方法
@RequestMapping("/view1")
public String myView1(){
return "view1";
}
b. 新建一個view1.html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ECharts</title>
<script src="js/echarts.min.js"></script>
<script src="js/jquery-3.1.1.js"></script>
</head>
<body>
<!-- 為 ECharts 準(zhǔn)備一個具備大?。▽捀撸┑?DOM -->
<div id="main" style="width: 600px;height:400px;"></div>
<script>
var myChart = echarts.init(document.getElementById('main'));
var option = {
title : {
text: '某站點銷售情況',
subtext: '純屬虛構(gòu)',
x:'center'
},
tooltip : {
trigger: 'item',
formatter: "{a} <br/> : {c} (vvxyksv9kd%)"
},
legend: {
orient: 'vertical',
left: 'left',
},
series : [
{
name: '訪問來源',
type: 'pie',
radius : '55%',
center: ['50%', '60%'],
data:(function () {
var datas = [];
$.ajax({
type:"POST",
url:"/project",
dataType:"json",
async:false,
success:function (result) {
for (var i = 0; i < result.length; i++){
datas.push({
"value":result[i].nums, "name":result[i].productName
})
}
}
})
return datas;
})(),
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
myChart.setOption(option);
</script>
</body>
c. 重啟項目，打開瀏覽器（localhost:8080/view1），可看到：
2. 是又一個彩蛋啊
a. 在HBuilder新建一個前端項目，引入echarts與jquery的js文件，新建new_file.html，復(fù)制view1.html的內(nèi)容進(jìn)去
b. 用瀏覽器打開new_file.html，打開Fiddler（mac系統(tǒng)可用Charles），刷新界面，可以看到實際上我們前端訪問的端口是8020，而我們的后端項目端口是8080端口，存在跨域問題，所以無法得到數(shù)據(jù)
c. 通過Fiddler將8020端口轉(zhuǎn)發(fā)到8080端口，實現(xiàn)接收數(shù)據(jù)，配置如下：
d. 刷新HBuilder打開的new_file.html的界面，可以看到訪問的是8020端口，但實際上接收到的數(shù)據(jù)是8080端口發(fā)送過來的
0xFF 總結(jié)
JSON是一種格式，當(dāng)然后端不返回JSON格式也行，JSON格式的好處在于，前端調(diào)用只需要符合JSON格式就可以使用，前端界面有很多種，如app、小程序等等，他們不一定能符合你默認(rèn)返回的數(shù)據(jù)格式，所以我們定義了特定的格式，可供多種前端界面調(diào)用。AJAX是開發(fā)上非常常用的技能，必須得知道含義跟使用方法，格式比較固定，而且現(xiàn)在封裝的方法非常多，直接調(diào)用起來非常方便。樣式有很多，不單只教程里面的，
請查看ECharts官網(wǎng)，學(xué)習(xí)更多：
ECharts官方案例
ECharts官方教程
基礎(chǔ)教程請查看文章：SpringBoot+Thymeleaf+Echarts實現(xiàn)大數(shù)據(jù)可視化（基礎(chǔ)篇），零基礎(chǔ)建Springboot項目入門，還有實戰(zhàn)例子等等。
到此這篇關(guān)于SpringBoot+JSON+AJAX+ECharts+Fiddler實現(xiàn)前后端分離開發(fā)可視化的文章就介紹到這了,更多相關(guān)SpringBoot前后端分離可視化內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Hibernate懶加載之<class>標(biāo)簽上的lazy
這篇文章主要介紹了Hibernate懶加載之<class>標(biāo)簽上的lazy，分享了相關(guān)代碼示例，小編覺得還是挺不錯的，具有一定借鑒價值，需要的朋友可以參考下2018-02-02
本文主要介紹了MybatisPlus開啟、關(guān)閉二級緩存方法，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09
@Conditional表示僅當(dāng)所有指定條件都匹配時，組件才有資格注冊。該@Conditional注釋可以在以下任一方式使用：作為任何@Bean方法的方法級注釋、作為任何類的直接或間接注釋的類型級別注釋@Component，包括@Configuration類、作為元注釋，目的是組成自定義構(gòu)造型注釋2023-01-01
Logback MDCAdapter日志跟蹤及自定義效果源碼解讀
這篇文章主要為大家介紹了Logback MDCAdapter日志跟蹤及自定義效果源碼解讀,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-11-11
這篇文章主要為大家詳細(xì)介紹了java仿微信實現(xiàn)左滑顯示刪除按鈕功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-10-10
解決springmvc項目中使用過濾器來解決請求方式為post時出現(xiàn)亂碼的問題
這篇文章主要介紹了springmvc項目中使用過濾器來解決請求方式為post時出現(xiàn)亂碼的問題,本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-08-08
這篇文章主要幫助大家輕松掌握java中介者模式,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-09-09
這篇文章主要介紹了詳解spring 配置的兩種方式：JAVA配置和注解配置,具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-06-06
Java數(shù)據(jù)結(jié)構(gòu)通關(guān)時間復(fù)雜度和空間復(fù)雜度
對于一個算法,其時間復(fù)雜度和空間復(fù)雜度往往是相互影響的,當(dāng)追求一個較好的時間復(fù)雜度時,可能會使空間復(fù)雜度的性能變差,即可能導(dǎo)致占用較多的存儲空間,這篇文章主要給大家介紹了關(guān)于Java時間復(fù)雜度、空間復(fù)雜度的相關(guān)資料,需要的朋友可以參考下2022-05-05
mapstruct 的插件是專門用來處理 domin 實體類與 model 類的屬性映射的，我們只需定義 mapper 接口，mapstruct 在編譯的時候就會自動的幫我們實現(xiàn)這個映射接口，避免了麻煩復(fù)雜的映射實現(xiàn)，對Java?mapstruct使用相關(guān)知識感興趣的朋友一起看看吧2022-04-04