js 调试接口

在我们做完前端的工作后，很多情况下需要把我们的数据与后端得接口进行对接，说以我们就得掌握调试接口的方法

一、建立对象数组（一般是后端的工作）

代码如下：

[
  {"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>(将中间的很长的一段省掉了)

渲染后的图片：

优点：
可以随时根据需求所改变网页的内容。