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群。