javascript调试接口

最新推荐文章于 2022-10-21 16:34:03 发布

weixin_34061555

最新推荐文章于 2022-10-21 16:34:03 发布

阅读量241

点赞数

文章标签： javascript json 设计模式 ViewUI

原文链接：https://segmentfault.com/a/1190000016199396

版权

最近在学习 JS 的面向对象实现，看「Javascript 设计模式」看不明白 JS 关于接口是怎么实现的。

最近做的一个小例子如下图：

图片描述

下面有一段在JS中使用接口的代码，不知道是不是你在《JavaScript设计模式》中看到的，该段代码模拟了接口，支持多个接口的情况。


    <script>
        var url = "http://192.168.1.103:8000/data.json";
        var xianli = document.getElementById("xianli");
        var mingyang=document.getElementsByClassName("mingyang")
        fetch(url)
            .then((response) => {
                return response.text();
            })
            .then((data)=>{
                var liujie = JSON.parse(data);
          

        var html=''
        for(var i=0;i<liujie.length;i++){
              var zeyu="<li><div class='box'><div class='tu'><a href='#'><img src="+liujie[i].img+"></a><span>"+liujie[i].tu+"</span></div><div class='yu'><h2><a href='#'>"+liujie[i].shuju+"</a></h2><p>"+liujie[i].jushi+" &nbsp&nbsp "+liujie[i].duoda+"</p><p class='add'><a href='#' >"+liujie[i].dizhi1+"</a>&nbsp;<a href='#'>"+liujie[i].dizhi2+"</a><em></em>"+liujie[i].dizhi3+"</p><div class='jjr'>来自经纪人： <span>"+liujie[i].ren1+"</span><span>"+liujie[i].ren2+"</span></div><div class='money'><b>"+liujie[i].rem+"</b>"+liujie[i].fen+"</div></div></div></li>";
              html=html+zeyu;
        }
           xianli.innerHTML=html
    
            })
    </script>

再添加json

   [ 
    {"img":"1.jpg","tu":"11图","shuju":"整租|义，和,庄东里 精装两居室 家电齐全地铁沿线 出行购","jushi":"2室1厅1卫","duoda":"86㎡","dizhi1":"黄村","dizhi2":"义和庄东里...","dizhi3":"距离4号线黄村火车站地铁站792米","ren1":"安易居房地产 - 安易居房地产总店","ren2":"刘兴栋 ","rem":"3500","fen":"元/月"},
    
]

html文本只需写一点就可以，因为都带入了js里了

html

 <body>
        <div class="mi">
            <ul class="mingyang" id="xianli"></ul>
        </div>
    </body>

css

 <style>
        a {
            text-decoration: none;
        }

        body {
            margin: 0;
            padding: 0;
        }

        .box {
            width: 994px;
            height: 171px;
            border: 1px solid #ccc;
            margin: 100px;
            position: relative;
        }

        .tu {
            width: 147px;
            height: 170px;
            float: left;
           
        }


        .tu img {
            width: 147px;
            height: 110px;
            padding-top: 30px;
        }

        .tu span {
            display: inline-block;
            width: 40px;
            border: 1px solid #ccc;
            font-size: 14px;
            text-align: center;
            background: #333;
            position: absolute;
            opacity: .5;
            top: 30px;
            left: 0;
            color: #fff;

        }

        .yu {
            width: 670px;
            height: 140px;
            float: left;
        }

        .yu h2 a {
            color: #333;
            padding-left: 20px;
        }

        p {
            font-size: 10px;
            color: #333;
            padding-left: 20px;
        }

        p a {
            color: #333;
        }

        span {
            font-size: 10px;
            color: #333;
        }

        .jjr {
            font-size: 10px;
            color: #333;
            padding-left: 20px;
        }

        .money{
            display: inline-block;
            position: absolute;
            top:20px;
            right: 20px;
            color:#f00
        }
        .money b{
            font-size:32px;
        }
    </style>

最后只需在json里添加接口元素就好对了打开文件要在anywhe中执行才行。

然后只用在json加接口元素就好

[ 
    {"img":"1.jpg","tu":"11图","shuju":"整租|义，和,庄东里 精装两居室 家电齐全地铁沿线 出行购","jushi":"2室1厅1卫","duoda":"86㎡","dizhi1":"黄村","dizhi2":"义和庄东里...","dizhi3":"距离4号线黄村火车站地铁站792米","ren1":"安易居房地产 - 安易居房地产总店","ren2":"刘兴栋 ","rem":"3500","fen":"元/月"},
    {"img":"1.jpg","tu":"11图","shuju":"整租|义，和,庄东里 精装两居室 家电齐全地铁沿线 出行购","jushi":"2室1厅1卫","duoda":"86㎡","dizhi1":"黄村","dizhi2":"义和庄东里...","dizhi3":"距离4号线黄村火车站地铁站792米","ren1":"安易居房地产 - 安易居房地产总店","ren2":"刘兴栋 ","rem":"3500","fen":"元/月"}
]

如图所示

图片描述

weixin_34061555

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
javascript调试接口

最近在学习 JS 的面向对象实现，看「Javascript 设计模式」看不明白 JS 关于接口是怎么实现的。最近做的一个小例子如下图：下面有一段在JS中使用接口的代码，不知道是不是你在《JavaScript设计模式》中看到的，该段代码模拟了接口，支持多个接口的情况。 <script> var u...
复制链接

扫一扫