Flask中博客类的Post实现

1.Post类的定义

一个博客文章应该包含最基本的字段：标题、作者、发表时间、摘要、内容、引用（引用可以写进内容里）。从最简单的开始，将字段先写成英文title, author, timestamp, summary, content，当然一个数据库表中肯定需要一个主键id的，在Flask中作为数据库模型类，必须继承db.Model。

from . import db
from datetime import datetime

class Post(db.Model):
    __tablename__ = 'posts'
    id = db.Column(db.Integer, primary_key=True)
    title = db.Column(db.String(64), index=True)
    summary = db.Column(db.Text, index=True)
    content = db.Column(db.Text)
    timestamp = db.Column(db.DateTime, index=True, default=datetime.utcnow)
    author_id = db.Column(db.Integer, db.ForeignKey('users.id'))

Post类定义好后，我们就可以使用Flask-WTF表单模块来进行渲染到前端，这里我们需要定义一个PostForm类，用于前端的数据收集，当数据提交后由视图函数edit-post类将用户提交的数据写入数据库中。

PostForm类：

# -*- coding:utf-8 -*-
from flask_wtf import FlaskForm
from wtforms import StringField, SubmitField, TextAreaField
from wtforms.validators import DataRequired, Length

# 文章类表单
class PostForm(FlaskForm):
    title = StringField('文章标题', validators=[DataRequired(), Length(0, 64)])
    summary = TextAreaField('摘要', validators=[DataRequired()])
    content = TextAreaField('留下你的痕迹', validators=[DataRequired()])
    submit = SubmitField('提交')

接下来就是在视图函数中将表单传入前端模板进行渲染。在这之前需要定义视图函数用于外部用户访问的路由。

edit-post视图函数：

# -*- coding:utf-8 -*-
# 导入必要的模块
from flask import render_template,redirect, url_for, flash
from . import main
from ..auth.forms import PostForm
from .. import db
from ..models import Post
from flask_login import current_user, login_required
from ..models import Permission

# 写博客的视图函数
@main.route('/edit-post', methods=['GET', 'POST'])
@login_required
def edit_post():
    if not current_user.is_authenticated:
        return redirect(url_for('main.index'))
    form = PostForm()
    if current_user.can(Permission.WRITE) and form.validate_on_submit():
        post = Post(title=form.title.data, summary=form.summary.data, content=form.content.data, author=current_user._get_current_object())
        db.session.add(post)
        db.session.commit()
        return redirect(url_for('main.post', id=post.id))
    return render_template('edit-post.html', form=form)

视图函数编写完成后，接下来就是处理edit-post.html模板了，因为Jinja2支持模板继承，所以edit-post.html通过继承base.html模板来完善布局。这里使用了开源项目editormd，使用markdown语法来编写文章，并且可以及时预览编写的文章效果。

edit-post.html模板：

{% extends 'base.html' %}

{% block title %}云网传输小窝-写文章{% endblock %}

{% block styles %}
{{ super() }}
<link rel="stylesheet" href="{{ url_for('static',filename='editormd/css/editormd.css') }}"/>
{% endblock styles %}

{% block page_content %}
<div class="row">
    <h1 class="text-center">编辑文章，书写心灵</h1>

    <form method="POST">
        {{ form.hidden_tag() }}
        <div style="float: right; margin-bottom: 5px;">{{ form.submit(class="btn btn-success") }}</div>
        <div class="form-group">
            <h4>{{ form.title.label }}</h4>
            {{ form.title(class="form-control", style="font-size:24px; height:48px") }}
        </div>
        <div class="form-group">
            <h4>{{ form.summary.label }}</h4>        
            {{ form.summary(style="height:100px; 100%; resize:none; font-size:20px;", class="form-control") }}
        </div>
        <div class="form-group">
            <h4>{{ form.content.label }}</h4>            
            <div id="editormd" class="form-control">
                {{ form.content(style="display:none;") }}
            </div>
        </div>        
    </form>
</div>
{% endblock %}

{% block scripts %}
{{ super() }}
<script src="{{ url_for('static',filename='editormd/editormd.min.js') }}"></script>
<script type="text/javascript">
    //初始化编辑器
    var testEditor;
    $(function () {
        testEditor = editormd("editormd", {
             "100%",
            height: 740,
            path: '/static/editormd/lib/',
            theme: "",
            previewTheme: "",
            editorTheme: "pastel-on-dark",
            markdown: "",
            codeFold: true,
            saveHTMLToTextarea: true,    // 保存 HTML 到 Textarea
            searchReplace: true,
            htmlDecode: "style,script,iframe|on*",            // 开启 HTML 标签解析，为了安全性，默认不开启    
            emoji: true,
            taskList: true,
            tocm: true,         // Using [TOCM]
            tex: true,                   // 开启科学公式TeX语言支持，默认关闭
            flowChart: true,             // 开启流程图支持，默认关闭
            sequenceDiagram: true,       // 开启时序/序列图支持，默认关闭,        
            imageUpload: true,
            imageFormats: ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
            imageUploadURL: "/Center/RichTextUpload",
            onload: function () {
                //干点什么
            }
        });
    });
    //获取编辑器内容
    var blogcontent = encodeURIComponent(testEditor.getMarkdown());
</script>
{{ pagedown.include_pagedown() }}
{% endblock scripts %}

最总的页面效果如下所示，嗯...不错哦！

最后我们测试一下，写一个小文章来看看效果。文章提交后，其实我这里只是把md的内容直接保存在数据库了，并没有进行处理，当用户查看文章详情时，会从数据库中读取md数据，前端editormd开源项目会根据md的内容进行渲染，其效果跟写文章的效果是一样的。

2.总结

• 继续加油!