发布于 2026-01-06 1 阅读
0

Flask 仪表盘 - 渐变设计

Flask 仪表盘 - 渐变设计

各位程序员好,

本文旨在帮助初学者快速上手 Flask 这个广受欢迎的 Python 框架,通过构建和编写基于开源入门项目Flask Gradient Able 的简单任务来实现。该项目可直接从 GitHub 下载,并可用于商业项目(MIT 许可证)。



对于新手来说,Flask是一个用 Python 编写的轻量级 Web 应用框架。Flask 有时也被归类为微框架,它提供了一个轻量级的代码库,可以轻松扩展为 API、简单的 Web 应用或复杂的电子商务平台。


Flask Dashboard Gradientable - 使用 Flask 编写的开源管理仪表盘。


这个基于优秀 UI 套件编写、并以 MIT 许可证发布的 Flask 入门项目,可用于各种业余和商业产品。此外,其代码库简洁易懂,尤其适合初学者等主要用户群体。其他特性:


  • UI 工具包:渐变仪表盘(免费版)
  • 使用蓝图编写的模块化代码库
  • SQLite/PostgreSQL 数据库、ORM、用于数据库迁移的 Alembic
  • 基于会话的身份验证、基本表单验证
  • 部署脚本:Docker、Gunicorn / Nginx

如果您喜欢这个简单的 Flask 入门项目,我们可以使用终端和一些基本命令来构建它。该应用程序使用 Python 3 编写,因此要成功构建,我们需要在工作站上正确安装 Python 3 解释器。如果您不确定,请打开您常用的终端并输入:

$ python -V
Python 3.7.2 <--- All good
Enter fullscreen mode Exit fullscreen mode

如果python version检查返回3.x版本号,那就一切正常。

让我们克隆源代码

如前所述,该应用程序已发布在 Github 上,我们可以clone使用命令行工具查看代码GIT,或者直接下载 ZIP 压缩包。

$ # Get the code
$ git clone https://github.com/app-generator/flask-dashboard-gradientable.git
$ cd flask-dashboard-gradientable
Enter fullscreen mode Exit fullscreen mode

克隆/复制源代码后,我们需要安装requirements.txt文件中列出的应用程序依赖项。

$ # Install modules - SQLite Database
$ pip3 install -r requirements.txt
Enter fullscreen mode Exit fullscreen mode

下一步是设置FLASK_APP变量的值,这样就一切就绪了。

$ # Set the FLASK_APP environment variable
$ (Unix/Mac) export FLASK_APP=run.py
$ (Windows) set FLASK_APP=run.py
$ (Powershell) $env:FLASK_APP = ".\run.py"
$
$ # Start the application (development mode)
$ # --host=0.0.0.0 - expose the app on all network interfaces (default 127.0.0.1)
$ # --port=5000    - specify the app port (default 5000)  
$ flask run --host=0.0.0.0 --port=5000
$
$ # Access the dashboard in browser: http://127.0.0.1:5000/
Enter fullscreen mode Exit fullscreen mode

如果一切顺利,通过浏览器访问控制面板,我们应该会看到登录界面:

Flask Dashboard Gradientable - 登录页面。

默认情况下,此 Flask starter 没有配置默认用户,要通过身份验证并访问私有页面,我们需要先使用注册页面创建一个新用户。

登录后,我们应该能够访问仪表盘页面:

主仪表盘页面

Flask Dashboard Gradientable - 主仪表盘页面。

谷歌地图页面

Flask Dashboard Gradientable - 主仪表盘页面。

用户界面表格

Flask 仪表盘渐变色 - UI 表格页面。


代码库结构

该项目采用蓝图、应用工厂模式、双配置配置文件(开发和生产)以及如下所示的直观结构进行编码:

< PROJECT ROOT >
   |
   |-- app/                      # Implements app logic
   |    |-- base/                # Base Blueprint - handles the authentication
   |    |-- home/                # Home Blueprint - serve UI Kit pages
   |    |
   |   __init__.py               # Initialize the app
   |
   |-- requirements.txt          # Development modules - SQLite storage
   |-- requirements-mysql.txt    # Production modules  - Mysql DMBS
   |-- requirements-pqsql.txt    # Production modules  - PostgreSql DMBS
   |
   |-- .env                      # Inject Configuration via Environment
   |-- config.py                 # Set up the app
   |-- run.py                    # Start the app - WSGI gateway
   |
   |-- ************************************************************************
Enter fullscreen mode Exit fullscreen mode

应用程序如何启动

  • run.py加载.env文件
  • 使用指定的配置文件初始化应用程序:调试或生产环境。
    • 如果将 env.DEBUG 设置为True,则使用 SQLite 存储。
    • 如果将 env.DEBUG 设置为False ,则使用指定的数据库驱动程序(MySQL、PostgreSQL)。
  • create_app调用app/init.py 中定义的应用程序工厂方法。
  • 将访客用户重定向到登录页面
  • 为已认证用户解锁 HOME 蓝图提供的页面

应用部署

该启动器配备了针对Docker的基本部署增强功能。要在 Docker 容器中启动应用程序,我们需要在终端中输入一行命令(以下提供的是适用于 Linux 发行版的命令):

$ sudo docker-compose pull && sudo docker-compose build && sudo docker-compose up -d
Enter fullscreen mode Exit fullscreen mode

如果一切顺利,我们应该可以通过访问以下网址在浏览器中看到该应用程序正在运行http://localhost:5005


感谢阅读!更多资源,请访问:

文章来源:https://dev.to/sm0ke/flask-dashboard-gradientable-design-coded-in-flask-3174