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

         

    ✍️ 作者简介: 前端新手学习中。
    💂 作者主页: 作者主页查看更多前端教学
    🎓 专栏分享：css重难点教学       Node.js教学 从头开始学习        ajax学习

    目录

    案例——新闻列表

            实现步骤

            页面UI代码

            获取新闻数据

                     文档

                     代码 

             定义template模板

                     代码

            编译模板渲染网页

                    文档

                    代码 

            时间过滤器

                  

    案例——新闻列表

            实现步骤

    1. 获取新闻数据
    2. 定义template模板
    3. 编译模板渲染网页
    4. 定义时间过滤器

            页面UI代码

    1. html>
    2. <html lang="en">
    3.   <head>
    4.     <meta charset="UTF-8" />
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    6.     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    7.     <title>Documenttitle>
    8.     <link rel="stylesheet" href="./assets/news.css" />
    9.     <script src="./lib/jquery.js">script>
    10.     <script src="./lib/template-web.js">script>
    11.   head>
    12.   <body>
    13.  
    14.     <div id="news-list">
    15.       <div class="news-item">
    16.         <img class="thumb" src="" alt="" />
    17.         <div class="right-box">
    18.           <h1 class="title">5G商用在即，三大运营商营收持续下降h1>
    19.           <div class="tags">
    20.             <span>三大运营商span>
    21.             <span>中国移动span>
    22.             <span>5G商用span>
    23.           div>
    24.           <div class="footer">
    25.             <div>
    26.               <span>胡润百富span>  
    27.               <span>2019-10-28 10:14:38span>
    28.             div>
    29.             <span>评论数：66span>
    30.           div>
    31.         div>
    32.       div>
    33.     div>
    34.  
    35.   body>
    36. html>
    1. .news-item {
    2.   display: flex;
    3.   border: 1px solid #eee;
    4.   width: 700px;
    5.   padding: 10px;
    6.   margin-bottom: 5px;
    7. }
    8.  
    9. .thumb {
    10.   display: block;
    11.   width: 230px;
    12.   height: 140px;
    13.   background-color: #ccc;
    14.   margin-right: 10px;
    15. }
    16.  
    17. .right-box {
    18.   display: flex;
    19.   flex-direction: column;
    20.   justify-content: space-between;
    21.   font-size: 12px;
    22.   flex: 1;
    23. }
    24.  
    25. .title {
    26.   font-size: 20px;
    27.   font-weight: normal;
    28. }
    29.  
    30. .tags span {
    31.   display: block;
    32.   float: left;
    33.   background-color: #F0F0F0;
    34.   line-height: 20px;
    35.   padding: 0 10px;
    36.   border-radius: 10px;
    37.   margin-right: 8px;
    38. }
    39.  
    40. .footer {
    41.   display: flex;
    42.   justify-content: space-between;
    43. }

            获取新闻数据

                           文档

    请求的根路径

    http://www.liulongbin.top:3006


                    代码 

    1. $(function () {
    2.     function getNewsList() {
    3.         $.get('http://www.liulongbin.top:3006/api/news', function (res) {
    4.             console.log(res);
    5.         })
    6.     }
    7.     getNewsList()
    8. })

             定义template模板

                     代码

    1.

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

            编译模板渲染网页

                    文档

                    代码 

    1.  //将每项tags转换成数组 便于循环使用。
    2.             for (let index = 0; index < res.data.length; index++) {
    3.                 res.data[index].tags = res.data[index].tags.split(',');
    4.             }
    5. //调用输出
    6.    let str = template('tpl-news', res);
    7.             $('#news-list').html(str);
    8.         })

            时间过滤器

    1.  //定义过滤器
    2.  template.defaults.imports.dateFormat = function (dtstr) {
    3. //补零
    4.         function a(n) {
    5.             return n = n < 10 ? '0' + n : n;
    6.         }
    7.         let dt = new Date(dtstr)
    8.         let Y = dt.getFullYear();
    9.         let M = a(dt.getMonth() + 1);
    10.         let D = a(dt.getDate());
    11.  
    12.         let hh = a(dt.getHours());
    13.         let mm = a(dt.getMinutes());
    14.         let ss = a(dt.getSeconds());
    15.  
    16.         return Y + '-' + M + '-' + D + "   " + hh + ':' + mm + ':' + ss;
    17.  
    18.     }
     <span>{{$value.time | dateFormat}}span>

                  

  • 相关阅读:
    Flink系列文档-(YY04)-Flink编程基础API-Transformation算子
    中小企业怎么去挑选ERP系统？
    内网穿透工具
    Python爬虫实战(七)：某讯较真辟谣小程序爬虫
    Python多重继承
    百度笔试题面试题总结1
    企业云网盘：如何选择最适合您的解决方案？
    Lua脚本语言
    【Java】DDD领域驱动设计理解
    认识弹性盒子flex
  • 原文地址：https://blog.csdn.net/m0_62360527/article/details/127701925