flask项目：新闻信息网站6滑动无限加载,完善csrf,新闻详情页,模板抽取

滑动无限加载

var currentCid = 1; // 当前分类 id
var cur_page = 1; // 当前页
var total_page = 1;  // 总页数
var house_data_querying = true;   // 是否正在向后台获取数据


$(function () {
    // 调用updateNewsData方法更新数据
    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 (!house_data_querying){
                // 将是否发送数据设置为真
                house_data_querying =true;
                if(cur_page < total_page){
                    // 调用updateNewsData方法更新数据
                        updateNewsData()
                }else {
                     house_data_querying =false;

                }

            }

        }
    })
})

function updateNewsData() {
    // TODO 更新新闻数据
    var params = {
        "page": cur_page,
        "per_page": 5,
        "cid": currentCid
    }
    $.get("/newslist", params,function (resp) {
        // 将 house_data_querying设置为false 以便下次滚动加载
        house_data_querying = false;
        if (resp){
            total_page = resp.totalPage
            //清空原来数据
            if(cur_page == 1){
                $(".list_con").html("")
            }
            // 每调用一次，要更新cur_page
            cur_page += 1

            // 显示数据
            for (var i=0; i < resp.newsList.length; i++){
                var news = resp.newsList[i]
                var content = '<li>'
                content += '<a href="/news/'+news.id+'" class="news_pic fl"><img src="' + news.index_image_url + '?imageView2/1/w/170/h/170"></a>'
                content += '<a href="/news/'+news.id+'" class="news_title fl">' + news.title + '</a>'
                content += '<a href="/news/'+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)
            }
        }
    })

}

完善csrf

info/__ init__.py中添加

 CSRFProtect(app)

 @app.after_request
    def after_request(response):
        # 调用生成csrf 的函数
        csrf_token = generate_csrf()
        # 通过cookie传递给前台
        response.set_cookie("csrf_token", csrf_token)
        return response

新闻详情页

将detail.html拖到templates/news下

创建蓝图
在modules下创建包news，里面创建views.py

在__ init__.py中创建蓝图

# 创建蓝图
from flask import Blueprint
news_blu = Blueprint('news', __name__,url_prefix='/news')
from . import views

注册蓝图路由
news/views.py

from flask import render_template

from info.modules.news import news_blu

@news_blu.route('/<int:news_id>')
def news_detail(news_id):
    return render_template('news/detail.html')

注册蓝图到程序实例中
info/__ init__.py

  from info.modules.news import news_blu
    app.register_blueprint(news_blu)

设置路径

index.js

index.html

模板抽取

templates/news下在创建base.html

bade.html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{% block title %}{% endblock %}</title>
    <link rel="stylesheet" type="text/css" href="../../static/news/css/reset.css">
    <link rel="stylesheet" type="text/css" href="../../static/news/css/main.css">
    <script type="text/javascript" src="../../static/news/js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript" src="../../static/news/js/main.js"></script>
    <script type="text/javascript" src="../../static/news/js/index.js"></script>
    {% block custom_css_js %}
    {% endblock %}
</head>
<body>
    <div class="header_con">
        <div class="header">
            <a href="#" class="logo fl"><img src="../../static/news/images/logo.png" alt="logo"></a>
            {% block menu %}
            {% endblock %}
            {% if data.user_info %}
                <div class="user_login fr">
{#                <img src="../../static/news/images/person01.png" class="lgin_pic">#}
                <img src="{% if data.user_info.avatar_url %}{{ data.user_info.avatar_url }}
                {% else %}../../static/news/images/person01.png
                {% endif %}" class="lgin_pic">
                <a href="#">{{ data.user_info.nick_name }}</a>
                <a href="#" onclick="logout()">退出</a>
            </div>
            {% else %}
                <div class="user_btns fr">
                <a href="javascript:;" class="login_btn">登录</a> / <a href="javascript:;" class="register_btn">注册</a>
            </div>
            {% endif %}

            <!-- 用户登录后显示下面，隐藏上面 -->

        </div>
    </div>

    <div class="conter_con">
    {% block left  %}
    {% endblock %}
    {% block right %}
    {% endblock %}
    </div>

    <div class="footer">
        <div class="footer_links">
            <a href="">关于我们</a>
            <span>|</span>
            <a href="">联系我们</a>
            <span>|</span>
            <a href="">招聘人才</a>
            <span>|</span>
            <a href="">友情链接</a>
        </div>
        <p class="copyright">
            CopyRight © 2018 新经资讯信息技术有限公司 All Rights Reserved<br />
电话：010-****888    京ICP备*******8号
        </p>
    </div>

    <!-- 登录表单 -->
    <form class="login_form_con">
        <div class="login_form">
            <div class="login_title">
                <h3>登 录</h3>
                <a href="javascript:;" class="shutoff"></a>
            </div>
            <div class="form_group">
                <input id="mobile" type="text" name="mobile" autocomplete="off">
                <div class="input_tip">手机号</div>
                <div id="login-mobile-err" class="error_tip">手机号不能为空</div>
            </div>
            <div class="form_group">
                <input id="password" type="password" name="password">
                <div class="input_tip">密码(不少于6位)</div>
                <div id="login-password-err" class="error_tip">密码不能为空</div>
            </div>
            <input type="submit" name="" value="登 录" class="input_sub">
            <div class="down_link">还没有账号？<a href="javascript:;" class="to_register">立即注册</a></div>
        </div>
        <div class="mask"></div>
    </form>

    <!-- 注册表单 -->
    <form class="register_form_con">
        <div class="register_form">
            <div class="register_title">
                <h3>注 册</h3>
                <a href="javascript:;" class="shutoff"></a>
            </div>
            <div class="form_group">
                <input type="text" name="mobile" autocomplete="off" id="register_mobile" class="phone_input">
                <div class="input_tip">手机号</div>
                <div id="register-mobile-err" class="error_tip">手机号不能为空</div>
            </div>
            <div class="form_group">
                <input type="text" name="code_pwd" id="imagecode" class="code_pwd">
                <div class="input_tip">图形验证码</div>
                <img src="../../static/news/images/pic_code.png" class="get_pic_code" onclick="generateImageCode()">
                <div id="register-image-code-err" class="error_tip">图形码不能为空</div>
            </div>
            <div class="form_group">
                <input type="text" name="smscode" id="smscode" class="code_pwd">
                <div class="input_tip">手机验证码</div>
                <a href="javascript:;" class="get_code" onclick="sendSMSCode()">点击获取验证码</a>
                <div id="register-sms-code-err" class="error_tip">验证码不能为空</div>
            </div>
            <div class="form_group">
                <input type="password" name="password" id="register_password" class="pass_input">
                <div class="input_tip">密码(不少于6位)</div>
                <div id="register-password-err" class="error_tip">密码不能为空</div>
            </div>
            <div  class="form_group2 clearfix">
                <input type="checkbox" class="agree_input" checked>
                <p>同意使用条款，并已阅读"跟帖评论自律管理承诺书"</p>
                <div class="error_tip">请勾选</div>
            </div>
            <input type="submit" name="" value="注 册" class="input_sub">
            <div class="down_link">已有账号？<a href="javascript:;" class="to_login">立即登录</a></div>
        </div>
        <div class="mask"></div>
    </form>
</body>
</html>

index,html:

{% extends 'news/base.html' %}
{% block title %}首页-新经资讯{% endblock %}
{% block menu %}
    <ul class="menu fl">

            {% for category in data.categories %}

                <li class="{% if loop.index0 == 0 %}
                active
                {% endif %}" data-cid="{{ category.id }}"><a href="javascript:;">{{category.name}}</a></li>
            {% endfor %}

        </ul>
{% endblock %}
{% block left  %}
    <ul class="list_con fl">

    </ul>
{% endblock %}
{% block right %}
    <div class="rank_con fr">
        <div class="rank_title">
            <h3>点击排行</h3>
        </div>
        <ul class="rank_list">
{#            <li><span class="first">1</span><a href="#">势如破竹！人民币再度连闯四道关口 在岸、离岸双双升破6.42</a></li>#}
{#            <li><span class="second">2</span><a href="#">凛冬已至，还有多少银行人在假装干银行</a></li>#}
{#            <li><span class="third">3</span><a href="#">人民日报：部分城市楼市放松限制引关注，楼市调控不会“拉抽屉”</a></li>#}
            {% for news in data.click_news_list %}
                <li><span class="{{ loop.index0|index_class }}">{{ loop.index }}</span><a href="/news/{{ news.id }}">{{ news.title }}</a></li>
            {% endfor %}


        </ul>
    </div>
{% endblock %}

detail.html:

{% extends 'news/base.html' %}
{% block title %}文章详情页{% endblock %}
{% block left  %}
    <div class="detail_con fl">
            <h3>恒指创收盘历史新高 沪指创逾2个月来新高 房地产板块集体爆发</h3>
            <div class="detail_about clearfix">
                <span class="time_souce fl">2018-01-16 14:38 来源: 商务部</span>
                <span class="comment fr">3</span>
            </div>

            <p class="summary">
                摘要：昨天终结十一连阳之后，今天A股迅速重拾涨势，沪指收涨0.8%创逾两个月新高。房地产板块集体走强，尾盘更是放量大涨，万科A一度逼近涨停，最终收涨8.4%，股价创历史新高。
            </p>

            <h4>恒指创收盘历史新高</h4>

            <p>
            港股方面今天表现强劲，开年以来的上涨势头仍然延续，恒指收涨1.8%创下收盘新高。此前恒指的峰值是在2007年10月份盘中触及的31958点。</p>
<p>
今天恒指51支成份股中，42支上涨，7支下跌，对恒指贡献最大的个股包括建设银行上涨3.7%，腾讯控股上涨2.5%，香港交易所上涨5.9%，工商银行上涨3.3%，中国平安上涨2.8%。</p>
<p>
2018年的前15日，恒生指数已经上涨了4.75%，恒生国企指数上涨了6.50%。</p>
<p>
兴业证券张忆东在最新报告中表示，港股作为全球估值洼地，不论是分红率高的价值股还是业绩确定的成长股都受益于新一年中资和海外机构资金的重新布局。他维持2016年以来对“港股牛市”的判断，认为2018年港股市场会出现核心资产驱动的慢牛、长牛行情。他还预计今年下半年港股将迎来牛市主升浪。</p>
<p>
与A股交相呼应，港股内房股今天也是集体爆发的行情。万科企业涨9.2%，融创中国涨3.7%，碧桂园涨3%，中国恒大涨1.6%。</p>
<p>
此外，中国平安港股股价再创历史新高，盘中一度触及91.00港元。中国平安在A股市场今天也一度上涨近2%，离历史高点仅一步之遥，但收盘时回落，最终收涨0.2%。</p>
<p>
昨天晚间，中国平安公布2017年保费收入，全年该集团控股子公司平安财险、平安人寿、平安养老、平安健康原保险合同保费收入分别为2159.84亿元、3689.34亿元、175.6亿元及21.47亿元，合计约6046.26亿元人民币，同比增28.9%。除此以外，市场传出中国平安旗下的陆金所将于4月分拆于香港上市，估值达600亿美元。</p>


        <a href="javascript:;" class="collection block-center">收藏</a>
        <a href="javascript:;" class="collected block-center" style="display: none"><span class="out">已收藏</span><span class="over">取消收藏</span></a>


        <div class="comment_form_logout">
            登录发表你的评论
        </div>

        <form action="" class="comment_form">
            <div class="person_pic">
                <img src="../../static/news/images/cat.jpg" alt="用户图标">
            </div>
            <textarea placeholder="请发表您的评论" class="comment_input"></textarea>
            <input type="submit" name="" value="评 论" class="comment_sub">
        </form>


        <div class="comment_count">
            4条评论
        </div>

        <div class="comment_list_con">
            <div class="comment_list">
                <div class="person_pic fl">
                    <img src="../../static/news/images/worm.jpg" alt="用户图标">
                </div>
                <div class="user_name fl">用户张山</div>
                <div class="comment_text fl">
                    遏制茅台酒价格过快上涨，多渠道供给，就不一定要买，租茅台酒也可以的，租售同权。开发共有产权茅台酒，让老百姓喝得起茅台酒，饮者有其酒。
                </div>
                <div class="reply_text_con fl">
                    <div class="user_name2">用户李思</div>
                    <div class="reply_text">
                        遏制茅台酒价格过快上涨，多渠道供给，就不一定要买，租茅台酒也可以的，租售同权。开发共有产权茅台酒，让老百姓喝得起茅台酒，饮者有其酒。
                    </div>
                </div>
                <div class="comment_time fl">2017-01-01 00:00:00</div>
                <a href="javascript:;" class="comment_up has_comment_up fr">1</a>
                <a href="javascript:;" class="comment_reply fr">回复</a>
                <from class="reply_form fl">
                    <textarea  class="reply_input"></textarea>
                    <input type="submit" name="" value="回复" class="reply_sub fr">
                    <input type="reset" name="" value="取消" class="reply_cancel fr">
                </from>
            </div>

            <div class="comment_list">
                <div class="person_pic fl">
                    <img src="../../static/news/images/worm.jpg" alt="用户图标">
                </div>
                <div class="user_name fl">用户张山</div>
                <div class="comment_text fl">
                    遏制茅台酒价格过快上涨，多渠道供给，就不一定要买，租茅台酒也可以的，租售同权。开发共有产权茅台酒，让老百姓喝得起茅台酒，饮者有其酒。
                </div>
                <div class="comment_time fl">2017-01-01 00:00:00</div>
                <a href="javascript:;" class="comment_up fr">赞</a>
                <a href="javascript:;" class="comment_reply fr">回复</a>
                <from class="reply_form fl">
                    <textarea  class="reply_input"></textarea>
                    <input type="submit" name="" value="回复" class="reply_sub fr">
                    <input type="reset" name="" value="取消" class="reply_cancel fr">
                </from>
            </div>

            <div class="comment_list">
                <div class="person_pic fl">
                    <img src="../../static/news/images/worm.jpg" alt="用户图标">
                </div>
                <div class="user_name fl">用户张山</div>
                <div class="comment_text fl">
                    遏制茅台酒价格过快上涨，多渠道供给，就不一定要买，租茅台酒也可以的，租售同权。开发共有产权茅台酒，让老百姓喝得起茅台酒，饮者有其酒。
                </div>
                <div class="comment_time fl">2017-01-01 00:00:00</div>
                <a href="javascript:;" class="comment_up fr">赞</a>
                <a href="javascript:;" class="comment_reply fr">回复</a>
                <from class="reply_form fl">
                    <textarea  class="reply_input"></textarea>
                    <input type="submit" name="" value="回复" class="reply_sub fr">
                    <input type="reset" name="" value="取消" class="reply_cancel fr">
                </from>
            </div>

            <div class="comment_list">
                <div class="person_pic fl">
                    <img src="../../static/news/images/worm.jpg" alt="用户图标">
                </div>
                <div class="user_name fl">用户张山</div>
                <div class="comment_text fl">
                    遏制茅台酒价格过快上涨，多渠道供给，就不一定要买，租茅台酒也可以的，租售同权。开发共有产权茅台酒，让老百姓喝得起茅台酒，饮者有其酒。
                </div>
                <div class="comment_time fl">2017-01-01 00:00:00</div>
                <a href="javascript:;" class="comment_up fr">赞</a>
                <a href="javascript:;" class="comment_reply fr">回复</a>
                <from class="reply_form fl">
                    <textarea  class="reply_input"></textarea>
                    <input type="submit" name="" value="回复" class="reply_sub fr">
                    <input type="reset" name="" value="取消" class="reply_cancel fr">
                </from>
            </div>
        </div>


        </div>
{% endblock %}
{% block right %}
    <div class="rank_con fr">
            <div class="author_card">
                <a href="#" class="author_pic"><img src="../../static/news/images/user_pic.png" alt="author_pic"></a>
                <a href="#" class="author_name">张大山</a>
                <div class="author_resume">张大山的简介,张大山</div>
                <div class="writings"><span>总篇数</span><b>23</b></div>
                <div class="follows"><span>粉丝</span><b>36</b></div>
                <a href="javascript:;" class="focus fr">关注</a>
                <a href="javascript:;" class="focused fr"><span class="out">已关注</span><span class="over">取消关注</span></a>
            </div>
            <div class="rank_title">
                <h3>点击排行</h3>
            </div>
            <ul class="rank_list">
                <li><span class="first">1</span><a href="#">势如破竹！人民币再度连闯四道关口 在岸、离岸双双升破6.42</a></li>
                <li><span class="second">2</span><a href="#">凛冬已至，还有多少银行人在假装干银行</a></li>
                <li><span class="third">3</span><a href="#">人民日报：部分城市楼市放松限制引关注，楼市调控不会“拉抽屉”</a></li>
                <li><span>4</span><a href="#">势如破竹！人民币再度连闯四道关口 在岸、离岸双双升破6.42</a></li>
                <li><span>5</span><a href="#">凛冬已至，还有多少银行人在假装干银行</a></li>
                <li><span>6</span><a href="#">人民日报：部分城市楼市放松限制引关注，楼市调控不会“拉抽屉”</a></li>
            </ul>
        </div>
{% endblock %}