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 から継承する必要があります:
name: ビューはページ上にメニュー (ハイパーリンク) として表示されます。メニュー名 == 'name'、デフォルトは小文字のクラス名
category: 複数のビューが同じカテゴリを持つ場合、それらをすべて 1 つのドロップダウンに入れます (ドロップダウン名=='カテゴリ')endpoint: endpoint='xxx' と仮定すると、url_for(xxx.index) を使用するか、ページ URL (/admin/xxx) を変更できます
url: ページ URL、優先エンドポイント > static_folder: 静的ディレクトリへのパス
static_url_path: 静的ディレクトリの URL
anotheradmin.html:
{% 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 %}
管理者
コードをコピー
app: Flask アプリケーション オブジェクト; この例では、admin.init_app(app) を記述する必要はありません。admin = admin.Admin(app=app) を直接使用するのと同じです
name: アプリケーション名、デフォルトは「Admin」で、メインメニュー名 (「Home」の左側に「Admin」) とページタイトルとして表示されます サブドメイン: ???
です。 base_template: 基本テンプレート、デフォルト admin/base.html、このテンプレートは Flask-Admin
のソース コード ディレクトリにあります。 管理者コードの一部は次のとおりです:
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)
AdminIndexView
コードをコピー
名前: デフォルトの「ホーム」
エンドポイント: デフォルトの「admin」
URL: デフォルト '/admin'独自のビューをカプセル化したい場合は、AdminIndexView の記述メソッドを参照できます:
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
{% 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 %}
file.py:
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)
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
# 调试信息 _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?')}
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?"}); </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相对应。

ホットAIツール

Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。

Undress AI Tool
脱衣画像を無料で

Clothoff.io
AI衣類リムーバー

AI Hentai Generator
AIヘンタイを無料で生成します。

人気の記事

ホットツール

メモ帳++7.3.1
使いやすく無料のコードエディター

SublimeText3 中国語版
中国語版、とても使いやすい

ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境

ドリームウィーバー CS6
ビジュアル Web 開発ツール

SublimeText3 Mac版
神レベルのコード編集ソフト(SublimeText3)

ホットトピック











LinuxターミナルでPythonバージョンを表示する際の許可の問題の解決策PythonターミナルでPythonバージョンを表示しようとするとき、Pythonを入力してください...

PythonのPandasライブラリを使用する場合、異なる構造を持つ2つのデータフレーム間で列全体をコピーする方法は一般的な問題です。 2つのデータがあるとします...

Pythonパラメーター注釈の代替使用Pythonプログラミングでは、パラメーターアノテーションは、開発者が機能をよりよく理解して使用するのに役立つ非常に便利な機能です...

Pythonクロスプラットフォームデスクトップアプリケーション開発ライブラリの選択多くのPython開発者は、WindowsシステムとLinuxシステムの両方で実行できるデスクトップアプリケーションを開発したいと考えています...

なぜ私のコードはAPIによってデータを返しているのですか?プログラミングでは、APIが呼び出すときにヌル値を返すという問題に遭遇することがよくあります。

UvicornはどのようにしてHTTPリクエストを継続的に聞きますか? Uvicornは、ASGIに基づく軽量のWebサーバーです。そのコア機能の1つは、HTTPリクエストを聞いて続行することです...

Pythonスクリプトは、特定の場所のカーソル位置への出力をどのようにクリアしますか? Pythonスクリプトを書くときは、以前の出力をカーソル位置にクリアするのが一般的です...

多くの開発者はPypi(PythonPackageIndex)に依存しています...
