小引
作为 social network 的特性之一, Chapter 8 已经完成 “followers - followed” 的 db 设置。
前面几节,一直使用 fake posts 作为权宜之计;本节将去掉 fake posts,替换成真的posts,并使 app能够接受 user 填写的 post,然后将其在 home & profile 页显示。
Submission of Blog Posts
Home 页面创建 post 提交功能。
1、创建 post submission form 。
app / forms.py
: blog submission form.
class PostForm(FlaskForm):
post = TextAreaField('Say something', validators=[
DataRequired(), Length(min=1, max=140)])
submit = SubmitField('Submit')
2、将 post submission form 加到 index template
app / templates / index.html:
{% extends "base.html" %}
{% block content %}
<h1>Hi, {{ current_user.username }}!</h1>
<form action="" method="post">
{{ form.hidden_tag() }}
<p>
{{ form.post.label }}<br>
{{ form.post(cols=32, rows=4) }}<br>
{% for error in form.post.errors %}
<span style="color: red;">[{{ error }}]</span>
{% endfor %}
</p>
<p>{{ form.submit() }}</p>
</form>
{% for post in posts %}
<p>
{{ post.author.username }} says: <b>{{ post.body }}</b>
</p>
{% endfor %}
{% endblock %}
插入<form>..</form>
,其中 {{ form.post(cols=32, rows=4) }}
尺寸,对应 form 中的 140 。
3、更改路由 ‘index’, 添加 PostForm
app / routes.py
: post submission form in index view function.
from app.forms import PostForm
from app.models import Post
@app.route('/', methods=['GET', 'POST'])
@app.route('/index', methods=['GET', 'POST'])
@login_required
def index():
form = PostForm()
if form.validate_on_submit():
post = Post(body=form.post.data, author=current_user)
db.session.add(post)
db.session.commit()
flash('Your post is now live!')
return redirect(url_for('index'))
posts = [
{
'author': {'username': 'John'},
'body': 'Beautiful day in Portland!'
},
{
'author': {'username': 'Susan'},
'body': 'The Avengers movie was so cool!'
}
]
return render_template("index.html", title='Home Page', form=form,
posts=posts)
- 引入
Post
及PostForm
- methods 添加
'POST'
(需要接受 user 提交数据) - 利用
Post 类
处理 logic,完成 db 提交。 render_template
增加form
参数,完成渲染
注: form 完成验证提交后,设置了 重定向至 ‘index’,即所谓的 POST/Redirect/GET
模式。
因为浏览器的 re-fresh 操作,默认issue last request。
如果 form submission 完成提交后未设置重定向,则 user 在提交表单后而刷新,则会使浏览器二次提交表单(last request is POST);浏览器对此感到异常,会让 user 确认duplicate submission。
如果 form submission 完成提交后设置了重定向,则 browser 的 last request 变成 GET。
It avoids inserting duplicate posts when a user inadvertently refreshes the page after submitting a web form.
Displaying Blog Posts
将 index 页面的 fake posts 替换为真实 posts
app / routes.py:
: display real posts in home page.
@app.route('/', methods=['GET', 'POST'])
@app.route('/index', methods=['GET', 'POST'])
@login_required
def index():
# ...
posts = current_user.followed_posts().all()
return render_template("index.html", title='Home Page', form=form,
posts=posts)
注:
- index 页展示 followed 的 users 的 posts
- PostForm 亦展示,供 user 发布新 post
- User 定义的
followd_posts()
,已按照 post.timestamp desc() 排序 - 旧的 index.html ,因为完美匹配,无需更改
Making It Easier to Find Users to Follow
创建 Explore 页面,显示所有的 users 发布的 posts,便于查找 user 并 follow
1、创建路由 ‘explore’
app / routes.py:
@app.route('/explore')
@login_required
def explore():
posts = Post.query.order_by(Post.timestamp.desc()).all()
return render_template('index.html', title='Explore', posts=posts)
- Explore 页面,无发布新 post 的位置,故无 PostForm
- 用 Post 类,获取所有 posts,并按 timestamp 逆向排序
- template,借用
index.html
,因为布局类似
2、更改模板 index.html, 为 其中<form></form>
添加条件语句,使其兼容 'index'
与 'explore'
{% extends "base.html" %}
{% block content %}
<h1>Hi, {{ current_user.username }}!</h1>
{% if form %}
<form action="" method="post">
...
</form>
{% endif %}
...
{% endblock %}
3、在底板 base.html 中的导航栏,添加 Explore 链接
app / templates / base.html
: link to explore page in navigation bar.
<a href="{{ url_for('explore') }}">Explore</a>
4、为 index 及 explore 页面中的 post 的 user 添加链接,便于查看并follow
app / templates / _post.html
: show link to author in blog posts.
<table>
<tr valign="top">
<td><img src="{{ post.author.avatar(36) }}"></td>
<td>
<a href="{{ url_for('user', username=post.author.username) }}">
{{ post.author.username }}
</a>
says:<br>{{ post.body }}
</td>
</tr>
</table>
注:
- 调用此 _post.html 的页面包括
index
、explore
、user
,分别对应 Home、Explore、Profile 页面 - 因为 Home 及 Explore 共用 一个模板
index.html
,故可改一处,使得两处生效
...
{% for post in posts %}
{% include '_post.html' %}
{% endfor %}
...
- Profile 对应的
user.html
,亦会调用此 sub_template(见后续下文)
Pagination of Blog Posts
完成 Home、Explore 页面的设置(新 post 提交、各自页面限定的 posts 的显示),现对各页面的 posts 进行编页(pagination)。
pagination 的方法即,给定 page size(POSTS_PER_PAGE),然后将总的 posts 按照要求的顺序排序,调用 paginate() 。
The paginate method can be called on any query object from Flask-SQLAlchemy.
>>> user.followed_posts().paginate(1, 20, False).items
- 1,page number
- 20, the number of items per page(可在 config 中设定)
- 标识符:如 True,则超出范围时,对客户端发出 404 错误;如 False,则超出范围时发送 空的 list。
1、 设定 paginate(page_num, page_size, error_flag)
的 page size
config.py
: posts per page configuration.
class Config(object):
# ...
POSTS_PER_PAGE = 3
2、利用 query string argument,将 page_num
添加到 URLs,为 Home、Explore 进行 Paginating
app / routes.py:
@app.route('/', methods=['GET', 'POST'])
@app.route('/index', methods=['GET', 'POST'])
@login_required
def index():
# ...
page = request.args.get('page', 1, type=int)
posts = current_user.followed_posts().paginate(
page, app.config['POSTS_PER_PAGE'], False)
return render_template('index.html', title='Home', form=form,
posts=posts.items)
@app.route('/explore')
@login_required
def explore():
page = request.args.get('page', 1, type=int)
posts = Post.query.order_by(Post.timestamp.desc()).paginate(
page, app.config['POSTS_PER_PAGE'], False)
return render_template("index.html", title='Explore', posts=posts.items)
注:
- posts 经过 paginate(),为 Pagination 类的 对象,所以
render_template()
中的 posts 为posts.items
The return value from paginate is a Pagination object. The items attribute of this object contains the list of items in the requested page.
Page Navigation
paginate() 返回的是 Flask-SQLAlchemy 的 Pagination 类的对象,除了上面的 items 属性外,还有四类:
- has_next: 当前页后,至少还有一页,则 True
- has_prev: 当前页前,至少还有一页,则 True
- next_num: 下页的页码
- prev_num: 前页的页码
1、在 index 及 explore 路由函数中,设置 next_url
, prev_url
app / routes.py
: next and previous page links.
@app.route('/', methods=['GET', 'POST'])
@app.route('/index', methods=['GET', 'POST'])
@login_required
def index():
# ...
page = request.args.get('page', 1, type=int)
posts = current_user.followed_posts().paginate(
page, app.config['POSTS_PER_PAGE'], False)
next_url = url_for('index', page=posts.next_num) \
if posts.has_next else None
prev_url = url_for('index', page=posts.prev_num) \
if posts.has_prev else None
return render_template('index.html', title='Home', form=form,
posts=posts.items, next_url=next_url,
prev_url=prev_url)
@app.route('/explore')
@login_required
def explore():
page = request.args.get('page', 1, type=int)
posts = Post.query.order_by(Post.timestamp.desc()).paginate(
page, app.config['POSTS_PER_PAGE'], False)
next_url = url_for('explore', page=posts.next_num) \
if posts.has_next else None
prev_url = url_for('explore', page=posts.prev_num) \
if posts.has_prev else None
return render_template("index.html", title='Explore', posts=posts.items,
next_url=next_url, prev_url=prev_url)
注: 如果 next_url 或 prev_next 为 None,则根据模板的条件逻辑,最终不显示(见下面模板)。
2、在模板中增加 next_url 及 prev_url 的链接
app / templates / index.html
: render pagination links on the template.
...
{% for post in posts %}
{% include '_post.html' %}
{% endfor %}
{% if prev_url %}
<a href="{{ prev_url }}">Newer posts</a>
{% endif %}
{% if next_url %}
<a href="{{ next_url }}">Older posts</a>
{% endif %}
...
注:因为按照 timestamp 的 desc 排序,所以 next_url
为 Older posts
。
Pagination in the User Profile Page
Home 及 Explore 已经完成 pagination & page navigation
,按相同方式 修改 Profile 页。
1、改路由 user
app / routes.py
: pagination in the user profile view function.
@app.route('/user/<username>')
@login_required
def user(username):
user = User.query.filter_by(username=username).first_or_404()
page = request.args.get('page', 1, type=int)
posts = user.posts.order_by(Post.timestamp.desc()).paginate(
page, app.config['POSTS_PER_PAGE'], False)
next_url = url_for('user', username=user.username, page=posts.next_num) \
if posts.has_next else None
prev_url = url_for('user', username=user.username, page=posts.prev_num) \
if posts.has_prev else None
return render_template('user.html', user=user, posts=posts.items,
next_url=next_url, prev_url=prev_url)
注: 利用 user.posts
获取此 user 的所有posts(posts 为 virtual field)
2、更改 Profile 的模板 user.html
app / templates / user.html:
pagination links in the user profile template.
...
{% for post in posts %}
{% include '_post.html' %}
{% endfor %}
{% if prev_url %}
<a href="{{ prev_url }}">Newer posts</a>
{% endif %}
{% if next_url %}
<a href="{{ next_url }}">Older posts</a>
{% endif %}
根据实际情况,设置 page_size
config.py
: posts per page configuration.
class Config(object):
# ...
POSTS_PER_PAGE = 25