创建博客列表
现在所有的东西都准备好了,可以开始创建博客引擎。
首先我们需要创建一个新的博客模型Post:
class Post(db.Model):
# 建立这个模型用于储存用户的博客
__tablename__ = 'posts'
id = db.Column(db.INTEGER, primary_key=True)
body = db.Column(db.Text)
timestamp = db.Column(db.DateTime, index=True, default=datetime.utcnow)
author_id = db.Column(db.Integer, db.ForeignKey('users.id'))
并且在user模型中建立relationship
我们准备在首页直接展示用户的博客,所以也在首页页面显示一个表单,用于写博客,还有一个提交按钮:
我们先创建表单:main/forms.py
class PostForm(FlaskForm):
# 用于首页写博客的表单
body = TextAreaField('wirte your blog here !', validators=[DataRequired()])
submit = SubmitField('submit')
接下来修改主页面的路由,之前写的代码是测试小功能用的,所以可以直接替换为:
# 这个路由用于主页显示博客列表,并且在列表上方显示一个写博客表单
@main.route('/', methods=['GET', 'POST'])
def index():
form = PostForm()
if current_user.can(Permission.WRITE_ARTICLES) and form.validate_on_submit():
post = Post(body=form.body.data,
author=current_user._get_current_object())
# current_user由flask login提供,通过线程内的代理对象实现
# 数据库需要真正的用户对象,所以使用current_user._get_current_object()
db.session.add(post)
db.session.commit()
return redirect(url_for('.index'))
posts = Post.query.order_by(Post.timestamp.desc()).all()
return render_template('index.html', form=form, posts=posts)
老样子,我们实现了路由功能,还需要渲染模板:
{% block title %}Flasky{% endblock %}
{% block page_content %}
<div class="page-header">
<h1>Hello, {% if current_user.is_authenticated %}{{ current_user.username }}{% else %}Stranger{% endif %}!</h1>
</div>
<div>
{% if current_user.can(Permission.WRITE_ARTICLES) %}
{{ wtf.quick_form(form) }}
{% endif %}
</div>
<ul class='posts'>
{% for post in posts %}
<li class="post">
# 用户头像部分
<div class="profile-thumbnail">
<a href="{{ url_for('.user', username=post.author.username) }}">
<img class="img-rounded profile-thumbnail" src="{{ post.author.gravatar(size=40) }}">
</a>
</div>
# 实体文字内容部分
<div class="post-content">
# 博客发布日期,计算的是发布日期距离今天有几天
<div class="post-date">{{ moment(post.timestamp).formNow() }}</div>
# 博客的作者,可以点击进入作者主页
<div class="post-author"><a href="{{ url_for('.user', username=post.author.username) }}">{{ post.author.username }}</a></div>
# 博客的内容
<div class="post-body">{{ post.body }}</div>
</div>
</li>
{% endfor %}
</ul>
{% endblock %}
然后为了让页面更美化,我们用上了css来布局:
.profile-thumbnail {
position: absolute;
}
.profile-header {
min-height: 260px;
margin-left: 280px;
}
ul.posts {
list-style-type: none;
padding: 0px;
margin: 16px 0px 0px 0px;
border-top: 1px solid #e0e0e0;
}
ul.posts li.post {
padding: 8px;
border-bottom: 1px solid #e0e0e0;
}
ul.posts li.post:hover {
background-color: #f0f0f0;
}
div.post-date {
float: right;
}
div.post-author {
font-weight: bold;
}
div.post-thumbnail {
position: absolute;
}
div.post-content {
margin-left: 48px;
min-height: 48px;
}
在base.html中加上关联css:
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='styles.css') }}">
改变各种小bug后,我们可以看到正常的页面了!!!
现在我们成功地在主页上显示了所有的博客,下面我们实现在用户个人主页页面上显示所有的博客文章,所以我们在渲染user.html模板的时候,我们多传入一个参数即user.posts,找到这个用户的所有博客,然后在user.html加上我们之前在主页面的博客列表即可:
# 为每个用户定义个人资料页面路由
@main.route('/user/<username>')
def user(username):
user = User.query.filter_by(username=username).first()
# 在数据库中搜索URL指定的用户名
if user is None:
abort(404)
posts = user.posts.order_by(Post.timestamp.desc()).all()
return render_template('user.html', user=user, posts=posts)
博客列表分页
现在我们考虑到博客列表可能会非常长,所以一个页面显示所有的博客是不现实也不美观的,为了方便测试,我们需要创建虚拟博客文章数据,这样数据库内就有大量数据供我们测试:这里我们使用ForgeryPy或者faker第三方库。
所以我们在app下面创建fake.py文件定义函数用于生成虚拟数据:然后发现报错,cannot import name current_app!!!!!
尝试另一种方法:在models的类里面写入静态方法:
@staticmethod
# 这是静态方法,即此类不需要实例化就可以调用这个方法
def generate_fake_user(count=100):
fake = Faker()
i = 0
while i < count:
u = User(email=fake.email(),
username=fake.user_name(),
password='password',
confirmed=True,
name=fake.name(),
location=fake.city(),
about_me=fake.text(),
member_since=fake.past_date())
db.session.add(u)
try:
db.session.commit()
i += 1
except IntegrityError:
db.session.rollback()
@staticmethod
def generate_fake_post(count=100):
fake = Faker()
user_count = User.query.count()
for i in range(count):
u = User.query.offset(randint(0, user_count - 1)).first()
# 随机文章生成的时候,我们需要随机指定一个用户来拥有这篇文章
# 使用offset()查询过滤器,会跳过参数中指定的记录数量,所以会获得随机的用户
p = Post(body=fake.text(),
timestamp=fake.past_date(),
author=u)
db.session.add(p)
db.session.commit()
然后运行 python manage.py shell
shell内运行:Post.generate_fake_post(100)
发现报错说Post是undefined,然后修改manage.py文件加上Post:
def make_shell_context():
return dict(db=db, User=User, Role=Role, Post=Post)
因为现在是分页博客列表,所以我们需要修改首页的路由:
# 这个路由用于主页显示博客列表,并且在列表上方显示一个写博客表单
@main.route('/', methods=['GET', 'POST'])
def index():
form = PostForm()
if current_user.can(Permission.WRITE) and form.validate_on_submit():
post = Post(body=form.body.data,
author=current_user._get_current_object())
# current_user由flask login提供,通过线程内的代理对象实现
# 数据库需要真正的用户对象,所以使用current_user._get_current_object()
db.session.add(post)
db.session.commit()
return redirect(url_for('.index'))
# posts = Post.query.order_by(Post.timestamp.desc()).all()
# 下面将上一行修改为分页显示所有博客
page = request.args.get('page', 1, type=int)
# 渲染的页数从请求的查询字符串request.args中获取,默认渲染第一页
pagination = Post.query.order_by(Post.timestamp.desc()).\
paginate(page, per_page=current_app.config['FLASKY_POSTS_PER_PAGE'], error_out=False)
# 这里把all()换成了sqlalchemy中的paginate()方法
# 页数是第一个参数,也是唯一必须的参数
# per_page显示一页显示的个数,默认是显示20个记录
# 最后一个参数用于如果请求的页数超出了请求范围,那么404
posts = pagination.items
return render_template('index.html', form=form, posts=posts, Permission=Permission, pagination=pagination)
现在成功分页,如果要访问第二页则URL加上?page=2
但是我们肯定是需要一个底部的分页导航来跳转到不同的页面。
paginate()方法返回一个Pagination对象,里面有很多属性,用于生成分页链接。
所有这个强大的对象以及分页css类,可以让我们完成一个分页模板宏:
{% macro pagination_widget(pagination, endpoint) %}
<ul class="pagination">
# 这里创建分页导航最左边的角标,用于跳转到前一页
# 如果当前页为第一页,那么使之失效
<li{% if not pagination.has_prev %} class="disabled" {% endif %}>
<a href="{% if pagination.has_prev %} {{ url_for(endpoint, page=pagination.page - 1, **kwargs) }}{% else %}#{% endif %}">
«
</a>
</li>
# 这里中间部分用于显示所有的页面数字
# iter_pages()迭代器返回所有的页面链接
{% for p in pagination.iter_pages() %}
{% if p %}
{% if p == pagination.page %}
<li class="active">
<a href="{{ url_for(endpoint, page=p, **kwargs) }}">{{ p }}</a>
</li>
{% else %}
<li>
<a href="{{ url_for(endpoint, page=p, **kwargs) }}">{{ p }}</a>
</li>
{% endif %}
{% else %}
<li class="disabled"><a href="#">…</a></li>
{% endif %}
{% endfor %}
# 这里创建最右边的角标,用于跳转到上一页
<li{% if not pagination.has_next %} class="disabled" {% endif %}>
<a href="{% if pagination.has_next %} {{ url_for(endpoint, page=pagination.page + 1, **kwargs) }}{% else %}#{% endif %}">
»
</a>
</li>
</ul>
{% endmacro %}
然后我们将这个模板放在index.html和user.html的后面来渲染出这个分页导航:
{% import "_macros.html" as macros %}
<div class="pagination">
{{ macros.pagination_widget(pagination, '.index')}}
</div>
成功,下面正确显示出分页导航栏!!!!
使用MarkDown编辑器
要想实现这个功能我们需要安装一些额外的包
pip install flask-pagedown markdown bleach
首先我们初始化这个拓展:
from flask_pagedown import PageDown
pagedown = PageDown()
def create_app(config_name):
pagedown.init_app(app)
然后我们需要把首页中的编辑器转换成MarkDown富文本编辑器:
body = PageDownField('wirte your blog here !', validators=[DataRequired()])
最后,我们需要使用预览功能,因此我们需要在模板中修改,拓展直接提供了一个模板宏,直接CDN加载即可。
{% block scripts %}
{{ super() }}
{{ pagedown.include_pagedown() }}
{% endblock %}
给每一个文章添加单独URL
首先制作单独链接的路由功能:
@main.route('/post/<int:id>')
def post(id):
post = Post.query.get_or_404(id)
return render_template('post.html', post=post)
老样子,单独页面需要模板:
{% extends "base.html" %}
{% block page_content %}
<ul class='posts'>
<li class="post">
<div class="profile-thumbnail">
<a href="{{ url_for('.user', username=post.author.username) }}">
<img class="img-rounded profile-thumbnail" src="{{ post.author.gravatar(size=40) }}">
</a>
</div>
<div class="post-content">
<div class="post-date">{{ moment(post.timestamp).fromNow() }}</div>
<div class="post-author"><a href="{{ url_for('.user', username=post.author.username) }}">{{ post.author.username }}</a></div>
<div class="post-body">{{ post.body }}</div>
</div>
</li>
</ul>
{% endblock %}
那怎么样才会使用这个功能呢,如何进入这个模板页面呢,我们在index.html的博客列表里面,将博客文字部分套上a标签,然后使用url_for()
方法调用这个路由就可以啦!
博客文章编辑器
首先我们来实现这个功能的路由:
@main.route('/edit/<int:id>', methods=['GET', 'POST'])
@login_required
def edit(id):
post = Post.query.get_or_404(id)
if current_user != post.author:
abort(403)
form = PostForm()
if form.validate_on_submit():
post.body = form.body.data
db.session.add(post)
db.session.commit()
flash('you have updated your blog')
return redirect(url_for('main.post', id=post.id))
form.body.data = post.body
return render_template('edit_post.html', form=form)
展示页面的模板:edit_post.html
{% extends "base.html" %}
{% import "bootstrap/wtf.html" as wtf %}
{% block title %}Edit your blog{% endblock %}
{% block page_content %}
<div>
{% if current_user.can(Permission.WRITE) %}
{{ wtf.quick_form(form) }}
{% endif %}
</div>
{% endblock %}
{% block scripts %}
{{ super() }}
{{ pagedown.include_pagedown() }}
{% endblock %}
然后在主页面的每一个博客条目上添加一个edit按钮,即可以调用和这个路由跳转到编辑页面上!