前端本地测试，模拟后台数据渲染到前台页面

和后台交互前前端先本地测试一下，后期只需要修改一下请求地址的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