element ui框架(axios使用和跨域除錯)

語言: CN / TW / HK

【 宣告:版權所有,歡迎轉載,請勿用於商業用途。 聯絡信箱: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跨域操作是否成功