SpringData-jpa+Vue+highcharts绘制静态数据柱状图、饼图
highcharts绘制静态数据柱状图、饼图:
开发软件:
后台开发:Idea;
后台测试:Postman;
前端开发:VScod;
1、创建SpringBoot项目:
使用Idead点击file,选择New Project,选择Spring InitInitializr,自行配置项目的基础配置;
2、在pom.xml文件中导入依赖:
<dependencies>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-data-jdbc</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-data-jpa</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
<scope>runtime</scope>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-test</artifactId>
<scope>test</scope>
<exclusions>
<exclusion>
<groupId>org.junit.vintage</groupId>
<artifactId>junit-vintage-engine</artifactId>
</exclusion>
</exclusions>
</dependency>
<!--添加servlet依赖模块 -->
<dependency>
<groupId>javax.servlet</groupId>
<artifactId>javax.servlet-api</artifactId>
<scope>provided</scope>
</dependency>
<!-- 添加jstl标签库依赖模块 -->
<dependency>
<groupId>javax.servlet</groupId>
<artifactId>jstl</artifactId>
</dependency>
<!--添加tomcat依赖模块-->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-tomcat</artifactId>
<scope>provided</scope>
</dependency>
<dependency>
<groupId>org.projectlombok</groupId>
<artifactId>lombok</artifactId>
<version>1.16.2</version>
</dependency>
<!-- 用于 JSON API 文档的生成-->
<dependency>
<groupId>io.springfox</groupId>
<artifactId>springfox-swagger2</artifactId>
<version>2.9.2</version>
</dependency>
<!--用于文档界面展示-->
<dependency>
<groupId>io.springfox</groupId>
<artifactId>springfox-swagger-ui</artifactId>
<version>2.9.2</version>
</dependency>
</dependencies>
3、在resource文件夹下编写application.yml配置文件:
server:
port: 8181 #服务器启动端口号
spring:
application:
name:address-service
devtools:
restart:
enabled: true
datasource: #连接池
url: jdbc:mysql://127.0.0.1:3306/vue?useUnicode=true&serverTimezone=UTC&characterEncoding=utf-8
username: root
password: root
driver-class-name: com.mysql.jdbc.Driver
jpa:
hibernate:
ddl-auto: update
show-sql: true
mvc:
date-format: yyyy-MM-dd
main:
allow-bean-definition-overriding: true
4、创建dao,service,web,entity,config等基础包并启动项目:
这里启动是为了保证项目初始环境没有任何问题,如对自己的项目有充分信心可跳过启动项目,至此构建项目完成
5、编写实体类:
import lombok.Data;
import javax.persistence.*;
@Data
@Entity
@Table(name = "charts")
public class Charts {
@Id
@GeneratedValue(strategy = GenerationType.IDENTITY)
@Column(name = "id",unique = true,nullable = false,length = 50)
private Integer id;
@Column(name = "name",nullable = false,length = 50)
private String name;
@Column(name = "num",nullable = false,length = 50)
private Integer y;
}
注:实体类中使用的@Data来自lombok插件,使用该注解后,可省略代码中的get/set方法,@Table声明该实体类与数据库中表名为@Table注解后name相对应。
如何安装lombok及lombok的使用
6、编写dao:
在这里使用了jpa,对于简单的CRUD语句及其方法会由实现jpa的ORM框架进行编写,我们对其直接进行调用即可:
什么是JpaRepository及其使用
import org.springframework.data.jpa.repository.JpaRepository;
public interface ChartsDao extends JpaRepository<Charts,Integer> {
}
7、编写service及其实现(可省略service接口编写):
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import org.springframework.transaction.annotation.Transactional;
import java.util.List;
@Service
@Transactional
public class ChartsService {
@Autowired
private ChartsDao chartsDao;
public List<Charts> findAll(){
return chartsDao.findAll();
}
}
8、编写Controller
import com.oracle.pojo.Charts;
import com.oracle.service.ChartsService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;
import java.util.List;
@RestController
public class ChartsController {
@Autowired
private ChartsService chartsService;
@GetMapping("findAll")
public List<Charts> findAll(){
return chartsService.findAll();
}
9、跨域实现:
在config包下创建该配置文件,文件名可自行更改:
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
import org.springframework.web.filter.CorsFilter;
@Configuration
public class CorsConfig {
// 初始化 CorsConfiguration 对象并设置允许的域名、请求头部信息和请求方式
private CorsConfiguration buildConfig() {
CorsConfiguration corsConfiguration = new CorsConfiguration();
corsConfiguration.addAllowedOrigin("*"); // 1 允许任何域名使用
corsConfiguration.addAllowedHeader("*"); // 2 允许任何头
corsConfiguration.addAllowedMethod("*"); // 3 允许任何方法(post、get 等)
return corsConfiguration;
}
/**
* 创建 CorsFilter 对象
* @return CorsFilter
*/
@Bean
public CorsFilter corsFilter() {
UrlBasedCorsConfigurationSource source = new
UrlBasedCorsConfigurationSource();
source.registerCorsConfiguration("/**", buildConfig()); //拦截所有请求
return new CorsFilter(source);
}
}
10、测试:
Postman下载使用
测试完成,后台代码编写完成。
前台开发:
在进行前台开发前,一定要确认已安装了node.js和Vue-cli
webpack+vue2.0+nodeJs搭建环境
1、搭建Vue-cli脚手架并创建一个基于 webpack 模板的新项目:
2、启动项目确保项目初始化没有问题
3、安装axios 插件和安装 Element 插件 :
安装axios:npm install --save axios vue-axios
4、导入并搭建highcharts
安装:npm install highcharts
搭建chart组件的架子:components下的commons公共目录下新建一个chart.vue文件:
<template>
<div class="x-bar">
<div :id="id" :option="option"></div>
</div>
</template>
<script>
import HighCharts from 'highcharts'
export default {
// 验证类型
props: {
id: {
type: String
},
option: {
type: Object
}
},
mounted () {
// setTimeout(() => {
// console.info('饼图模板');
// HighCharts.chart(this.id, this.option);
// }, 500);
// 静态数据,随页面打开自动创建
// HighCharts.chart(this.id,this.option)
},
methods: {
// 动态数据,当数据加载完毕再执行创建
me () {
HighCharts.chart(this.id, this.option)
}
}
}
</script>
创建用来存放模拟的chart数据:由于是创建柱状图和饼图,所以搭建了两个文件(commons公共目录下新建chart-options目录,创建options.js和options.js):
// let $back = $('#myBack')
let Options = function () {
this.pie = {
chart: {
type: 'pie',
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false
},
title: {
text: ''
},
tooltip: {
headerFormat: '{series.name}<br>',
pointFormat: '{point.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true
},
showInLegend: true,
events: {
click: function (e) {
// alert($back.val())
// alert(e.point.url);
// window.open(e.point.url);
// location.href = e.point.url;
}
}
}
},
series: [{
name: '',
colorByPoint: true,
// 动态接收数据
data: []
}]
}
}
Options.prototype.func = function (op) {
if (op.pie != null) {
// 复制对象
this.pie = Object.assign(this.pie, op.pie)
}
}
export default new Options()
let Options = function () {
this.chart = {
chart: {
type: 'column'
},
title: {
text: '全球各大城市人口排行'
},
subtitle: {
text: 'Wikipedia'
},
xAxis: {
type: 'category',
labels: {
rotation: -45
}
},
yAxis: {
min: 0,
title: {
text: ''
}
},
legend: {
enabled: false
},
tooltip: {
pointFormat: '人口总量: <b>{point.y:.1f} 百万</b>'
},
series: [{
name: '',
data: [],
dataLabels: {
enabled: true,
rotation: -90,
color: '#FFFFFF',
align: 'right',
format: '{point.y:.1f}', // :.1f 为保留 1 位小数
y: 10
}
}]
}
}
Options.prototype.funcc = function (op) {
if (op.chart != null) {
// 复制对象
this.chart = Object.assign(this.chart, op.chart)
}
}
export default new Options()
引用chart组件:
<template>
<div class="pie">
<div id="pie1">
<x-chart ref="XChart1" :id="id1" :option="option1"></x-chart>
</div>
<div id="pie2">
<x-chart ref="XChart2" :id="id2" :option="option2"></x-chart>
</div>
</div>
</template>
<script>
// 导入chart组件
import XChart from './chart.vue'
// 导入定义好的chart模型
import options from './chart-options/options'
import options1 from './chart-options/options1'
const axios = require('axios')
export default {
data () {
// let option = options.bar
return {
id1: 'pie1',
option1: null,
id2: 'pie2',
option2: null
}
},
components: { XChart },
created () {
this.chartPie1()
this.chartPie2()
},
methods: {
// 饼图1
chartPie1 () {
return new Promise((resolve, reject) => {
options.func({
pie: {
title: {
text: '浏览器访问量'
},
series: [{
type: 'pie',
name: '浏览器访问量占比',
data: []
}]
}
})
axios.get('http://localhost:8181/findAll').then(({ data }) => {
options.pie.series[0].data = data
})
.catch(error => {
console.log(error)
})
this.option1 = options.pie
resolve()
}).then(resp => {
// 执行创建饼图
setTimeout(() => {
this.$refs.XChart1.me()
}, 500)
})
},
chartPie2 () {
return new Promise((resolve, reject) => {
options1.funcc({
chart: {
title: {
text: '人口 (百万)'
},
series: [{
name: '总人口',
data: [
['上海', 24.25],
['卡拉奇', 23.50],
['北京', 21.51],
['德里', 16.78],
['拉各斯', 16.06],
['天津', 15.20],
['伊斯坦布尔', 14.16],
['东京', 13.51],
['广州', 13.08],
['孟买', 12.44],
['莫斯科', 12.19],
['圣保罗', 12.03],
['深圳', 10.46],
['雅加达', 10.07],
['拉合尔', 10.05],
['首尔', 9.99],
['武汉', 9.78],
['金沙萨', 9.73],
['开罗', 9.27],
['墨西哥', 8.87]
]
}]
}
})
axios.get('http://localhost:8181/findAll').then(({ data }) => {
let array = []
let array1 = []
data.filter(d => {
array.push(d.name, d.y)
array1.push(d.y)
})
options1.chart.series[0].data = data
})
.catch(error => {
console.log(error)
})
this.option2 = options1.chart
resolve()
}).then(resp => {
// 执行创建饼图
setTimeout(() => {
this.$refs.XChart2.me()
}, 500)
console.log('111' + resp)
}).catch(resp => {
console.log('2222' + resp)
})
}
}
}
</script>
5、启动后台项目与前台项目进行测试
最终结果如下:
完成