flask实战-个人博客-编写博客前台

Posted xiaxiaoxu

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了flask实战-个人博客-编写博客前台相关的知识,希望对你有一定的参考价值。

编写博客前台

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

 

分页显示文章列表

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

blueprints\\blog.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()宏渲染后的标准分页导航部件如下所示:

技术图片

 

以上是关于flask实战-个人博客-编写博客前台的主要内容,如果未能解决你的问题,请参考以下文章

11.flask博客项目实战六之用户个人资料

flask实战-个人博客-模板

flask实战-个人博客-使用类组织配置

flask实战-个人博客-使用类组织配置

flask实战-个人博客-电子邮件支持

Python Flask开源个人博客代码