开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第8天，点击查看活动详情

案例——新闻列表

实现步骤

获取新闻数据
定义template模板
编译模板渲染网页
定义时间过滤器

页面UI代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <link rel="stylesheet" href="./assets/news.css" />
    <script src="./lib/jquery.js"></script>
    <script src="./lib/template-web.js"></script>
  </head>
  <body>

    <div id="news-list">
      <div class="news-item">
        <img class="thumb" src="" alt="" />
        <div class="right-box">
          <h1 class="title">5G商用在即，三大运营商营收持续下降</h1>
          <div class="tags">
            <span>三大运营商</span>
            <span>中国移动</span>
            <span>5G商用</span>
          </div>
          <div class="footer">
            <div>
              <span>胡润百富</span>&nbsp;&nbsp;
              <span>2019-10-28 10:14:38</span>
            </div>
            <span>评论数：66</span>
          </div>
        </div>
      </div>
    </div>

  </body>
</html>

.news-item {
  display: flex;
  border: 1px solid #eee;
  width: 700px;
  padding: 10px;
  margin-bottom: 5px;
}

.thumb {
  display: block;
  width: 230px;
  height: 140px;
  background-color: #ccc;
  margin-right: 10px;
}

.right-box {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  font-size: 12px;
  flex: 1;
}

.title {
  font-size: 20px;
  font-weight: normal;
}

.tags span {
  display: block;
  float: left;
  background-color: #F0F0F0;
  line-height: 20px;
  padding: 0 10px;
  border-radius: 10px;
  margin-right: 8px;
}

.footer {
  display: flex;
  justify-content: space-between;
}

获取新闻数据

文档

请求的根路径

www.liulongbin.top:3006

编辑代码

$(function () {
    function getNewsList() {
        $.get('http://www.liulongbin.top:3006/api/news', function (res) {
            console.log(res);
        })
    }
    getNewsList()
})

定义template模板

代码

 <script type="text/html">

  <div class="news-item">
    <img class="thumb" src="" alt="" />
    <div class="right-box">
      <h1 class="title">5G商用在即，三大运营商营收持续下降</h1>
      <div class="tags">
        <span>三大运营商</span>
        <span>中国移动</span>
        <span>5G商用</span>
      </div>
      <div class="footer">
        <div>
          <span>胡润百富</span>&nbsp;&nbsp;
          <span>2019-10-28 10:14:38</span>
        </div>
        <span>评论数:66</span>
      </div>
    </div>
  </div>

  </script>

将html页面中的新闻item div剪切放到script标签里面。

编译模板渲染网页

文档

编辑

代码

 //将每项tags转换成数组 便于循环使用。
            for (let index = 0; index < res.data.length; index++) {
                res.data[index].tags = res.data[index].tags.split(',');
            }
//调用输出
   let str = template('tpl-news', res);
            $('#news-list').html(str);
        })

  <script type="text/html" id="tpl-news">
    {{each data}}
  <div class="news-item">
    <img class="thumb" src="{{'http://www.liulongbin.top:3006'+ $value.img}}" alt="" />
    <div class="right-box">
      <h1 class="title">{{$value.title}}</h1>
      <div class="tags">
        <!-- 两个$value不一样 
        第一个是当前循环的data数组项  
        第二个是当前循环的tags数组项-->
        {{each $value.tags}}
        <span>{{$value}}</span>
        {{/each}}
      </div>
      <div class="footer">
        <div>
          <span>{{$value.source}}</span>&nbsp;&nbsp;
          <span>{{$value.time}}</span>
        </div>
        <span>{{$value.cmtcount}}</span>
      </div>
    </div>
  </div>
{{/each}}
  </script>

编辑

时间过滤器

 //定义过滤器
 template.defaults.imports.dateFormat = function (dtstr) {
//补零
        function a(n) {
            return n = n < 10 ? '0' + n : n;
        }
        let dt = new Date(dtstr)
        let Y = dt.getFullYear();
        let M = a(dt.getMonth() + 1);
        let D = a(dt.getDate());

        let hh = a(dt.getHours());
        let mm = a(dt.getMinutes());
        let ss = a(dt.getSeconds());

        return Y + '-' + M + '-' + D + "   " + hh + ':' + mm + ':' + ss;

    }

 <span>{{$value.time | dateFormat}}</span>

编辑

【jquery Ajax 】art-template模板引擎案例——新闻列表

案例——新闻列表

实现步骤

页面UI代码

获取新闻数据

文档

​编辑 代码

定义template模板

代码

编译模板渲染网页

文档

代码

时间过滤器

编辑代码