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

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)CookieA.HTTP协议:无状态协议
	B.客户端和服务端,服务端只关心请求   
	C.如何让服务端知道该客户端已经不是第一次访问它了,可以使用Cookie
	D.数据安全考虑:
		浏览器基于Cookie同源限制
		D1.不涉及到跨域请求时,Cookie会随着请求自动发送到服务器端,用于验证自己身份
		D2.涉及到跨域请求时,默认不会在请求中携带Cookie数据
	同源:
		http://localhost:8080/具体资源
		对于协议|域名|端口,若两个页面有一个值不一样,就认为是不同源
		http://localhost:8080
		http://localhost:8081
(2)同源政策越来越严格:
	浏览器:使用Ajax技术时,只能向自己的服务器发请求
(3)CORSCross-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
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在 Vue 中使用 ECharts 时,如果数据源和 ECharts 所在的域名不同,则会出现跨域问题,需要进行跨域处理。 解决方法: 1. 在服务端设置响应头Access-Control-Allow-Origin,允许指定的域名跨域访问。 2. 使用 vue-cli 的 proxyTable 配置代理,将请求转发到后台服务器上,由后台服务器进行跨域处理。 3. 在 ECharts 的配置项中设置 dataURL,将数据请求发送到后台服务器,由后台服务器进行跨域处理。 示例代码: ```javascript // 1. 在服务端设置响应头 // 在后台服务器中添加以下代码: // 设置允许指定的域名跨域访问 header("Access-Control-Allow-Origin: http://localhost:8080"); // 2. 使用 vue-cli 的 proxyTable 配置代理 // 在 vue.config.js 文件中添加以下代码: module.exports = { devServer: { proxy: { '/api': { target: 'http://localhost:3000', changeOrigin: true, pathRewrite: { '^/api': '' } } } } } // 3. 在 ECharts 的配置项中设置 dataURL // 在 Vue 组件中添加以下代码: <template> <div id="chart"></div> </template> <script> export default { data () { return { chartData: [] } }, mounted () { this.getChartData() }, methods: { getChartData () { this.$http.get('/api/chart').then(res => { this.chartData = res.data this.drawChart() }) }, drawChart () { const option = { title: { text: 'ECharts 数据统计' }, xAxis: { type: 'category', data: this.chartData.map(item => item.name) }, yAxis: { type: 'value' }, series: [{ data: this.chartData.map(item => item.value), type: 'bar' }] } this.$echarts.init(document.getElementById('chart')).setOption(option) } } } </script> ``` 上述示例代码中,第一种和第二种方法都需要后台服务器的支持,在后台服务器中设置响应头或配置代理;第三种方法则是将数据请求发送到后台服务器进行跨域处理,需要在 Vue 组件中使用 $http 发送请求。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值