vue（13）axios部署及跨域使用

axios是vue2.x版本官方推荐使用的基于 promise 的 HTTP 库，其与ajax相比具有很多优点。

部署：

1、打开cmd，cd进入工程目录文件夹
2、npm install axios

使用：

引用分为全局引用和局部引用，这里为了方便使用的是全局引用

1、在工程中的入口函数main.js引入，输入import axios from 'axios';//全局引入的方式，在main.js的代码下面输入Vue.prototype.$axios = axios;//修改原型链，这时候就可以在vue的各组件中通过this.$axios来使用axios

读取json及跨域处理

使用一个按钮，当点击按钮的时候，读取json文件内容，代码如下： 任意一个组件中：

<template>
	<div id="testa">
		{
    
    {
    
     name }}
		<br />
		<button class="a">看下面</button>
		<button class="a" @click="send()">axios请求</button>
		<ul>
			<li v-for="(v, k) in name" :key="k" :class="{ a1: flag1, a2: flag2 }" @click="change()">{
    
    {
    
     k }} {
    
    {
    
     v | addzero }}</li>
		</ul>
		<br />
	</div>
</template>

<script>
export default {
    
    
	name: 'test',
	data() {
    
    
		return {
    
    
			name: [2, 3, 6, 87, 5, 1, 35, 12],
			flag1: true,
			flag2: false
		};
	},
	methods: {
    
    
		change() {
    
    
			this.flag1 = !this.flag1;
			this.flag2 = !this.flag2;
		},
		send(){
    
    
			this.$axios({
    
    
				method: 'get',
				url: '/api/Simport/js/modules/layerlist/tree.json'
			}).then(function(res){
    
    
				console.log(res);
			});
		}
	},
	filters: {
    
    
		addzero(data) {
    
    
			var newdata;
			data < 10 ? newdata='0' + data :newdata=data;
			return newdata;
		}
	}
};
</script>
<style>
.a {
    
    
	width: 100px;
	height: 50px;
}
.a1 {
    
    
	cursor: pointer;
	background-color: rgba(0, 0, 0, 0.6);
	color: white;
}

.a2 {
    
    
	cursor: pointer;
	background-color: white;
	color: black;
}
</style>

代码中在template下创建了一个button，并添加了点击事件send()，在js中创建send()方法，axios就写在里面。 在浏览器中使用axios可能会报跨域问题，这是因为json文件的url所在的端口号与vue项目的端口号不一致，例如本例中json文件的url为http://localhost:8080/Simport/js/modules/layerlist/tree.json,vue项目部署在http://localhost:8081上。 解决办法： 在vue.config.js中配置如下：

devServer: {
    
    
		port: 8080, // 端口号
		host: 'localhost',
		https: false, // https:{type:Boolean}
		open: false, //配置自动启动浏览器
		proxy: {
    
    
			'/api': {
    
    
				target: 'http://localhost:8080', //后台接口
				//ws: true, //如果要代理websockets
				changeOrigin: true, //将选项changeOrigin设置true为基于名称的虚拟托管站点。
				pathRewrite: {
    
     // 路径重写，
					'^/api': '/' // 替换target中的请求地址，也就是说以后你在请求http://api.douban.com/v2/XXXXX这个地址的时候直接写成/api即可。
				}
			}
		}
	}

最主要的是proxy，这是专门设置跨域的类，这样设置后，我们就可以通过'/api/Simport/js/modules/layerlist/tree.json'这个路径来访问json 下面是效果图：

点击后在console中显示如下：

到这里最基础的就完成了，后续的使用方法会陆续更新。

附上axios文档网站：
https://www.kancloud.cn/yunye/axios/234845
https://github.com/axios/axios