各大技术基础教学、实战开发教学（最新更新时间2022-1-3）
断更挺久了，今天开始恢复教程文章，感谢大家一路的支持，话不多说，开始今天的教学之旅
今天要介绍的是如何实现通过SpringBoot+Vue前后端分离，将数据从数据库传递给前端达到echarts图形的展示
先看看效果图，图形中的数据是数据库中，不是假数据

文章图片
?

目录 数据部分
后端
创建一个SpringBoot项目
Application配置
Book类（bean数据层）
BookRepository接口类（DAO数据访问层）
BookService接口类（业务层）
BookServiceImpl实现类（业务层）
BookController类（控制层）
跨域请求处理
【SpringBoot教学|如何快速使用SpringBoot+Vue前后端分离实现echarts图形可视化（入门详细教程）】启动后端项目
Vue前端
vue脚手架创建项目
编写前端代码
（1）引入axios和echarts，全局配置
（2）App.vue
（3）Home.vue
（4）echarts图形使用
?axios请求后端接口数据
动态加载echarts数据源

数据部分 我这里就以这个图书信息作为今天教程讲解的数据部分，从中提取图书名称(name)和图书数量(num)

文章图片
?

后端 我们先从后端敲起，定义好RESTful接口，这里我们采用集成JPA来访问操作数据库
创建一个SpringBoot项目
文章图片


文章图片

在左侧中找到右边框出来的这几个依赖，勾选上

文章图片


文章图片

选择自动导入依赖（没有显示也没事），到这里一个基本SpringBoot项目就创建好了

文章图片

Application配置
文章图片

Book类（bean数据层） 对应数据库的表，类名对应表名，会自动将类名首字母小写去匹配数据库中的表名，字属性名对应表的字段

@Entity注解	声明一个实体类
@Data注解	自动生成Setter,Getter,toString函数
@Id注解	声明一个主键字段（必须要）

@Entity @Data public class Book {@Id private Integer bid; private String name; private Integer card; private String author; private Integer num; private String press; private String type; private Integer times; }

BookRepository接口类（DAO数据访问层）

@Repository public interface BookRepository extends JpaRepository {}

BookService接口类（业务层）

public interface BookService {// 查询所有图书信息 List selectAllBooks(); }

BookServiceImpl实现类（业务层） 这里是写业务逻辑的，增删改查的逻辑处理在这里操作，@Service注解声明该类一为业务层的类

@Service public class BookServiceImpl implements BookService {@Autowired private BookRepository bookRepository; @Override public List selectAllBooks() { return bookRepository.findAll(); } }

BookController类（控制层） 这部分就是跟前端进行交互的，

@RestController注解	声明一个控制层的类，通过设置返回的数据格式为RESTful风格
@RequestMapping注解	声明该类或方法解析的请求路径（我这里写在类上，写在方法上也可以）
@Autowired注解	自动装配，service必须有@Service注解才行
@GetMapping注解	声明改类或方法解析的Get请求路径

@RestController @RequestMapping(value = "https://www.it610.com/books") public class BookController {@Autowired private BookService bookService; /** * 查询所有 * @return 所有图书信息 */ @GetMapping(value = "https://www.it610.com/select") public Map> select() { Map> map = new HashMap<>(); map.put("Books", bookService.selectAllBooks()); return map; } }

跨域请求处理 前端发送请求给后端时会出现跨域请求，如果不进行配置会报错，在新建一个SorsConfig配置类，处理跨域请求

@Configuration public class CorsConfig implements WebMvcConfigurer { @Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping("/**") .allowedOriginPatterns("*") .allowedMethods("GET", "HEAD", "POST", "PUT", "DELETE", "OPTIONS") .allowCredentials(true) .maxAge(3600) .allowedHeaders("*"); } }

启动后端项目 在浏览器输入IP+端口+映射的请求路径，能看到数据显示出来就说明后端搭建成功

文章图片

Vue前端 打开VSCode编译器（你用其他也可以），新建终端，在终端输入vue create vue-demo vue-demo是项目名称
vue脚手架创建项目 然后选default默认即可，接下来等待创建完毕，需要点时间

文章图片

创建完之后，通过cd指令跳转到项目目录下，并安装引入axios和echarts

文章图片

输入npm run serve启动项目

文章图片


文章图片

编写前端代码 （1）引入axios和echarts，全局配置

文章图片

（2）App.vue
删掉框出来的

文章图片

（3）Home.vue
删掉我注释的部分，添加个h3标签的标题看一下当前页面效果

文章图片

保存自动会刷新页面，打开浏览器看一眼，ok

文章图片

（4）echarts图形使用
在Home.vue中，添加一个div标签作为图形展示的画布，在javascript里写一个方法，用来初始化图形和展示图形

文章图片

打开echarts官网 https://echarts.apache.org/zh/index.html

文章图片

找一个自己喜欢的图形，这里我选择这个饼图，复制左边的配置项，option里面的

文章图片

将他放在这个位置

文章图片

最后在mounted生命周期函数中调用改方法

文章图片

保存打开浏览器，可以成功看到图形已经显示

文章图片
axios请求后端接口数据 在mounted生命周期函数发送请求给后端接口

文章图片

this.$axios.get(this.$url + '/select').then((res) => { console.log(res.data) }).catch((err) => { console.log(err) alert('请求失败！请检查后端接口！！！！') })

保存打开浏览器看一下打印的数据

文章图片

动态加载echarts数据源
在图形的options配置项中找到数据所在位置

文章图片

我们将他抽出来，定义在data()当前页面全局变量中

文章图片

配置项里通过this指针调用当前全局变量

文章图片

接下来就是最后一步了，将axios请求成功接收到的回传数据覆盖掉原来data数据

文章图片

this.$axios.get(this.$url + '/select').then((res) => { // 读取接口请求成功回传回来的数据 var books = res.data.Books // 定义数组，存放一会覆盖echarts图形的数据 var data = https://www.it610.com/article/[] // 循环遍历数组，取出数据，转成和data一样的格式 for(var i = 0; i < books.length; i++) { var d = {name:'', value: 0} d.name = books[i].name d.value = https://www.it610.com/article/books[i].num // 往data数组中添加数据 data.push(d) } // 排序，b - a降序——a - b升序 data.sort((a , b) => b.value - a.value) // 覆盖data(){}中全局变量的数据 this.data = https://www.it610.com/article/data // 画出图形 this.Draw() }).catch((err) => { console.log(err) alert('请求失败！请检查后端接口！！！！') })

保存自动刷新，打开浏览器，成功的将数据展示出来

文章图片

这次的教程到这里就结束啦~ 觉得还不错的话点个赞哦~ 同时希望帮忙点个五星好评感激不尽

? ? ? ? ? 博主信息? ? ? ? ?
博主名称：Yuan-Programmer
链接直达：https://bbs.csdn.net/topics/603957283
链接直达：https://bbs.csdn.net/topics/603957283
链接直达：https://bbs.csdn.net/topics/603957283
链接直达：https://bbs.csdn.net/topics/603957283
? ? ? ? ? 点点五星? ? ? ? ?
我正在参加年度博客之星评选，请大家帮我投票打分，您的每一分都是对我的支持与鼓励。
贡献您几秒钟时间，点个五星，在此感激不尽！！！
各大技术基础教学、实战开发教学（最新更新时间2022-1-3）

推荐阅读

• 

  网上卖的袋装带鱼能买吗 网上带鱼能买吗
• 

  丝瓜的热量
• 

  switch怎么连显示器
• 

  安卓水印去除软件,无痕go水印怎么用?教你!
• 

  油箱盖子冻住了怎么办 油箱盖冻了怎么解决
• 

  朋友印象如何发表印象？朋友印象APP发表印象方法
• 

  最高院非法进行节育手术案件的相关司法规定
• 

  华为平板M68.4英寸平板电脑屏幕碎了维修价格
• 

  《轻而易举的富足》第3天|《轻而易举的富足》第3天 第3课，我觉察我看到了什么
• 

  如何在京东云服务器上安装驱动？ 京东云服务器怎么安装驱动
• 

  肾好的人可以吃补肾的药丸吗 好肾可以吃出来
• 

  图像数据分析控件,霍尔效应实验图像数据分析
• 

  wps怎么只打印一页
• 

  我喜欢的小动物作文400字 写动物的作文400字
• 

  云盘|免费的便宜能占？打工人的网盘这么选
• 

  牛肉粉丝怎么烧 粉丝怎么烧
• 

  c语言trace函数 c语言stract函数
• 

  迅雷影音怎么跳过片头 迅雷影音播放器是否可以跳过片头?
• 

  阿里云低延时直播RTS能力升级，让直播推流效果更佳
• 

  请问人工流产后什么情况下会导致不孕呢？

• springboot博客系统|SpringBoot+Vue快速搭建简单个人博客系统之后端
• SpringBoot教学|使用SpringBoot一小时快速搭建一个简单后台管理（增删改查）（超详细教程）
• Hadoop|如何在IDEA编译器中连接HDFS，运行MapReduce程序
• SpringBoot教学|使用SpringBoot一小时快速搭建一个简单后台管理（后端篇）
• springboot|Springboot+Vue+axios实现对文章收藏功能
• SpringBoot+Vue实现用户管理（一）
• 前端工程师面试题|冲刺前端一线大厂面试题(react)持续更新中
• java|java byte转成int数组_Java任意长度byte数组转换为int数组的方法
• java|java byte 强转 int_Java byte[]转int如何实现