教程目录

0x00 教程内容
0x01 新建SpringBoot项目
- 1. 新建maven工程
  - 2. 编写代码
  - 3. 代码讲解
0x02 JSON与AJAX结合
- 1. 编写html界面
  - 2. 编写访问界面方法
  - 3. 代码讲解
0x03 意外惊喜
- 1. 是彩蛋啊
  - 2. 是又一个彩蛋啊
0xFF 总结

0x00 教程内容

新建SpringBoot项目
JSON与AJAX结合
意外惊喜

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

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路径则执行下面的方法
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>

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) {//请求成功执行的方法//将请求到的结果拼装进我们自行的空数组productName与numsfor (var i = 0; i < result.length; i++){productName.push(result[i].productName);nums.push(result[i].nums);}},error :function(errorMsg) {//请求成功执行的方法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/>{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>

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 总结

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

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

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

SpringBoot+JSON+AJAX+ECharts+Fiddler实现前后端分离开发可视化（进阶篇）相关推荐

014-Axios Ajax：前后端分离概述，发送json类型的参数，前后端分离开发：在线接口文档，前端工程化、Element、nginx
第一节 Ajax概述 1.概述概念: Asynchronous JavaScript And XML,异步的JavaScript和XML. 作用: 数据交换:通过Ajax可以给服务器发送请求,并获取 ...
php 跨域验证_php 前后端分离开发进行跨域请求时ajax发送验证参数token的header头解决方法...
php前后端分离开发中要实现前后端参数信息交互,必须解决token标识验证问题. 步骤如下: 1.前端ajax发送请求时,要设置一个自定义header头.代码如下: $.ajax({ url:&quo ...
SpringBoot + Vue前后端分离开发：全局异常处理及统一结果封装
SpringBoot + Vue前后端分离开发:全局异常处理及统一结果封装文章目录 SpringBoot + Vue前后端分离开发:全局异常处理及统一结果封装前后端分离开发中的异常处理统一结果封 ...
视频教程-SpringBoot+Security+Vue前后端分离开发权限管理系统-Java
SpringBoot+Security+Vue前后端分离开发权限管理系统 10多年互联网一线实战经验,现就职于大型知名互联网企业,架构师, 有丰富实战经验和企业面试经验:曾就职于某上市培训机构数年,独 ...
利用Nginx轻松实现Ajax的跨域请求(前后端分离开发调试必备神技)
利用Nginx轻松实现浏览器中Ajax的跨域请求(前后端分离开发调试必备神技) 前言为什么会出现跨域? 造成跨域问题的原因是因为浏览器受到同源策略的限制,也就是说js只能访问和操作自己域下的资源,不 ...
java计算机毕业设计基于springboot+vue+elementUI的实验室管理系统(前后端分离）
项目介绍科技水平一直是体现一个国家强弱的重要标志,而科技的一点诞生地是实验室,如果能够更好的对实验室进行管理是很多实验室管理人员一直研究的一个问题.只有更加科学和合理化的利用实验室才能够更好的让科技 ...
springboot+Mybatis+vue前后端分离开发：作业管理系统
1.功能设计本系统功能设计如下: 按照需求分为教师端和学生端,教师端发布作业,查看自己发布的作业,查看学生名单,添加学生. 学生端查看作业.提交或修改作业. 2.数据库设计 student表: 字段 ...
springboot flask php,使用Vue,Spring Boot,Flask,Django 完成Vue前后端分离开发(二)
使用Vue完成前后端分离开发(二) Bravery never goes out of fashion. 勇敢永远不过时. 前面简单说了一下 Vue 项目的搭建和项目的大致页面,这里讲一下 Djang ...
Vue iView Admin 动态路由菜单加载前后端分离（springboot 2.x iview admin vue 前后端分离模型设计器动态数据权限...
宣传官网 xb.exrick.cn 在线Demo xboot.exrick.cn 开源版Github地址 github.com/Exrick/x-bo- 开发文档 www.kancloud.cn/ex ...
超简单工具puer——“低碳”的前后端分离开发
本文由作者郑海波授权网易云社区发布. 前几天,跟一同事(MIHTool作者)讨教了一下开发调试工具.其实个人觉得相较于定制一个类似MIHTool的Hybrid App容器,基于长连的B/S架构的工具其 ...

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

教程目录

0x00 教程内容

0x01 新建SpringBoot项目

1. 新建maven工程

2. 编写代码

3. 代码讲解

0x02 JSON与AJAX结合

1. 编写html界面

2. 编写访问界面方法

3. 代码讲解

0x03 意外惊喜

1. 是彩蛋啊

2. 是又一个彩蛋啊

0xFF 总结

SpringBoot+JSON+AJAX+ECharts+Fiddler实现前后端分离开发可视化（进阶篇）相关推荐

最新文章

热门文章