前端连接后端,获取到数据库数据,通过ECharts图标展现在页面上

话不多说,直接上干货!!!!

一,首先在数据库创建表:如下

二,搭建后端代码,通过localhost的方式,从数据库获取到这些数据.

2.1项目结构,见下图:

创建启动类,Controller,Service,ServiceImpl,mapper,poji以及xml和yml,,,,,下面将详细将具体里面都写什么代码,可以实现什么效果.

2.2 Controller(启动类省略,感觉这个没必要展示吧...)

@Controller
@CrossOrigin
public class PieController {@AutowiredPieServiceImpl pieService;/*** 获取(左下饼图)质量管理的数据，对应pie表*/@GetMapping("y")@ResponseBodypublic List<Pie> Addie(){return pieService.Addie();}
}

2.3 Service以及ServiceImpl

2.3.1 Service (注意是接口)

public interface PieService {List<Pie> Addie();
}

2.3.2 ServiceImpl (Service的实现类)

@Service
public class PieServiceImpl implements PieService {@AutowiredPieMapper pieMapper;@Overridepublic List<Pie> Addie(){return pieMapper.Addie();}
}

2.4 mapper (注意是接口)

@Mapper
public interface PieMapper  {List<Pie> Addie();
}

2.5 pojo

@Data
@NoArgsConstructor
@AllArgsConstructor
public class Pie {private String aname;//车间名private int anumber;//左下饼图
}

2.6 xml文件(名字随意,自己能知道就好,但最好还是做到"见明知意")

这里我主要写的是查询数据库的语句.....

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN""http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.xue.mapper.PieMapper"><select id="Addie" resultType="com.xue.pojo.Pie">select aname,anumber from pie;</select>
</mapper>

2.7 yml文件(注意文件所在的位置,层级关系)

这里写的是自己的端口号(自己定,随意),以及链接数据库的方式,还有很明显的mybatis-plush配置

注意!!!!1.连接数据库时的名称正确!!!(我这里是echarts)

2.数据库的账户及密码!!!

server:port: 8090servlet:context-path: /spring:datasource:driver-class-name: com.mysql.cj.jdbc.Driver#如果和数据库处于同一台Linux系统 则127可以连接url: jdbc:mysql://127.0.0.1:3306/echarts?serverTimezone=GMT%2B8&useUnicode=true&characterEncoding=utf8&autoReconnect=true&allowMultiQueries=true#如果位于不同的服务器IP直连#url: jdbc:mysql://192.168.126.129:3306/jt?serverTimezone=GMT%2B8&useUnicode=true&characterEncoding=utf8&autoReconnect=true&allowMultiQueries=trueusername: rootpassword: root#mybatis-plush配置
mybatis-plus:type-aliases-package: com.xue.pojomapper-locations: classpath:/mapper/*.xmlconfiguration:map-underscore-to-camel-case: truelogging:level:com.jt.mapper: debug

如果按部就班的写到这一步,那就证明你的后端搭建成功,离页面实现更近了一大步!!!!!! 继续干!!!

2.8(也是验证后端是否搭建成功的一步,通过localhost的方式检查是否能在页面上获取到数据)

如果出先如图的数据,说明你的后台搭建成功!!至此后端的活就干完啦!!!是不是觉得很简单呀

三,编写前端(运用ajax的方式)

创建一个html文件进行代码的编写

3.1首先导入echarts.js文件

文件导入在<head>里, (这个js可以自己在官方下载,我的是和同事直接考过来的)

<script src="./echarts.min.js"></script>

导入js之后,主要的流程就是写一个ajax,根据url的地址从后端获取到数据,在进行遍历及赋值。

话不多说,直接上代码!!!!

<!DOCTYPE html>
<html lang="zh-CN"  xmlns:th="http://www.thymeleaf.org"xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><title></title><meta charset="utf-8" /><script src="./echarts.min.js"></script><script src="./jquery-1.8.3.min.js"></script></head>
<body><div id="main" style="width: 1150px;height:400px; padding-top: 65px"></div><script type="text/javascript">// 基于准备好的dom，初始化echarts实例window.onload = function pie() {// 基于准备好的dom，初始化echarts实例var myChart = echarts.init(document.getElementById('main'));myChart.showLoading();    //数据加载完之前先显示一段简单的loading动画//声明一个对象var list = [];var nus = [];$.ajax({async: true,//异步请求data: {},//请求方式gettype: "GET",//请求地址url: "http://localhost:8090/y",//数据，json字符串dataType: "json",//请求成功success: function (result) {console.log(result);//进行数据的遍历$.each(result, function (index, item) {//添加数据到对象//物品名list.push(item.aname);//物品名和数量nus.push({name: item.aname,value: item.anumber});});console.log(list);console.log(nus);myChart.hideLoading();//隐藏加载动画// 指定图表的配置项和数据var option = {tooltip: {trigger: "item",formatter: "{a} <br/>{b}: {c} ({d}%)",position: function(p) {//其中p为当前鼠标的位置return [p[0] + 10, p[1] - 10];}},legend: {itemWidth: 10,itemHeight: 10,orient: 'vertical',left: 'left',data: nus.aname,textStyle: {color: "#000",fontSize: "12"}},series: [{name: "工单执行数量",type: "pie",center: ["50%", "42%"],data: nus}]};// 使用刚指定的配置项和数据显示图表。myChart.setOption(option);},error: function (errorMsg) {//请求失败时执行该函数alert("图表请求数据失败!");myChart.hideLoading();}});};</script>
</body>
</html>

最终实现饼图,如图

大功告成!!对于初学者还是很有帮助的,简单明了.我也是纯纯的小白,通过自己各种研究最终实现的.加油!!!!

前端连接后端,获取到数据库数据,通过ECharts图标展现在页面上相关推荐

App前端及后端接口，模拟数据及返回值
App前端及后端接口,模拟数据 :接口文档目录 1. 全局状态码 6 2. 前台 7 2.1. 首页 7 2.1.1. 商品分类列表接口 7 2.1.2. 展示轮播图接口 9 2.1.3. 展示广告 ...
php 获取数据库函数吗,如何正确理解PHP获取显示数据库数据函数
在运用PHP语言对数据库进行操作的时候,我们将会用到mysql_X这一函数库.下面我们将为大家详细介绍有关PHP获取显示数据库数据函数的函数. PHP获取显示数据库数据函数之 mysql_result ...
使用express搭建服务器获取MySQL数据库数据
一.原始的mysql查询方法先安装mysql cnpm install mysql --save 引入这个db.js之后,才能对数据库进行查询进行查询查询结果如下: 二.ORM 介绍 ORM 全 ...
后端——获取提交的数据（GET、 POST）、获取上传的文件、常见的网络请求
目录一.获取提交的数据 1.接收GET请求的数据: 1.ajax-get 2.axios-get 3.浏览器的地址栏-get 4.a标签的href属性-get 5.img-src-get 6.lin ...
thinkphp长连接MySQL_ThinkPHP3.2.3---mysql+ajax实现长连接，实时监测数据库数据是否更新...
实现目标对数据库的数据更新进行监测,如果更新了数据就将数据全部显示出来,没有更新,则一直监测. 比如有一个服务端(浏览器),有很多客户端(浏览器),客户端提交了数据,服务端想要在不刷新浏览器的情况下 ...
Qt获取Access数据库数据
一.连接Access数据库: ① 在.pro文件中添加 QT+=sql : ② 在Qt中有自带的QSql类是用来操作数据库的,将数据库连接封装成一个类,引入头文件.三个类可以通过查Qt的帮助文档搞清楚 ...
前端接收后端返回的集合数据并展示
前端通过AJAX接收后端返回的数据我们想要实现的功能是:通过ajax接收后端传过来的list集合,然后将数据转换并在前端页面的表格中展示.经过两天的修改,终于探索出了代码.表格展示用的是elemen ...
lzg_ad:使用OPENROWSET函数连接并访问远程数据库数据
我们有时候会遇到要访问的数据不只是在本地服务器上,往往另一部分在远程数据库服务器上,比如我们在两个服务器上存放着表结构一样的数据我们要把两数据合并起来一起显示怎么办呢,那么这个时候我们用SQL SE ...
sql获取oracle数据库数据,通过sql语句获取数据库的基本信息
您可以通过以下几个sql 可以立即了解系统的状况和数据库的状态(仅献给习惯使用sql/plus的人呵呵 ) (1) 查询oracle 的物理结构 1.1. 查看数据文件 SQL> select ...