vue2-經過axios實現數據請求

時間  2020-06-01
標籤 vue2 vue 經過 axios 實現 數據 請求 简体版
原文   原文鏈接

1.經過axios實現數據請求

vue.js默認沒有提供ajax功能javascript

因此使用vue的時候，通常都會使用axios的插件來實現ajax與後端服務器的數據交互。php

注意，axios本質上就是javascript的ajax封裝，因此會被同源策略限制。css

下載地址：html

https://unpkg.com/axios@0.18.0/dist/axios.js
https://unpkg.com/axios@0.18.0/dist/axios.min.js前端

axios提供發送請求的經常使用方法有兩個：axios.get() 和 axios.post() 。vue

增 postjava

刪 deletepython

改 putjquery

查 get ios

// 發送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'

 

2.json

json是 JavaScript Object Notation 的首字母縮寫，單詞的意思是javascript對象表示法，這裏說的json指的是相似於javascript對象的一種數據格式。

json的做用：在不一樣的系統平臺，或不一樣編程語言之間傳遞數據。

3.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對象。

  •  總結
     
    json文件的後綴是.json json文件通常保存一個單一的json數據 json數據的屬性不能是方法或者undefined，屬性值只能：數值，字符串，json和數組 json數據只使用雙引號，每個屬性成員之間使用逗號隔開，而且最後一個成員沒有逗號 { "name":"小明", "age":200, "fav":["code","eat","swim","read"], "son":{ "name":"小小明", "age":100 } }
    工具：postman能夠用於測試開發的數據接口。

     

4.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>
View Code

 

 

4.2 ajax

ajax，通常中文稱之爲："阿賈克斯"，是英文 「Async Javascript And Xml」的簡寫，譯做：異步js和xml數據傳輸數據。

ajax的做用： ajax可讓js代替瀏覽器向後端程序發送http請求，與後端通訊，在用戶不知道的狀況下操做數據和信息，從而實現頁面局部刷新數據/無刷新更新數據。

因此開發中ajax是很經常使用的技術，主要用於操做後端提供的數據接口，從而實現網站的先後端分離。

ajax技術的原理是實例化js的XMLHttpRequest對象，使用此對象提供的內置方法就能夠與後端進行數據通訊。

 

4.2.1 數據接口

數據接口，也叫api接口，表示後端提供操做數據/功能的url地址給客戶端使用。

客戶端經過發起請求向服務端提供的url地址申請操做數據【操做通常：增刪查改】

同時在工做中，大部分數據接口都不是手寫，而是經過函數庫/框架來生成。

4.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");

     


4.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>
View Code

上面代碼運行錯誤以下：

錯誤關鍵詞：Access-Control-Allow-Origin

只要出現這個關鍵詞，就是訪問受限。出現同源策略的攔截問題。

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.

4.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來請求對應的服務器接口，獲取到數據之後，

     

5. 組件化開發

5.1 組件[component]

組件（Component）是自定義封裝的功能。在前端開發過程當中，常常出現多個網頁的功能是重複的，並且不少不一樣的網站之間，也存在一樣的功能。

而在網頁中實現一個功能，須要使用html定義功能的內容結構，使用css聲明功能的外觀樣式，還要使用js來定義功能的特效，所以就產生了把一個功能相關的[HTML、css和javascript]代碼封裝在一塊兒組成一個總體的代碼塊封裝模式，咱們稱之爲「組件」。

 

因此，組件就是一個html網頁中的功能，通常就是一個標籤，標籤中有本身的html內容結構，css樣式和js特效。

這樣，前端人員就能夠在開發時，只須要書寫一次代碼，隨處引入便可使用。

 

組件有兩種：默認組件[全局組件] 和 單文件組件

5.1.1 默認組件

<div id="app">
    <addnum></addnum>
    <addnum></addnum>
    <addnum></addnum>
    <addnum></addnum>
    <addnum></addnum>
</div>

<script> Vue.component("addnum",{ template:'<div><input type="text" v-model="num"><button @click="num+=1">點擊</button></div>', data: function(){ // 寫在這裏的數據只有當前組件可使用
            return { num:1, } } }); var vm = new Vue({ el:"#app", // 這裏寫的數據是全局公用的，整個文件共享
 data:{ } }) </script>
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程