获取新闻列表数据

• 定义函数，获取新闻列表数据 getNewsList()
• 查阅接口文档，关注 请求url，请求方式，请求参数，响应数据
• 利用 $.get() 发起请求
• 在回调函数中，判断请求是否成功

定义新闻列表item模板

• 创建 script 标签，更改type属性值为 text/html，给模板定义id
• 找到静态页面中 item 的结构，拷贝到模板里面

编译模板渲染结构

• 在请求成功的回调里面，先对返回数据进行改造，里面返回的 tags 是一个字符串，我们需要分割成数组
• 调用 template() 方法，传入id和返回的数据
• 把函数的返回值添加到页面容器中
• 在模板中利用 each 遍历列表
• 利用 $value 能够拿到每一个item项
• 设置图片 img，注意：需要拼接请求根路径
• 设置标题 title
• 设置标签，注意：标签在之前改造成数组了，这里又需要进行遍历
• 设置来源 source
• 设置时间，注意：时间需要格式化，利用过滤器来实现
• 设置评论数 cmtcount

<!-- 定义模板 -->
<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>

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)
      var htmlStr = template('tpl-news', res)
      $('#news-list').html(htmlStr)
    })
  }

  getNewsList()

})