Vue+axios請(qǐng)求本地json

axios請(qǐng)求本地json,相關(guān)依賴安裝

1:npm安裝

   npm install axios --save

2.在main.js下引用axios

  import axios from 'axios'

一切環(huán)境依賴搭建好之后,下面來寫個(gè)例子:axios請(qǐng)求本地json

1:在static文件夾底下新建json文件,( 本地JSON文件一定要需放在static文件夾之下。)

訪問服務(wù)器文件,應(yīng)該把 json文件放在最外層的static文件夾,這個(gè)文件夾是vue-cli內(nèi)置服務(wù)器向外暴露的靜態(tài)文件夾。

2:data.json數(shù)據(jù)格式如下:

{
    "first":[
        {"name":"王小婷","nick":"祈澈菇?jīng)?},
        {"name":"安安","nick":"壞兔子"},
        {"name":"編程微刊","nick":"簡(jiǎn)書"}

    ]
}

3:寫一個(gè)axios

getData() {
                axios.get('../../static/data.json').then(response => {
                    console.log(response.data);
                }, response => {
                    console.log("error");
                });
            }

4:整體代碼如下:

<template>
    <div id="app">
    </div>
</template>
<script>
    import axios from "axios";
    export default {
        name: "app",
        data() {
            return {
                itemList: []
            }
        },
        mounted() {
            this.getData();
        },
        methods: {
            getData() {
                axios.get('../../static/data.json').then(response => {
                    console.log(response.data);
                }, response => {
                    console.log("error");
                });
            }
        }
    }
</script>

5:前臺(tái)顯示:


原文作者:祈澈姑娘 技術(shù)博客:http://www.lxweimin.com/u/05f416aefbe1
90后前端妹子,愛編程,愛運(yùn)營(yíng),文藝與代碼齊飛,魅力與智慧共存的程序媛一枚。
堅(jiān)持總結(jié)工作中遇到的技術(shù)問題,堅(jiān)持記錄工作中所所思所見,對(duì)于博客上面有不會(huì)的問題,歡迎加入編程微刊主頁qq群。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

推薦閱讀更多精彩內(nèi)容