利用Flask-AppBuilder 快速构建Web后台管理应用

最新推荐文章于 2025-06-08 09:20:41 发布

秋天要到了

最新推荐文章于 2025-06-08 09:20:41 发布

阅读量1.2k

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/qq_43680030/article/details/84033824

本文档介绍了如何使用Flask-AppBuilder快速构建Web后台管理应用，涵盖了从安装、创建项目到配置数据库、认证方式、主题设置等步骤。通过实例展示了BaseView和ModelView的用法，以及如何自定义页面和菜单。实验总结了关键知识点，包括路由、模板渲染、数据库模型和视图的定义。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

分享一下我老师大神的人工智能教程！零基础，通俗易懂！http://blog.youkuaiyun.com/jiangjunshow

也欢迎大家转载本篇文章。分享知识，造福人民，实现我们中华民族伟大复兴！

快速构建 Web 后台管理应用

一、实验介绍

1.1 实验内容

本次实验将学习如何利用Flask-AppBuilder快速生成项目结构，以及基本配置。

1.2 实验知识点

认识Flask-AppBuilder
使用命令行接口快速生成项目结构
Flask-AppBuilder的基本配置
Flask-AppBuilder BaseView的基本用法
Flask-AppBuilder ModelView的基本用法

1.3 实验环境

python 3.5.2
Xfce终端

1.4 适合人群

本课程难度为初级，适合具有Python、Flask、SQLAlchemy基础的同学。

二、实验基础

2.1 Flask-AppBuilder介绍

Flask-AppBuilder是基于Flask实现的一个用于快速构建Web后台管理系统的简单的框架。主要用于解决构建Web后台管理系统时避免一些重复而繁琐的工作，提高项目完成时间，它可以和 Flask/Jinja2自定义的页面进行无缝集成，并且可以进行高级的配置。这个框架还集成了一些CSS和JS库，包括以下内容：

Google charts CSS and JS
BootStrap CSS and JS
BootsWatch Themes
Font-Awesome CSS and Fonts

三、开发准备

3.1 安装Flask-AppBuilder

在正式开发之前，首先我们要安装Flask-AppBuilder。打开XFce终端，输入如下命令：

shiyanlou:~/ $ sudo pip3 install flask-appbuilder

安装完成之后会自动为我们安装所需依赖，效果如下图所示：

此处输入图片的描述

3.2 创建项目目录

现在我们创建一个目录，之后的操作都在这个目录中进行:

shiyanlou:~/ $ mkdir projectshiyanlou:~/ $ cd project

此处输入图片的描述

四、项目文件结构

我们的项目结构如下：

此处输入图片的描述

其中app目录下存放我们Web应用的相关脚本文件，babel存放国际化相关配置和导出的翻译字符串。根目录下则存放着Web应用的配置脚本和主脚本文件。

五、实验步骤

5.1 生成项目文件

利用Flask-AppBuilder的命令行管理工具(fabmanager)可以很方便的生成项目的基本目录结构以及一些相关的文件和代码:

shiyanlou:project/ $ fabmanager create-appYour new app name: umsYour engine type, SQLAlchemy or MongoEngine [SQLAlchemy]:Downloaded the skeleton app, good coding!

命令执行后会提示我们输入app名称，随便起一个名字就可以。接下来要求选择orm引擎类型，默认是SQLAlchemy。也可以选择MongoEngine，但必须安装'flask-mongoengine'，这里我们使用'SQLAlchemy'，直接回车就可以了。效果如下图所示：

项目结构文件放在实验楼的服务器中，如果有的同学无法连接外网，则可以直接从以下链接下载：

wget http://labfile.oss.aliyuncs.com/courses/870/Flask-AppBuilder-Skeleton-master.zip

之后在当前目录下解压zip文件，并将文件夹名字改为项目名称：

unzip Flask-AppBuilder-Skeleton-master.zipmv Flask-AppBuilder-Skeleton-master ums

此处输入图片的描述

现在我们的项目结构就自动生成了。同学们可以看一下自己的目录结构，对比一下是不是和上面的结构一样。

5.2 创建管理用户

fabmanager还可以快速的创建管理用户：

shiyanlou:project/ $ cd umsshiyanlou:ums/ $ fabmanager create-adminUsername [admin]:User first name [admin]:User last name [user]:Email [admin@fab.org]:Password:Repeat for confirmation:

此处输入图片的描述

至此，fabmanager已经替我们完成了一个基本的Web后台管理系统，稍后我们将运行生成的代码。

5.3 运行脚本

我们可以通过fabmanager来运行生成的脚本：

shiyanlou:ums/ $ fabmanager run

也可以通过Python解释器来运行项目根目录下的run.py文件：

shiyanlou:ums/ $ python3 run.py

此处输入图片的描述

之后开发服务器将在http://localhost:8080 运行。打开火狐浏览器，在地址栏输入http://localhost:8080，就会看到Flask-AppBuilder自动为我们生成的页面。用之前我们生成的管理员账户登陆就可以进入到Web的后台管理界面：

此处输入图片的描述

在导航栏中Flask-AppBuilder为我们自动生成了Security菜单，子菜单中包括了一些用户、角色、视图、菜单、权限等相关操作。

导航栏右侧还包含了语言菜单，可以选择7个国家的语言，不过当我们自己增加代码后，就需要使用Flask-Babel进行国际化翻译，在课程的后面我会详细讲解。

5.4 基本配置

Flask-AppBuilder具有高度的灵活性，可以通过配置项目根目录下config.py文件来实现我们想要的需求，下面讲解一些常用的配置，更详细的内容请参考官方文档(Flask-AppBuilder基本配置)：

5.4.1 数据库配置

如果使用SQLAlchemy可以通过配置SQLALCHEMY_DATABASE_URI的值来指定数据库连接。如果使用Mongdb可以配置MONGODB_SETTINGS的值。默认使用Sqlite数据库，SQLALCHEMY_DATABASE_URI的值为'sqlite:///' + os.path.join(basedir, 'app.db')。

5.4.1 认证方式配置

Flask-Appbuilder可以通过配置AUTH_TYPE来指定应用使用的认证方式。

AUTH_TYPE = 0 | 1 | 2 | 3 | 4或AUTH_TYPE = AUTH_OID, AUTH_DB,AUTH_LDAP, AUTH_REMOTE AUTH_OAUTH。默认使用AUTH_DB的认证方式。

5.4.2 主题配置

Flask-AppBuilder集成了bootwatch，只需要配置APP_THEME的值就可以改变应用的主题风格。下面是config.py文件中可供选择的主题：

#APP_THEME = "bootstrap-theme.css"  # default bootstrap#APP_THEME = "cerulean.css"#APP_THEME = "amelia.css"#APP_THEME = "cosmo.css"#APP_THEME = "cyborg.css"  #APP_THEME = "flatly.css"#APP_THEME = "journal.css"#APP_THEME = "readable.css"#APP_THEME = "simplex.css"#APP_THEME = "slate.css"   APP_THEME = "spacelab.css"#APP_THEME = "united.css"#APP_THEME = "yeti.css"

把不使用的主题注释掉，这里我们使用APP_THEME = "spacelab.css"这项，重新运行开发服务器看一下效果：

此处输入图片的描述

可以看到页面的主题风格变了，是不是很方便呢？至此，我们这节实验的内容就讲完了。

5.5 基础视图

5.5.1 BaseView

BaseView是视图中的基类，所有的视图都继承自它。当我们定义一个继承自BaseView的子类时，BaseView自动将我们用@exposed修饰的urls注册为Flask中的蓝图。

我们可以通过BaseView来实现自定义页面，并添加到菜单上或者通过一个连接来访问它。这里需要注意，作为路由的方法一定要用@exposed修饰，如果需要保护的路由则需要额外使用@has_access修饰。

现在我们来看一个小例子，通常我们使用F.A.B.框架都使用自动生成的项目结构，这样我们只需要在app目录下的views.py 文件中修改代码即可。下面我们来看一个简单例子：

from flask_appbuilder import AppBuilder, expose, BaseViewfrom app import appbuilderclass MyView(BaseView):    route_base = "/myview"    @expose('/hello/')    def hello(self):        return 'Hello World!'    @expose('/message/<string:msg>')    def message(self, msg):        msg = 'Hello %s' % (msg)        return msgappbuilder.add_view_no_menu(MyView())

在这个代码中我们在ums/app/views.py中定义了一个BaseView的子类，同时注册了两个路由，在最后一行添加了视图，但是没有创建菜单。其中route_base用于自定义相对路径的url。我们可以通过如下urls来测试我们实现的两个路由：

这里需要注意一点就是在访问urls的时候，一定要将视图的名字作为路由的前缀！

此处输入图片的描述

你会发现，这些方法都是公开的，为了只让登陆用户可以看到，我们为上面的两个方法用@has_access修饰，修改ums/app/views.py：

from flask_appbuilder import AppBuilder, expose, BaseViewfrom app import appbuilderfrom flask_appbuilder import has_accessclass MyView(BaseView):    default_view = 'hello'    @expose('/hello/')    @has_access    def hello(self):        return 'Hello World!'