SpringBoot+JSON+AJAX+ECharts+Fiddler实现前后端分离开发可视化
目录
- 0x01 新建SpringBoot项目
- 1. 新建maven工程
- 2. 编写代码
- 3. 代码讲解
- 0x02 JSON与AJAX结合
- 1. 编写html界面
- 2. 编写访问界面方法
- 3. 代码讲解
- 0x03 意外惊喜
- 1. 是彩蛋啊
- 2. 是又一个彩蛋啊
- 0xFF 总结
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与nums
for (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官方教程
基础教程请查看文章：SpringBoot+Thymeleaf+Echarts实现大数据可视化（基础篇），零基础建Springboot项目入门，还有实战例子等等。
到此这篇关于SpringBoot+JSON+AJAX+ECharts+Fiddler实现前后端分离开发可视化的文章就介绍到这了,更多相关SpringBoot前后端分离可视化内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
相关推荐
-
SpringBoot+Echarts实现请求后台数据显示饼状图
场景 SpringBoot搭建后台获取数据,前端可视化使用echarts的饼状图. Echarts3官网 获取Echarts 从官网下载界面选择你需要的版本下载,根据开发者功能和体积上的需求,我们提供了不同打包的下载,如果你在体积上没有要求,可以直接下载完整版本.开发环境建议下载源代码版本,包含了常见的错误提示和警告. 在 ECharts 的 GitHub 上下载最新的 release 版本,解压出来的文件夹里的 dist 目录里可以找到最新版本的 echarts 库. 通过 npm 获取 ec
-
SpringBoot+Thymeleaf+ECharts实现大数据可视化(基础篇)
目录 0x01 新建SpringBoot项目 2. 编写HelloWorld程序代码 0x02 引入ECharts资源 1. 获取JQuery与ECharts资源 2. 新建ECharts模版html文件 3. 添加后台java代码 4. ECharts模版样式预览 0x03 SpringBoot整合Thymeleaf 1. 新建myECharts方法 2. 引入Thymeleaf 3. ECharts新样式预览 4. 模式升级 0xFF 总结 0x01 新建SpringBoot项目 1. 新建
-
SpringBoot+ECharts是如何实现数据可视化的
一.提出任务 查询班级表数据,利用ECharts绘制各班人数柱形图. (一)班级数据 (二)运行效果 二.实现步骤 (一)创建数据库与表 1.创建数据库 - test create database test; 2.创建数据表 - t_class 创建表结构 CREATE TABLE `t_class` ( `id` int(11) NOT NULL AUTO_INCREMENT, `class` varchar(50) CHARACTER SET utf8 COLLATE utf8_gener
-
Springboot项目中运用vue+ElementUI+echarts前后端交互实现动态圆环图(推荐)
目录 如何运用vue+echarts前后端交互实现动态饼图 前言 一.环境配置 1.1 安装acharts 1.2 全局引用 二.圆环图前端实现 2.1 先在vue页面添加渲染盒子 2.2 前端逻辑实现部分 2.3 展示(可按自己需求更改前端样式) 三.前后端数据交互实现 3.1 创建数据库 3.2 后台代码的编写 如何运用vue+echarts前后端交互实现动态饼图 前言 我们做项目的时候,常常需要一些统计图来展示我们的数据,作为web开发人员,会实现统计图是我们必会的技能.我将带大家来实现动
-
Spring Boot结合ECharts案例演示示例
目录 一.提出任务 二.完成任务 (一)创建数据库与表 (二)创建Spring Boot项目 (三)创建班级实体类 (四)创建班级映射器接口 (五)创建班级映射器配置文件 (六)创建班级服务类 (七)创建班级控制器 (八)添加ECharts和jQuery脚本 (九)添加Druid起步依赖 (十)修改应用属性文件 (十一)创建页面可视化数据 (十二)启动应用,查看结果 一.提出任务 后端利用Spring Boot查询班级表数据,前端利用ECharts绘制各班人数柱形图. (一)班级数据 编号 班级
-
springboot动态加载Echarts柱状图
本文实例为大家分享了springboot动态加载Echarts柱状图的具体代码,供大家参考,具体内容如下 第一次写博客,废话不多说,直接上代码 后台代码 @RequestMapping("/rcbchart") @ResponseBody private String dwcb(@RequestParam("scrq1") String scrq1,@RequestParam("scrq2") String scrq2, @RequestPara
-
SpringBoot+thymeleaf+Echarts+Mysql 实现数据可视化读取的示例
目录 实现过程 1. pom.xml 2. 后端程序示例 3. 前端程序示例 通过从数据库获取数据转为JSON数据,返回前端界面实现数据可视化. 数据可视化测试 实现过程 1. pom.xml pom.xml引入(仅为本文示例需要,其他依赖自行导入) <!--Thymeleaf整合security--> <dependency> <groupId>org.thymeleaf.extras</groupId> <artifactId>thymele
-
Springboot运用vue+echarts前后端交互实现动态圆环图
目录 前言 一.环境配置 1.1 安装acharts 1.2 全局引用 二.圆环图前端实现 2.1 先在vue页面添加渲染盒子 2.2 前端逻辑实现部分 2.3 展示(可按自己需求更改前端样式) 三.前后端数据交互实现 3.1 创建数据库 3.2 后台代码的编写 前言 我们做项目的时候,常常需要一些统计图来展示我们的数据,作为web开发人员,会实现统计图是我们必会的技能.我将带大家来实现动态饼图的实现 一.环境配置 1.1 安装acharts //npm也一样 cnpm install echa
-
Springboot+echarts实现可视化
现在在做毕设,做一个电商平台日志分析系统,需要结合可视化,达到一个直观的效果 1.搭建springboot项目,maven搭建,这是项目整体架构 2.后台代码: @RestController @RequestMapping("/wanglk_bds") public class VisualController { @Autowired private VisualInterface visualInterface; /** * 每一天的访问用户量 * @return */ @Req
-
SpringBoot+JSON+AJAX+ECharts+Fiddler实现前后端分离开发可视化
目录 0x01 新建SpringBoot项目 1. 新建maven工程 2. 编写代码 3. 代码讲解 0x02 JSON与AJAX结合 1. 编写html界面 2. 编写访问界面方法 3. 代码讲解 0x03 意外惊喜 1. 是彩蛋啊 2. 是又一个彩蛋啊 0xFF 总结 0x01 新建SpringBoot项目 1. 新建maven工程 ps:在上一教程的基础上操作,就不用新建项目了,请参考文章:SpringBoot+Thymeleaf+ECharts实现大数据可视化(基础篇) 2. 编写代码
-
Vue结合Springboot实现用户列表单页面(前后端分离)
目录 用户列表页面开发 项目介绍 1.前端html页面编写 2.springboot框架搭建 2.1.项目创建 2.2.连接数据库 2.3.项目完整依赖 3.编写entity层 4.查询用户信息 4.1.后端代码编写 4.2.前端代码编写 5.添加用户信息 5.1.后端代码编写 5.2.前端代码编写 6.修改用户信息 6.1.后端代码 6.2.前端代码 7.删除用户信息 7.1.后端代码 7.2.前端代码 用户列表页面开发 项目介绍 用户列表页面开发,可以实现简单的查询,删除,修改,和添加用户信
-
详解springboot和vue前后端分离开发跨域登陆问题
前后端分离开发中,一般都会遇到请求跨域问题.而且一般也会遇到登陆失效问题.今天就以springboot和vue为例来看如何解决上述问题 增加过滤器 @WebFilter @Component public class CorsFilter implements Filter { @Override public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException,
-
Springboot与vue实例讲解实现前后端分离的人事管理系统
目录 一,项目简介 二,环境介绍 三,系统展示 四,核心代码展示 五,项目总结 一,项目简介 系统是前后端分离的项目,直接启动Springboot应用程序类后,再启动前端工程访问即可.主要实现了企业的人事管理功能,主要包含员工管理.薪资管理.职位管理.权限管理.网盘文件分享管理等模块. 系统亮点:使用REDIS进行数据缓存,优化查询性能:使用分布式文件系统进行文件存储服务:基于Springboot+vue实现前后端分离开发 二,环境介绍 语言环境:Java: jdk1.8 数据库:Mysql:
-
vue+mockjs模拟数据实现前后端分离开发的实例代码
本文介绍了vue+mockjs模拟数据实现前后端分离开发的实例代码,分享给大家,也给自己留个笔记. 在项目中尝试了mockjs,mock数据,实现前后端分离开发. 关于mockjs,官网描述的是 1.前后端分离 2.不需要修改既有代码,就可以拦截 Ajax 请求,返回模拟的响应数据. 3.数据类型丰富 4.通过随机数据,模拟各种场景. 等等优点. 总结起来就是在后端接口没有开发完成之前,前端可以用已有的接口文档,在真实的请求上拦截ajax,并根据mockjs的mock数据的规则,模拟真实接口返回
-
以Java Web项目为例浅谈前后端分离开发模式
目录 为什么要前后端分离? 什么是前后端分离? 前后端分离的优缺点? 对于你们的团队和产品有没有必要前后端分离? 为什么要前后端分离? 以Java Web项目为例,在传统的开发模式中,前端代码(Html.js.css)写在JSP中,甚至JSP中嵌入Java代码.当用户访问网站时,页面数据也就是Html文档,由Servlet容器将jsp编译成Servlet,然后将jsp中的html,css,js代码输出到浏览器,这个过程需要经过很多步骤,才能响应用户的请求.这个过程非常繁琐,效率低下,直接造成了页
-
Spring Boot + Vue 前后端分离开发之前端网络请求封装与配置
前端网络访问,主流方案就是 Ajax,Vue 也不例外,在 Vue2.0 之前,网络访问较多的采用 vue-resources,Vue2.0 之后,官方不再建议使用 vue-resources ,这个项目本身也停止维护,目前建议使用的方案是 axios.今天松哥就带大家来看看 axios 的使用. axios 引入 axios 使用步骤很简单,首先在前端项目中,引入 axios: npm install axios -S 装好之后,按理说可以直接使用了,但是,一般在生产环境中,我们都需要对网络请
-
Springboot+Vue+shiro实现前后端分离、权限控制的示例代码
本文总结自实习中对项目的重构.原先项目采用Springboot+freemarker模版,开发过程中觉得前端逻辑写的实在恶心,后端Controller层还必须返回Freemarker模版的ModelAndView,逐渐有了前后端分离的想法,由于之前,没有接触过,主要参考的还是网上的一些博客教程等,初步完成了前后端分离,在此记录以备查阅. 一.前后端分离思想 前端从后端剥离,形成一个前端工程,前端只利用Json来和后端进行交互,后端不返回页面,只返回Json数据.前后端之间完全通过public A
-
SpringBoot前后端分离实现个人博客系统
目录 一.项目简介 二.环境介绍 三.系统展示 四.核心代码展示 五.项目总结 一.项目简介 本项目使用springboot+mybatis+前端vue,使用前后端分离架构实现的个人博客系统,共7个模块,首页,写博客,博客详情页,评论管理,文章分类,标签管理和文章归档.该项目没有后端管理功能,比较适合用于大作业! 二.环境介绍 语言环境:Java: jdk1.8 数据库:Mysql: mysql5.7/redis 应用服务器:Tomcat: tomcat8.5.31 开发工具:IDEA或ec
-
Vue+SpringBoot前后端分离中的跨域问题
在前后端分离开发中,需要前端调用后端api并进行内容显示,如果前后端开发都在一台主机上,则会由于浏览器的同源策略限制,出现跨域问题(协议.域名.端口号不同等),导致不能正常调用api接口,给开发带来不便. 封装api请求 import axios from 'axios' //axios.create创建一个axios实例,并对该实例编写配置,后续所有通过实例发送的请求都受当前配置约束 const $http = axios.create({ baseURL: '', timeout: 1000