axios在Vue中的使用

1.首先在cmd中找到你的項目，

然后執行以下命令，安裝一下axios

 cnpm install axios --save //添加axios模塊

cnpm install qs --save //添加qs模塊（用於處理post請求的參數解析） 

 

2.添加成功后，在package.json文件中就可以看到：

"dependencies": {
    "axios": "^0.19.2",
    "core-js": "^3.6.5",
    "qs": "^6.9.4",
    "vue": "^2.6.11",
    "vue-router": "^3.2.0",
    "vuex": "^3.4.0"
},

 

3.在main.js文件中導入這些模塊

import axios from 'axios'
import qs from 'qs'
//設置axios的基礎url部分
axios.defaults.baseURL = 'http://api.tianapi.com/';
//將axios掛載到vue實例上，使用時就可以 this.$axios 這樣使用了
Vue.prototype.$axios = axios;
//將qs掛載到vue實例上，使用時就可以 this.$qs 這樣使用了
Vue.prototype.$qs = qs;

 

4.Vue中axios的三種使用方法

Vue.axios.get(api).then((response) => {
  console.log(response.data)
})

this.axios.get(api).then((response) => {
  console.log(response.data)
})

this.$http.get(api).then((response) => {
  console.log(response.data)
})

 

5.在.vue文件中書寫代碼（1）

<template>
  <div class="about">
    <h1>全國省市疫情</h1>
    <table>
        <tr>
            <th>省市</th>
            <th>累計確診</th>
            <th>累計治愈</th>
            <th>現有確診</th>
            <th>累計死亡</th>
        </tr>
        <tr v-for="item in yq.newslist">
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </table>
  </div>
</template>
<script>
    export default{
        name:'About',
        data(){
            return {
                yq:{}
            }
        },
        created() {
            /*
            //get方式
            this.$axios.get('txapi/ncovcity/index',{
                params:{
                    key:'自己的key'
                }
            }).then(function(response) {
                console.log(response.data);
            }).catch(function(error) {
                console.log(error);
         });
            */
            //post方式
            this.$axios.post('txapi/ncovcity/index',this.$qs.stringify({
                key:'e0a32a8ea4275e9dbe2628d03bb91f3e'
            })).then((response)=> {
                this.yq = response.data;
                console.log(this.yq);
            }).catch((error)=> {
                console.log(error);
            });
        }
    }
</script>
<style scoped>
    table {
        width: 100%;
        text-align: center;
        border-bottom: solid 2px #DDD;
        /* 合並邊框 */
        border-collapse: collapse;
    }
    td,th {
        border-bottom: solid 1px #DDD;
        height: 40px;
    }
</style>

（2）

<template>
    <div>
        <el-table :data="news">
            <el-table-column prop="id" label="id"></el-table-column>
            
            <el-table-column prop="name" label="name"></el-table-column>
            
            <el-table-column prop="psw" label="psw"></el-table-column>
        </el-table>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                
                news:[]
            }
        },
        created(){
            let than=this
            this.$axios({
                methon:'post',
                url:'http://localhost:8888/pro0727/hello'
            }).then(function(response){
                console.log(response);
                than.news=response.data
            })
        }
    }
</script>

<style>
</style>