springboot热部署 vue请求后台跨越访问简单解决

一、后台热部署

1. 引包

            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-devtools</artifactId>
        </dependency>

2. 修改项目代码配置

spring:
  application:
    name: service-provider
  devtools:
    restart:
      enabled: true

3. 修改开发工具配置
   （1）alt+shift+ctrl+/ 进行配置

   
   image.png

（2） settings进行相关配置

build project automatically

4.效果展示
改了一点代码立马发现控制台的变化如下：

日志

---

二、前台 vue 跨越请求

1. 修改config\index.js文件，配置代理。

dev: {
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {
      '/api': {
        target: 'http://localhost:8082',//后端接口地址
        changeOrigin: true,//是否允许跨越
        pathRewrite: {
          '^/api': 'http://localhost:8082',//替换，将/api替换成对应的地址。发请求的时候使用/api/getname**
        }
      }
    },

2. 代码请求：

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;
    }

}