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

简介: 【jquery Ajax 】art-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>&nbsp;&nbsp;
                  <span>2019-10-28 10:14:38</span>
                </div>
                <span>评论数:66</span>
              </div>
            </div>
          </div>
        </div>
      </body>
    </html>

    image.gif

    .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;
    }

    image.gif

           获取新闻数据

                          文档

    请求的根路径

    http://www.liulongbin.top:3006

    image.gif编辑

                   代码

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

    image.gif

            定义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>

    image.gif

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

           编译模板渲染网页

                   文档

    image.gif编辑

                   代码

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

    image.gif

    <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>

    image.gif

    image.gif编辑

           时间过滤器

    //定义过滤器
     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;
        }

    image.gif

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

    image.gif

                 

    image.gif编辑


    目录
    相关文章
    |
    1月前
    |
    前端开发 JavaScript
    js + ajax实现商品列表页到详情页的跳转
    js + ajax实现商品列表页到详情页的跳转
    |
    5天前
    |
    JavaScript 前端开发 Java
    jquery ajax+spring mvc上传文件
    jquery ajax+spring mvc上传文件
    |
    1月前
    |
    前端开发 JavaScript
    Jquery ajax捕获错误信息
    Jquery ajax捕获错误信息
    14 0
    |
    1月前
    |
    JavaScript 前端开发
    jquery怎么给循环出来的列表(类似于text框)取值和赋值
    jquery怎么给循环出来的列表(类似于text框)取值和赋值
    14 0
    jquery怎么给循环出来的列表(类似于text框)取值和赋值
    |
    1月前
    |
    JavaScript
    jQuery自定义动画-第8次课-animate-stop函数-附案例
    jQuery自定义动画-第8次课-animate-stop函数-附案例
    14 0
    |
    1月前
    |
    JavaScript 前端开发
    jQuery特效函数-第7次课-show、hide等方法有动画效果的显示和隐藏一个元素-附案例-任务
    jQuery特效函数-第7次课-show、hide等方法有动画效果的显示和隐藏一个元素-附案例-任务
    12 0
    |
    1月前
    |
    JavaScript
    jQuery事件2-第6次课-给未来的元素绑事件-事件对象-JS盒模型-附案例、任务
    jQuery事件2-第6次课-给未来的元素绑事件-事件对象-JS盒模型-附案例、任务
    17 0
    |
    1月前
    |
    JavaScript 前端开发
    jQuery事件1-第5次课-JQ的事件跟JS一样的作用,只是写法不一样-附案例、任务
    jQuery事件1-第5次课-JQ的事件跟JS一样的作用,只是写法不一样-附案例、任务
    14 0
    |
    1月前
    |
    JavaScript 前端开发 数据安全/隐私保护
    jQuery选择器-第2次课-大部分跟CSS3选择器类似-几乎没有学习成本-附案例-作业等
    jQuery选择器-第2次课-大部分跟CSS3选择器类似-几乎没有学习成本-附案例-作业等
    11 0
    |
    1月前
    |
    JavaScript 前端开发 API
    jquery是什么-是否还有必要学-与JS的区别-学习技巧-文末附资料、案例、作业
    jquery是什么-是否还有必要学-与JS的区别-学习技巧-文末附资料、案例、作业
    20 0