搜索
首页后端开发Python教程Flask的图形化管理界面搭建框架Flask-Admin的使用教程

Flask-Admin是Flask框架的一个扩展,用它能够快速创建Web管理界面,它实现了比如用户、文件的增删改查等常用的管理功能;如果对它的默认界面不喜欢,可以通过修改模板文件来定制;
Flask-Admin把每一个菜单(超链接)看作一个view,注册后才能显示出来,view本身也有属性来控制其是否可见;因此,利用这个机制可以定制自己的模块化界面,比如让不同权限的用户登录后看到不一样的菜单;

项目地址:https://flask-admin.readthedocs.io/en/latest/

example/simple
这是最简单的一个样例,可以帮助我们快速、直观的了解基本概念,学会定制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

所有的view都必须继承自BaseView:

复制代码 代码如下:

class BaseView(name=None, category=None, endpoint=None, url=None, static_folder=None, static_url_path=None)


name: view在页面上表现为一个menu(超链接),menu name == 'name',缺省就用小写的class name
category: 如果多个view有相同的category就全部放到一个dropdown里面(dropdown name=='category')
endpoint: 假设endpoint='xxx',则可以用url_for(xxx.index),也能改变页面URL(/admin/xxx)
url: 页面URL,优先级url > endpoint > class name
static_folder: static目录的路径
static_url_path: static目录的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 %}

如果AnotherAdminView增加参数endpoint='xxx',那这里就可以写成url_for('xxx.text'),然后页面URL会由/admin/anotheradminview/变成/admin/xxx
如果同时指定参数url='aaa',那页面URL会变成/admin/aaa,url优先级比endpoint高
Admin

复制代码 代码如下:

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 Application Object;本例中可以不写admin.init_app(app),直接用admin = admin.Admin(app=app)是一样的
name: Application name,缺省'Admin';会显示为main menu name('Home'左边的'Admin')和page title
subdomain: ???
index_view: 'Home'那个menu对应的就叫index view,缺省AdminIndexView
base_template: 基础模板,缺省admin/base.html,该模板在Flask-Admin的源码目录里面
部分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)

从上面的代码可以看出init_app(app)和Admin(app=app)是一样的:
将每个view注册为blueprint(Flask里的概念,可以简单理解为模块)
记录所有view,以及所属的category和url
AdminIndexView

复制代码 代码如下:

class AdminIndexView(name=None, category=None, endpoint=None, url=None, template='admin/index.html')


name: 缺省'Home'
endpoint: 缺省'admin'
url: 缺省'/admin'
如果要封装出自己的view,可以参照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

base_template缺省是/admin/base.html,是页面的主要代码(基于bootstrap),它里面又import admin/layout.html;
layout是一些宏,主要用于展开、显示menu;
在模板中使用一些变量来取出之前注册view时保存的信息(如menu name和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 %}

example/file
这个样例能帮助我们快速搭建起文件管理界面,但我们的重点是学习使用ActionsMixin模块
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)

FileAdmin是已经写好的的一个view,直接用即可:

复制代码 代码如下:

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&#63;'))
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

name: action name
text: 可用于按钮名称
confirmation: 弹框确认信息
init_actions()把所有action的信息保存到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相对应。

声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
Flask + Vue.js:快速实现单页面应用Flask + Vue.js:快速实现单页面应用Jun 17, 2023 am 09:06 AM

随着移动互联网和Web技术的迅速发展,越来越多的应用需要提供流畅、快速的用户体验。传统的多页面应用已经无法满足这些需求,而单页面应用(SPA)则成为了解决方案之一。那么,如何快速实现单页面应用呢?本文将介绍如何利用Flask和Vue.js来构建SPA。Flask是一个使用Python语言编写的轻量级Web应用框架,它的优点是灵活、易扩

如何使用python+Flask实现日志在web网页实时更新显示如何使用python+Flask实现日志在web网页实时更新显示May 17, 2023 am 11:07 AM

一、日志输出到文件使用模块:logging可以生成自定义等级日志,可以输出日志到指定路径日志等级:debug(调试日志)=5){clearTimeout(time)//如果连续10次获取的都是空日志清除定时任务}return}if(data.log_type==2){//如果获取到新日志for(i=0;i

Flask和Intellij IDEA集成: Python web应用程序开发技巧(第二部分)Flask和Intellij IDEA集成: Python web应用程序开发技巧(第二部分)Jun 17, 2023 pm 01:58 PM

在第一部分介绍了基本的Flask和IntellijIDEA集成、项目和虚拟环境的设置、依赖安装等方面的内容。接下来我们将继续探讨更多的Pythonweb应用程序开发技巧,构建更高效的工作环境:使用FlaskBlueprintsFlaskBlueprints允许您组织应用程序代码以便于管理和维护。Blueprint是一个Python模块,能够包

Flask-RESTful和Swagger: Python web应用程序中构建RESTful API的最佳实践(第二部分)Flask-RESTful和Swagger: Python web应用程序中构建RESTful API的最佳实践(第二部分)Jun 17, 2023 am 10:39 AM

Flask-RESTful和Swagger:Pythonweb应用程序中构建RESTfulAPI的最佳实践(第二部分)在上一篇文章中,我们探讨了如何使用Flask-RESTful和Swagger来构建RESTfulAPI的最佳实践。我们介绍了Flask-RESTful框架的基础知识,并展示了如何使用Swagger来构建RESTfulAPI的文档。本

Flask和Sublime Text集成: Python web应用程序开发技巧(第六部分)Flask和Sublime Text集成: Python web应用程序开发技巧(第六部分)Jun 17, 2023 pm 04:08 PM

Flask和SublimeText集成:Pythonweb应用程序开发技巧(第六部分)SublimeText和Flask都是Pythonweb应用程序开发中的重要工具。然而,如何将二者集成起来,使得开发过程更加高效呢?本文将介绍一些SublimeText的插件和配置技巧,帮助你更方便地开发Flask应用程序。一、安装SublimeText插件F

Flask和Eclipse集成: Python web应用程序开发技巧(第三部分)Flask和Eclipse集成: Python web应用程序开发技巧(第三部分)Jun 17, 2023 pm 03:27 PM

Flask和Eclipse集成:Pythonweb应用程序开发技巧(第三部分)在前两篇文章中,我们介绍了如何将Flask与Eclipse集成,以及如何创建Flask应用程序。在本文中,我们将继续探讨如何开发和调试Flask应用程序,以及如何管理数据库。一、开发和调试Flask应用程序创建和运行Flask应用程序在Eclipse的ProjectExplo

Flask-Security: 在Python web应用程序中添加用户身份验证和密码加密Flask-Security: 在Python web应用程序中添加用户身份验证和密码加密Jun 17, 2023 pm 02:28 PM

Flask-Security:在Pythonweb应用程序中添加用户身份验证和密码加密随着互联网的不断发展,越来越多的应用程序需要用户身份验证和密码加密来保护用户数据的安全性。而在Python语言中,有一个非常流行的Web框架——Flask。Flask-Security是基于Flask框架的一个扩展库,它可以帮助开发人员在Pythonweb应用程序中轻

Python Flask JinJa2语法如何使用Python Flask JinJa2语法如何使用May 16, 2023 am 09:19 AM

一、概述Flask是一个轻量级的PythonWeb框架,支持Jinja2模板引擎。Jinja2是一个流行的Python模板引擎,它可以使用Flask来创建动态Web应用程序。web页面一般需要html、css和js,可能最开始学习pythonweb的时候可能这样写:fromflaskimportFlaskapp=Flask(__name__)@app.route(&#39;/&#39;)defhello():return&#39;hellohelloworld!!!&am

See all articles

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
2 周前By尊渡假赌尊渡假赌尊渡假赌
仓库:如何复兴队友
4 周前By尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒险:如何获得巨型种子
4 周前By尊渡假赌尊渡假赌尊渡假赌

热工具

PhpStorm Mac 版本

PhpStorm Mac 版本

最新(2018.2.1 )专业的PHP集成开发工具

Dreamweaver Mac版

Dreamweaver Mac版

视觉化网页开发工具

SecLists

SecLists

SecLists是最终安全测试人员的伙伴。它是一个包含各种类型列表的集合,这些列表在安全评估过程中经常使用,都在一个地方。SecLists通过方便地提供安全测试人员可能需要的所有列表,帮助提高安全测试的效率和生产力。列表类型包括用户名、密码、URL、模糊测试有效载荷、敏感数据模式、Web shell等等。测试人员只需将此存储库拉到新的测试机上,他就可以访问到所需的每种类型的列表。

DVWA

DVWA

Damn Vulnerable Web App (DVWA) 是一个PHP/MySQL的Web应用程序,非常容易受到攻击。它的主要目标是成为安全专业人员在合法环境中测试自己的技能和工具的辅助工具,帮助Web开发人员更好地理解保护Web应用程序的过程,并帮助教师/学生在课堂环境中教授/学习Web应用程序安全。DVWA的目标是通过简单直接的界面练习一些最常见的Web漏洞,难度各不相同。请注意,该软件中

MinGW - 适用于 Windows 的极简 GNU

MinGW - 适用于 Windows 的极简 GNU

这个项目正在迁移到osdn.net/projects/mingw的过程中,你可以继续在那里关注我们。MinGW:GNU编译器集合(GCC)的本地Windows移植版本,可自由分发的导入库和用于构建本地Windows应用程序的头文件;包括对MSVC运行时的扩展,以支持C99功能。MinGW的所有软件都可以在64位Windows平台上运行。