zoukankan      html  css  js  c++  java
  • flask实战-个人博客-编写博客前台

    编写博客前台

    博客前台需要开放给所有用户,这里包括显示文章列表、博客信息、文章内容和评论等功能功能。

    分页显示文章列表

    为了在主页显示文章列表,我们要先在渲染主页模板的index视图的数据库中获取所有文章记录并传入模板:

    blueprintslog.py:

    from personalBlog.models import Post
    
    @blog_bp.route('/')
    def index():
        posts = Post.query.order_by(Post, timestamp.desc()).all()
        return render_template('blog/index.html', posts = posts)

    在主页模板中,我们使用for语句迭代所有文章记录,一次渲染文章标题、发表时间和正文,如下所示:

    personalBlog/templates/blog/index.html:渲染文章列表

    {% block content %}
        <div class="page-header">
            <h1 class="display-3">{{ admin.blog_title|default('Blog Title') }}</h1>
            <h4 class="text-muted">&nbsp;{{ admin.blog_sub_title|default('Blog Subtitle' }}</h4>
        </div>
        <div class="row">
            <div class="col-sm-8">
                {% if posts %}
                    {% for post in posts %}
                        <h3 class="text-primary"><a href="{{ url_for('.show_post', post_id=post.id) }}">{{ post.title }}</a></h3>
                        <P>
                            {{ post.body|striptags|truncate }}
                            <small><a href="{{ url_for('.show_post', post_id=post.id) }}">Read More</a></small>
                        </P>
                        <small>
                            Comments:<a href="{{ url_for('.show_post', post_id=post.id) }}#comments">{{ post.comments|length }}</a>&nbsp;&nbsp
                            Category:<a
                                href="{{ url_for('.show_category', category_id=post.category.id }}">{{ post.category.name }}</a>
                            <span class="float-right">{{ moment(post.timestamp).format('LL') }}</span>
                        </small>
                        {% if not loop.last %}
                            <hr>
                        {% endif %}
                    {% endfor %}
                {% else %}
                    <div class="tip">
                        <h5>No posts yet.</h5>
                        {% if current_user.is_authenticated %}
                            <a href="{{ url_for('admin.new_post') }}">Write Now</a>
                        {% endif %}
                    </div>
                {% endif %}
            </div>
    这里的.show_post是指blog蓝本下的.show_post视图函数,在蓝本内部,是可以简写的(省略蓝本名称)

    在for循环的外层,我们添加一个if判断,如果posts不包含文章,就显示一个“No posts”提示。如果当前用户已经登录,还会在提示文字下面显示一个指向新建文章页面的链接。a标签将文章标题渲染为链接,链接中包含文章正文对应的URL。

    我们队文章正文使用了truncate过滤器,它会截取正文开头一部分(默认为255个字符)作为文章摘要。在truncate过滤器中,默认的结束符号为“...”,你可以使用end关键字指定为中文省略号“……”。为了让排版更统一,文章的正文摘要没有使用safe过滤器,默认显示无样式的文章HTML源码。我们附加了striptags过滤器以滤掉文章正文中的HTML标签。

    在文章摘要后面,我们还添加了一个指向文章页面(show_post视图)的Read More按钮,同样的,文章标题也添加了指向文章页面的链接。另外,每一个文章摘要下方会使用<hr>添加分隔线,我们通过判断loop.last的值来避免在最后一个条目后添加分隔线。

    flask run命令执行时就会执行app.run(),所以在脚本中可以不写app.run()。

    因为已经生成了虚拟数据,包含50篇文章。现在运行程序,首页会显示一个很长的文章列表,根据创建的随机日期排序,最新发表的排在上面,如下所示:

     

    开始时提示404错误,是因为创建app的时候,没有正确注册blog蓝本,导致blog/index.html没有被正确的路由

     

    如果所有的文章都在主页显示,无疑将会延长页面加载时间。而且用户需要拖动滚动条来浏览文章,太长的网页会让人感到沮丧,从而降低用户体验度。更好的做法是对文章数据进行分页处理,每一页值显示少量的文章,并在页面底部显示一个分页导航条,用户通过单击分页导航上的页数按钮来访问其他页面的文章。Flask-SQLAlchemy提供了简单的分页功能,使用paginate()查询方法可以分页获取文章记录,下面来学习如何使用。

    1、获取分页记录

    添加分页支持后的index视图,如下所示

    personalBlog/blueprints/blog.py:对文章记录进行分页处理

    @blog_bp.route('/')
    def index():
        page = request.args.get('page', 1, type = int) #从查询字符串获取当前页数
        per_page = current_app.config['PERSONALBLOG_POST_PER_PAGE'] #每页数量
        pagination = Post.query.order_by(Post.timestamp.desc()).paginate(page, per_page = per_page) #分页对象
        posts = pagination.items #当前页数的记录列表
        return render_template('blog/index.html', pagination = pagination, posts = posts)

    为了实现分页,我们把之前的查询执行函数all()换成了paginate(),它接收的两个最主要的参数分别用来决定把记录分成几页(per_page),返回哪一页的记录(page)。page参数代表当前请求的页数,我们从请求的查询字符串(request.args)中获取,如果没有设置则使用默认值1,指定int类型可以保证在参数类型错误时使用默认值;per_page参数设置每页返回的记录数量,为了方便统一修改,这个值从配置变量PERSONAL_POST_PER_PAGE获取。

    另外,可选的error_out参数用于设置当查询的页数超出总页数时的行为。当error_out设为True时,如果页面超过最大值,page或per_page为负数或非整数会返回404错误(默认值);如果设为False则返回空记录。可选的max_per_page参数则用来设置每页数量的最大值。

    如果没有指定page和per_page参数,Flask-SQLAlchemy会自动从查询字符串中获取对应查询参数(page和per_page)的值,如果没有获取到,默认的page值为1,默认的per_page值为20。

    调用查询方法paginate()会返回一个Pagination类实例,它包含分页的信息,我们将其称为分页对象。

    对这个pagination对象调用items属性会以列表的形式返回对应页数(默认为第一页)的记录。在访问这个URL时,如果在URL后附加了查询参数page来指定页数,例如127.0.0.1:5000/?page=2,这时发起请求调用items变量将会获得第二个10条记录。

    除了通过查询字符串获取页数,还可以直接将页数作为URL的一部分。下面的视图函数就是将page作为URL变量:

    @blog_bp.route('/', defaults={'page':1})
    @blog_bp.route('/page/<int:page>')
    def index(page):
        pagination = Post.query.order_by(Post.timestamp.desc()).paginate(page, per_page=current_app.config['PERSONALBLOG_POST_PER_PAGE'])
        posts = pagination.items #当前页数的记录列表
        return render_template('blog/index.html', pagination = pagination, posts = posts)

    第一个路由使用defaults字典为page变量指定默认值,当访问127.0.0.1:5000/时,page取默认值1,返回第一页的记录;当访问127.0.0.1:5000/page/2时则会返回第2页的记录。注意,我们为URL规则中的page变量使用了int转换器,以便接收正确的整形页数值。

    1、 渲染分页导航部件

    我们不能让用户通过在URL中附加查询字符串来实现分页浏览,而是应该在页面底部提供一个导航部件。这个分页导航部件应该包含上一页、下一页、以及跳转到每一页的按钮,每个按钮都包含指向主页的URL,而且URL中都添加了对应的查询参数page的值。使用paginate()方法时,它会返回一个Pagination类对象,这个类包含很多用于实现分页导航的方法和属性,我们可以用它来获取所有关于分页的信息,如下所示

    Pagination类属性:

    对于博客来说,设置一个简单的包含上一页、下一页按钮的分页部件就足够了。

    在视图函数中,我们将分页对象pagination传入模板,然后在模板中使用它提供的方法和属性来构建分页部件。为了便于重用,我们可以创建一个pager()宏:

    {% macro pager(pagination, fragment='') %}
    <nav aria-label="Page navigation">
        <ul class="pagination">
            <li class="page-item {% if not pagination.has_prev %}disabled{% endif %}">
                <a class="page-link" href="{{ url_for(request.endpoint, page=pagination.prev_num, **kwargs) + fragment if pagination.has_prev }}">
                    <span aria-hidden="true">&larr;</span>Newer
                </a>
            </li>
            <li class="page-item {% if not pagination.has_next %}disabled{% endif %}">
                <a class="page-link" href="{{ url_for(request.endpoint, page=pagination.next_num, **kwargs) + fragment if pagination.has_next }}">
                    Older <span aria-hidden="true">&rarr;</span>
                </a>
            </li>
        </ul>
    
    </nav>
    {% endmacro %}

    这个宏接收分页对象pagination和URL片段以及其他附加的关键字参数作为参数。我们根据pagination.has_prev和pagination.has_next属性来选择渲染按钮的禁用状态,如果这两个属性返回False,那么就为按钮添加disabled类,同时会用#作为a标签中的URL。分页按钮中的URL使用request.endpoint获取当前请求的端点,而查询参数page的值从pagination.prev_num(上一页的页数)和pagination.next_num(下一页的页数)属性获取。

    在使用时,从macros.html模板中导入并在需要显示分页导航的位置调用即可,传入分页对象作为参数:

    templates/blog/index.html:

    {% from "macros.html" import pager %}
    
    {% if posts %}
        {% for post in posts %}
            …
        {% endfor %}
        <div class="page-footer">{{ pager(pagination) }}</div>
    把settings.py文件中的PERSONALBLOG_POST_PER_PAGE变量从10改为4
    访问127.0.0.1:5000

    实际上,Bootstrap-Flask已经内置了一个包含同样功能,而且提供更多自定义设置的render_pager()宏。除此之外,他还提供了一个render_pagination()宏,可以用来渲染一个标准的Bootstrap Pagination分页导航部件。这两个宏的用法和我们上面编写的pager()宏基本相同,render_pagination()宏支持的常用参数如下表所示,唯一的区别是render_pager()宏没有ellipses参数。

    render_pagination()宏的常用参数:

    在程序中我们将使用这两个宏来渲染分页导航部件,他们要从boostrap/pagination.html模板中导入,比如:

    index.html:

    {% from 'bootstrap/pagination.html' import render_pagination %}
    
        {% for post in posts %}
            …
        {% endfor %}
        <div class="page-footer">{{ render_pagination(pagination) }}</div>

    使用render_pagination()宏渲染后的标准分页导航部件如下所示:

  • 相关阅读:
    乐字节Java编程语言发展,面向对象和类
    乐字节Java编程之方法、调用、重载、递归
    乐字节Java循环:循环控制和嵌套循环
    乐字节Java反射之四:反射相关操作
    乐字节Java反射之三:方法、数组、类加载器和类的生命周期
    乐字节Java反射之二:实例化对象、接口与父类、修饰符和属性
    乐字节Java反射之一:反射概念与获取反射源头class
    Java变量与数据类型之三:数据类型与转义字符
    数论 N是完全平方数 充分必要条件 N有奇数个约数
    动态规划专题 01背包问题详解 HDU 2546 饭卡
  • 原文地址:https://www.cnblogs.com/xiaxiaoxu/p/10850398.html
Copyright © 2011-2022 走看看