1.接口文档
### 新闻列表
+ 接口URL： /api/news
+ 调用方式： GET
+ 参数格式：无
+ 响应格式：
| 数据名称 | 数据类型 | 说明 |
| --------- | -------- | -------------------------------------------- |
| status | Number | 200 获取新闻列表成功；500 获取新闻列表失败！ |
| msg | String | 对 status 字段的详细说明 |
| data | Array | 新闻列表数组 |
| +id | Number | 新闻Id |
| +title | String | 新闻标题 |
| +source | String | 新闻来源 |
| +cmtcount | Number | 评论数量 |
| +tags | String | 标签 |
| +img | String | 图片地址 |
| +time | String | 发表时间 |
+ 返回示例：
```json
{
"status": 200,
"msg": "获取新闻列表成功",
"data": [
{
"id": 1,
"title": "5G商用在即，三大运营商营收持续下降",
"source": "新京报经济新闻",
"cmtcount": 58,
"tags": "三大运营商,中国移动,5G商用",
"img": "/images/0.webp",
"time": "2019-10-28T03:50:28.000Z"
}
]
}
```
实现步骤：
-
获取新闻数据
-
定义template模板
-
编译模板
-
定义时间过滤器
-
定义补零函数
2.代码
<div id="news-list">
</div>
<!-- 2.定义template模板 -->
<script type="text/html" id="news">
<!-- 对每一个item进行循环 -->
{{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.tags进行循环 第一个$value是指data的value 第二个$value是指$value.tags的value -->
{{each $value.tags}}
<span>{{$value}}</span> {{/each}}
</div>
<div class="footer">
<div>
<span>{{$value.source}}</span>
<!-- 注意 这里用了时间过滤器 -->
<span>{{$value.time |dateFormat}}</span>
</div>
<span>评论数：{{$value.cmtcount}}</span>
</div>
</div>
</div>
{{/each}}
</script>
<script>
getnews();
// 1.获取新闻数据
function getnews() {
$.ajax({
method: 'GET',
url: "http://www.liulongbin.top:3006/api/news",
data: {},
success: function(res) {
if (res.status !== 200)
return alert("shibai");
console.log(res);
// "tags": "三大运营商,中国移动,5G商用",
// 3.1由于tags是一个字符串，所以对tags切割成数组
for (var i = 0; i < res.data.length; i++) {
// 把每一项tags属性 从字符串改造成字符串数组
res.data[i].tags = res.data[i].tags.split(",");
}
// 3.2定义时间过滤器dateFormat
template.defaults.imports.dateFormat = function(dtStr) {
var dt = new Date(dtStr);
var y = dt.getFullYear();
var m = zero(dt.getMonth() + 1);
var d = zero(dt.getDate());
var hh = zero(dt.getHours());
var mm = zero(dt.getMinutes());
var ss = zero(dt.getSeconds());
return y + '-' + m + '-' + d + ' ' + hh + ':' + mm + ':' + ss;
};
// 3.3定义一个补零函数
function zero(n) {
if (n < 10)
return '0' + n;
else
return n;
}
// 3.编译模板
var htmlstr = template("news", res);
// 4.利用dom操作 进行渲染HTML结构
$("#news-list").html(htmlstr);
}
})
}
</script>
TCL公司福利 415人发布
