【jquery Ajax 】art-template模板引擎案例——新闻列表
【摘要】 【jquery Ajax 】art-template模板引擎案例——新闻列表
案例——新闻列表
实现步骤
- 获取新闻数据
- 定义template模板
- 编译模板渲染网页
- 定义时间过滤器
页面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>
<span>2019-10-28 10:14:38</span>
</div>
<span>评论数：66</span>
</div>
</div>
</div>
</div>
</body>
</html>
.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;
}
获取新闻数据
文档
请求的根路径
代码
$(function () {
function getNewsList() {
$.get('http://www.liulongbin.top:3006/api/news', function (res) {
console.log(res);
})
}
getNewsList()
})
定义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>
<span>2019-10-28 10:14:38</span>
</div>
<span>评论数:66</span>
</div>
</div>
</div>
</script>将html页面中的新闻item div剪切放到script标签里面。
编译模板渲染网页
文档
代码
//将每项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);
}) <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>
<span>{{$value.time}}</span>
</div>
<span>{{$value.cmtcount}}</span>
</div>
</div>
</div>
{{/each}}
</script>时间过滤器
//定义过滤器
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;
}
<span>{{$value.time | dateFormat}}</span>
【版权声明】本文为华为云社区用户原创内容，转载时必须标注文章的来源（华为云社区）、文章链接、文章作者等基本信息， 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）