Flask + Pear Admin Layui 快速开发管理后台

框架介绍

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 项目

bash 复制代码

# 初始化项目
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, 需要修改下面几处设置:

yaml 复制代码

## 网站配置
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 复制代码

<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 | api
            admin.setConfigurationPath("{{ url_for('static', filename='config/pear.config.yml') }}");
	</script>
</body>
</html>

创建一个单独的 Blueprint admin.py 用于为 Pear Admin 提供配置中所需的数据, 数据格式可以直接从 Pear Admin 解压后的 admin/data 文件夹中找到作为参考.

python 复制代码

from flask import Blueprint, jsonify, render_template

bp = 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! 😁