框架介紹
Flask 就不用過多介紹了, Pear Admin Layui 是基于 Layui 的一套管理后臺前端開源模板, 主打一個開箱即用, 對于不喜歡 React/Vue 等這些還需要大量學習成本的前端開發者來說, 可以說是相當友好了.
項目官網: https://gitee.com/pear-admin/pear-admin-layui
項目的作者其實也提供了 Flask 集成的項目 Pear Admin Flask, 其中包含了相當豐富的功能, 涵蓋了用戶, 權限, 角色, 日志等管理的場景, 如果是進行大型復雜項目開發, 可以考慮基于此項目直接二次開發. 不過對于一些小型的簡單項目, 其實用不到這么復雜的功能, 反而是直接基于純前端的模板自己用 Flask 搓更靈活.
本文假設你已經精通使用 Flask 開發 Hello World 應用的流程, 主要介紹基于 Pear Admin Layui 純前端模板, 使用 Flask 實現模板所需的主要路由, 開發一個簡單的博客管理后臺的過程.
項目已在 Gitee 開源: https://gitee.com/lpwm/pear-blog
另外, 由于 Pear Admin 官網目前還沒修好, 可以自行 Clone 官網的 倉庫 (兩年多沒更新了, 后來新增的一些功能沒有介紹), 或者訪問:
臨時官網文檔
自建鏡像站
項目準備
使用 uv 進行項目的管理. 如果你還沒有體驗過 uv 的強大, 快速入門見前文 使用 uv 管理 Python 項目
# 初始化項目
uv init pear-blog && cd pear-blog# 添加依賴 (會自動創建 .venv 文件夾)
uv add flask# 查看依賴樹, 均是各個輪子最新的版本
uv tree -d 1
Resolved 17 packages in 1ms
pear-blog v0.1.0
└── flask v3.1.0# 初始化 Flask 文件夾結構
mkdir {templates,static,views}
此時項目的主體框架就準備好了, 把 uv 初始化的 main.py 改一下名字 app.py. 完成后的項目文件夾內張這樣子:
./
├── .git/
├── .venv/
├── static/
├── templates/
├── views/
├── .gitignore
├── .python-version
├── LICENSE
├── README.md
├── app.py
├── pyproject.toml
└── uv.lock
接下來整合 Pear Admin Layui 模板, 首先下載壓縮包, 本文使用版本為 4.0.5
https://gitee.com/pear-admin/pear-admin-layui/archive/refs/tags/4.0.5.zip
解壓后將 admin/css, component, config 三個文件夾復制到 Flask 項目的 static 靜態文件夾中. 刪除 config/pear.config.json 我們后面使用 yml 格式的配置文件(能注釋更方便). 完成后的 static 文件夾里面現在張這樣:
static/
├── component/
│ ├── layui/
│ └── pear/
├── config/
│ └── pear.config.yml
└── css/├── admin.css├── admin.dark.css├── other/├── reset.css└── variables.css
至此, 項目基本準備工作已經就緒, 后面我們還會繼續用到 Pear Admin Layui 解壓后的 HTML 模板, 不過就是挑著來了, 用到哪個就復制到 Flask 項目的 templates 文件夾中.
Pear Admin 框架必備路由
鑒于你已經精通使用 Flask 開發 Hello World 應用的流程, 這里就不再贅述基礎的 Flask 開發過程, 主要整理 Pear Admin 框架需要用到的幾個路由需要返回的響應數據格式, 同時還需要注意調整前端框架中的配置文件以及 HTML 模板中對應資源的引用路徑.
首先來看框架配置文件 /static/config/pear.config.yml, 需要修改下面幾處設置:
## 網站配置
logo: ## 網站圖標, 替換成靜態文件對應的路徑image: "/static/images/logo.png"
menu: ## 菜單數據, 替換為路由data: "/admin/menu"## 默認選中的菜單項select: "1"
## 視圖內容配置
tab: ## 首頁index: id: "1" ## 標識 ID , 建議與菜單項中的 ID 一致href: "/admin/home" ## 頁面地址, 替換為路由title: "首頁" ## 標題
header:## 站內消息，通過 false 設置關閉message: "/admin/message"
修改首頁模板中對靜態資源引用的路徑:
<html>
<head><title>Pear Admin 4.0</title><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"><link rel="stylesheet" href="{{ url_for('static', filename='component/pear/css/pear.css') }}" /><link rel="stylesheet" href="{{ url_for('static', filename='css/admin.css') }}" /><link rel="stylesheet" href="{{ url_for('static', filename='css/admin.dark.css') }}" /><link rel="stylesheet" href="{{ url_for('static', filename='css/variables.css') }}" /><link rel="stylesheet" href="{{ url_for('static', filename='css/reset.css') }}" />
</head><body><!-- 依 賴 腳 本 --><script src="{{ url_for('static', filename='component/layui/layui.js') }}"></script><script src="{{ url_for('static', filename='component/pear/pear.js') }}"></script><script>layui.use(['admin', 'jquery', 'popup'], function () {var admin = layui.admin;var popup = layui.popup;var $ = layui.jquery;// yml | json | apiadmin.setConfigurationPath("{{ url_for('static', filename='config/pear.config.yml') }}");</script>
</body>
</html>
創建一個單獨的 Blueprint admin.py 用于為 Pear Admin 提供配置中所需的數據, 數據格式可以直接從 Pear Admin 解壓后的 admin/data 文件夾中找到作為參考.
from flask import Blueprint, jsonify, render_templatebp = Blueprint("admin", __name__, url_prefix="/admin")@bp.get("/")
def index_get():return render_template("admin/index.html")@bp.get("/menu")
def menu_get():data = [{"id": 1, # 菜單數據的唯一標識"title": "首頁", # 界面中所顯示的菜單標題"icon": "layui-icon layui-icon-console", # 顯示圖標"type": 1, # 0=目錄, 1=菜單"href": "/admin", # 菜單類型下訪問的頁面},{"id": 2,"title": "文章管理","icon": "layui-icon layui-icon-list","type": 0,"children": [{"id": 21,"title": "添加文章","icon": "layui-icon layui-icon-addition","type": 1,"openType": "_iframe", # 當 type 為 1 時，openType 生效，_iframe 正常打開 _blank 新建瀏覽器標簽頁"href": "/admin/article/add",},{"id": 22,"title": "數據分析","icon": "layui-icon layui-icon-console","type": 1,"openType": "_iframe","href": "/admin/article/analysis",},],},{"id": 3,"title": "外部鏈接","icon": "layui-icon layui-icon-chrome","type": 1,"openType": "_blank","href": "https://layui.dev",},]return jsonify(data)@bp.get("/message")
def message_get():data = {"code": 200,"data": [{"id": 1,"title": "通知","children": [{"id": 11,"avatar": "https://gw.alipayobjects.com/zos/rmsportal/ThXAXghbEsBCCSDihZxY.png","title": "你收到了 14 份新周報","context": "這是消息內容。","form": "就眠儀式","time": "剛剛",}],}],}return jsonify(data)@bp.get("/home")
def home_get():return "<h1>Home</h1>"@bp.get("/article/add")
def article_add_get():return "<h1>添加文章</h1>"@bp.get("/article/analysis")
def article_analysis_get():return "<h1>數據分析</h1>"效果演示
至此, 一個基本的管理后臺框架就搭建好了, 效果:
后續要做的就是在這個框架基礎上創建具體的頁面內容啦, 是不是 So easy! 😁
)
)