SpringBoot+JSON+AJAX+ECharts+Fiddler实现前后端分离开发可视化(进阶篇)

邵奈一来了 2021-07-20 04:20:51
SpringBoot springboot教程


0x00 教程内容
  1. 新建SpringBoot项目
  2. JSON与AJAX结合
  3. 意外惊喜
0x01 新建SpringBoot项目
1. 新建maven工程

ps:在上一教程的基础上操作,就不用新建项目了,请参考文章:SpringBoot+Thymeleaf+ECharts实现大数据可视化(基础篇)

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;
}
}

  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.

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;
}

  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.

c. 启动项目,访问路径可看到后台返回了json数据:
localhost:8080/project
在这里插入图片描述

3. 代码讲解

a. 注解@RequestMapping("/project"):访问/project路径则执行下面的方法
b. 注解@ResponseBody:以json格式返回数据
c. ArrayList<Product> productArrayList = new ArrayList<Product>();:构建一个用于装product对象的集合,此处表示装了4个product
d. return productArrayList;:返回数据给前端

  • 所以到最后访问localhost:8080/project可以查看到数据,8080是SpringBoot项目默认的端口。localhost表示本地IP,我们的IDEA项目点击执行,其实就是在我们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>

  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
  • 33.
  • 34.
  • 35.
  • 36.
  • 37.
  • 38.
  • 39.
  • 40.
  • 41.
  • 42.
  • 43.
  • 44.
  • 45.
  • 46.
  • 47.
  • 48.
  • 49.
  • 50.
  • 51.
  • 52.
  • 53.
  • 54.
  • 55.
  • 56.
  • 57.
  • 58.
  • 59.
  • 60.
  • 61.
  • 62.
  • 63.
  • 64.
  • 65.
  • 66.
2. 编写访问界面方法

a. 在HelloController类中添加方法

@RequestMapping("/view")
public String myView(){
return "view";
}

  • 1.
  • 2.
  • 3.
  • 4.

b. 重启项目,打开浏览器(localhost:8080/view),可看到:
在这里插入图片描述

3. 代码讲解

a. AJAX请求

$.ajax({//JQuery的ajax请求方法
type:"GET",//以GET方式请求
url:"/project",//请求的路径是/project,即我们有商品返回的路径
dataType:"json",//数据格式,json格式
async:false,//是否异步请求
success:function (result) {//请求成功执行的方法
//将请求到的结果拼装进我们自行的空数组productName与nums
for (var i = 0; i < result.length; i++){
productName.push(result[i].productName);
nums.push(result[i].nums);
}
},
error :function(errorMsg) {//请求成功执行的方法
alert("获取后台数据失败!");
}
});

  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.

b. 数据展示

xAxis: {
//x轴为商品名称
data: productName
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
//y轴为商品数量
data: nums
}]

  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
0x03 意外惊喜
1. 是彩蛋啊

a. 在HelloController类中添加方法

@RequestMapping("/view1")
public String myView1(){
return "view1";
}

  • 1.
  • 2.
  • 3.
  • 4.

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/>{b} : {c} ({d}%)"
},
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>

  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
  • 33.
  • 34.
  • 35.
  • 36.
  • 37.
  • 38.
  • 39.
  • 40.
  • 41.
  • 42.
  • 43.
  • 44.
  • 45.
  • 46.
  • 47.
  • 48.
  • 49.
  • 50.
  • 51.
  • 52.
  • 53.
  • 54.
  • 55.
  • 56.
  • 57.
  • 58.
  • 59.
  • 60.
  • 61.
  • 62.
  • 63.
  • 64.
  • 65.
  • 66.
  • 67.
  • 68.
  • 69.
  • 70.

c. 重启项目,打开浏览器(localhost:8080/view1),可看到:
在这里插入图片描述

2. 是又一个彩蛋啊

a. 在HBuilder新建一个前端项目,引入echarts与jquery的js文件,新建new_file.html,复制view1.html的内容进去
b. 用浏览器打开new_file.html,打开Fiddler(mac系统可用Charles),刷新界面,可以看到实际上我们前端访问的端口是8020,而我们的后端项目端口是8080端口,存在跨域问题,所以无法得到数据
在这里插入图片描述
c. 通过Fiddler将8020端口转发到8080端口,实现接收数据,配置如下:
在这里插入图片描述
d. 刷新HBuilder打开的new_file.html的界面,可以看到访问的是8020端口,但实际上接收到的数据是8080端口发送过来的
在这里插入图片描述

0xFF 总结
  1. JSON是一种格式,当然后端不返回JSON格式也行,JSON格式的好处在于,前端调用只需要符合JSON格式就可以使用,前端界面有很多种,如app、小程序等等,他们不一定能符合你默认返回的数据格式,所以我们定义了特定的格式,可供多种前端界面调用。
  2. AJAX是开发上非常常用的技能,必须得知道含义跟使用方法,格式比较固定,而且现在封装的方法非常多,直接调用起来非常方便。
  3. 样式有很多,不单只教程里面的,请查看ECharts官网,学习更多:
    ECharts官方案例
    ECharts官方教程
  4. 基础教程请查看文章:SpringBoot+Thymeleaf+Echarts实现大数据可视化(基础篇),零基础建Springboot项目入门,还有实战例子等等。
  5. 前后端分离开发是非常关键的技能,只会后端而不知道前端会一头雾水,反之也会,希望读完这篇文章,能让你有所收获。如果有用请点个赞或者评论一个呗~

作者简介:邵奈一
全栈工程师、市场洞察者、专栏编辑
| 公众号 | 微信 | 微博 | CSDN | 简书 |

福利:
邵奈一的技术博客导航
邵奈一 原创不易,如转载请标明出处。


版权声明
本文为[邵奈一来了]所创,转载请带上原文链接,感谢
https://blog.51cto.com/u_12564104/2894509

  1. Netty源码解析-概述篇
  2. Netty源码解析-概述篇
  3. Netty源码解析1-Buffer
  4. Netty源码解析1-Buffer
  5. Netty源码解析2-Reactor
  6. Netty源码解析2-Reactor
  7. Netty源码解析3-Pipeline
  8. Netty源码解析3-Pipeline
  9. Netty源码解析4-Handler综述
  10. Netty源码解析4-Handler综述
  11. Netty源码解析5-ChannelHandler
  12. Netty源码解析5-ChannelHandler
  13. Netty源码解析6-ChannelHandler实例之LoggingHandler
  14. Netty源码解析6-ChannelHandler实例之LoggingHandler
  15. Netty源码解析7-ChannelHandler实例之TimeoutHandler
  16. Netty源码解析7-ChannelHandler实例之TimeoutHandler
  17. Netty源码解析8-ChannelHandler实例之CodecHandler
  18. Netty源码解析8-ChannelHandler实例之CodecHandler
  19. Netty源码解析9-ChannelHandler实例之MessageToByteEncoder
  20. Netty源码解析9-ChannelHandler实例之MessageToByteEncoder
  21. 大数据面试题之Hbase系列
  22. 你可能需要的Kafka面试题与答案整理
  23. 你可能需要的Kafka面试题与答案整理
  24. 后起之秀Pulsar VS. 传统强者Kafka?谁更强
  25. 后起之秀Pulsar VS. 传统强者Kafka?谁更强
  26. 【大数据哔哔集20210123】别问,问就是Kafka最可靠
  27. 【大数据哔哔集20210123】别问,问就是Kafka最可靠
  28. 【大数据哔哔集20210124】有人问我Kafka Leader选举?我真没慌
  29. 【大数据哔哔集20210124】有人问我Kafka Leader选举?我真没慌
  30. 【大数据哔哔集20210117】Kafka 的高可靠性是怎么实现的
  31. 【大数据哔哔集20210117】Kafka 的高可靠性是怎么实现的
  32. Kafka Connect | 无缝结合Kafka构建高效ETL方案
  33. Kafka面试题总结(一)
  34. Kafka面试题总结(一)
  35. Kafka面试题整理(二)
  36. Kafka面试题整理(二)
  37. 基于Kafka Flink Redis的电商大屏实时计算案例
  38. 基于Kafka Flink Redis的电商大屏实时计算案例
  39. Google布隆过滤器与Redis布隆过滤器详解
  40. Google布隆过滤器与Redis布隆过滤器详解
  41. 【Java Web前端开发】前端框架 bootstrap+jquery+angularjs探索
  42. 关于Redis的几件小事 | 高并发和高可用
  43. 关于Redis的几件小事 | 高并发和高可用
  44. 关于redis的几件小事(一)redis的使用目的与问题
  45. 关于redis的几件小事(一)redis的使用目的与问题
  46. 阿里云Redis技术架构演进
  47. 阿里云Redis技术架构演进
  48. 阿里云Redis技术架构演进
  49. Flink实战(109):connector(十八)hdfs 读写(三)StreamingFileSink相关特性及代码实战
  50. Flink实战(110):flink-sql使用(十八)connector(十九)Flink 与 hive 结合使用(七) Flink Hive Connector 使用
  51. Flink实战(110):flink-sql使用(十八)connector(十九)Flink 与 hive 结合使用(七) Flink Hive Connector 使用
  52. Flink实战(111):flink-sql使用(十九)Flink 与 hive 结合使用(八)Hive Streaming 实战解析
  53. Flink实战(111):flink-sql使用(十九)Flink 与 hive 结合使用(八)Hive Streaming 实战解析
  54. Docker常用命令,这些都要会!
  55. 鸟哥的Linux私房菜学习之第九章笔记
  56. Java NIO之Channel(通道)
  57. Java NIO之拥抱Path和Files
  58. Redis changed its open source license, and many projects were no longer open source
  59. JDK 11 has entered the candidate release stage, and the official version is planned to be released on September 25
  60. [* *] the latest version of windows 10 hides Linux?