回顧

15. vue-resource的跨域請求

目的：想要前後端分離，前端用vue和vue-resource請求http接口地址獲取數據。

首先要安裝vue-resource：

npm install vue-resource

然後在入口文件main.js中引入vue-source：

import VueResource from ‘vue-resource‘
Vue.use(VueResource)

準備工作到這裏就做完了。

用來準備測試的接口：

http://ip.tianqiapi.com/?ip=

可以查詢IP的一些簡單信息，支持多個IP查詢，IP之間用半角逗號間隔。該接口返回IP的JSON格式的信息。

vue文件中HTML部分的代碼如下，使用了ElementUI的輸入框和表格：

<template>
    <div>
        <el-input v-model="input1" id="inputText"></el-input>
        <el-button type="primary" @click="getData()">查詢IP信息</el-button>
        <br>
            <el-table :data="data1" stripe
 
>
                <el-table-column prop="ip" label="IP地址" width="140">
                </el-table-column>
                <el-table-column prop="country" label="國家" width="120">
                </el-table-column>
                <el-table-column prop="province" label="省份"
 
>
                </el-table-column>
                <el-table-column prop="city" label="城市">
                </el-table-column>
                <el-table-column prop="isp" label="服務供應商">
                </el-table-column>
            </el-table>
    </div>
</template>

js部分的代碼如下：

<script>
    export default {
        name: "xuanxiang2",
        data(){
            return {
                data1 : [],
                input:‘‘
            }
        },
        methods:{
            getData(){
                var text = document.getElementById("inputText").value;
                var api = "http://ip.tianqiapi.com/?ip="+text;//查詢IP地址
                this.$http.get(api).then(function (response) {
                    console.log(typeof response.body);
                    if(typeof response.body == "object"){
                        var tmp=[];
                        for(var key in response.body){
                            //key是屬性,object[key]是值
                            tmp.push(response.body[key]);//往數組中放值
                        }
                        this.data1 = tmp;
                    } else
                        this.data1 = response.body;
                },function (err) {
                    console.log(err);
                })
            }
        },
        mounted(){
            // this.getData();
        },
    }
</script>

如此即可完成一次http的請求。

一些說明

this.$http.get即為發起get請求的語法，其他的還有：

get請求：

this.$http.get(URL,{
params:{
key:value,
}
}).then(function(success){
//TODO: 成功後的操作
},function(error){
//TODO：失敗後的操作
})

POST請求：

this.$http.post(URL,{
params:{
key:value,
}
}).then(function(success){
//TODO: 成功後的操作
},function(error){
//TODO：失敗後的操作
})

JSONP請求（跨域請求）：

this.$http.jsonp(URL,{
params:{
key:value,
}
}).then(function(success){
//TODO: 成功後的操作
},function(error){
//TODO：失敗後的操作
})

js中的data{return{}}部分，是對頁面內的變量的初始化：

data(){
   return {
     data1 : [],  //定義一個叫data1的變量，[]表示其類型為Array
     input1:‘‘  //定義一個叫input1的變量，‘‘表示其類型為String
   }
 }

下面的是elementUI的table組件，:data="data1"是綁定數據源，表格會加載data1中的數據（所以在data()中定義的data1是[]類型），stripe是對表格加了條紋顯示，便於查看；el-table-column中的prop對應接口返回的json中的key值，label是表頭：

<el-table :data="data1" stripe>
    <el-table-column prop="ip" label="IP地址" width="140">
    </el-table-column>
    <el-table-column prop="country" label="國家" width="120">
    </el-table-column>
    <el-table-column prop="province" label="省份">
    </el-table-column>
    <el-table-column prop="city" label="城市">
    </el-table-column>
    <el-table-column prop="isp" label="服務供應商">
    </el-table-column>
</el-table>

對於input標簽，其v-model屬性表示這個輸入框的輸入內容的類型，並通過該屬性對input框的輸入值做初始化，沒有這個屬性的話，input框無法輸入。我的理解是，通過data()中定義的變量input1對input的初始輸入值做了初始化，之後用戶的輸入內容相當於對input1這個變量做賦值操作：

<el-input v-model="input" id="inputText"></el-input>

button按鈕中的@click="getData()"是對按鈕綁定了鼠標單擊事件：

<el-button type="primary" @click="getData()">查詢IP信息</el-button>

以上就是對所有代碼的解釋了。最後附上完整的代碼和效果圖：

代碼：

<template>
    <div>
        <br>
        <hr>
        <el-input v-model="input" id="inputText"></el-input>
        <el-button type="primary" @click="getData()">查詢IP信息</el-button>
        <br>
        <el-table :data="data1" stripe>
            <el-table-column prop="ip" label="IP地址" width="140">
            </el-table-column>
            <el-table-column prop="country" label="國家" width="120">
            </el-table-column>
            <el-table-column prop="province" label="省份">
            </el-table-column>
            <el-table-column prop="city" label="城市">
            </el-table-column>
            <el-table-column prop="isp" label="服務供應商">
            </el-table-column>
        </el-table>
    </div>
</template>

<script>
    export default {
        name: "xuanxiang2",
        data(){
            return {
                data1 : [],
                input:‘‘
            }
        },
        methods:{
            getData(){
                var text = document.getElementById("inputText").value;
                var api = "http://ip.tianqiapi.com/?ip="+text;//查詢IP地址
                this.$http.get(api).then(function (response) {
                    console.log(response.body);
                    if(typeof response.body == "object"){
                        var tmp=[];
                        for(var key in response.body){
                            //key是屬性,object[key]是值
                            tmp.push(response.body[key]);//往數組中放值
                        }
                        this.data1 = tmp;
                    } else
                        this.data1 = response.body;
                },function (err) {
                    console.log(err);
                })
            }
        },
        mounted(){
            // this.getData();
        },
    }
</script>

<style scoped>

</style>

效果圖：

VUE+Element+vue-resource發起http請求