vue---axios實現數據交互與跨域問題
阿新 • • 發佈：2019-05-11
數據 本質 但是 int object request this 返回值 平臺
1. 通過axios實現數據請求
vue.js默認沒有提供ajax功能的。
所以使用vue的時候，一般都會使用axios的插件來實現ajax與後端服務器的數據交互。
註意，axios本質上就是javascript的ajax封裝，所以會被同源策略限制。
下載地址：
https://unpkg.com/[email protected]/dist/axios.js
https://unpkg.com/[email protected]/dist/axios.min.js
axios提供發送請求的常用方法有兩個：axios.get() 和 axios.post() 。
增 post
刪 delete
改 put
查 get
// 發送get請求 // 參數1: 必填，字符串，請求的數據接口的url地址，例如請求地址：http://www.baidu.com?id=200 // 參數2：可選，json對象，要提供給數據接口的參數 // 參數3：可選，json對象，請求頭信息 axios.get('服務器的資源地址',{ // http://www.baidu.com params:{ 參數名:'參數值', // id: 200, } }).then(function (response) { // 請求成功以後的回調函數 console.log("請求成功"); console.log(response); }).catch(function (error) { // 請求失敗以後的回調函數 console.log("請求失敗"); console.log(error.response); }); // 發送post請求，參數和使用和axios.get()一樣。 // 參數1: 必填，字符串，請求的數據接口的url地址 // 參數2：必填，json對象，要提供給數據接口的參數,如果沒有參數，則必須使用{} // 參數3：可選，json對象，請求頭信息 axios.post('服務器的資源地址',{ username: 'xiaoming', password: '123456' },{ responseData:"json", }) .then(function (response) { // 請求成功以後的回調函數 console.log(response); }) .catch(function (error) { // 請求失敗以後的回調函數 console.log(error); }); // b'firstName=Fred&lastName=Flintstone'
1.1 json
json是 JavaScript Object Notation 的首字母縮寫，單詞的意思是javascript對象表示法，這裏說的json指的是類似於javascript對象的一種數據格式。
json的作用：在不同的系統平臺，或不同編程語言之間傳遞數據。
1.1.1 json數據的語法
json數據對象類似於JavaScript中的對象，但是它的鍵對應的值裏面是沒有函數方法的，值可以是普通變量，不支持undefined，值還可以是數組或者json對象。
// json數據的對象格式： { "name":"tom", "age":18 } // json數據的數組格式： ["tom",18,"programmer"]
復雜的json格式數據可以包含對象和數組的寫法。
{
"name":"小明",
"age":200,
"fav":["code","eat","swim","read"],
"son":{
"name":"小小明",
"age":100,
"lve":["code","eat"],
}
}
// 數組結構也可以作為json傳輸數據。json數據可以保存在.json文件中，一般裏面就只有一個json對象。
總結：
1. json文件的後綴是.json
2. json文件一般保存一個單一的json數據
3. json數據的屬性不能是方法或者undefined，屬性值只能：數值、字符串、json和數組
4. json數據只使用雙引號、每一個屬性成員之間使用逗號隔開，並且最後一個成員沒有逗號。
{
"name":"小明",
"age":200,
"fav":["code","eat","swim","read"],
"son":{
"name":"小小明",
"age":100
}
}工具：postman可以用於測試開發的數據接口。
1.1.2 js中提供的json數據轉換方法
javascript提供了一個JSON對象來操作json數據的數據轉換.
| 方法 | 參數 | 返回值 | 描述 |
|---|---|---|---|
| stringify | json對象 | 字符串 | json對象轉成字符串 |
| parse | 字符串 | json對象 | 字符串格式的json數據轉成json對象 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
// json語法
let humen = {
"username":"xiaohui",
"password":"1234567",
"age":20
};
console.log(humen);
console.log(typeof humen);
// JSON對象提供對json格式數據的轉換功能
// stringify(json對象) # 用於把json轉換成字符串
let result = JSON.stringify(humen);
console.log(result);
console.log(typeof result);
// parse(字符串類型的json數據) # 用於把字符串轉成json對象
let json_str = '{"password":"1123","age":20,"name":"xiaobai"}';
console.log(json_str)
console.log(typeof json_str)
let json_obj = JSON.parse(json_str);
console.log(json_obj);
console.log(typeof json_obj)
console.log(json_obj.age)
</script>
</body>
</html>1.2 ajax
ajax，一般中文稱之為："阿賈克斯"，是英文 “Async Javascript And Xml”的簡寫，譯作：異步js和xml數據傳輸數據。
ajax的作用： ajax可以讓js代替瀏覽器向後端程序發送http請求，與後端通信，在用戶不知道的情況下操作數據和信息，從而實現頁面局部刷新數據/無刷新更新數據。
所以開發中ajax是很常用的技術，主要用於操作後端提供的數據接口，從而實現網站的前後端分離。
ajax技術的原理是實例化js的XMLHttpRequest對象，使用此對象提供的內置方法就可以與後端進行數據通信。
1.2.1 數據接口
數據接口，也叫api接口，表示後端提供操作數據/功能的url地址給客戶端使用。
客戶端通過發起請求向服務端提供的url地址申請操作數據【操作一般：增刪查改】
同時在工作中，大部分數據接口都不是手寫，而是通過函數庫/框架來生成。
1.2.3 ajax的使用
ajax的使用必須與服務端程序配合使用，但是目前我們先學習ajax的使用，所以暫時先不涉及到服務端python代碼的編寫。因此，我們可以使用別人寫好的數據接口進行調用。
jQuery將ajax封裝成了一個函數$.ajax()，我們可以直接用這個函數來執行ajax請求。
| 接口 | 地址 |
|---|---|
| 天氣接口 | http://wthrcdn.etouch.cn/weather_mini?city=城市名稱 |
| 音樂接口搜索 | http://tingapi.ting.baidu.com/v1/restserver/ting?method=baidu.ting.search.catalogSug&query=歌曲標題 |
| 音樂信息接口 | http://tingapi.ting.baidu.com/v1/restserver/ting?method=baidu.ting.song.play&songid=音樂ID |
編寫代碼獲取接口提供的數據：
jQ版本
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/jquery-1.12.4.js"></script>
<script>
$(function(){
$("#btn").on("click",function(){
$.ajax({
// 後端程序的url地址
url: 'http://wthrcdn.etouch.cn/weather_mini',
// 也可以使用method，提交數據的方式，默認是'GET'，常用的還有'POST'
type: 'get',
dataType: 'json', // 返回的數據格式，常用的有是'json','html',"jsonp"
data:{ // 設置發送給服務器的數據，如果是get請求，也可以寫在url地址的?後面
"city":'北京'
}
})
.done(function(resp) { // 請求成功以後的操作
console.log(resp);
})
.fail(function(error) { // 請求失敗以後的操作
console.log(error);
});
});
})
</script>
</head>
<body>
<button id="btn">點擊獲取數據</button>
</body>
</html>vue版本：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
<script src="js/axios.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-model="city">
<button @click="get_weather">點擊獲取天氣</button>
</div>
<script>
let vm = new Vue({
el:"#app",
data:{
city:"",
},
methods:{
get_weather(){
// http://wthrcdn.etouch.cn/weather_mini?city=城市名稱
axios.get("http://wthrcdn.etouch.cn/weather_mini?city="+this.city)
.then(response=>{
console.log(response);
}).catch(error=>{
console.log(error.response)
});
}
}
})
</script>
</body>
</html>總結：
1. 發送ajax請求，要通過$.ajax()，參數是對象，裏面有固定的參數名稱。
$.ajax({
"url":"數據接口url地址",
"method":"http請求方式，前端只支持get和post",
"dataType":"設置服務器返回的數據格式，常用的json，html，jsonp，默認值就是json",
// 要發送給後端的數據參數，post時，數據必須寫在data，get可以寫在data,也可以跟在地址欄?號後面
"data":{
"數據名稱":"數據值",
}
}).then(function(resp){ // ajax請求數據成功時會自動調用then方法的匿名函數
console.log( resp ); // 服務端返回的數據
}).fail(function(error){ // ajax請求數據失敗時會自動調用fail方法的匿名函數
console.log( error );
});
2. ajax的使用往往配合事件/鉤子操作進行調用。
jQuery還提供了$.get 和 $post簡寫$.ajax的操作。
// 發送get請求
// 參數1：數據接口的請求地址
// 參數2：發送給接口地址的數據參數
// 參數3：ajax請求成功以後，調用的匿名函數，匿名函數的第一個參數還是服務端返回的數據
// 參數4：設置服務端返回的數據格式，告訴給jQuery
$.get("test.php", { "func": "getNameAndTime" },
function(data){
alert(data.name); // John
console.log(data.time); // 2pm
}, "json");
// 發送post請求
// 參數1：數據接口的請求地址
// 參數2：發送給接口地址的數據參數
// 參數3：ajax請求成功以後，調用的匿名函數，匿名函數的第一個參數還是服務端返回的數據
// 參數4：設置服務端返回的數據格式，告訴給jQuery
$.post("test.php", { "func": "getNameAndTime" },
function(data){
alert(data.name); // John
console.log(data.time); // 2pm
}, "json");
1.2.4 同源策略
同源策略，是瀏覽器為了保護用戶信息安全的一種安全機制。所謂的同源就是指代通信的兩個地址（例如服務端接口地址與瀏覽器客戶端頁面地址）之間比較，是否協議、域名(IP)和端口相同。不同源的客戶端腳本[javascript]在沒有明確授權的情況下，沒有權限讀寫對方信息。
ajax本質上還是javascript，是運行在瀏覽器中的腳本語言，所以會被受到瀏覽器的同源策略所限制。
前端地址：http://www.oldboy.cn/index.html |
是否同源 | 原因 |
|---|---|---|
http://www.oldboy.cn/user/login.html |
是 | 協議、域名、端口相同 |
http://www.oldboy.cn/about.html |
是 | 協議、域名、端口相同 |
https://www.oldboy.cn/user/login.html |
否 | 協議不同 ( https和http ) |
http:/www.oldboy.cn:5000/user/login.html |
否 | 端口 不同( 5000和80) |
http://bbs.oldboy.cn/user/login.html |
否 | 域名不同 ( bbs和www ) |
同源策略針對ajax的攔截，代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
<script src="js/axios.js"></script>
</head>
<body>
<div id="app">
<button @click="get_music">點擊獲取天氣</button>
</div>
<script>
let vm = new Vue({
el:"#app",
data:{},
methods:{
get_music(){
axios.get("http://tingapi.ting.baidu.com/v1/restserver/ting?method=baidu.ting.search.catalogSug&query=我的中國心")
.then(response=>{
console.log(response);
}).catch(error=>{
console.log(error.response)
});
}
}
})
</script>
</body>
</html>上面代碼運行錯誤如下：
Access to XMLHttpRequest at 'http://tingapi.ting.baidu.com/v1/restserver/ting?method=baidu.ting.search.catalogSug&query=%E6%88%91%E7%9A%84%E4%B8%AD%E5%9B%BD%E5%BF%83' from origin 'http://localhost:63342' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.上面錯誤，關鍵詞：Access-Control-Allow-Origin
只要出現這個關鍵詞，就是訪問受限。出現同源策略的攔截問題。
1.2.5 ajax跨域(跨源)方案之CORS
? CORS是一個W3C標準，全稱是"跨域資源共享"，它允許瀏覽器向跨源的後端服務器發出ajax請求，從而克服了AJAX只能同源使用的限制。
? 實現CORS主要依靠後端服務器中響應數據中設置響應頭信息返回的。
django的視圖
def post(request):
? response = new Response()
? response .set_header("Access-Control-Allow-Origin","*")
? return response;
// 在響應行信息裏面設置以下內容：
Access-Control-Allow-Origin: ajax所在的域名地址
Access-Control-Allow-Origin: www.oldboy.cn # 表示只允許www.oldboy.cn域名的客戶端的ajax跨域訪問
// * 表示任意源，表示允許任意源下的客戶端的ajax都可以訪問當前服務端信息
Access-Control-Allow-Origin: *
總結：
0. 同源策略：瀏覽器的一種保護用戶數據的一種安全機制。
瀏覽器會限制腳本語法不能跨源訪問其他源的數據地址。
同源：判斷兩個通信的地址之間，是否協議，域名[IP]，端口一致。
ajax： http://127.0.0.1/index.html
api數據接口： http://localhost/index
這兩個是同源麽？不是同源的。是否同源的判斷依據不會根據電腦來判斷，而是通過協議、域名、端口的字符串是否來判斷。
1. ajax默認情況下會受到同源策略的影響，一旦受到影響會報錯誤如下：
No 'Access-Control-Allow-Origin' header is present on the requested resource
2. 解決ajax只能同源訪問數據接口的方式：
1. 在服務端的響應行中設置：
Access-Control-Allow-Origin: 允許訪問的域名地址
2. jsonp
3. 是否服務端代理
思路：通過python來請求對應的服務器接口，獲取到數據以後，vue---axios實現數據交互與跨域問題