Flaskのグラフィカル管理インターフェース構築フレームワーク Flask-Adminの使い方チュートリアル

Flask-Admin は、Flask フレームワークの拡張機能であり、ユーザーやファイルの追加、削除、変更、確認などの一般的な管理機能を迅速に作成するために使用できます。デフォルトのインターフェイスと同様に、テンプレート ファイルの変更を使用してカスタマイズできます。 Flask-Admin は各メニュー (ハイパーリンク) をビューとして扱います。ビューは登録後にのみ表示されます。そのため、このメカニズムを使用して独自のモジュラー インターフェイスをカスタマイズできます。異なる権限を持つユーザーを許可すると、ログイン後に別のメニューが表示されます。
プロジェクトアドレス: https://flask-admin.readthedocs.io/en/latest/

例/簡単

これは最も単純な例であり、基本概念を迅速かつ直観的に理解し、Flask-Admin インターフェイスのカスタマイズ方法を学ぶのに役立ちます
simple.py：

from flask import Flask

from flask.ext import admin


# Create custom admin view
class MyAdminView(admin.BaseView):
  @admin.expose('/')
  def index(self):
    return self.render('myadmin.html')


class AnotherAdminView(admin.BaseView):
  @admin.expose('/')
  def index(self):
    return self.render('anotheradmin.html')

  @admin.expose('/test/')
  def test(self):
    return self.render('test.html')


# Create flask app
app = Flask(__name__, template_folder='templates')
app.debug = True

# Flask views
@app.route('/')
def index():
  return '<a href="/admin/">Click me to get to Admin!</a>'

# Create admin interface
admin = admin.Admin()
admin.add_view(MyAdminView(category='Test'))
admin.add_view(AnotherAdminView(category='Test'))
admin.init_app(app)

if __name__ == '__main__':

  # Start app
  app.run()

ここでランニング効果を確認できます

BaseView

すべてのビューは BaseView から継承する必要があります:

コードをコピー コードは次のとおりです: class BaseView(name=None、category=None、endpoint=None、url=None、static_folder=None、static_url_path=None)

name: ビューはページ上にメニュー (ハイパーリンク) として表示されます。メニュー名 == 'name'、デフォルトは小文字のクラス名

category: 複数のビューが同じカテゴリを持つ場合、それらをすべて 1 つのドロップダウンに入れます (ドロップダウン名=='カテゴリ')
endpoint: endpoint='xxx' と仮定すると、url_for(xxx.index) を使用するか、ページ URL (/admin/xxx) を変更できます
url: ページ URL、優先エンドポイント > static_folder: 静的ディレクトリへのパス
static_url_path: 静的ディレクトリの URL
anotheradmin.html:

AnotherAdminView がパラメーター endpoint='xxx' を追加する場合、url_for('xxx.text') として記述することができ、ページ URL は /admin/anotheradminview/ から /admin/xxx に変更されます

{% extends 'admin/master.html' %}
{% block body %}
  Hello World from AnotherMyAdmin!<br/>
  <a href="{{ url_for('.test') }}">Click me to go to test view</a>
{% endblock %}

同時にパラメータ url='aaa' を指定すると、ページ URL は /admin/aaa となり、URL の優先度はエンドポイントよりも高くなります

管理者

コードをコピー

コードは次のとおりです: class Admin(app=None, name=None, url=None, subdomain=None,index_view=None,translations_path=None,endpoint=None,static_url_path=None,base_template=None)

app: Flask アプリケーション オブジェクト; この例では、admin.init_app(app) を記述する必要はありません。admin = admin.Admin(app=app) を直接使用するのと同じです
name: アプリケーション名、デフォルトは「Admin」で、メインメニュー名 (「Home」の左側に「Admin」) とページタイトルとして表示されます サブドメイン: ???

Index_view: 「ホーム」に対応するメニューはインデックス ビューと呼ばれ、デフォルトは AdminIndexView
です。 base_template: 基本テンプレート、デフォルト admin/base.html、このテンプレートは Flask-Admin
のソース コード ディレクトリにあります。 管理者コードの一部は次のとおりです:

上記のコードから、init_app(app) と Admin(app=app) が同じであることがわかります。

class MenuItem(object):
  """
    Simple menu tree hierarchy.
  """
  def __init__(self, name, view=None):
    self.name = name
    self._view = view
    self._children = []
    self._children_urls = set()
    self._cached_url = None
    self.url = None
    if view is not None:
      self.url = view.url

  def add_child(self, view):
    self._children.append(view)
    self._children_urls.add(view.url)

class Admin(object):

  def __init__(self, app=None, name=None,
         url=None, subdomain=None,
         index_view=None,
         translations_path=None,
         endpoint=None,
         static_url_path=None,
         base_template=None):

    self.app = app

    self.translations_path = translations_path

    self._views = []
    self._menu = []
    self._menu_categories = dict()
    self._menu_links = []

    if name is None:
      name = 'Admin'
    self.name = name

    self.index_view = index_view or AdminIndexView(endpoint=endpoint, url=url)
    self.endpoint = endpoint or self.index_view.endpoint
    self.url = url or self.index_view.url
    self.static_url_path = static_url_path
    self.subdomain = subdomain
    self.base_template = base_template or 'admin/base.html'

    # Add predefined index view
    self.add_view(self.index_view)

    # Register with application
    if app is not None:
      self._init_extension()

  def add_view(self, view):

    # Add to views
    self._views.append(view)

    # If app was provided in constructor, register view with Flask app
    if self.app is not None:
      self.app.register_blueprint(view.create_blueprint(self))
      self._add_view_to_menu(view)

  def _add_view_to_menu(self, view):

    if view.category:
      category = self._menu_categories.get(view.category)

      if category is None:
        category = MenuItem(view.category)
        self._menu_categories[view.category] = category
        self._menu.append(category)

      category.add_child(MenuItem(view.name, view))
    else:
      self._menu.append(MenuItem(view.name, view))

  def init_app(self, app):

    self.app = app

    self._init_extension()

    # Register views
    for view in self._views:
      app.register_blueprint(view.create_blueprint(self))
      self._add_view_to_menu(view)

各ビューをブループリント (Flask の概念。単純にモジュールとして理解できます) として登録します すべてのビューとそのカテゴリと URL を記録します

AdminIndexView

コードをコピー

コードは次のとおりです:

class AdminIndexView(name=None、category=None、endpoint=None、url=None、template='admin/index.html')
名前: デフォルトの「ホーム」

エンドポイント: デフォルトの「admin」

URL: デフォルト '/admin'
独自のビューをカプセル化したい場合は、AdminIndexView の記述メソッドを参照できます:

デフォルトのbase_templateは/admin/base.htmlで、これはページのメインコード(ブートストラップに基づく)であり、admin/layout.htmlもインポートします。

class AdminIndexView(BaseView):

  def __init__(self, name=None, category=None,
         endpoint=None, url=None,
         template='admin/index.html'):
    super(AdminIndexView, self).__init__(name or babel.lazy_gettext('Home'),
                       category,
                       endpoint or 'admin',
                       url or '/admin',
                       'static')
    self._template = template

  @expose()
  def index(self):
    return self.render(self._template)
base_template

レイアウトはいくつかのマクロであり、主にメニューの展開と表示に使用されます。 テンプレート内のいくつかの変数を使用して、ビューの登録時に保存された情報 (メニュー名や URL など) を取得します。 # admin/layout.html (部分)

例/ファイル

{% macro menu() %}
 {% for item in admin_view.admin.menu() %}
  {% if item.is_category() %}
   {% set children = item.get_children() %}
   {% if children %}
    {% if item.is_active(admin_view) %}<li class="active dropdown">{% else %}<li class="dropdown">{% endif %}
     <a class="dropdown-toggle" data-toggle="dropdown" href="javascript:void(0)">{{ item.name }}<b class="caret"></b></a>
     <ul class="dropdown-menu">
      {% for child in children %}
       {% if child.is_active(admin_view) %}<li class="active">{% else %}<li>{% endif %}
        <a href="{{ child.get_url() }}">{{ child.name }}</a>
       </li>
      {% endfor %}
     </ul>
    </li>
   {% endif %}
  {% else %}
   {% if item.is_accessible() and item.is_visible() %}
    {% if item.is_active(admin_view) %}<li class="active">{% else %}<li>{% endif %}
     <a href="{{ item.get_url() }}">{{ item.name }}</a>
    </li>
   {% endif %}
  {% endif %}
 {% endfor %}
{% endmacro %}

このサンプルは、ファイル管理インターフェイスを迅速に構築するのに役立ちますが、私たちは ActionsMixin モジュールの使い方を学ぶことに重点を置いています

file.py：

FileAdmin は作成されたビューであり、直接使用できます:

import os
import os.path as op

from flask import Flask

from flask.ext import admin
from flask.ext.admin.contrib import fileadmin

# Create flask app
app = Flask(__name__, template_folder='templates', static_folder='files')

# Create dummy secrey key so we can use flash
app.config['SECRET_KEY'] = '123456790'


# Flask views
@app.route('/')
def index():
  return '<a href="/admin/">Click me to get to Admin!</a>'


if __name__ == '__main__':
  # Create directory
  path = op.join(op.dirname(__file__), 'files')
  try:
    os.mkdir(path)
  except OSError:
    pass

  # Create admin interface
  admin = admin.Admin(app)
  admin.add_view(fileadmin.FileAdmin(path, '/files/', name='Files'))

  # Start app
  app.run(debug=True)

コードをコピー

コードは次のとおりです: class FileAdmin(base_path, base_url, name=None, category=None, endpoint=None, url=None, verify_path=True)

base_path: ファイルが保存されている相対パス base_url: ファイルディレクトリの URL

FileAdmin の ActionsMixin に関連するコードは次のとおりです:

class FileAdmin(BaseView, ActionsMixin):



名前: アクション名

テキスト: ボタン名に使用できます

  def __init__(self, base_path, base_url,
         name=None, category=None, endpoint=None, url=None,
         verify_path=True):

    self.init_actions()

@expose('/action/', methods=('POST',))
def action_view(self):
  return self.handle_action()

# Actions
@action('delete',
    lazy_gettext('Delete'),
    lazy_gettext('Are you sure you want to delete these files?'))
def action_delete(self, items):
  if not self.can_delete:
    flash(gettext('File deletion is disabled.'), 'error')
    return

  for path in items:
    base_path, full_path, path = self._normalize_path(path)

    if self.is_accessible_path(path):
      try:
        os.remove(full_path)
        flash(gettext('File "%(name)s" was successfully deleted.', name=path))
      except Exception as ex:
        flash(gettext('Failed to delete file: %(name)s', name=ex), 'error')

@action('edit', lazy_gettext('Edit'))
def action_edit(self, items):
  return redirect(url_for('.edit', path=items))
@action()用于wrap跟在后面的函数，这里的作用就是把参数保存起来：
def action(name, text, confirmation=None)
  def wrap(f):
    f._action = (name, text, confirmation)
    return f

  return wrap

確認: ポップアップ確認メッセージ init_actions() は、すべてのアクション情報を ActionsMixin に保存します:

# 调试信息
_actions = [('delete', lu'Delete'), ('edit', lu'Edit')]
_actions_data = {'edit': (<bound method FileAdmin.action_edit of <flask_admin.contrib.fileadmin.FileAdmin object at 0x1aafc50>>, lu'Edit', None), 'delete': (<bound method FileAdmin.action_delete of <flask_admin.contrib.fileadmin.FileAdmin object at 0x1aafc50>>, lu'Delete', lu'Are you sure you want to delete these files&#63;')}

action_view()用于处理POST给/action/的请求，然后调用handle_action()，它再调用不同的action处理，最后返回当前页面：

# 省略无关代码
def handle_action(self, return_view=None):

  action = request.form.get('action')
  ids = request.form.getlist('rowid')

  handler = self._actions_data.get(action)

  if handler and self.is_action_allowed(action):
    response = handler[0](ids)

    if response is not None:
      return response

  if not return_view:
    url = url_for('.' + self._default_view)
  else:
    url = url_for('.' + return_view)

  return redirect(url)

ids是一个文件清单，作为参数传给action处理函数（参数items）：

# 调试信息
ids: [u'1.png', u'2.png']

再分析页面代码，Files页面对应文件为admin/file/list.html，重点看With selected下拉菜单相关代码：
{% import 'admin/actions.html' as actionslib with context %}

{% if actions %}
  <div class="btn-group">
    {{ actionslib.dropdown(actions, 'dropdown-toggle btn btn-large') }}
  </div>
{% endif %}

{% block actions %}
  {{ actionslib.form(actions, url_for('.action_view')) }}
{% endblock %}

{% block tail %}
  {{ actionslib.script(_gettext('Please select at least one file.'),
           actions,
           actions_confirmation) }}
{% endblock %}

上面用到的三个宏在actions.html：

{% macro dropdown(actions, btn_class='dropdown-toggle') -%}
  <a class="{{ btn_class }}" data-toggle="dropdown" href="javascript:void(0)">{{ _gettext('With selected') }}<b class="caret"></b></a>
  <ul class="dropdown-menu">
    {% for p in actions %}
    <li>
      <a href="javascript:void(0)" onclick="return modelActions.execute('{{ p[0] }}');">{{ _gettext(p[1]) }}</a>
    </li>
    {% endfor %}
  </ul>
{% endmacro %}

{% macro form(actions, url) %}
  {% if actions %}
  <form id="action_form" action="{{ url }}" method="POST" style="display: none">
    {% if csrf_token %}
    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}"/>
    {% endif %}
    <input type="hidden" id="action" name="action" />
  </form>
  {% endif %}
{% endmacro %}

{% macro script(message, actions, actions_confirmation) %}
  {% if actions %}
  <script src="{{ admin_static.url(filename='admin/js/actions.js') }}"></script>
  <script language="javascript">
    var modelActions = new AdminModelActions({{ message|tojson|safe }}, {{ actions_confirmation|tojson|safe }});
  </script>
  {% endif %}
{% endmacro %}

最终生成的页面（部分）：

<div class="btn-group">
  <a class="dropdown-toggle btn btn-large" href="javascript:void(0)" data-toggle="dropdown">
    With selected
    <b class="caret"></b>
  </a>

  <ul class="dropdown-menu">
    <li>
      <a onclick="return modelActions.execute('delete');" href="javascript:void(0)">Delete</a>
    </li>
    <li>
      <a onclick="return modelActions.execute('edit');" href="javascript:void(0)">Edit</a>
    </li>
  </ul>
</div>

<form id="action_form" action="/admin/fileadmin/action/" method="POST" style="display: none">
  <input type="hidden" id="action" name="action" />
</form>

<script src="/admin/static/admin/js/actions.js"></script>
<script language="javascript">
  var modelActions = new AdminModelActions("Please select at least one file.", {"delete": "Are you sure you want to delete these files&#63;"});
</script>

选择菜单后的处理方法在actions.js:

var AdminModelActions = function(actionErrorMessage, actionConfirmations) {
  // Actions helpers. TODO: Move to separate file
  this.execute = function(name) {
    var selected = $('input.action-checkbox:checked').size();

    if (selected === 0) {
      alert(actionErrorMessage);
      return false;
    }

    var msg = actionConfirmations[name];

    if (!!msg)
      if (!confirm(msg))
        return false;

    // Update hidden form and submit it
    var form = $('#action_form');
    $('#action', form).val(name);

    $('input.action-checkbox', form).remove();
    $('input.action-checkbox:checked').each(function() {
      form.append($(this).clone());
    });

    form.submit();

    return false;
  };

  $(function() {
    $('.action-rowtoggle').change(function() {
      $('input.action-checkbox').attr('checked', this.checked);
    });
  });
};

对比一下修改前后的表单：

# 初始化
<form id="action_form" style="display: none" method="POST" action="/admin/fileadmin/action/">
  <input id="action" type="hidden" name="action">
</form>

# 'Delete'选中的三个文件
<form id="action_form" style="display: none" method="POST" action="/admin/fileadmin/action/">
  <input id="action" type="hidden" name="action" value="delete">
  <input class="action-checkbox" type="checkbox" value="1.png" name="rowid">
  <input class="action-checkbox" type="checkbox" value="2.png" name="rowid">
  <input class="action-checkbox" type="checkbox" value="3.png" name="rowid">
</form>

# 'Edit'选中的一个文件
<form id="action_form" style="display: none" method="POST" action="/admin/fileadmin/action/">
  <input id="action" type="hidden" name="action" value="edit">
  <input class="action-checkbox" type="checkbox" value="1.png" name="rowid">
</form>

总结一下，当我们点击下拉菜单中的菜单项（Delete,Edit），本地JavaScript代码会弹出确认框（假设有确认信息），然后提交一个表单给/admin/fileadmin/action/，请求处理函数action_view()根据表单类型再调用不同的action处理函数，最后返回一个页面。

Flask-Admin字段（列）格式化
在某些情况下，我们需要对模型的某个属性进行格式化。比如，默认情况下，日期时间显示出来会比较长，这时可能需要只显示月和日，这时候，列格式化就派上用场了。

比如，如果你要显示双倍的价格，你可以这样做：

class MyModelView(BaseModelView):
  column_formatters = dict(price=lambda v, c, m, p: m.price*2)

或者在Jinja2模板中使用宏：

from flask.ext.admin.model.template import macro

class MyModelView(BaseModelView):
  column_formatters = dict(price=macro('render_price'))

# in template
{% macro render_price(model, column) %}
  {{ model.price * 2 }}
{% endmacro %}

回调函数模型：

def formatter(view, context, model, name):
  # `view` is current administrative view
  # `context` is instance of jinja2.runtime.Context
  # `model` is model instance
  # `name` is property name
  pass

正好和上面的v, c, m, p相对应。