SpringBoot+JSON+AJAX+ECharts+Fiddler實(shí)現(xiàn)前后端分離開發(fā)可視化

更新時間：2022年06月22日 10:22:54 作者：邵奈一

這篇文章主要介紹了SpringBoot+JSON+AJAX+ECharts+Fiddler實(shí)現(xiàn)前后端分離開發(fā)可視化,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

0x01 新建SpringBoot項目

1. 新建maven工程

ps：在上一教程的基礎(chǔ)上操作，就不用新建項目了，請參考文章：SpringBoot+Thymeleaf+ECharts實(shí)現(xiàn)大數(shù)據(jù)可視化（基礎(chǔ)篇）

2. 編寫代碼

a. 新建Product實(shí)體類：

package com.example.demo;

/**
 * @Auther: 邵奈一
 * @Date: 2019/02/01 上午 9:08
 * @Description: 商品實(shí)體類
 */
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類（使用前面實(shí)驗(yàn)的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項目點(diǎn)擊執(zhí)行，其實(shí)就是在我們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實(shí)例
    var myChart = echarts.init(document.getElementById('main'));

	// 新建productName與nums數(shù)組來接受數(shù)據(jù)，因?yàn)槲覀?
    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: '某站點(diǎn)銷售情況',
            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），刷新界面，可以看到實(shí)際上我們前端訪問的端口是8020，而我們的后端項目端口是8080端口，存在跨域問題，所以無法得到數(shù)據(jù)

在這里插入圖片描述

c. 通過Fiddler將8020端口轉(zhuǎn)發(fā)到8080端口，實(shí)現(xiàn)接收數(shù)據(jù)，配置如下：

在這里插入圖片描述

d. 刷新HBuilder打開的new_file.html的界面，可以看到訪問的是8020端口，但實(shí)際上接收到的數(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實(shí)現(xiàn)大數(shù)據(jù)可視化（基礎(chǔ)篇），零基礎(chǔ)建Springboot項目入門，還有實(shí)戰(zhàn)例子等等。

到此這篇關(guān)于SpringBoot+JSON+AJAX+ECharts+Fiddler實(shí)現(xiàn)前后端分離開發(fā)可視化的文章就介紹到這了,更多相關(guān)SpringBoot前后端分離可視化內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: