SpringBoot+JSON+AJAX+ECharts+Fiddler實現(xiàn)前后端分離開發(fā)可視化
0x01 新建SpringBoot項目
1. 新建maven工程
ps：在上一教程的基礎上操作，就不用新建項目了，請參考文章：SpringBoot+Thymeleaf+ECharts實現(xiàn)大數據可視化（基礎篇）
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數據的方法：
@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數據：localhost:8080/project
3. 代碼講解
a. 注解@RequestMapping("/project")：訪問/project路徑則執(zhí)行下面的方法
b. 注解@ResponseBody：以json格式返回數據
c. ArrayList<Product> productArrayList = new ArrayList<Product>();：構建一個用于裝product對象的集合，此處表示裝了4個product
d. return productArrayList;：返回數據給前端
所以到最后訪問localhost:8080/project可以查看到數據，8080是SpringBoot項目默認的端口。localhost表示本地IP，我們的IDEA項目點擊執(zhí)行，其實就是在我們windows本地啟動了項目。瀏覽器方式打開默認是GET請求，而@RequestMapping("/project")不寫，GET也可以訪問得到。
0x02 JSON與AJAX結合
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 準備一個具備大小（寬高）的 DOM -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
// 基于準備好的dom，初始化echarts實例
var myChart = echarts.init(document.getElementById('main'));
// 新建productName與nums數組來接受數據，因為我們
var productName = [];
var nums = [];
//AJAX接收數據主體
$.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("獲取后臺數據失敗！");
}
});
// 指定圖表的配置項和數據
var option = {
title: {
text: 'ECharts 入門示例'
},
tooltip: {},
legend: {
data:['銷量']
},
xAxis: {
//結合
data: productName
},
yAxis: {},
series: [{
name: '銷量',
type: 'bar',
//結合
data: nums
}]
};
// 使用剛指定的配置項和數據顯示圖表。
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",//數據格式，json格式
async:false,//是否異步請求
success:function (result) {//請求成功執(zhí)行的方法
//將請求到的結果拼裝進我們自行的空數組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("獲取后臺數據失??！");
}
});
b. 數據展示
xAxis: {
//x軸為商品名稱
data: productName
},
yAxis: {},
series: [{
name: '銷量',
type: 'bar',
//y軸為商品數量
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 準備一個具備大小（寬高）的 DOM -->
<div id="main" style="width: 600px;height:400px;"></div>
<script>
var myChart = echarts.init(document.getElementById('main'));
var option = {
title : {
text: '某站點銷售情況',
subtext: '純屬虛構',
x:'center'
},
tooltip : {
trigger: 'item',
formatter: "{a} <br/> : {c} (wppm3vysvbp%)"
},
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，復制view1.html的內容進去
b. 用瀏覽器打開new_file.html，打開Fiddler（mac系統(tǒng)可用Charles），刷新界面，可以看到實際上我們前端訪問的端口是8020，而我們的后端項目端口是8080端口，存在跨域問題，所以無法得到數據
c. 通過Fiddler將8020端口轉發(fā)到8080端口，實現(xiàn)接收數據，配置如下：
d. 刷新HBuilder打開的new_file.html的界面，可以看到訪問的是8020端口，但實際上接收到的數據是8080端口發(fā)送過來的
0xFF 總結
JSON是一種格式，當然后端不返回JSON格式也行，JSON格式的好處在于，前端調用只需要符合JSON格式就可以使用，前端界面有很多種，如app、小程序等等，他們不一定能符合你默認返回的數據格式，所以我們定義了特定的格式，可供多種前端界面調用。AJAX是開發(fā)上非常常用的技能，必須得知道含義跟使用方法，格式比較固定，而且現(xiàn)在封裝的方法非常多，直接調用起來非常方便。樣式有很多，不單只教程里面的，
請查看ECharts官網，學習更多：
ECharts官方案例
ECharts官方教程
基礎教程請查看文章：SpringBoot+Thymeleaf+Echarts實現(xiàn)大數據可視化（基礎篇），零基礎建Springboot項目入門，還有實戰(zhàn)例子等等。
到此這篇關于SpringBoot+JSON+AJAX+ECharts+Fiddler實現(xiàn)前后端分離開發(fā)可視化的文章就介紹到這了,更多相關SpringBoot前后端分離可視化內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
SpringBoot跨系統(tǒng)單點登陸的實現(xiàn)方法
這篇文章主要介紹了SpringBoot跨系統(tǒng)單點登陸的實現(xiàn)方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-08-08
這篇文章主要介紹了Tomcat 類加載器的實現(xiàn)方法，本文給大家介紹的非常詳細，具有一定的參考借鑒價值 ,需要的朋友可以參考下，希望能夠給你帶來幫助2021-09-09
這篇文章主要介紹了jni中的java接口使用,本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-09-09
springboot中RestTemplate配置HttpClient連接池詳解
這篇文章主要介紹了springboot中RestTemplate配置HttpClient連接池詳解,這些Http連接工具,使用起來都比較復雜,如果項目中使用的是Spring框架,可以使用Spring自帶的RestTemplate來進行Http連接請求,需要的朋友可以參考下2023-11-11
關于bootstrap.yml和bootstrap.properties的優(yōu)先級問題
這篇文章主要介紹了關于bootstrap.yml和bootstrap.properties的優(yōu)先級問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-03-03
如何為Spring Cloud Gateway加上全局過濾器
這篇文章主要介紹了如何為Spring Cloud Gateway加上全局過濾器，幫助大家更好得理解和學習使用Gateway，感興趣的朋友可以了解下2021-03-03
這篇文章主要為大家詳細介紹了java web實現(xiàn)郵箱激活與忘記密碼、重置密碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-02-02
這篇文章主要介紹了java 虛擬機深入了解的相關資料,ava虛擬機有自己完善的硬體架構，如處理器、堆棧、寄存器等，還具有相應的指令系統(tǒng)，需要的朋友可以參考下2017-03-03
這篇文章主要介紹了Java實現(xiàn)順序棧原理解析,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2019-11-11
這篇文章主要介紹了Java手動創(chuàng)建線程池代碼實例,FixedThreadPool或者SingleThreadPool,允許的請求隊列長度為Integer.MAX_VALUE,可能會堆積大量的請求,從而導致OOM,需要的朋友可以參考下2023-12-12