【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编辑


    目录
    相关文章
    |
    5月前
    |
    前端开发 JavaScript
    杨校老师课堂之基于Servlet整合JQuery中的Ajax进行表单提交[基于IDEA]
    杨校老师课堂之基于Servlet整合JQuery中的Ajax进行表单提交[基于IDEA]
    45 0
    杨校老师课堂之基于Servlet整合JQuery中的Ajax进行表单提交[基于IDEA]
    |
    1月前
    |
    前端开发 JavaScript 数据处理
    JQuery 拦截请求 | Ajax 请求拦截
    【10月更文挑战第4天】
    82 1
    |
    2月前
    |
    前端开发
    React技术栈-react使用的Ajax请求库实战案例
    这篇文章介绍了在React应用中使用Axios和Fetch库进行Ajax请求的实战案例,展示了如何通过这些库发送GET和POST请求,并处理响应和错误。
    54 10
    React技术栈-react使用的Ajax请求库实战案例
    |
    2月前
    |
    前端开发
    React技术栈-react使用的Ajax请求库用户搜索案例
    这篇文章展示了一个React技术栈中使用Ajax请求库(如axios)进行用户搜索的实战案例,包括React组件的结构、状态管理以及如何通过Ajax请求获取并展示GitHub用户数据。
    32 7
    React技术栈-react使用的Ajax请求库用户搜索案例
    |
    2月前
    |
    JSON 前端开发 JavaScript
    jQuery AJAX 方法
    jQuery AJAX 方法
    32 1
    |
    30天前
    |
    JSON JavaScript 前端开发
    《进阶篇第7章》学习vue中的ajax之后,练习vue案例-github用户搜索案例
    《进阶篇第7章》学习vue中的ajax之后,练习vue案例-github用户搜索案例
    15 0
    |
    2月前
    |
    JSON JavaScript 前端开发
    Jquery常用操作汇总,dom操作,ajax请求
    本文汇总了jQuery的一些常用操作,包括DOM元素的选择、添加、移除,表单操作,以及如何使用jQuery发送Ajax请求,涵盖了GET、POST请求和文件上传等常见场景。
    |
    2月前
    |
    JSON 前端开发 JavaScript
    jQuery AJAX 方法
    jQuery AJAX 方法
    21 1
    |
    3月前
    |
    前端开发 JavaScript Java
    SpringBoot+JQuery+Ajax实现表单数据传输和单文件或多文件的上传
    关于如何在SpringBoot项目中结合JQuery和Ajax实现表单数据的传输以及单文件或多文件上传的教程。文章提供了完整的前后端示例代码,包括项目的`pom.xml`依赖配置、SpringBoot的启动类`App.java`、静态资源配置`ResourceConfig.java`、配置文件`application.yml`、前端HTML页面(单文件上传和多文件上传加表单内容)以及后端控制器`UserController.java`。文章最后展示了运行结果的截图。
    153 0
    SpringBoot+JQuery+Ajax实现表单数据传输和单文件或多文件的上传
    |
    3月前
    |
    XML JSON 前端开发
    AJAX是什么?原生语法格式?jQuery提供分装好的AJAX有什么区别?
    AJAX是什么?原生语法格式?jQuery提供分装好的AJAX有什么区别?
    32 0