一、后台热部署
- 引包
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-devtools</artifactId>
</dependency>
- 修改项目代码配置
spring:
application:
name: service-provider
devtools:
restart:
enabled: true
-
修改开发工具配置
（1）alt+shift+ctrl+/ 进行配置
image.png
（2） settings进行相关配置
build project automatically
4.效果展示
改了一点代码立马发现控制台的变化如下：
日志
二、前台 vue 跨越请求
- 修改config\index.js文件，配置代理。
dev: {
assetsSubDirectory: 'static',
assetsPublicPath: '/',
proxyTable: {
'/api': {
target: 'http://localhost:8082',//后端接口地址
changeOrigin: true,//是否允许跨越
pathRewrite: {
'^/api': 'http://localhost:8082',//替换，将/api替换成对应的地址。发请求的时候使用/api/getname**
}
}
},
- 代码请求：
queryData() {
axios.get('/api/queryData')//经过配的代理，这个请求会真正请求http://localhost:8082/queryData
.then(response => {
console.log("response:" + response.data);
})
.catch(function (error) {
console.log(error);
})
},
三、结合前后台串联请求
概要说明：
（1） 前台展示柱状图，需要x坐标的属性名和对应的y值。其实就是两个数组。
（2） 后台提供两个接口，分别返回一个字符串数组和一个整数的数组。
例如：
字符串数组是["篮球", "排球", "足球", "台球", "乒乓球", "羽毛球", "玻璃球"]
整数数组是[80, 30, 4, 66, 234, 165, 158]
（3）效果展示：
销量展示
（4）贴上关键代码：
- 前台部分
home.vue
<template>
<div id="myChart" ref="myChartRef" :style="{width: '600px', height: '300px'}"></div>
</template>
<script>
import axios from 'axios';
axios.defaults.baseURL = '/api'
export default {
name: 'home', // 组件可以有自己的名字。
data() { // 组件的data必须是函数
return {
msg: '这里是Home视图',
chartData: [],
chartXaxisData: []
}
}, mounted() {
// this.queryData();
this.queryData2();
},
methods: {
queryData2() {
axios.get('/queryData')
.then(response => {
console.log("response:" + response.data);
this.chartData = response.data;
axios.get('/queryCols')
.then(response => {
console.log("response:" + response.data);
this.chartXaxisData = response.data;
this.drawLine();
})
.catch(function (error) {
console.log(error);
})
})
.catch(function (error) {
console.log(error);
})
},
drawLine() {
// 基于准备好的dom，初始化echarts实例
// let myChart = this.$echarts.init(document.getElementById('myChart'))
let myChart = this.$echarts.init(this.$refs.myChartRef);
// 绘制图表
myChart.setOption({
title: {text: '浩浩超市销量图'},
tooltip: {},
xAxis: {
data: this.chartXaxisData
},
yAxis: {},
series: [{
name: '',//鼠标悬浮显示信息
type: 'bar',
data: this.chartData
}]
});
}
}
}
</script>
<style scoped>
h3 {
background-color: #1f0125;
color: white;
width: 20%;
}
</style>
- 后台部分：
controller
package com.rest;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.bind.annotation.RestController;
import java.util.*;
@RestController
public class BasketballController {
Logger logger = LoggerFactory.getLogger(BasketballController.class);
/**
* 假如这个客户端要提供一个getUser的方法
*
* @return
*/
@GetMapping(value = "/buy")
@ResponseBody
public Map<String, Object> getUser() {
Map<String, Object> data = new HashMap<>();
// data.put("id",id);
data.put("size", "7#");
data.put("from", "山岗篮球场");
return data;
}
@GetMapping(value = "/queryData")
@ResponseBody
public List queryData() {
logger.info("queryData");
Random random = new Random();
List res = new ArrayList();
for (int i = 0; i < 4; i++) {
res.add(random.nextInt(100));
}
for (int i = 0; i < 3; i++) {
res.add(random.nextInt(200));
}
return res;
}
@GetMapping(value = "/queryCols")
@ResponseBody
public List queryCols() {
logger.info("queryCols");
List res = new ArrayList();
res.add("篮球");
res.add("排球");
res.add("足球");
res.add("台球");
res.add("乒乓球");
res.add("羽毛球");
res.add("玻璃球");
return res;
}
}
