flask-admin 快速打造博客 系列二 （整合flask-admin）

整合flask-admin

---

前言

Flask-admin 至關django的xadmin吧！但是xadmin雖然樣式很漂亮，功能也很強大，但是靈活性不夠，官方文檔缺失，這兩個緣由就足以讓我選擇不用了。
Flask-admin也是有使用侷限性的，他只適合開發小型快速的應用，不適合那種大型併發性高，邏輯複雜的應用。首先，對於大型應用都是先後端分離的，加快訪問速度，並且後端裝配，尤爲是這種動態生成頁面的速度更慢。
對於通常的博客，小型的論壇或者官網之類的網站，其實頁面真多不到那裏去，用flask開發仍是綽綽有餘的。

1）基礎整理flask-admin

from flask_admin import Admin
admin = Admin(app, name='cleanblog', template_mode='bootstrap3')
#template_mode 若是沒有指定就默認bootstrap2的樣式了

而後打開瀏覽器http://127.0.0.1:5005/admin/ 看到：

2) 整合model到flask-admin

2.1咱們先增長兩個model：

class Article(db.Model):
    id = db.Column(db.Integer, primary_key=True)
    title=db.Column(db.String(32))
    content=db.Column(db.Text,nullable=False)
    tag=db.Column(db.String(64),nullable=True)
    create_time = db.Column(db.DateTime, nullable=True, default=datetime.now)

    def __repr__(self):
        return '<User %r>' % self.title

數據模型

class Tag(db.Model):
    id = db.Column(db.Integer, primary_key=True)
    name = db.Column(db.String(32), nullable=False)
    desc = db.Column(db.String(64), nullable=True)
    create_time = db.Column(db.DateTime, nullable=True, default=datetime.now)

    def __repr__(self):
        return '<User %r>' % self.name

而後註冊model到flask-admin中：

from .models import User,Tag,Article
from .modelview import BaseModelview
admin = Admin(app, name='cleanblog', template_mode='bootstrap3')

admin.add_view(BaseModelview(User, db.session,name=u'用戶管理'))
admin.add_view(BaseModelview(Tag, db.session, name=u'標籤管理'))
admin.add_view(BaseModelview(Article, db.session, name=u'文章管理'))

這裏有一個定義的BaseModelview是做爲一個全局的Modelview來用的，是爲了自定義一些model的view界面上的顯示的。

class BaseModelview(ModelView):
    def getinfo(self):
        return "this is another model"

裏面什麼都沒有，若是後期擴展權限限制了，能夠在這裏加代碼限制。
而後，重啓服務：http://127.0.0.1:5005/admin/

在這裏咱們，咱們就能夠看到一些效果顯示出來了，挺好看的。

而後看一下新增文章的視圖：

不是富文本的，使人恨不能滿意，那麼就改成ckEditor的吧！官方有相應的支持，咱們就直接看官網。

3）自定義調整樣式

3.1 調整area區爲富文本：使用ckEditor編輯器，官方提供的文檔有說明在：
http://flask-admin.readthedoc... WYSIWIG Text Field 裏面有
（1）直接拷貝相應的代碼到 modelview.py

class CKTextAreaWidget(TextArea):
    def __call__(self, field, **kwargs):
        if kwargs.get('class'):
            kwargs['class'] += ' ckeditor'
        else:
            kwargs.setdefault('class', 'ckeditor')
        return super(CKTextAreaWidget, self).__call__(field, **kwargs)

class CKTextAreaField(TextAreaField):
    widget = CKTextAreaWidget()

class MessageAdmin(BaseModelview):
    extra_js = ['//cdn.ckeditor.com/4.6.0/standard/ckeditor.js']

    form_overrides = {
        'content': CKTextAreaField
    }

前面兩個類是直接官方拷貝過來的，後面一個繼承咱們的BaseModelview，而後再在
Form_overrides裏寫明content字段是使用CKTextAreaField的擴展就能夠了。
（2）修改註冊的article類：
admin.add_view(MessageAdmin(Article, db.session, name=u'文章管理'))

重啓後，打開連接: http://127.0.0.1:5005/admin/article/new/?url=%2Fadmin%2Farticle%2F

4) 上傳圖片

官網有一個demo 就是講怎麼上傳圖片的https://github.com/flask-admi... 能夠做爲參考的
User裏有一個頭像img_head 字段，以此爲例進行講解：
(1) 自定義user的modelview

from sqlalchemy.event import listens_for
import os.path as op
import  os
from jinja2 import Markup

file_path = op.join(op.dirname(__file__), 'static') # 文件上傳路徑

class UserAdmin(BaseModelview):
    #設置縮略圖的
    def _list_thumbnail(view, context, model, name):
        if not model.head_img:
            return ''

        return Markup('<img src="%s">' % url_for('static',
                                               filename=form.thumbgen_filename(model.head_img)))
    # 格式化列表的圖像顯示
    column_formatters = {
        'head_img': _list_thumbnail
    }
    #擴展列表顯示的頭像爲60*60像素
    form_extra_fields = {
        'head_img': form.ImageUploadField('Image',
                                     base_path=file_path,
                                     relative_path='uploadFile/',
                                     thumbnail_size=(60, 60, True))
    }

其實還須要增長另外一個類，用於sql的監聽，但該用戶被刪除的時候，同時也在磁盤上把圖片刪除：

##監聽刪除圖片的
@listens_for(User, 'after_delete')
def del_image(mapper, connection, target):
    if target.head_img:
        # Delete image
        try:
            os.remove(op.join(file_path, target.head_img))
        except OSError:
            pass

        # Delete thumbnail
        try:
            os.remove(op.join(file_path,
                              form.thumbgen_filename(target.head_img)))
        except OSError:
            pass

注意：head_img 字段名不能寫錯，寫錯就展現不了；

（2）註冊modelview 並重啓服務
admin.add_view(UserAdmin(User, db.session,name=u'用戶管理'))
重啓後的結果：

(3) 修改表格頭顯示
表格頭默認是顯示是表的字段名，咱們能夠自定義爲本身的中文顯示，這一塊還跟國際化無關，因此稍感鬱悶啊。
在modelview.py 對應的自定義UserAdmin中加入

column_labels = {
    'id': u'序號',
    'email': u'郵件',
    'username': u'用戶名',
    'role': u'角色',
    'password_hash': u'密碼',
    'head_img': u'頭像',
    'create_time':u'建立時間'
}

顯示的結果：

(4)隱藏顯示字段
在用戶顯示的列表中，加密後的密碼，經過咱們是不但願顯示出來的，那就把他隱藏掉：
column_exclude_list = [' password_hash', ]
modeview加入該字段後重啓就有效果了：

(5)其餘自定義化功能：
其餘自定義化功能不少，能夠參考：http://flask-admin.readthedoc...
想增長過濾的字段：column_filters = ['country']
想設置可查詢的字段：column_searchable_list = ['name', 'email']
想指定可編輯的字段：column_editable_list = ['name', 'last_name']
即不建立也不編輯的字段：form_excluded_columns = ['last_name', 'email']
增長可選擇下拉框的：
form_extra_fields = {
'tag':form.Select2Field('請選擇',choices=[('xiaoming','xiaoming'),('xiao2','xodk2')])
}

關於這些方法怎麼查的到呢？首先，你要想獲得，有這方面的需求，而後再去base,baseview，ModelView等類中看源碼，也能夠去對應的官網查看api就能查到對應的解決方法。