前端本地测试,模拟后台数据渲染到前台页面
和后台交互前前端先本地测试一下,后期只需要修改一下请求地址的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>
完成!!!