介紹vue項目中的axios請求（get和post）

1、先安裝axios依賴，還有qs依賴

npm install axios --save

npm install qs --save

qs依賴包用post請求須要用到的

插入一個知識點：

npm install X --save 會把依賴包安裝在生產環境中，而且把依賴包名稱添加到 package.json 文件 dependencies。
而若是npm install X --save-dev則會把依賴包安裝在開發環境中，而且添加到 package.json 文件 devDependencies
若是vue項目要部署上線，爲防止依賴包失效，通常採用–save

2、在main.js入口引用

import qs from 'qs';
import axios from "axios";

//下面是將$axios和$qs掛在原型上，以便在實例中能用 this.$axios可以拿到
Vue.prototype.$axios = axios;
Vue.prototype.$qs = qs;

3、定義全局變量複用域名地址

開發中的url通常是由協議+域名+端口+接口路由+參數組成
通常 協議+域名 這兩個部分是在axios是須要一直被複用的，因此能夠設置一個專業的全局變量模塊腳本文件，在模塊裏直接定義初始值，用export default 暴露出去，再入口文件main.js裏面引入這個文件地址，而且使用Vue.prototype掛載到vue實例上面

• 首先在static文件下面的config文件裏面新建一個 global.js文件（命名隨意）
• 在global.js文件下定義全局變量，這個項目我是定義服務器地址。

• 在main.js入口文件引用並掛載

import Global from '../static/config/global'   //引用
Vue.prototype.GLOBAL = Global;   //掛載原型，能夠使用this.GLOBAL拿到global.js的內容

4、請求後臺接口數據（get請求和post請求）
1.get請求

• 不須要帶參數的get請求

this.$axios.get(this.GLOBAL.host.+「後臺接口地址」).then(res => {
//獲取你須要用到的數據
})

• 須要帶參數的get請求

this.$axios.get(this.GLOBAL.host.+「後臺接口地址」,{
    params:{            
        phone:12345678   //參數，鍵值對，key值：value值
        name:hh
    }
}).then(res => {
    //獲取你須要用到的數據
});

2.post請求

var data = {phone：12345678，name：hh}  //定義一個data儲存須要帶的參數
this.$axios.post(this.GLOBAL.host+「後臺接口地址」，this.$qs.stringify(data)
).then(res =>{
    //獲取你須要的數據
});

5、 所有代碼

// main.js文件

import axios from "axios";
import qs from 'qs';
import Global from '../static/config/global';

Vue.prototype.$axios = axios
Vue.prototype.$qs = qs;
Vue.prototype.GLOBAL = Global;

// global.js文件

const host = '協議+域名地址+端口';
export default {
  host
}

// 組件中發送axios請求（舉個例子）

<template>
    <div class="sort">
        <li v-for="cate in categoryList" >{{cate.name}}</li>
    </div>
</template>

<script>
    export default {
        created(){
            this.getCategory();
        },
        data(){
            return{
                categoryList:[]
            }
        },
        methods:{
            getCategory:function(){
                this.$axios.get(this.GLOBAL.host+"/虛擬接口/a/all_category").then(res => {
                    var result=res.data;
                    if(result.code==0){
                        this.categoryList=result.data;
                    }
                });
            }
        }
    }
    
</script>

<style scoped>
    /*樣式*/
    
    
</style>