vue axios请求本地json--因为我不会后台就只有用假数据了。
今天想玩玩假数据，毕竟以前只是看过别人玩，所以想动动手了。
axios是vue推荐使用的异步请求工具，效果跟ajax是一样的。
先写个json文件放static这个静态文件夹里。
在我的vue文件里写上必要的代码
<template>
<div>
<ul class="ul_box">
<li v-for="(it,index) in res">
<span>{{it.prodcutPrice}}</span>
<span>{{it.productName}}</span>
<img :src="require('@/assets/imgM/'+it.prodcutImg+'')" alt=""/>
</li>
</ul>
</div>
</template>
<script>
export default{
data(){
return{
res:'',
}
},
mounted() {
var that = this;
that.getGoodsList()
},
methods:{
getGoodsList () {
this.$http.get(this.api+'static/data/staticlist.json').then((res) => {
//main.js里面加上 -- Vue.prototype.api = "http://localhost:8080/"
//要么你直接写"http://localhost:8080/static/data/staticlist.json"也行
//用axios的方法引入地址
this.res=res.data.result //这里把json里的数据赋值
console.log(res)
console.log(this.res)
}).catch((req)=>{
console.log(req)
})
},
}
</script>
然后就拿到值了。
通过上面的html标签的渲染就可以得到我们想要的东西了。
下面是我写的json数据。
{
"status":"0",
"result":[
{
"productId":"10001",
"productName":"小米6",
"prodcutPrice":"2499",
"prodcutImg":"m1.jpg"
},
{
"productId":"10002",
"productName":"小米笔记本",
"prodcutPrice":"3999",
"prodcutImg":"m2.jpg"
},
{
"productId":"10003",
"productName":"小米6",
"prodcutPrice":"2499",
"prodcutImg":"m3.jpg"
},
{
"productId":"10004",
"productName":"小米6",
"prodcutPrice":"2499",
"prodcutImg":"m4.jpg"
},
{
"productId":"10001",
"productName":"小米6",
"prodcutPrice":"2499",
"prodcutImg":"m5.jpg"
},
{
"productId":"10002",
"productName":"小米笔记本",
"prodcutPrice":"3999",
"prodcutImg":"m6.jpg"
},
{
"productId":"10003",
"productName":"小米6",
"prodcutPrice":"2499",
"prodcutImg":"m4.jpg"
},
{
"productId":"10004",
"productName":"小米6",
"prodcutPrice":"2499",
"prodcutImg":"m2.jpg"
}
]
}
嗯。太简单了，没有挑战性。
这里要注意的是，axios请求本地json的时候一定要放到static文件夹里。
我刚刚放到src里试了下就变成404了。
还有记得要用get来请求，post会跨域（我也不知道为啥会跨域）。
基本上用axios请求后台数据接口也是这样的，稍微改一下就行了。
相应的，数据还分表单格式和json格式。
解析格式的话还需要 用 JSON.stringify。
学到axios的时候可以看看ajax的详细写法。
常用的请求方式基本上就是get和post，其他的了解一下就行。
Unexpectedly ！jojo！ this is my escape route！ --哒
