用 Flask 来写个轻博客 (22) — 实现博客文章的添加和编辑页面

原创

云物互联 2021-07-14 14:55:05 ©著作权

文章标签 用 Flask 来写个轻博客函数 mysql 轻博客博客 文章分类 代码人生

©著作权归作者所有：来自51CTO博客作者云物互联的原创作品，请联系作者获取转载授权，否则将追究法律责任

Blog 项目源码：https://github.com/JmilkFan/JmilkFan-s-Blog

目录
前文列表
新建表单
新建视图函数
新建模板
在博客文章页面添加 New 和 Edit 按钮
实现效果

前文列表

新建表单

jmilkfansblog/forms.py
博客文章的新建和编辑的表单非常简单, 只需要输入 title 和 content 就可以了.

class PostForm(Form):
    """Post Form."""

    title = StringField('Title', [DataRequired(), Length(max=255)])
    text = TextAreaField('Blog Content', [DataRequired()])

新建视图函数

博客文章的添加和编辑仍然属于蓝图 blog 的功能集, 所以我们会在控制器 blog 模块中定义新的视图函数

jmilkfansblog/controller/blog.py

@blog_blueprint.route('/new', methods=['GET', 'POST'])
def new_post():
    """View function for new_port."""
    form = PostForm()

    if form.validate_on_submit():
        new_post = Post(id=str(uuid4()), title=form.title.data)
        new_post.text = form.text.data
        new_post.publish_date = datetime.now()

        db.session.add(new_post)
        db.session.commit()
        return redirect(url_for('blog.home'))

    return render_template('new_post.html',
                           form=form)


@blog_blueprint.route('/edit/<string:id>', methods=['GET', 'POST'])
def edit_post(id):
    """View function for edit_post."""

    post = Post.query.get_or_404(id)
    form = PostForm()

    if form.validate_on_submit():
        post.title = form.title.data
        post.text = form.text.data
        post.publish_date = datetime.now()

        # Update the post
        db.session.add(post)
        db.session.commit()
        return redirect(url_for('blog.post', post_id=post.id))

    form.title.data = post.title
    form.text.data = post.text
    return render_template('edit_post.html', form=form, post=post)

NOTE 1: 添加博客文章时, 如果添加成功了就将输入到表单中的内容写入到数据库并将表单的数据传入 new_post 模板.

NOTE 2: 编辑博客文章时, 在表单的输入框中会含有原来的博客内容, 当编辑成功后会将新的博客内容写入数据库并重定向到文章页面.

新建模板

jmilkfansblog/template/blog/new_post.html

{% block title %}New Post{% endblock %}

{% block body %}
<div class="row">
  <h1 class="text-center">Create A New Post</h1>
  <form method="POST" action="{{ url_for('blog.new_post') }}">
    {{ form.hidden_tag() }}
    <div class="form-group">
      {{ form.title.label }}
      {% if form.title.errors %}
        {% for e in form.title.errors %}
          <p class="help-block">{{ e }}</p>
        {% endfor %}
      {% endif %}
      {{ form.title(class_='form-control') }}
    </div>
    <div class="form-gruop">
      {{ form.text.label }}
      {% if form.text.errors %}
        {% for e in form.text.errors %}
          <p class="help-block">{{ e }}</p>
        {% endfor %}
      {% endif %}
      {{ form.text(id="editor", class_='form-contril') }}
    </div>
    <input class="btn-primary" type="submit" value="Submit">
  </form>
</div>
{% endblock %}

{% block js %}
<script src="//cdn.ckeditor.com/4.4.7/standard/ckeditor.js"></script>
<script>
    CKEDITOR.replace('editor');
</script>
{% endblock %}

jmilkfansblog/template/blog/edit_post.html

{% extends "base.html" %}

{% block title %}Edit Post{% endblock %}

{% block body %}
<div class="row">
  <h1 class="text-center">Edit the Post</h1>
  <form method="POST" action="{{ url_for('blog.edit_post', id=post.id) }}">
    {{ form.hidden_tag() }}
    <div class="form-group">
      {{ form.title.label }}
      {% if form.title.errors %}
        {% for e in form.title.errors %}
          <p class="help-block">{{ e }}</p>
        {% endfor %}
      {% endif %}
      {{ form.title(class_='form-control', value=post.title) }}
    </div>
    <div class="form-gruop">
      {{ form.text.label }}
      {% if form.text.errors %}
        {% for e in form.text.errors %}
          <p class="help-block">{{ e }}</p>
        {% endfor %}
      {% endif %}
      {{ form.text(id="editor", class_='form-contril') }}
    </div>
    <input class="btn-primary" type="submit" value="Submit">
  </form>
</div>
{% endblock %}

{% block js %}
<script src="//cdn.ckeditor.com/4.4.7/standard/ckeditor.js"></script>
<script>
    CKEDITOR.replace('editor');
</script>
{% endblock %}

NOTE: 在模板 new_post 和 edit_post 中都加入了一个所见即所得 (WYSIWYG) 的博客文章编辑器 CKEditor, 该编辑器是一个 JavaScript 文件 <script src="//cdn.ckeditor.com/4.4.7/standard/ckeditor.js"></script>, CKEditor 的安装和使用都是非常方便的.

在博客文章页面添加 New 和 Edit 按钮

{% block body %}
<h3>{{ post.title }}</h3>

<div class="row">
  <div class="col-lg-6">
    <p>Written By <a href="{{ url_for('blog.user', username=post.users.username)
      }}">{{ post.users.username }}</a> on {{ post.publish_date }}</p>
    <p>{{ post.text | safe }}</p>
  </div>
  <div class="column">
    <div class="col-lg-2">
      <a href="{{ url_for('blog.new_post') }}" class="btn btn-primary">New</a>
    </div>
  </div>
  <div class="column">
    <div class="col-lg-2">
      <a href="{{ url_for('blog.edit_post', id=post.id) }}" class="btn btn-primary">Edit</a>
    </div>
  </div>
  <div class="col-lg-12">
...