Ajax学习笔记（七）：新闻列表案例

### 新闻列表

+ 接口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>&nbsp;&nbsp;
                        <!-- 注意 这里用了时间过滤器 -->
                        <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>