html+js模板引擎加载json数据

最新推荐文章于 2024-10-11 09:35:57 发布

HainesFreeman

最新推荐文章于 2024-10-11 09:35:57 发布

阅读量4k

点赞数

文章标签： js

本文链接：https://blog.csdn.net/weixin_41829196/article/details/80821143

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0
        }

        .cont {
            width: 600px;
            margin: 3% auto;
        }

        .cont .item {
            border-bottom: 1px #eee solid;
            padding: 15px 10px;
        }

        .cont .title {
            border-left: 5px #f00 solid;
            padding-left: 5px;
            font-size: 18px;
            font-weight: bold;
        }

        .cont .source {
            font-size: 14px;
            color: #666;
            overflow: hidden;
        }

        .cont .source .tag {
            float: right;
        }
    </style>
    <script src="data.js"></script>
</head>
<body>
<div class="cont" id="cont">
 <!--   <div class="item">
        <div class="title">
            教你仅用四个元件做一个升压电路，电压轻松提升两倍多
        </div>
        <div class="cont">
            今天教大家一个关于电源类的升压电路，关于电源我想我们大家并不陌生，我们每天在用的220V交流电就是一种电源，今天这个电源源头能源也是来自于220V交流电。",
        </div>
        <div class="source">来源：电子科技大亨<span class="tag">科技</span></div>
    </div>-->
</div>
<script src="data.js"></script>

<!-- 准备模板, 采用占位方式 -->
<script type="text/template" id="tpl">
    <div class="item">
        <div class="title">@title</div>
        <div class="cont">@abstract</div>
        <div class="source">来源：@source<span class="tag">@chinese_tag</span></div>
    </div>
</script>
<script>
    /***
     * 使用JS模板引擎渲染页面!!
     *
     * */
    //TODO step1: 获取模板
    var tpl = document.getElementById('tpl').innerHTML;
    console.log(tpl);
    console.log(data)
    //TODO step2: 解析数据
    var temp = '';//缓存字符串
    for (var i = 0; i < data.data.length; i++) {
        var obj = data.data[i];
        //console.log(obj);
        temp += tpl.replace('@title',obj.title)
                .replace('@abstract',obj.abstract)
                .replace('@source',obj.source)
                .replace('@chinese_tag',obj.chinese_tag);
    }
    document.getElementById('cont').innerHTML = temp;
</script>
</body>

</html>

json数据：

/**
 * Created by WTG on 2017/7/4.
 */
var data = {
    "has_more": false,
    "message": "success",
    "data": [{
        "chinese_tag": "教学",
        "media_avatar_url": "http://p5a.pstatp.com/large/2bd80016a8d917574d93",
        "is_feed_ad": false,
        "tag_url": "news_tech",
        "title": "教你仅用四个元件做一个升压电路，电压轻松提升两倍多",
        "single_mode": true,
        "middle_mode": false,
        "abstract": "今天教大家一个关于电源类的升压电路，关于电源我想我们大家并不陌生，我们每天在用的220V交流电就是一种电源，今天这个电源源头能源也是来自于220V交流电。",
        "group_source": 2,
        "image_list": [{"url": "http://p1.pstatp.com/list/2c2d00039bb0ca6110f4"}, {"url": "http://p1.pstatp.com/list/2c3100034207157cf7b3"}, {"url": "http://p3.pstatp.com/list/2c2d00039bae247b6513"}],
        "behot_time": 1499123532,
        "source_url": "/group/6438464026837385473/",
        "source": "电子科技大亨",
        "more_mode": true,
        "article_genre": "article",
        "comments_count": 48,
        "has_gallery": false,
        "tag": "news_tech",
        "image_url": "http://p1.pstatp.com/list/190x124/2c2d00039bb0ca6110f4",
        "group_id": "6438464026837385473",
        "media_url": "/c/user/3485243246/"
    }, {
        "chinese_tag": "科技",
        "media_avatar_url": "http://p3.pstatp.com/large/178000004a99e93b8bc2",
        "is_feed_ad": false,
        "tag_url": "news_tech",
        "title": "17岁天才少年成为全球第一青少年开发公司CEO，因与Sunshine女团合作意外走红",
        "single_mode": true,
        "middle_mode": false,
        "abstract": "他的名片上写着“崇才科技CEO 李昕泽”，公司全名是“洛阳崇才网络科技有限公司”。李昕泽，年仅十七岁就有了自己的公司。成员都是“00后”。除了CEO，公司还设有创始人、联合创始人、总裁、副总裁、常务副总裁等职位。",
        "group_source": 2,
        "image_list": [{"url": "http://p3.pstatp.com/list/28970001c39d152b2e69"}, {"url": "http://p3.pstatp.com/list/28970001c3ec905603c0"}, {"url": "http://p1.pstatp.com/list/289500023558ce5a3e2e"}],
        "behot_time": 1499123524,
        "source_url": "/group/6433522551104438529/",
        "source": "一点利",
        "more_mode": true,
        "article_genre": "article",
        "comments_count": 27,
        "has_gallery": false,
        "tag": "news_tech",
        "image_url": "http://p3.pstatp.com/list/190x124/28970001c39d152b2e69",
        "group_id": "6433522551104438529",
        "media_url": "/c/user/55875502835/"
    }, {
        "chinese_tag": "财经",
        "media_avatar_url": "http://p3.pstatp.com/large/1a6e0001373e1ad372b5",
        "is_feed_ad": false,
        "tag_url": "news_tech",
        "title": "从估值200亿到欠债20亿，从风云人物沦落到被人忘记，雷军的哥们却还不认输！",
        "single_mode": true,
        "middle_mode": false,
        "abstract": "不知道你是否还记得，在多年前的互联网行业中有一个响亮的互联网品牌叫“凡客”。这家互联网垂直电商平台在当时可以说是火遍了大半个中国，而它背后的男人就是雷军最好要的哥们之一的陈年！",
        "group_source": 2,
        "image_list": [{"url": "http://p3.pstatp.com/list/2c65000c3ee27f2df76f"}, {"url": "http://p9.pstatp.com/list/2c5e000c380c2a3399a0"}, {"url": "http://p3.pstatp.com/list/2c6a00027c34147ea6cb"}],
        "behot_time": 1499123517,
        "source_url": "/group/6438438593451409666/",
        "source": "是栋不是洞",
        "more_mode": true,
        "article_genre": "article",
        "comments_count": 1,
        "has_gallery": false,
        "tag": "news_tech",
        "image_url": "http://p3.pstatp.com/list/190x124/2c65000c3ee27f2df76f",
        "group_id": "6438438593451409666",
        "media_url": "/c/user/50863335678/"
    },  {
        "chinese_tag": "职场",
        "media_avatar_url": "http://p1.pstatp.com/large/17820010e526b489dd91",
        "is_feed_ad": false,
        "tag_url": "search/?keyword=%E8%81%8C%E5%9C%BA",
        "title": "领导居然这么对待为部门做过杰出贡献的老员工，真让人寒心啊！",
        "single_mode": true,
        "middle_mode": true,
        "abstract": "前段时间，我们部门一位资深的老员工提出离职了。这位员工，在一定程度上可以说是我们部门的元老级员工了，可没想到，在他刚提出离职后，就遭到了领导的隔离。我们部门每周都有周会，方便大家相互间了解彼此工作内容，理论上是要求全部门的员工都要参加。",
        "tag": "news_career",
        "behot_time": 1499123503,
        "source_url": "/group/6437086901689123330/",
        "source": "职场趣谈",
        "more_mode": false,
        "article_genre": "article",
        "image_url": "http://p1.pstatp.com/list/190x124/2c2f0003a319c67940a4",
        "has_gallery": false,
        "group_source": 2,
        "comments_count": 22,
        "group_id": "6437086901689123330",
        "media_url": "/c/user/57500463892/"
    }, {
        "chinese_tag": "互联网",
        "media_avatar_url": "http://p1.pstatp.com/large/ef7001760f9e76a36da",
        "is_feed_ad": false,
        "tag_url": "news_tech",
        "title": "脸书如果来了，你会抛弃微信吗？网友：我爱中国造！",
        "single_mode": true,
        "middle_mode": false,
        "abstract": "作为社交软件中的大佬，但是大家并没有听到过脸书和微信的战争，最主要的原因就是微信是我们的，而脸书则代表着外国。不过脸书如果来了，你会抛弃微信吗？",
        "group_source": 2,
        "image_list": [{"url": "http://p1.pstatp.com/list/2c2d0003fce850237e29"}, {"url": "http://p9.pstatp.com/list/2c280003c01626d88e15"}, {"url": "http://p9.pstatp.com/list/2c340000ed4d70aae935"}],
        "behot_time": 1499123496,
        "source_url": "/group/6438371057648877825/",
        "source": "科技面对面",
        "more_mode": true,
        "article_genre": "article",
        "comments_count": 323,
        "has_gallery": false,
        "tag": "news_tech",
        "image_url": "http://p1.pstatp.com/list/190x124/2c2d0003fce850237e29",
        "group_id": "6438371057648877825",
        "media_url": "/c/user/51671771280/"
    }, {
        "chinese_tag": "生活",
        "media_avatar_url": "http://p3.pstatp.com/large/bc20016a693254ed5ed",
        "is_feed_ad": false,
        "tag_url": "news_tech",
        "title": "为什么夫妻间老是想要定位对方的手机？",
        "single_mode": true,
        "middle_mode": false,
        "abstract": "在各种影视作品中，手机定位 作为一种增加剧情紧张感的手段，已经被各种滥用了。美剧、外国电影自然不用说了，就连早前国产大热的《人民的名义》的剧情，最初也是围绕着如何追踪定位一个告密电话展开的。随着这部反腐爆剧的大热， 这个专业名词似乎突然又活跃于人们面前。",
        "group_source": 2,
        "image_list": [{"url": "http://p3.pstatp.com/list/1dce0019ce67b12534e3"}, {"url": "http://p3.pstatp.com/list/1dcc00204dbf9fe4b14f"}, {"url": "http://p1.pstatp.com/list/1dcc00204dd373af8432"}],
        "behot_time": 1499123489,
        "source_url": "/group/6418151074419556609/",
        "source": "SherpaMan",
        "more_mode": true,
        "article_genre": "article",
        "comments_count": 4,
        "has_gallery": false,
        "tag": "news_tech",
        "image_url": "http://p3.pstatp.com/list/190x124/1dce0019ce67b12534e3",
        "group_id": "6418151074419556609",
        "media_url": "/c/user/50026575981/"
    }],
    "next": {"max_behot_time": 1499123489}
};