(自用)Vue通过axios访问服务器并返回数据绘制echarts图形
前端
柱形图
后端
依赖
spring-boot-starter-parent
spring-boot-starter-web
spring-boot-maven-plugin
跨域
package org.example.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 Cqqq {
@Bean
public CorsFilter corsFilter() {
CorsConfiguration config = new CorsConfiguration();
// 允许所有域名进行跨域调用
config.addAllowedOriginPattern("http://localhost:5173");
// 允许任何请求头
config.addAllowedHeader("*");
// 允许任何方法(POST、GET等)
config.addAllowedMethod("*");
// 允许携带凭证
config.setAllowCredentials(true);
UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
source.registerCorsConfiguration("/**", config);
return new CorsFilter(source);
}
}
控制类
package org.example.conl;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import java.util.ArrayList;
import java.util.List;
@RestController
public class Ckkk {
@RequestMapping("/data")
public List
List
list.add(100);
list.add(150);
list.add(200);
list.add(50);
list.add(300);
list.add(200);
list.add(250);
return list;
}
}
仪表盘 定时器等:
package org.example.conl;import org.springframework.web.bind.annotation.RequestBody;import org.springframework.web.bind.annotation.RequestMapping;import org.springframework.web.bind.annotation.RestController;import java.util.ArrayList;import java.util.List;import java.util.Random;@RestControllerpublic class Ckkk { @RequestMapping("/data") public List