Ajax入门——第二节（2）——运用art-template模板引擎——渲染新闻列表案例

不能瞌睡呀

已于 2022-07-11 13:04:51 修改

阅读量222

点赞数 2

分类专栏： Ajax jQuery 文章标签： javascript ajax 前端

于 2022-07-11 12:58:34 首次发布

本文链接：https://blog.csdn.net/qq_56897195/article/details/125719254

版权

jQuery 同时被 2 个专栏收录

12 篇文章 1 订阅

订阅专栏

Ajax

6 篇文章 1 订阅

订阅专栏

文章目录

案例 – 新闻列表
- 1. 实现步骤
2. 代码总结
- - 2.1 html文件
  - 2.2 new.js文件

案例 – 新闻列表

在这里插入图片描述

1. 实现步骤

1.1 获取新闻数据

$(function(){
 // 获取新闻列表的函数
  function getNewsList() {
    $.get('http://www.liulongbin.top:3006/api/news', function (res) {
      if (res.status !== 200) {
        return alert('获取新闻列表数据失败！')
      }     
    })
  }
  getNewsList()

})

1.2 定义 template 模板

在这里插入图片描述

1.3 编译模板

在这里插入图片描述

给模板起一个id ，调用template函数，调用template函数成功之后，会返回渲染好的html字符串，并把他添加到news-list内部

$(function(){
 // 获取新闻列表的函数
  function getNewsList() {
    $.get('http://www.liulongbin.top:3006/api/news', function (res) {
      if (res.status !== 200) {
        return alert('获取新闻列表数据失败！')
      } 
      console.log(res)
      //调用template函数成功之后，会返回渲染好的html字符串，并把他添加到news-list内部
      var htmlStr = template('tpl-news', res)
      $('#news-list').html(htmlStr)    
    })
  }
  getNewsList()

})

1.4 写标准语法

each循环数组

<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">
            {{each $value.tags}}
            <span>{{$value}}</span>
            {{/each}}
          </div>
          <div class="footer">
            <div>
              <span>{{$value.source}}</span>&nbsp;&nbsp;
              <span>{{$value.time | dateFormat}}</span>
            </div>
            <span>评论数：{{$value.cmtcount}}</span>
          </div>
        </div>
      </div>
      {{/each}}
    </script>

1.5 定义时间过滤器

// 定义格式化时间的过滤器
  template.defaults.imports.dateFormat = function (dtStr) {
    var dt = new Date(dtStr)

    var y = dt.getFullYear()
    var m = dt.getMonth() + 1)
    var d = dt.getDate()

    var hh = dt.getHours()
    var mm = dt.getMinutes()
    var ss = dt.getSeconds()

    return y + '-' + m + '-' + d + ' ' + hh + ':' + mm + ':' + ss
  }

1.6 定义补零函数

function padZero(n) {
    if (n < 10) {
      return '0' + n
    } else {
      return n
    }
  }

  // 定义格式化时间的过滤器
  template.defaults.imports.dateFormat = function (dtStr) {
    var dt = new Date(dtStr)

    var y = dt.getFullYear()
    var m = padZero(dt.getMonth() + 1)
    var d = padZero(dt.getDate())

    var hh = padZero(dt.getHours())
    var mm = padZero(dt.getMinutes())
    var ss = padZero(dt.getSeconds())

    return y + '-' + m + '-' + d + ' ' + hh + ':' + mm + ':' + ss
  }

2. 代码总结

2.1 html文件

<!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>
  <script src="./js/news.js"></script>
</head>

<body>

  <div id="news-list"></div>

  <!-- 定义模板 -->
  <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">
            {{each $value.tags}}
            <span>{{$value}}</span>
            {{/each}}
          </div>
          <div class="footer">
            <div>
              <span>{{$value.source}}</span>&nbsp;&nbsp;
              <span>{{$value.time | dateFormat}}</span>
            </div>
            <span>评论数：{{$value.cmtcount}}</span>
          </div>
        </div>
      </div>
      {{/each}}
    </script>

</body>

</html>

2.2 new.js文件

$(function () {
  // 给时间补零的函数
  function padZero(n) {
    if (n < 10) {
      return '0' + n
    } else {
      return n
    }
  }

  // 定义格式化时间的过滤器
  template.defaults.imports.dateFormat = function (dtStr) {
    var dt = new Date(dtStr)

    var y = dt.getFullYear()
    var m = padZero(dt.getMonth() + 1)
    var d = padZero(dt.getDate())

    var hh = padZero(dt.getHours())
    var mm = padZero(dt.getMinutes())
    var ss = padZero(dt.getSeconds())

    return y + '-' + m + '-' + d + ' ' + hh + ':' + mm + ':' + ss
  }

  // 获取新闻列表的函数
  function getNewsList() {
    $.get('http://www.liulongbin.top:3006/api/news', function (res) {
      if (res.status !== 200) {
        return alert('获取新闻列表数据失败！')
      }
      // 对数据进行改造
      for (var i = 0; i < res.data.length; i++) {
        // 把每一项的 tags 属性，从字符串改造成字符串的数组，用‘，’分隔
        res.data[i].tags = res.data[i].tags.split(',')
      }
      console.log(res)
      //调用template函数成功之后，会返回渲染好的html字符串，并把他添加到news-list内部
      var htmlStr = template('tpl-news', res)
      $('#news-list').html(htmlStr)
    })
  }

  getNewsList()

})

不能瞌睡呀

关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
打赏
0
评论
Ajax入门——第二节（2）——运用art-template模板引擎——渲染新闻列表案例

1.2 定义 template 模板1.4 写标准语法1.5 定义时间过滤器定义补零函数1.6 代码总结html文件new.js文件
复制链接

扫一扫