用 Flask 來寫個輕博客 (30) — 使用 Flask-Admin 加強文章管理功能

Blog 項目源碼：https://github.com/JmilkFan/JmilkFan-s-Blog

目錄

• 目錄
• 前文列表
• 擴展閱讀
• 實現文章管理功能
  • 實現效果

前文列表

用 Flask 來寫個輕博客 (1) — 建立項目
用 Flask 來寫個輕博客 (2) — Hello World！
用 Flask 來寫個輕博客 (3) — (M)VC_鏈接 MySQL 和 SQLAlchemy
用 Flask 來寫個輕博客 (4) — (M)VC_建立數據模型和表
用 Flask 來寫個輕博客 (5) — (M)VC_SQLAlchemy 的 CRUD 詳解
用 Flask 來寫個輕博客 (6) — (M)VC_models 的關係(one to many)
用 Flask 來寫個輕博客 (7) — (M)VC_models 的關係(many to many)
用 Flask 來寫個輕博客 (8) — (M)VC_Alembic 管理數據庫結構的升級和降級
用 Flask 來寫個輕博客 (9) — M(V)C_Jinja 語法基礎快速概覽
用 Flask 來寫個輕博客 (10) — M(V)C_Jinja 經常使用過濾器與 Flask 特殊變量及方法
用 Flask 來寫個輕博客 (11) — M(V)C_建立視圖函數
用 Flask 來寫個輕博客 (12) — M(V)C_編寫和繼承 Jinja 模板
用 Flask 來寫個輕博客 (13) — M(V)C_WTForms 服務端表單檢驗
用 Flask 來寫個輕博客 (14) — M(V)C_實現項目首頁的模板
用 Flask 來寫個輕博客 (15) — M(V)C_實現博文頁面評論表單
用 Flask 來寫個輕博客 (16) — MV(C)_Flask Blueprint 藍圖
用 Flask 來寫個輕博客 (17) — MV(C)_應用藍圖來重構項目
用 Flask 來寫個輕博客 (18) — 使用工廠模式來生成應用對象
用 Flask 來寫個輕博客 (19) — 以 Bcrypt 密文存儲帳戶信息與實現用戶登錄表單
用 Flask 來寫個輕博客 (20) — 實現註冊表單與應用 reCAPTCHA 來實現驗證碼
用 Flask 來寫個輕博客 (21) — 結合 reCAPTCHA 驗證碼實現用戶註冊與登陸
用 Flask 來寫個輕博客 (22) — 實現博客文章的添加和編輯頁面
用 Flask 來寫個輕博客 (23) — 應用 OAuth 來實現 Facebook 第三方登陸
用 Flask 來寫個輕博客 (24) — 使用 Flask-Login 來保護應用安全
用 Flask 來寫個輕博客 (25) — 使用 Flask-Principal 實現角色權限功能
用 Flask 來寫個輕博客 (26) — 使用 Flask-Celery-Helper 實現異步任務
用 Flask 來寫個輕博客 (27) — 使用 Flask-Cache 實現網頁緩存加速
用 Flask 來寫個輕博客 (29) — 使用 Flask-Admin 實現後臺管理 SQLAlchemy

擴展閱讀

Flask項目集成富文本編輯器CKeditor

實現文章管理功能

該功能是在 ModelView 提供 CRUD 管理的基礎上實現, 可是仍然存在一個問題, 就是 Flask-Admin 默認使用的文本編輯字段爲 textarea, 這沒法知足博客文章的樣式需求. 因此咱們此次來看看怎樣替換一個默認的字段類型.

• 建立一個新的字段類型
  vim jmilkfansblog/forms.py

from wtforms import (
    widgets,
    StringField,
    TextField,
    TextAreaField,
    PasswordField,
    BooleanField,
    ValidationError
)


class CKTextAreaField(TextAreaField):
    """Create a new Field type."""

    # Add a new widget `CKTextAreaField` inherit from TextAreaField.
    widget = CKTextAreaWidget()


class CKTextAreaWidget(widgets.TextArea):
    """CKeditor form for Flask-Admin."""

    def __call__(self, field, **kwargs):
        """Define callable type(class)."""

        # Add a new class property ckeditor: `<input class=ckeditor ...>`
        kwargs.setdefault('class_', 'ckeditor')
        return super(CKTextAreaWidget, self).__call__(field, **kwargs)

NOTE 1: 新建的 CKTextAreaField 字段類型繼承了 TextAreaField, 惟一的區別在於, CKTextAreaField 增長了一個 widget 的小部件, widget 的意義在於爲該字段的 HTML 標籤增長一個 class EG. <input class=ckedior ...>.

NOTE 2: widget 是由 class CKTestAreaWidget 返回的, 該類做爲的惟一一件事情就是將 HTML 標籤中的 class 的值設定爲 ckedior, EG. <textarea name="editor" id="editor" class="ckeditor" rows="10" cols="80"> 這樣的話, Ckeditor 就會將原默認的 TextArea(editor) 給替換掉.

• 定義一個 PostView 類
  vim jmilkfansblog/controllers/admin.py

class PostView(CustomModelView):
    """View function of Flask-Admin for Post create/edit Page includedin Models page"""

    # Using the CKTextAreaField to replace the Field name is `test`
    form_overrides = dict(text=CKTextAreaField)

    # Using Search box
    column_searchable_list = ('text', 'title')

    # Using Add Filter box
    column_filters = ('publish_date',)

    # Custom the template for PostView
    # Using js Editor of CKeditor
    create_template = 'admin/post_edit.html'
    edit_template = 'admin/post_edit.html'

NOTE 1: form_overrides 指定使用新的字段類型 CKTextAreaField 替換原來的 TextAreaField.

NOTE 2: column_searchable_list 指定一個搜索框, 和搜索的範圍爲 post.text/post.title

NOTE 3: column_filters 指定一個過濾器, 篩選更加精確的值

NOTE 4: create_template/edit_template 指定自定義模板文件

• 建立自定義模板
  vim jmilkfansblog/templates/admin/post_edit.html

{% extends 'admin/model/edit.html' %} {% block tail %} {{ super() }} <script src="//cdn.ckeditor.com/4.4.7/standard/ckeditor.js"></script> {% endblock %} 

NOTE 1: 該自定義模板繼承了 admin/model/edit.html, 但卻替換了
{% block tail %} 爲一個 CKEditor.

實現效果

• 文章列表
  

• 建立/編輯文章