Java体系知识之Echarts&跨域访问&Vue脚手架

最新推荐文章于 2024-06-19 00:41:07 发布

katahill

最新推荐文章于 2024-06-19 00:41:07 发布

阅读量420

点赞数

分类专栏：前端文章标签： echarts java vue.js

本文链接：https://blog.csdn.net/qq_45464872/article/details/128138150

版权

Java体系知识之Echarts&跨域访问&Vue脚手架 1 Echarts 1.1 技术简介 1.2 案例 2 跨域访问（重点） 2.1 错误信息 2.2 跨域访问 2.3 省市区案例-改造 2.3

摘要由CSDN通过智能技术生成

Java体系知识之Echarts&跨域访问&Vue脚手架

(1)Echarts图表工具
(2)跨域访问
(3)Vue 脚手架

1 Echarts

1.1 技术简介

(1)Apache ECharts
(2)一个基于 JavaScript 的开源可视化图表库
(3)使用步骤：
	A.引入echarts.js文件
	B.创建一个指定了宽高的容器
	C.根据图表的配置项和数据以图表的形式呈现数据
		C1.基于准备好的dom，初始化echarts实例
		C2.指定图表的配置项和数据
		C3.使用刚指定的配置项和数据显示图表

1.2 案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 1.引入echarts文件 -->
		<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.3/echarts.js"></script>

	</head>
	<body>
		<!-- 2.创建一个指定了宽高的容器 -->
		<div id="main" style="width: 600px;height:400px;"></div>
	</body>
	<script>
		/* 
			3.呈现图表
		 */
		// 3.1基于准备好的dom，初始化echarts实例
		var myChart = echarts.init(document.getElementById('main'));

		// 3.2指定图表的配置项和数据
		var option = {
     
			xAxis: {
     
				type: 'category',
				data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
			},
			yAxis: {
     
				type: 'value'
			},
			series: [{
     
				data: [150, 230, 224, 218, 135, 147, 260],
				type: 'line'
			}]
			/* title: {
				text: 'ECharts 入门示例'
			},
			tooltip: {},
			legend: {
				data: ['销量']
			},
			xAxis: {
		 	data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
			},
			yAxis: {},
			series: [{
				name: '销量',
				type: 'bar',
				data: [5, 20, 36, 10, 10, 20]
			}] */
		};

		// 3.3使用刚指定的配置项和数据显示图表
		myChart.setOption(option);
	</script>

</html>

2 跨域访问（重点）

2.1 错误信息

Access to XMLHttpRequest at 'http://localhost:8080/area' from origin 'http://127.0.0.1:8848' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
2 area.html:106 o

2.2 跨域访问

(1)Cookie：
	A.HTTP协议：无状态协议
	B.客户端和服务端，服务端只关心请求   
	C.如何让服务端知道该客户端已经不是第一次访问它了，可以使用Cookie
	D.数据安全考虑：
		浏览器基于Cookie同源限制
		D1.不涉及到跨域请求时，Cookie会随着请求自动发送到服务器端，用于验证自己身份
		D2.涉及到跨域请求时，默认不会在请求中携带Cookie数据
	同源：
		http://localhost:8080/具体资源
		对于协议|域名|端口，若两个页面有一个值不一样，就认为是不同源
		http://localhost:8080
		http://localhost:8081
(2)同源政策越来越严格：
	浏览器：使用Ajax技术时，只能向自己的服务器发请求
(3)CORS：
	Cross-Origin Resource Sharing  跨域资源共享
(4)解决：
	在服务器端设置允许哪个客户端来访问它
	跨域请求：
		// 允许跨域的主机地址，一般写具体的客户端的主机地址，比如http://127.0.0.1:8848
        resp.setHeader("Access-Control-Allow-Origin","http://127.0.0.1:8848");
        // 允许跨域的请求方法，GET|POST...，也可以直接写*
        resp.setHeader("Access-Control-Allow-Methods","*");
        // 重新域检验跨域的缓存时间(s)
        resp.setHeader("Access-Control-Max-Age","3600");
        // 允许跨域的请求头
        resp.setHeader("Access-Control-Allow-Headers","*");
        // 允许携带Cookie信息
        resp.

最低0.47元/天解锁文章

katahill

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Java体系知识之Echarts&跨域访问&Vue脚手架

Java体系知识之Echarts&跨域访问&Vue脚手架 1 Echarts 1.1 技术简介 1.2 案例 2 跨域访问（重点） 2.1 错误信息 2.2 跨域访问 2.3 省市区案例-改造 2.3
复制链接

扫一扫