和后台交互前前端先本地测试一下，后期只需要修改一下请求地址的url即可：
（1）：在本地新建json文件，名字任意取（比如aa.json）
文件在项目中的目录如下：
aa.json文件内容如下：
{
"data": [
{
"
receiveAdd": "111111111111111111",
"
sendAdd": "222222",
"
distance": 9.463,
"
goodsName": "生活用品",
"
editname": "11",
"
weight": "<=5kg",
"
editnotename": "11",
"
receiveName": "哈哈",
"
receiveSex": "男",
"
receiveTel": "13633633666",
"
sendName": "嘿嘿",
"
sendSex": "男",
"
sendTel": "15655655666",
"
price": "28元"
},
{
]
"
receiveAdd": "11111",
"
sendAdd": "222222",
"
distance": 9.463,
"
goodsName": "生活用品",
"
editname": "11",
"
weight": "<=5kg",
"
editnotename": "11",
"
receiveName": "哈哈",
"
receiveSex": "男",
"
receiveTel": "13633633666",
"
sendName": "嘿嘿",
"
sendSex": "男",
"
sendTel": "15655655666",
"
price": "28元"
}
}
（2）：json文件准备好了之后，前端本地开始测试访问新建的json文件
代码如下：
1 data () { 2 return { 3 anylist: [] 4 } 5 }, 6 7 8 9 10 11 $.ajax({ 12 type: 'GET', 13 url: './../../../static/aa.json', 14 data: {}, 15 dataType: 'json' 16 }).then(res => { 17 // console.log(res) 18 console.log(res.data) 19 this.anylist = res.data 20 }) 21 .catch(error => { 22 console.log(error) 23 })
（3）：前端本地渲染页面
1 <div class="content clearfix" v-on:click="goorderingDetail()" v-for="v in anylist" v-bind:key="v.id"> 2 <div class="clearfix"> 3 <div class="fl dingnumber">订单号 <span>D123456789</span></div> 4 <div class="fr state">进行中</div> 5 </div> 6 <div class="clearfix receive"> 7 <div class="fl">收</div> 8 <div class="fr add">{{v.receiveAdd}}</div> 9 </div> 10 <div class="clearfix send"> 11 <div class="fl">发</div> 12 <div class="fr add">{{v.sendAdd}}</div> 13 </div> 14 <div class="date fl">2018年9月28日 12:00</div> 15 <div class="fr sure" v-on:click="gosureReceive()">确认取件</div> 16 </div>
完成！！！