1.2首页刷新以及点击排行

首先完成首页刷新的功能

就像下图一样能做到鼠标滑轮一直向下滑，页面能够刷新出来同时不刷新页面，新的新闻数据也能加载出来的效果

1、以下是后端的代码

@index_blue.route("/news_list")
def news_list():
    #接收参数
    cid = request.args.get("cid",1)
    page = request.args.get("page",1)
    per_page = request.args.get("per_age",10)
    #检测异常
    try:
        cid = int(cid)
        page = int(page)
        per_page = int(per_page)
    except Exception as e:
        current_app.logger.error(e)
    #判断接收来的cid的值是否等于1
    if cid == 1:
    #在数据库中查找新闻并且以创建时间排序，用paginate函数接收
        paginate = News.query.order_by(News.create_time.desc())
            .paginate(page=page,per_page=per_page)
    else:
    #如果不是，就查找与前端接收到的cid相同的id的新闻
        paginate = News.query.filter(News.category_id==cid).
            order_by(News.create_time.desc()).
            paginate(page=page,per_page=per_page)

    # 获取所有
    newList = paginate.items
    # 获取总页数
    totalpage = paginate.pages
    # 获取当前页数
    currentPage = paginate.page
    new_newList = []
    #for循环遍历，用to_basic_dict()函数转换成字典类型
    for new in newList:
        new_newList.append(new.to_basic_dict())

    #传递上下文
    context = {
        "newList": new_newList,
        "totalPage": totalpage,
        "currentPage":currentPage
    }
    return jsonify(errno=RET.OK,errmsg="新闻获取成功" ,context=context)

2、下面是js的代码

var currentCid = 1; // 当前分类 id
var cur_page = 1; // 当前页
var total_page = 1;  // 总页数
var data_querying = true;   // 是否正在向后台获取数据:如果为ture表示正在加载数据；反之，没有加载数据


$(function () {

    // 当主页加载完成之后，立即刷新主页的分页数据
    // 默认加载第一页
    updateNewsData();

    // 首页分类切换
    $('.menu li').click(function () {
        var clickCid = $(this).attr('data-cid')
        $('.menu li').each(function () {
            $(this).removeClass('active')
        })
        $(this).addClass('active')

        if (clickCid != currentCid) {
            // 记录当前分类id
            currentCid = clickCid;

            // 重置分页参数
            cur_page = 1;
            total_page = 1;
            updateNewsData()
        }
    });

    //页面滚动加载相关
    $(window).scroll(function () {

        // 浏览器窗口高度
        var showHeight = $(window).height();

        // 整个网页的高度
        var pageHeight = $(document).height();

        // 页面可以滚动的距离
        var canScrollHeight = pageHeight - showHeight;

        // 页面滚动了多少,这个是随着页面滚动实时变化的
        var nowScroll = $(document).scrollTop();

        if ((canScrollHeight - nowScroll) < 100) {
            // TODO 判断页数，去更新新闻数据
            if (!data_querying) {
                // 表示正在加载数据
                data_querying = true;

                // 计算当前在第几页
                cur_page += 1;

                if (cur_page < total_page) {
                    // 加载指定页码的新闻数据
                    updateNewsData();
                }
            }
        }
    })
});

function updateNewsData() {
    // TODO 更新新闻数据
    var params = {
        'cid':currentCid,
        'page':cur_page
        // 每页多少条不用传，默认10条
    };

    $.get('/news_list', params, function (response) {
        // 得到响应后，表示一次加载数据结束了
        data_querying = false;

        if (response.errno == '0') {
            // 记录总页数
            total_page = response.context.totalPage;

            if (cur_page == 1) {
                $(".list_con").html("");
            }

            for (var i=0;i<response.context.newList.length;i++) {
                var news = response.context.newList[i]
                var content = '<li>'
                content += '<a href="/news/detail/'+news.id+'" class="news_pic fl"><img src="' + news.index_image_url + '?imageView2/1/w/170/h/170"></a>'
                content += '<a href="/news/detail/'+news.id+'" class="news_title fl">' + news.title + '</a>'
                content += '<a href="/news/detail/'+news.id+'" class="news_detail fl">' + news.digest + '</a>'
                content += '<div class="author_info fl">'
                content += '<div class="source fl">来源：' + news.source + '</div>'
                content += '<div class="time fl">' + news.create_time + '</div>'
                content += '</div>'
                content += '</li>'
                $(".list_con").append(content);
            }
        } else {
            alert(response.errmsg);
        }
    });
}

3、然后就是点击排行的设置和代码 了

 <div class="conter_con">
        <ul class="list_con fl">

        </ul>
        <div class="rank_con fr">
            <div class="rank_title">
                <h3>点击排行</h3>
            </div>
            <ul class="rank_list">
                {% for new in context.click_news %}
                <li><span class="{{ loop.index|rank }}">{{ loop.index }}</span>
                    <a href="#">{{ new.title }}</a></li>
                {% endfor %}
            </ul>
        </div>
    </div>

在11行中我们用了重定向，定向了我们自己在tools中创建的do_rank函数，这里rank是我们用了别名。

def do_rank(index):
    if index == 1:
        return "first"
    elif index == 2:
        return "second"
    elif index == 3:
        return "third"
    else:
        return ""