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

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

代码如下：

[  {"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文件中）

代码如下：

    
      
     
        
      
          
               
      
        
      
          
       ¥          
       78.00          
       
            
                    
        277          
       
        
      
        
      
连衣裙 雪纺 碎花 气质 修身显瘦 喇叭袖 中      
     
    
    

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:

//这个过程就是将后台的数据利用js渲然到网页中

写完这段js后html就不需要那么复杂了下面是新的html代码：

    
     
      (将中间的很长的一段省掉了)
     
    

渲染后的图片：

优点：