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

2022-12-09 133

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

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

案例——新闻列表

实现步骤

获取新闻数据
定义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;
}

获取新闻数据

文档

请求的根路径

http://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模板

代码

编译模板渲染网页

文档

代码

时间过滤器

热门文章

最新文章

相关课程

相关电子书

相关实验场景

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

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

案例——新闻列表

实现步骤

页面UI代码

获取新闻数据

文档

编辑

代码

定义template模板

代码

编译模板渲染网页

文档

代码

时间过滤器

热门文章

最新文章

相关课程

相关电子书

相关实验场景