VUE呼び出しAPIメソッド
1.プロジェクトにVUE-CLIスキャフォールディングを使用する場合。// VUE-CLIは、プロジェクトを実行するには便利すぎます。
2.axiosをインストールします。
npm i axios
3.main.jsファイルにaxiosプロトタイプチェーンを導入します
import axios from 'axios'
Vue.prototype.$axios = axios
4.configフォルダーのindex.jsファイルにあるproxtable {}
proxyTable: {
'/book': {
//聚合平台有很多免费的API,大家可以参考使用
target: 'http://apis.juhe.cn/goodbook/catalog', //接口地址
changeOrigin: true,
pathRewrite: {
'^/book': '' //将以上的接口地址转义为 /book , 然后在需要调用接口的地方使用。
}
},
}
5.ページを呼び出します
data(){
return{
book:[] //创建一个数组来接收API的内容
}
},
created() {
//在生命周期函数中调用
this.$axios
.get('/book?key=你的KEY&dtype=json') //接口一般是get或post,主要看文档。
.then(res=>{
this.book = res.data.result; //把数据给book数组
console.log(res) //打印数据
})
},
6.これで完了です。多くの人が端末の実行中にページをテストすると、404またはクロスドメインの問題が発生します。最も重要なことは、これらの問題を解決するために再実行することです。npn run dev、再実行します。