Flask项目（新闻网站）—— 新闻首页（点击排行，分类，列表数据）

中间展示新闻分类信息

右侧显示新闻点击排行

根据分类进行新闻列表展示

上拉加载更多数据

点击新窗口跳转到新闻详情页

因为新闻列表页需要实现上拉加载更多的交互逻辑

在用户上拉之后，新增的新闻数据直接拼接到页面的最下方，无需要更新整个页面

所以新闻数据的展示不能采用渲染模板的形式

需要使用 ajax 请求，请求完毕之后拼接界面元素

modules目录，index目录views.py，index函数添加如下代码

    # 3.实现新闻排行
    news_clicks = []
    try:
        news_clicks = News.query.order_by(News.clicks.desc()).limit(6)
    except Exception as e:
        current_app.logger.error(e)
        abort(500)

index.html，（在class值为‘rank_list’）进行如下修改，将原先的li标签注释掉

{% for news in context.news_clicks %}
                
{ loop.index | rank }}">{{ loop.index }}{{ news.title }}

            {% endfor %}

modules目录，index目录views.py，index函数添加如下代码

    # 4.实现新闻分类
    category = []
    try:
        category = Category.query.all()
    except Exception as e:
        current_app.logger.error(e)
        abort(500)

将 category 添加至我们的context中

context = {
        "user": user,
        "news_clicks": news_clicks,
        "category":category
    }

index.html，（在class值为‘menu fl’）进行如下修改，将原先的li标签注释掉

            {% for category in context.category %}
                
{{ category.name }}
            {% endfor %}

接口设计

代码实现

modules目录，index目录views.py，新建一个视图函数“news_list”

@index_blue.route('/news_list')
def news_list():
    """
    新闻获取
    1.参数获取
    2.校验参数
        2.1 校验是否齐全
        2.2 校验page和per_page是否为数值型
    3.完成新闻的获取（分页 )
    4.返回json数据
    :return: 
    """
    # 1.参数获取
    cid = request.args.get('cid')
    page = request.args.get('page',1)
    per_page = request.args.get('per_page',constants.HOME_PAGE_MAX_NEWS )

    # 2.校验参数
    #     2.1 校验是否齐全
    if not cid:
        return jsonify(errno=RET.PARAMERR, errmsg='缺失参数')
    #     2.2 校验page和per_page是否为数值型
    try:
        cid = int(cid)
        page = int(page)
        per_page = int(per_page)
    except Exception as e:
        current_app.logger.error(e)
        cid = 1
        page = 1
        per_page = constants.HOME_PAGE_MAX_NEWS
    # 3.完成新闻的获取（分页 )
    try:
        if cid == 1:
            paginate = News.query.order_by(News.create_time.desc()).paginate(page,per_page)
        else:
            paginate = News.query.filter_by(category_id=cid).order_by(News.create_time.desc()).paginate(page,per_page)
    except Exception as e:
        current_app.logger.error(e)
        return jsonify(errno=RET.DBERR, errmsg='新闻获取失败')

    total_page = paginate.pages
    currentPage = paginate.page
    newsList = paginate.items

    newsList_dict = []
    for news in newsList:
        newsList_dict.append(news.to_basic_dict())

    data = {
        "total_page":total_page,
        "currentPage":currentPage,
        "news_dict_list":newsList_dict
    }
    # 4.返回json数据
    return jsonify(errno=RET.OK, errmsg='新闻获取成功', data=data)

进入index.html，找到js引入的‘index.js’，ctrl+左键进入，进行如下修改

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.data.total_page;

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

            for (var i=0;i
                var news = response.data.news_dict_list[i]
                var content = '
'
                content += '+news.id+'" > + news.index_image_url + '?imageView2/1/w/170/h/170">'
                content += '+news.id+'" >' + news.title + ''
                content += '+news.id+'" >' + news.digest + ''
                content += ''
                content += '来源：' + news.source + ''
                content += '' + news.create_time + ''
                content += ''
                content += '
'
                $(".list_con").append(content);
            }
        } else {
            alert(response.errmsg);
        }
    });
}

效果展示