在我们做完前端的工作后,很多情况下需要把我们的数据与后端得接口进行对接,说以我们就得掌握调试接口的方法
一、建立对象数组(一般是后端的工作)
代码如下:
[
{"name":"1.jpg","fuhao":"¥","jiage":"78.00","dianzan":"277","miaoshu":"连衣裙 雪纺 碎花 气质 修身显瘦 喇叭袖"},
{"name":"4.jpg","fuhao":"¥","jiage":"48.00","dianzan":"247","miaoshu":"款 夏季 新款 韩版 连衣裙 赫本小黑裙"},
{"name":"3.jpg","fuhao":"¥","jiage":"68.00","dianzan":"337","miaoshu":"棉麻连衣裙 v领 短袖 文艺 森系 宽松 新款"},
{"name":"4.jpg","fuhao":"¥","jiage":"78.00","dianzan":"537","miaoshu":"吊带连衣裙 收腰 无袖 中长款 大码 甜美"},
{"name":"9.jpg","fuhao":"¥","jiage":"78.00","dianzan":"537","miaoshu":"吊带连衣裙 收腰 无袖 中长款 大码 甜美"}
]
以上便是后台给我们提供的接口(一般都是对象数组)需要我们进行对接*注意不要把逗号丢掉,名字要用双引号引起来(一般我们会将对象数组写在.json文件中)
二、排好网页的一部分
效果图如下:
代码如下:
html
<div id="tablstudent">
<div class="bbb">
<div class="img">
<img src="1.jpg" alt="" >
</div>
<div class="middle">
<em class="price-u">¥</em>
<span class="price-n">78.00</span>
<div class="fav fr">
<em class="fav-i"></em>
<span class="fav-n">277</span>
</div>
</div>
<a href="#"><p>连衣裙 雪纺 碎花 气质 修身显瘦 喇叭袖 中</p></a>
</div>
</div>
css:
.img{
width: 224px;
height:400px;
}
.img img{
height:100%;
width:100%;
}
.bbb{
float:left;
margin-left:13px;
}
.middle{
width: 224px;
margin-top: 5px;
height: 30px;
line-height: 30px;
/* border: 1px solid #ccc; */
}
.price-u ,.price-n{
font-style: italic;
font-size: 16px;
color: #f36;
}
.fr {
float: right;
/* border: 1px solid #ccc; */
}
.fav-i{
width: 13px;
height: 13px;
display: inline-block;
background: url(5.png);
background-size: 100%;
}
.fav-n{
color: #999;
line-height: 14px;
margin-left: 3px;
}
p{
font-size: 12px;
font-family: Arial,'Microsoft YaHei';
}
a{
text-decoration: none;
color:#666;
}
三、js部分(这段代码是不变的记住就好了)
js:
<script type="text/javascript">
var url='http://192.168.1.115:8000/data.json'
fetch(url)
.then((Response)=>{
return Response.text();
})
.then((data)=>{
var students=JSON.parse(data)//parse的意识是将字符串转换为数组对象
var html='';
for(var i=0;i<students.length;i++){
var studenthtml='<div class="bbb"><div class="img"><img src="'+students[i].name+'" alt=""></div><div class="middle"><em class="price-u">'+students[i].fuhao+'</em><span class="price-n">'+students[i].jiage+'</span><div class="fav fr"><em class="fav-i"></em><span class="fav-n">'+students[i].dianzan+'</span></div></div><a href="#"><p>'+students[i].miaoshu+'</p></a></div>'//这段代码是将html中的标签写在这的
html=html+studenthtml;
}
tablstudent.innerHTML=html;
})
</script>//这个过程就是将后台的数据利用js渲然到网页中
写完这段js后html就不需要那么复杂了下面是新的html代码:
<div id="tablstudent"><div>(将中间的很长的一段省掉了)
渲染后的图片:
优点:
可以随时根据需求所改变网页的内容。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。