前端本地測試，模拟背景資料渲染到前台頁面

和背景互動前前端先本地測試一下，後期隻需要修改一下請求位址的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">訂單号&nbsp;&nbsp;<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日&nbsp;&nbsp;&nbsp;&nbsp;12:00</div>
15       <div class="fr sure" v-on:click="gosureReceive()">确認取件</div>
16     </div>      

完成！！！

轉載于:https://www.cnblogs.com/yegeng/p/10250883.html