element ui框架（axios使用和跨域调试）

Posted 2022-09-24 嵌入式-老费

【 声明：版权所有，欢迎转载，请勿用于商业用途。 联系信箱：feixiaoxing @163.com】

        现在web开发中，前后端一般都是独立开发的。双方约定好调试的json数据之后，就开始并行开发了。那么对于前端开发来说，该如何测试呢？其实他们调试的时候一般都会用iis再起一个web server，把对应的json文件放到根目录下，这样就可以实现跨域调试的目的了。

        常用的web访问库一般是axios，这个之前已经提及过。

1、在vue工程中下载axios

npm install axios --save-dev

2、在main.js中引入axios

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import axios from 'axios';

Vue.use(ElementUI);
Vue.config.productionTip = false
Vue.prototype.axios = axios; 



/* eslint-disable no-new */
new Vue(
  el: '#app',
  router,
  components:  App ,
  template: '<App/>',
  render:h=>h(App)
)

3、在MemberList网页中调用axios

<template>
	<div>会员列表</div>
</template>

<script>
export default 
	name:"MemberList",
	beforeRouteEnter(to,from,next)
		console.log('enter MemberList')
		next(vm=>
			vm.getdata();
		);
	,
	beforeRouteLeave(to,from,next)
		console.log('leave MemberList')
		next();
	,
	methods:
		getdata:function()
			this.axios(
					method:'get',
					url:'http://127.0.0.1:8082/data.json'
				).then(response=> 
					console.log(response.data)
				).catch(error=> 
					console.log(error)
				)
		
	


</script>

<style>
</style>

        通常情况下数据的加载都是在beforeRouteEnter中完成的。如这段代码所示，在vm加载成功之后，就会调用vm.getdata函数。相关函数已经在methods里面定义好。这里axios使用的方法是get，url是127.0.0.1:8082/data.json。

4、在iis中创建一个8082的server，拷贝data.json文件

        注意，npm run dev之后也会起一个server，端口会和8082不同。这样，利用axios访问8082其实就是一个跨域操作，需要利用iis设置一下。相关操作方法可以参考这个链接，https://blog.csdn.net/ShyLoneGirl/article/details/121738110

        相关data.json内容如下所示

	"name":"test_data",
	"url":"http://www.test_url.com"

5、测试网页，验证axios跨域操作是否成功