返回文章列表

Flask Admin 開發客製化管理介面

本文介紹如何使用 Flask-Admin 擴充套件,為 Flask 應用程式開發客製化的管理介面,包含 CRUD 操作、使用者管理、表單客製化、以及整合 WYSIWYG 編輯器等技巧,提升後端管理效率。

Web 開發 Python

Flask 框架本身並不提供內建的管理介面,但藉助 Flask-Admin 擴充套件,開發者可以快速建立功能完善的管理後台。Flask-Admin 不僅提供基本的 CRUD 操作介面,也允許高度客製化,例如欄位顯示、搜尋、排序、表單設計,以及整合第三方套件,滿足不同專案的管理需求。透過本文的實作步驟,可以有效提升後端開發效率,並精確掌控應用程式的資料與資源管理。

Flask 應用程式的管理介面

許多應用程式需要一個為特定使用者提供特殊許可權的介面,用於維護和升級應用程式的資源。例如,在電子商務應用程式中,可以有一個介面允許特殊使用者建立類別、產品等。有些使用者可能具有處理其他在網站購物的使用者帳戶資訊等的特殊許可權。同樣,在許多情況下,我們需要將應用程式介面的某些部分與普通使用者隔離。

簡介

與非常流行的根據 Python 的網頁框架 Django 相比,Flask 預設不提供任何管理介面。雖然許多人認為這是一個缺點,但這給開發者提供了根據需求建立管理介面的靈活性,並對應用程式擁有完全的控制權。

使用 Flask-Admin 擴充功能

我們可以選擇從頭開始為我們的應用程式撰寫管理介面,或使用 Flask 的擴充功能來完成大部分工作,並根據需要自定義邏輯。Flask-Admin 是一個非常流行的用於在 Flask 中建立管理介面的擴充功能。它受到 Django admin 的啟發,但實作方式讓開發者對應用程式的外觀和功能擁有完全的控制權。

本章涵蓋以下內容:

  • 建立簡單的 CRUD 介面
  • 使用 Flask-Admin 擴充功能
  • 向 Flask-Admin 註冊模型
  • 建立自定義表單和操作
  • 在 textarea 中使用 WYSIWYG 編輯器
  • 建立使用者角色

建立簡單的 CRUD 介面

CRUD 是指建立、讀取、更新和刪除。管理介面的基本需求是能夠根據需要建立、修改或刪除應用程式中的記錄或資源。我們將建立一個簡單的管理介面,允許管理員使用者對其他普通使用者無法操作的記錄執行這些操作。

準備工作

我們將從第 6 章「在 Flask 中驗證身份」中的「使用 Flask-Login 擴充功能驗證身份」配方中的驗證應用程式開始,並新增管理員驗證和管理介面,該介面只允許管理員使用者建立、更新和刪除使用者記錄。

操作步驟:

  1. 首先,在 auth/models.py 中的 User 模型中新增一個名為 adminBooleanField 欄位。此欄位將有助於識別使用者是否為管理員:
from wtforms import BooleanField

class User(db.Model):
    id = db.Column(db.Integer, primary_key=True)
    username = db.Column(db.String(100))
    pwdhash = db.Column(db.String())
    admin = db.Column(db.Boolean())

    def __init__(self, username, password, admin=False):
        self.username = username
        self.pwdhash = generate_password_hash(password)
        self.admin = admin

    def is_admin(self):
        return self.admin

內容解密:

  • admin 欄位用於標識使用者是否具有管理員許可權。
  • is_admin 方法傳回使用者的管理員狀態。
  1. auth/models.py 中建立兩個將被管理員檢視使用的表單:
class AdminUserCreateForm(FlaskForm):
    username = StringField('使用者名稱', [InputRequired()])
    password = PasswordField('密碼', [InputRequired()])
    admin = BooleanField('是否為管理員?')

class AdminUserUpdateForm(FlaskForm):
    username = StringField('使用者名稱', [InputRequired()])
    admin = BooleanField('是否為管理員?')

內容解密:

  • AdminUserCreateForm 用於建立新使用者,包含使用者名稱、密碼和管理員許可權設定。
  • AdminUserUpdateForm 用於更新現有使用者資訊,包含使用者名稱和管理員許可權設定。
  1. 修改 auth/views.py 中的檢視以實作管理介面:
from functools import wraps
from flask import abort
from my_app.auth.models import AdminUserCreateForm, AdminUserUpdateForm

def admin_login_required(func):
    @wraps(func)
    def decorated_view(*args, **kwargs):
        if not current_user.is_admin():
            return abort(403)
        return func(*args, **kwargs)
    return decorated_view

內容解密:

  • admin_login_required 修飾器確保只有管理員使用者可以存取特定的檢視。
  1. 建立以下處理函式,以實作簡單的管理介面。注意 @admin_login_required 修飾器的使用。所有處理函式都將位於 auth/views.py 中。
@auth.route('/admin')
@login_required
@admin_login_required
def home_admin():
    return render_template('admin-home.html')

@auth.route('/admin/users-list')
@login_required
@admin_login_required
def users_list_admin():
    users = User.query.all()
    return render_template('users-list-admin.html', users=users)

@auth.route('/admin/create-user', methods=['GET', 'POST'])
@login_required
@admin_login_required
def user_create_admin():
    form = AdminUserCreateForm()
    if form.validate_on_submit():
        # 處理表單提交邏輯
        pass
    return render_template('user-create-admin.html', form=form)

@auth.route('/admin/update-user/<id>', methods=['GET', 'POST'])
@login_required
@admin_login_required
def user_update_admin(id):
    user = User.query.get(id)
    form = AdminUserUpdateForm(username=user.username, admin=user.admin)
    if form.validate_on_submit():
        # 處理表單提交邏輯
        pass
    return render_template('user-update-admin.html', form=form, user=user)

內容解密:

  • home_adminusers_list_adminuser_create_adminuser_update_admin 分別處理管理首頁、使用者列表、管理員建立新使用者和管理員更新現有使用者的邏輯。

使用Flask-Admin擴充功能實作後台管理介面

簡介

Flask-Admin是一個強大的擴充功能,能夠幫助開發者快速建立後台管理介面。在本篇文章中,我們將介紹如何使用Flask-Admin來實作後台管理介面,以及如何註冊模型以進行CRUD操作。

安裝Flask-Admin

首先,我們需要安裝Flask-Admin擴充功能。可以使用pip命令進行安裝:

$ pip install Flask-Admin

基本設定

要使用Flask-Admin,需要在應用程式的設定檔中進行基本設定。在my_app/__init__.py檔案中新增以下程式碼:

from flask_admin import Admin
app = Flask(__name__)
# 其他應用程式設定
admin = Admin(app)

內容解密:

這段程式碼匯入了Flask-Admin的Admin類別,並將其例項化,傳入app物件。這樣就建立了一個基本的後台管理介面。

新增自定義檢視

可以新增自定義檢視來擴充後台管理介面。在auth/views.py檔案中新增以下程式碼:

from flask_admin import BaseView, expose
class HelloView(BaseView):
    @expose('/')
    def index(self):
        return self.render('some-template.html')

內容解密:

這段程式碼定義了一個名為HelloView的類別,繼承自BaseView。它包含一個index方法,使用@expose('/')裝飾器來指定URL路由。這個方法渲染了一個名為some-template.html的範本。

將自定義檢視新增到後台管理介面

需要在my_app/__init__.py檔案中將自定義檢視新增到後台管理介面:

import my_app.auth.views as views
admin.add_view(views.HelloView(name='Hello'))

內容解密:

這段程式碼匯入了HelloView類別,並將其新增到後台管理介面,名稱為"Hello"。

驗證和授權

預設情況下,Flask-Admin不提供驗證和授權功能。需要自行實作驗證邏輯。可以在HelloView類別中新增is_accessible方法:

def is_accessible(self):
    return current_user.is_authenticated and current_user.is_admin()

內容解密:

這段程式碼檢查目前使用者是否已登入且具有管理員許可權。如果是,則傳回True,否則傳回False

註冊模型

可以使用Flask-Admin來註冊模型,以便進行CRUD操作。在下一篇文章中,我們將介紹如何註冊模型。

圖表說明

@startuml
skinparam backgroundColor #FEFEFE
skinparam defaultTextAlignment center
skinparam rectangleBackgroundColor #F5F5F5
skinparam rectangleBorderColor #333333
skinparam arrowColor #333333

title 圖表說明

rectangle "使用" as node1
rectangle "建立" as node2
rectangle "包含" as node3
rectangle "驗證" as node4

node1 --> node2
node2 --> node3
node3 --> node4

@enduml

此圖示說明瞭Flask應用程式如何使用Flask-Admin建立後台管理介面,並包含自定義檢視和驗證邏輯。

Flask 應用程式的管理介面客製化

在開發 Flask 應用程式時,為管理介面新增客製化的功能是一個常見的需求。Flask-Admin 是一個強大的擴充套件,可以幫助開發者快速建立一個功能完善的管理介面。在本篇文章中,我們將介紹如何使用 Flask-Admin 來註冊模型、管理使用者資料、以及如何客製化表單和新增自定義動作。

註冊模型與管理介面

首先,我們需要註冊我們的模型到管理介面中。以下是一個簡單的例子,展示瞭如何將 User 模型新增到管理介面:

from flask_admin.contrib.sqla import ModelView

admin.add_view(ModelView(views.User, db.session))

然而,這種預設的實作方式可能會暴露一些敏感資訊,例如密碼雜湊值。因此,我們需要對其進行客製化。

客製化管理介面

為了隱藏密碼雜湊值並改進使用者建立機制,我們可以建立一個自定義的 UserAdminView 類別:

class UserAdminView(ModelView):
    column_searchable_list = ('username',)
    column_sortable_list = ('username', 'admin')
    column_exclude_list = ('pwdhash',)
    form_excluded_columns = ('pwdhash',)
    form_edit_rules = ('username', 'admin')

    def is_accessible(self):
        return current_user.is_authenticated and current_user.is_admin()

內容解密:

  • column_searchable_list:定義了可以在管理介面中搜尋的欄位。
  • column_sortable_list:定義了可以排序的欄位。
  • column_exclude_list:隱藏特定的欄位,在此例中是 pwdhash
  • form_excluded_columns:在表單中排除特定的欄位。
  • is_accessible:檢查目前使用者是否已登入且具有管理員許可權。

自定義表單與動作

接下來,我們將展示如何自定義表單以允許管理員更新使用者的密碼。

form_edit_rules = (
    'username', 'admin',
    rules.Header('Reset Password'),
    'new_password', 'confirm'
)

def scaffold_form(self):
    form_class = super(UserAdminView, self).scaffold_form()
    form_class.new_password = PasswordField('New Password')
    form_class.confirm = PasswordField('Confirm New Password')
    return form_class

def update_model(self, form, model):
    form.populate_obj(model)
    if form.new_password.data:
        if form.new_password.data != form.confirm.data:
            flash('Passwords must match')
            return
        model.pwdhash = generate_password_hash(form.new_password.data)
    self.session.add(model)
    self._on_model_change(form, model, False)
    self.session.commit()

內容解密:

  • form_edit_rules:定義了編輯表單的結構和欄位。
  • scaffold_form:動態地為模型建立表單類別,並新增了 new_passwordconfirm 欄位。
  • update_model:更新模型例項時,檢查新密碼是否比對,並更新密碼雜湊值。

使用 WYSIWYG 編輯器

最後,我們將介紹如何使用 CKEditor 將普通的 textarea 欄位轉換為所見即所得(WYSIWYG)編輯器。

首先,在 User 模型中新增一個 notes 欄位:

class User(db.Model):
    # ...
    notes = db.Column(db.Text())

然後,透過 JavaScript 程式函式庫和 CSS 類別,將 textarea 欄位轉換為 CKEditor 相容的編輯器。