2020-12-13

大事件前台页面的实现

热点图的渲染步骤
1静态结构
2发起ajax请求
3进行模板的赋值
4填充到页面指定位置

效果图

js发起ajax

// 热点图
// 3、热点图
// 请求地址：/index/hotpic
// 请求方式：get
$.ajax({
'http://127.0.0.1:8080/api/v1/index/hotpic',
dataType:"json",
success:function(res){
consloe.log(res)
if(res.code==200){
$(".focus_list").html(template("hotpicTemp",res))

}
}
})

热点图模板

<script type="text/template" id="hotpicTemp">
{{each data}}
//第一张和其他张的图片大小不一致所以判断一下是否为第一张给第一张加个first的类名
<li class="{{$index==0?'first':''}}">
<a herf="./article.html?id={{$value.id}}"<img src="{{$value.cover}}" alt=""></a>
                <p>{{$value.title}}</p>
    </li>
        {{/each}}
</script>

最新评论

效果
**
**

最新评论模板

   <!-- 最新评论模板 -->
    <script type="text/template" id="commentTemp">
    {{each data}}
    <li>
         <!-- 用substring截取姓名的第一个字 -->
                <span>{{$value.author.substring(0,1)}}</span>
                <!-- $value.mdiff接口没有提供自己添加理论上不要覆盖已有的名字 -->
                <!-- $value.date.substring(5)截取到第5个 -->
                <b><em>{{$value.author}}</em>{{$value.mdiff}}个月前{{$value.date.substring(5)}}说:</b>
                
                <strong>{{$value.intro}}</strong>
            </li>
    {{/each}}

**

发起ajax请求

 //评论
            $.ajax({
                url: 'http://127.0.0.1:8080/api/v1/index/latest_comment',
                dataType: 'json',
                success: function (res) {
                    console.log(res);
                    if (res.code == 200) {
                    //拿到当前的月份和年份
                        let currentYear = new Date().getFullYear()
                        //月份是从0开始的所以要记得加一
                        let currentMonth = new Date().getMonth() + 1
                        console.log(currentYear, currentMonth)
                        // 2.遍历数据，获取每一个数据中的  年  和 月，计算出月的差异
                        for (let i = 0; i < res.data.length; i++) {
                            let y = (currentYear - new Date(res.data[i].date).getFullYear()) * 12  // 年份所代表的月的差异
                            let m = currentMonth - (new Date(res.data[i].date).getMonth() + 1) // 月的差异
                            // 改造数据的原则：不修改原始数据，而是添加新的成员
                            res.data[i].mdiff = y + m
                        }
                        //进行模板的填充到页面
                        $('.comment_list').html(template('commentTemp', res))
                    }
                }
            })
        })

**