用 Flask 来写个轻博客 (30) — 使用 Flask-Admin 增强文章管理功能

清疚 2022-01-06 23:49 212阅读 0赞

**Blog 项目源码：[https://github.com/JmilkFan/JmilkFan-s-Blog][https_github.com_JmilkFan_JmilkFan-s-Blog]**

# 目录 #

*  目录
 *  前文列表
 *  扩展阅读
 *  实现文章管理功能
    
     *  实现效果

# 前文列表 #

[用 Flask 来写个轻博客 (1) — 创建项目][Flask _ _1_ _]  
[用 Flask 来写个轻博客 (2) — Hello World！][Flask _ _2_ _ Hello World]  
[用 Flask 来写个轻博客 (3) — (M)VC\_连接 MySQL 和 SQLAlchemy][Flask _ _3_ _ _M_VC_ MySQL _ SQLAlchemy]  
[用 Flask 来写个轻博客 (4) — (M)VC\_创建数据模型和表][Flask _ _4_ _ _M_VC]  
[用 Flask 来写个轻博客 (5) — (M)VC\_SQLAlchemy 的 CRUD 详解][Flask _ _5_ _ _M_VC_SQLAlchemy _ CRUD]  
[用 Flask 来写个轻博客 (6) — (M)VC\_models 的关系(one to many)][Flask _ _6_ _ _M_VC_models _one to many]  
[用 Flask 来写个轻博客 (7) — (M)VC\_models 的关系(many to many)][Flask _ _7_ _ _M_VC_models _many to many]  
[用 Flask 来写个轻博客 (8) — (M)VC\_Alembic 管理数据库结构的升级和降级][Flask _ _8_ _ _M_VC_Alembic]  
[用 Flask 来写个轻博客 (9) — M(V)C\_Jinja 语法基础快速概览][Flask _ _9_ _ M_V_C_Jinja]  
[用 Flask 来写个轻博客 (10) — M(V)C\_Jinja 常用过滤器与 Flask 特殊变量及方法][Flask _ _10_ _ M_V_C_Jinja _ Flask]  
[用 Flask 来写个轻博客 (11) — M(V)C\_创建视图函数][Flask _ _11_ _ M_V_C]  
[用 Flask 来写个轻博客 (12) — M(V)C\_编写和继承 Jinja 模板][Flask _ _12_ _ M_V_C_ Jinja]  
[用 Flask 来写个轻博客 (13) — M(V)C\_WTForms 服务端表单检验 ][Flask _ _13_ _ M_V_C_WTForms _]  
[用 Flask 来写个轻博客 (14) — M(V)C\_实现项目首页的模板 ][Flask _ _14_ _ M_V_C_]  
[用 Flask 来写个轻博客 (15) — M(V)C\_实现博文页面评论表单 ][Flask _ _15_ _ M_V_C_]  
[用 Flask 来写个轻博客 (16) — MV(C)\_Flask Blueprint 蓝图 ][Flask _ _16_ _ MV_C_Flask Blueprint _]  
[用 Flask 来写个轻博客 (17) — MV(C)\_应用蓝图来重构项目 ][Flask _ _17_ _ MV_C_]  
[用 Flask 来写个轻博客 (18) — 使用工厂模式来生成应用对象 ][Flask _ _18_ _ _]  
[用 Flask 来写个轻博客 (19) — 以 Bcrypt 密文存储账户信息与实现用户登陆表单 ][Flask _ _19_ _ _ Bcrypt _]  
[用 Flask 来写个轻博客 (20) — 实现注册表单与应用 reCAPTCHA 来实现验证码 ][Flask _ _20_ _ _ reCAPTCHA _]  
[用 Flask 来写个轻博客 (21) — 结合 reCAPTCHA 验证码实现用户注册与登录 ][Flask _ _21_ _ _ reCAPTCHA _]  
[用 Flask 来写个轻博客 (22) — 实现博客文章的添加和编辑页面 ][Flask _ _22_ _ _]  
[用 Flask 来写个轻博客 (23) — 应用 OAuth 来实现 Facebook 第三方登录 ][Flask _ _23_ _ _ OAuth _ Facebook _]  
[用 Flask 来写个轻博客 (24) — 使用 Flask-Login 来保护应用安全 ][Flask _ _24_ _ _ Flask-Login _]  
[用 Flask 来写个轻博客 (25) — 使用 Flask-Principal 实现角色权限功能][Flask _ _25_ _ _ Flask-Principal]  
[用 Flask 来写个轻博客 (26) — 使用 Flask-Celery-Helper 实现异步任务 ][Flask _ _26_ _ _ Flask-Celery-Helper _]  
[用 Flask 来写个轻博客 (27) — 使用 Flask-Cache 实现网页缓存加速 ][Flask _ _27_ _ _ Flask-Cache _]  
[用 Flask 来写个轻博客 (29) — 使用 Flask-Admin 实现后台管理 SQLAlchemy ][Flask _ _29_ _ _ Flask-Admin _ SQLAlchemy]

# 扩展阅读 #

[Flask项目集成富文本编辑器CKeditor][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.

## 实现效果 ##

*  文章列表  
    ![这里写图片描述][SouthEast]
 *  创建/编辑文章  
    ![这里写图片描述][SouthEast 1]

转载于:https://www.cnblogs.com/jmilkfan-fanguiju/p/10589849.html

[https_github.com_JmilkFan_JmilkFan-s-Blog]: https://github.com/JmilkFan/JmilkFan-s-Blog
[Flask _ _1_ _]: http://blog.csdn.net/jmilk/article/details/53150084
[Flask _ _2_ _ Hello World]: http://blog.csdn.net/jmilk/article/details/53152158
[Flask _ _3_ _ _M_VC_ MySQL _ SQLAlchemy]: http://blog.csdn.net/jmilk/article/details/53153382
[Flask _ _4_ _ _M_VC]: http://blog.csdn.net/jmilk/article/details/53184903
[Flask _ _5_ _ _M_VC_SQLAlchemy _ CRUD]: http://blog.csdn.net/jmilk/article/details/53187575
[Flask _ _6_ _ _M_VC_models _one to many]: http://blog.csdn.net/jmilk/article/details/53229180
[Flask _ _7_ _ _M_VC_models _many to many]: http://blog.csdn.net/jmilk/article/details/53239740
[Flask _ _8_ _ _M_VC_Alembic]: http://blog.csdn.net/jmilk/article/details/53241361
[Flask _ _9_ _ M_V_C_Jinja]: http://blog.csdn.net/jmilk/article/details/53264049
[Flask _ _10_ _ M_V_C_Jinja _ Flask]: http://blog.csdn.net/jmilk/article/details/53292248
[Flask _ _11_ _ M_V_C]: http://blog.csdn.net/jmilk/article/details/53303870
[Flask _ _12_ _ M_V_C_ Jinja]: http://blog.csdn.net/jmilk/article/details/53306560
[Flask _ _13_ _ M_V_C_WTForms _]: http://blog.csdn.net/jmilk/article/details/53321939
[Flask _ _14_ _ M_V_C_]: http://blog.csdn.net/jmilk/article/details/53327164
[Flask _ _15_ _ M_V_C_]: http://blog.csdn.net/jmilk/article/details/53332204
[Flask _ _16_ _ MV_C_Flask Blueprint _]: http://blog.csdn.net/jmilk/article/details/53342517
[Flask _ _17_ _ MV_C_]: http://blog.csdn.net/jmilk/article/details/53352359
[Flask _ _18_ _ _]: http://blog.csdn.net/jmilk/article/details/53363109
[Flask _ _19_ _ _ Bcrypt _]: http://blog.csdn.net/jmilk/article/details/53365714
[Flask _ _20_ _ _ reCAPTCHA _]: http://blog.csdn.net/jmilk/article/details/53368626
[Flask _ _21_ _ _ reCAPTCHA _]: http://blog.csdn.net/jmilk/article/details/53385381
[Flask _ _22_ _ _]: http://blog.csdn.net/jmilk/article/details/53445271
[Flask _ _23_ _ _ OAuth _ Facebook _]: http://blog.csdn.net/jmilk/article/details/53448906
[Flask _ _24_ _ _ Flask-Login _]: http://blog.csdn.net/jmilk/article/details/53539710
[Flask _ _25_ _ _ Flask-Principal]: http://blog.csdn.net/jmilk/article/details/53542686
[Flask _ _26_ _ _ Flask-Celery-Helper _]: http://blog.csdn.net/jmilk/article/details/53677411
[Flask _ _27_ _ _ Flask-Cache _]: http://blog.csdn.net/jmilk/article/details/53741676
[Flask _ _29_ _ _ Flask-Admin _ SQLAlchemy]: http://blog.csdn.net/Jmilk/article/details/53782360
[Flask_CKeditor]: http://flask123.sinaapp.com/article/49/
[SouthEast]: /images/20211227/28c4bacf7f3743afab9717fc0486e6f3.png
[SouthEast 1]: /images/20211227/c9ccbcbce9224f0e938668b60017631d.png