✍️ 作者简介: 前端新手学习中。
💂 作者主页: ​​作者主页查看更多前端教学​​ 🎓 专栏分享：css重难点教学       Node.js教学 从头开始学习        ajax学习

目录

​​案例——新闻列表​​

​​        实现步骤​​

​​        页面UI代码​​

​​        获取新闻数据​​

​​                 文档​​

​​                 代码 ​​

​​         定义template模板​​

​​                 代码​​

​​        编译模板渲染网页​​

​​                文档​​

​​                代码 ​​

​​        时间过滤器​​


案例——新闻列表

        实现步骤

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

        页面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>  
              <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;
}

        获取新闻数据

                       文档

请求的根路径

​​http://www.liulongbin.top:3006​​

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

                代码 

$(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>  
          <span>2019-10-28 10:14:38</span>
        </div>
        <span>评论数:66</span>
      </div>
    </div>
  </div>

  </script>

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

        编译模板渲染网页

                文档

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

                代码 

//将每项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>  
          <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>