flask-admin学习笔记

近期在工作中需要维护若干个信息表，在这个过程中需要经常对表格进行操作、交叉操作、各个表格同步，和某平台信息同步。。。在此过程中需要建立一个“隐性”的流程，要第一步同步A和B，再同步B和C，。。。而检索更是痛苦，更夸张的是，有时候需要根据不同的需求，将表格的某一些部分拷贝出来。。。

这可能是一个数据库（甚至是数据系统）的操作，不可否认可以通过其它N个方案实现，但是为了满足笔者这种web前后端菜鸟学习的欲望，还是发现了这个小小的项目，在里面找到一个相对比较简单和功能丰富的示例完成这个需求。

需求：

1. 基本操作：要即时更新，删除，增加，修改记录；
2. 要可以对表格进行任意搜索；
3. 通过根据选择导出表格为Excel；
4. 几个表格之间能够实现联结搜索；
5. 可以将原来表格中的信息导入到web数据库表中；
6. 导出按钮优化
7. 如何调整列的宽度；

安装

该项目来自https://github.com/flask-admin/flask-admin.git。

首先下载该项目：

git clone https://github.com/flask-admin/flask-admin.git
cd flask-admin

然后在VS Code里打开下载到的项目目录，接下来需要创建一个虚拟环境。笔者现在用的是Python3.11版本，创建虚拟环境用的是venv命令。在VS Code里打开终端—新建终端，输入以下命令，表示在当前项目下(flask-admin)创建一个名为flask_admin_venu的虚拟环境。

python -m venv .\flask_admin_venu

接下来激活这个虚拟环境。

 .\flask_admin_venu\Scripts\activate

这时候你的目录前面会出现。

(flask_admin_venu) PS E:....

这样可以在这个虚拟环境下，安装该项目必须的一些包。在这里为了实现这个需求，选择的是examples\custom-layout目录下的这个子项目。首先安装这个项目需要的一些必须安装包。

cd .\examples\custom-layout\
pip install -r .\requirements.txt

然后是经过1，2分钟的安装过程，一堆的package会补充安装到虚拟环境里。

Collecting Flask
  Downloading Flask-2.2.2-py3-none-any.whl (101 kB)
     ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 101.5/101.5 kB 729.9 kB/s eta 0:00:00
Collecting Flask-Admin
  Downloading Flask-Admin-1.6.0.tar.gz (6.6 MB)
     ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 6.6/6.6 MB 5.6 MB/s eta 0:00:00
  Preparing metadata (setup.py) ... done
Collecting Flask-SQLAlchemy
  Downloading Flask_SQLAlchemy-3.0.2-py3-none-any.whl (24 kB)
Collecting Werkzeug>=2.2.2
  Downloading Werkzeug-2.2.2-py3-none-any.whl (232 kB)
     ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 232.7/232.7 kB 13.9 MB/s eta 0:00:00
Collecting Jinja2>=3.0
  Downloading Jinja2-3.1.2-py3-none-any.whl (133 kB)
     ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 133.1/133.1 kB 7.7 MB/s eta 0:00:00
Collecting itsdangerous>=2.0
  Downloading itsdangerous-2.1.2-py3-none-any.whl (15 kB)
Collecting click>=8.0
  Downloading click-8.1.3-py3-none-any.whl (96 kB)
     ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 96.6/96.6 kB 1.8 MB/s eta 0:00:00
Collecting wtforms
  Downloading WTForms-3.0.1-py3-none-any.whl (136 kB)
     ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 136.5/136.5 kB 4.1 MB/s eta 0:00:00
Collecting SQLAlchemy>=1.4.18
  Downloading SQLAlchemy-1.4.44-cp311-cp311-win_amd64.whl (1.6 MB)
     ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 1.6/1.6 MB 7.7 MB/s eta 0:00:00
Collecting colorama
  Downloading colorama-0.4.6-py2.py3-none-any.whl (25 kB)
Collecting MarkupSafe>=2.0
  Downloading MarkupSafe-2.1.1.tar.gz (18 kB)
  Preparing metadata (setup.py) ... done
Collecting greenlet!=0.4.17
  Downloading greenlet-2.0.1-cp311-cp311-win_amd64.whl (191 kB)
     ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 191.2/191.2 kB 11.3 MB/s eta 0:00:00
Installing collected packages: MarkupSafe, itsdangerous, greenlet, colorama, wtforms, Werkzeug, SQLAlchemy, Jinja2, click, Flask, Flask-SQLAlchemy, Flask-Admin
  DEPRECATION: MarkupSafe is being installed using the legacy 'setup.py install' method, because it does not have a 'pyproject.toml' and the 'wheel' package is not installed. pip 23.1 will enforce this behaviour change. A possible replacement is to enable the '--use-pep517' option. Discussion can be found at https://github.com/pypa/pip/issues/8559
  Running setup.py install for MarkupSafe ... done
  DEPRECATION: Flask-Admin is being installed using the legacy 'setup.py install' method, because it does not have a 'pyproject.toml' and the 'wheel' package is not installed. pip 23.1 will enforce this behaviour change. A possible replacement is to enable the '--use-pep517' option. Discussion can be found at https://github.com/pypa/pip/issues/8559
  Running setup.py install for Flask-Admin ... done
Successfully installed Flask-2.2.2 Flask-Admin-1.6.0 Flask-SQLAlchemy-3.0.2 Jinja2-3.1.2 MarkupSafe-2.1.1 SQLAlchemy-1.4.44 Werkzeug-2.2.2 click-8.1.3 colorama-0.4.6 greenlet-2.0.1 itsdangerous-2.1.2 wtforms-3.0.1

[notice] A new release of pip available: 22.3 -> 22.3.1
[notice] To update, run: python.exe -m pip install --upgrade pip

请注意中间有两个警告，因为新版本的处理策略，其中两个的安装方法被强制改变了。另外也要注意最后这句，是要求将pip升级到最新版本，只需要复制这句命令运行一下即可。

python.exe -m pip install --upgrade pip
Requirement already satisfied: pip in e:\003_programlanguage\flask-admin\flask_admin_venu\lib\site-packages (22.3)
Collecting pip
  Using cached pip-22.3.1-py3-none-any.whl (2.1 MB)
Installing collected packages: pip
  Attempting uninstall: pip
    Found existing installation: pip 22.3
    Uninstalling pip-22.3:
      Successfully uninstalled pip-22.3
Successfully installed pip-22.3.1

现在我们在VS Code中打开，examples\custom-layout\app.py，这个文件。现在点击Run来运行它，初次运行，除了会初始化数据库，同时在终端窗口，也会出现这句话：

* Running on http://127.0.0.1:5000

这表示服务启动成功了，我们打开一个浏览器，输入这个网址：http://127.0.0.1:5000，这表示启动成功，打开了这个web的首页。它的admin页如下图第二幅。

在这个默认的布局里，提供了User, Page两个表格，用起来其实很方便，可以即时修改，增加，删除这些记录：

在搜索和筛选功能上，上图的右上角的一些菜单功能也完美送上。这些在代码里都可以轻松实现一些字段的选择。

    can_export = True
    # can_delete = False
    # column_list不指定列，则会显示所有列
    column_list = ('lang', 'score', 'name', 'duration', 'update_date')
    column_searchable_list = ('name', 'lang')
    column_filters = ('name', 'lang')
    column_editable_list = ['lang', 'score', 'name', 'duration']
    can_view_details = True
    column_labels = dict(
        lang='语言', score='得分',
        name='姓名', duration='时长'
    )
    column_export_list = ('lang', 'score', 'name', 'duration', 'update_date')

其实flask-admin定义了很多可以选择调整的参数，这里仅是一些基本的。can_export，意味着可以导出为一个csv表格；这里有一个比较尴尬的小问题就是导出来的csv里如果有汉字，直接用excel打开这个文件是乱码，但是如果先用notepad打开，再拷贝到excel里是正常的，这个问题暂时没有解决。
column_list这里是指定显示哪些字段出来，如果不写，默认显示表格的所有字段；column_search_list这里是指右上角搜索这里可以搜索哪些字段的内容；column_filters是指筛选功能里可进行筛选的字段，这个筛选其实功能是挺强大的，这里面设置了这么多可以直接使用(常用)的选项。

column_editable_list是指直接在页面字段上进行编辑的功能，使用起来也是非常的方便。

column_labels是可以将字段在数据表中的字段名，转化为直观的名字显示，另外就是也可以通过column_export_list设置能导出的字段，如果没有这个选项，默认导出所有字段。而且有一个更巧妙的功能就是，在前面选择了搜索，或者筛选之后的结果，是和导出功能紧密绑定的。

通过flask-admin已经能够实现了大部分的表格功能。现在还有一个问题是如果之前已经有了大量信息的表格，想将这些信息导入到数据库中，而不是通过新建数据库表，再重新输入的方式，这就利用到了panda导入excel，另外该项目也有一个默认的build_sample_db函数，这个函数也可以将这些信息新写入一个数据库表，省去新建，和输入数据的烦恼。具体代码可参见这个函数的相关实现。

该项目经过二次修改的代码地址：
https://github.com/feelins/flask-admin.git

最后有几个小问题仍然有待于解决：

1. 几个表格之间能够实现联结搜索；
2. 导出按钮优化
3. 如何调整列的宽度；

这一点的体会就是作为一个前后端半分离的项目，在这个修改上确实还需要再想想办法。