Django仪表板

2025-05-26

Django仪表板

你好，程序员们，

本文提供了一份精选列表，其中包含Django 仪表板和模板，其中包含基本模块、数据库、身份验证和部署脚本，可帮助初学者快速启动新项目。

对于新手来说，Django是最受欢迎的基于 Python 的 Web 框架，最初发布于 2003 年。“内置电池”概念和专家提供的内置安全模式使Django成为现代 Web 开发中的参考框架。

👉 使用Django App Generator构建您的启动器并自定义：DB Tables，，，，，AuthAsync TasksDockerCI/Cd Scripts

Django App Generator - 选择设计
Django App Generator - 设计数据库

詹戈·达塔·阿布尔

Datta Able Bootstrap Lite 是市场上所有其他精简/免费管理模板中最具风格化的 Bootstrap 4 Lite 管理模板。它拥有功能丰富的页面和组件，并完全以开发人员为中心编写代码。

Datta Able（增强了黑暗模式）——由 AppSeed 生成的开源种子项目。

火箭姜戈 TailwindCSS

这款 Django Boilerplate 包含构建 SaaS、分析工具或任何其他类型 Web 应用所需的一切。从构思到实际生产，只需几分钟。

功能和技术堆栈：TailwindCSS• Flowbite• API（DRF）• Celery Beat• DataTables• Charts• Docker• CI/CD。

Django Rocket - 使用 Tailwind 设计的开源 Django Starter

Django Argon 仪表板

开源Django项目基于Argon Dashboard精心打造，是Creative-TimBootstrap 5的开源设计。

此入门套件附带一个代码库，该代码库使用可自定义主题的Argon UI（通过 PIP 安装），涵盖管理部分以及所有其他由 Django Auth 流程管理的页面。此外，无需任何额外操作或低级配置即可在Render上CI/CD进行设置。allows deploying LIVE the product

Argon Dashboard 2 - 开源 Django Starter。

软 UI 仪表板 Django

使用 Django 框架编写的管理面板。Soft UI Dashboard专为喜欢大胆元素和精美网站的用户设计，助您打造令人惊艳的网站和 Web 应用 -功能：

  • ✅Up-to-date Dependencies
  • ✅ UI Kit：Bootstrap 5
  • ✅ 基本身份验证，OAuth via Github
  • ✅ API 生成器模块-video presentation
  • ✅动态数据表-video presentation

软 UI 仪表板 - 由 AppSeed 生成的全栈启动器。

Django 材料套件

像素级完美的 Bootstrap 5 UI 套件，包含预建的设计模块、4 个示例页面和 50 多个 UI 组件。如果您想获得灵感，或者只是想直接向客户展示一些内容，可以使用我们预建的示例页面快速启动您的开发工作。

Material Kit - 由 AppSeed 生成的启动器。

Volt 仪表板 Django

Volt是一款免费开源的管理面板，基于Bootstrap 5开发，包含各种组件、页面和插件，可用于创建出色的管理界面。它还附带专业版，包含更多页面、插件和组件。

Volt Dashboard - 由 AppSeed 生成的全栈启动器。

Django 仪表板材料

Material Dashboard专为喜欢大胆元素和精美网站的用户而设计，助您打造令人惊艳的网站和 Web 应用。Material Dashboard 2 内置 60 多个前端独立元素，例如按钮、输入框、导航栏、导航标签、卡片或提醒，让您可以自由选择和组合。

Material Dashboard - 由 AppSeed 生成的全栈启动器。

亚特兰蒂斯黑暗姜戈

一个使用 Django 编写的现代深色主题仪表板。代码可在 Github 获取 - 更多信息请访问产品页面。Atlantis
Lite Dark 是一款免费的 Bootstrap 4 管理仪表板，设计精美优雅，可用于显示各种指标、数字或数据可视化。

Atlantis Dark - 由 AppSeed 生成的启动器。

Django Argon 仪表板

Argon Design 由Creative-Tim用 Django 编写。该入门版使用与之前项目相同的代码库，并通过 Github 和 Discord 提供支持。

Argon Dashboard 包含 100 多个独立组件，让您可以自由选择和组合。所有组件都可以采用不同的颜色，您可以使用 SASS 文件轻松修改，而且它是开源且免费的。

Argon Dashboard - 由 AppSeed 生成的启动器。

Django 黑色仪表板

Black Dashboard是一款精美的 Bootstrap 4 管理仪表板，它拥有大量精心设计的组件，可轻松组合，外观惊艳。它融合了赏心悦目的色彩、宽敞的卡片布局、精美的字体和图形。

Black Dashboard - 由 AppSeed 生成的全栈启动器。

共同特征：

  • 知名厂商积极支持的现代 UI 套件
  • UI 就绪、SQLite 数据库、Django 原生 ORM
  • 模块化设计，简洁的代码库
  • 基于会话的身份验证、表单验证
  • 部署脚本：Docker、Gunicorn/Nginx
  • 通过Github和Discord免费提供支持。

Django 是什么

Django 是一个由经验丰富的开发人员构建的高级 Python Web 框架，能够快速开发安全且易于维护的网站。该项目得到了一个强大的开源社区的积极支持和版本控制。

为什么使用 Django

成熟的框架

自 2008 年 9 月首次发布以来，Django 一直在不断改进。Django 秉承“Batteries Included”的理念，几乎提供了开发人员所需的所有“开箱即用”功能。由于您所需的一切都包含在一个“产品”中，因此所有功能都能无缝协作，遵循一致的设计原则，并拥有全面且最新的文档。

多才多艺的

Django 为您在项目中可能需要的几乎所有功能提供了选择（例如几个流行的数据库、模板引擎等），如果需要，它还可以扩展以使用其他组件。

安全

Django 内置了多种安全威胁防护机制，很好地解决了任何项目中至关重要的一个方面。Django 提供了一种安全的方式来管理用户账户和密码，避免了一些常见的错误，例如将会话信息放在容易受到攻击的 Cookie 中（Cookie 中只包含一个密钥，实际数据存储在数据库中），或者直接存储密码而不是密码哈希值。

有用的Django 资源：

样板代码

如前所述，Web 应用是使用自动化工具生成的，并且底层代码库完全相同。如果您在代码中发现某个 Bug，则很有可能在同一个 bundle 中的另一个项目中发现类似的 Bug。然而，任何自动化流程都有一些缺点，项目之间的错误继承就是其中之一。

结构

Django 项目默认是模块化的，非常易于理解和更新。我们的代码库分为三个模块：

  • 核心 - 用于处理静态资产和全局配置
  • 身份验证 - 管理登录和用户注册
  • app - 管理所有其他操作：当用户通过身份验证时提供应用程序页面，否则重定向到登录页面。

从这里开始，我将参考一个真实的项目，以便于整个演示：Django Dashboard Black。相关文件列在这张简单的图表中。


$ # Source code:
$ # https://github.com/app-generator/django-dashboard-black
$
< PROJECT ROOT >
   |
   |-- core/
   |    |-- settings.py                    
   |    |-- wsgi.py                        
   |    |-- urls.py                        
   |    |
   |    |-- static/
   |    |    |-- <css, JS, images>         
   |    |
   |    |-- templates/                     
   |         |
   |         |-- includes/                 # HTML chunks and
   |         |    |-- navigation.html      # Top menu component
   |         |    |-- sidebar.html         # Sidebar component
   |         |    |-- footer.html          # App Footer
   |         |    |-- scripts.html         # Common JS Scripts
   |         |
   |         |-- layouts/                  # Master pages
   |         |    |-- base-fullscreen.html # Used by Auth pages
   |         |    |-- base.html            # Used by common pages
   |         |
   |         |-- accounts/                 # Authentication pages
   |         |    |-- login.html           # Login page
   |         |    |-- register.html        # Register page
   |         |
   |      index.html                       # The default page
   |     page-404.html                     # Error 404 page
   |     page-500.html                     # Error 404 page
   |       *.html                          # All other HTML pages
   |
   |-- authentication/                     # Handles auth routes
   |    |
   |    |-- urls.py                        # Define auth routes
   |    |-- forms.py                       # Define auth forms  
   |    |-- views.py                       
   |
   |-- app/                                
   |    |
   |    |-- views.py                       # Serve HTML pages
   |    |-- urls.py                        
   |
   |-- requirements.txt                    # Required Modules 
   |
   |-- .env                                # Environment Config
   |-- manage.py                           # Start the app
   |
   |-- *************************************
Enter fullscreen mode Exit fullscreen mode

要从官方产品页面获取源代码，请解压缩并输入：

$ cd django-dashboard-black
Enter fullscreen mode Exit fullscreen mode

工作原理

在使用 Django 应用之前，我们需要安装项目依赖项，这些依赖项通常列在名为 的文件中requirements.txt。我们可以在全局 Python 环境中安装依赖项（不推荐），也可以使用名为VirtualEnv的沙盒环境。安装 Web 应用所需模块的必要命令如下：

$ # make sure you are in the project directory: 
$ # django-dashboard-black
$
$ # Virtualenv modules installation (Unix based systems)
$ virtualenv --no-site-packages env
$ source env/bin/activate
$ 
$ # Install modules
$ pip3 install -r requirements.txt
Enter fullscreen mode Exit fullscreen mode

Django 应用程序由manage.py文件引导，该文件通常保存在项目的根目录中，用于检查 Django 模块是否可用，并在加载后调用一个帮助程序execute_from_command_line来公开一组可用于管理应用程序的基本子命令：

$
$ # Makemigrations sub-command generates the SQL code to mutate 
$ # the database schema
$ python manage.py makemigrations
$
$ # Migrate sub-command apply the database changes (if any)
$ python manage.py migrate
$
$ # Runserver sub-command start the app on default port <8000> 
$ python manage.py runserver
$
$ # Start the app - custom port 
$ # python manage.py runserver 0.0.0.0:<your_port>
$
$ # Access the web app in browser: http://127.0.0.1:8000/
Enter fullscreen mode Exit fullscreen mode

此时，如果应用程序配置和编码正确，应该可以在浏览器中看到。

应用程序配置

manage.py文件有一行神奇的代码，可以将所需的配置注入到应用程序中：


$ # The magic line
os.environ.setdefault('DJANGO_SETTINGS_MODULE', 'core.settings')
Enter fullscreen mode Exit fullscreen mode

此行通知 Django 框架从此路径加载配置：PROJECT_ROOT / core / settings.py
配置文件中最相关的行是：

# Contents of core / settings.py
....

# The section that enables the APP module
INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    ... 
    'app'  # Enable the inner app 
]

...

# Defines global app routing
ROOT_URLCONF = 'core.urls'

# Specifiy the ROOT dir HTML templates
TEMPLATE_DIR = os.path.join(BASE_DIR, "core/templates")

# Specify the ROOT for static assets 
STATICFILES_DIRS = (
    os.path.join(BASE_DIR, "core/static"),
)

# Specify the database driver
DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.sqlite3',
        'NAME': os.path.join(BASE_DIR, 'db.sqlite3'),
    }
}
Enter fullscreen mode Exit fullscreen mode

应用路由

Django 通过使用文件中定义的正则表达式的级联规则来处理路由urls.py。当请求到达服务器时，Django 会尝试从头开始分析已定义的规则来匹配该请求。在我们的例子中，设置文件指示框架从core/urls.py加载路由规则：


urlpatterns = [
    path('admin/', admin.site.urls),
    path("", include("authentication.urls")),  # add this
    path("", include("app.urls"))  # add this
]
Enter fullscreen mode Exit fullscreen mode

匹配顺序首先是admin模块（由Django框架定义），然后是认证规则，最后是app模块路由规则。

身份验证规则在authentication/urls.py中定义：


...
urlpatterns = [
    path('login/', login_view, name="login"),
    path('register/', register_user, name="register"),
    path("logout/", LogoutView.as_view(), name="logout")
]
...
Enter fullscreen mode Exit fullscreen mode

App Module 路由规则定义在app/urls.py中


urlpatterns = [
    # Matches any html file 
    re_path(r'^.*\.html', views.pages, name='pages'),

    # The home page
    path('', views.index, name='home'),
]
Enter fullscreen mode Exit fullscreen mode

Django 中的路由可能会让初学者感到困惑（对我来说，第一次使用时就是这样），但后来，在应用程序中添加新路由就成了一项简单的任务。

模板

页面以经典方式呈现，被许多模板系统（Jinja、Blade、Mustache）使用，通过使用主布局与注入动态数据（经过身份验证的用户的姓名/电子邮件等）的 HTML 部分相结合的组合。

正如配置部分所述，Django通过读取设置文件中的部分knows来查找 HTML 部分和页面：TEMPLATES

...

# ROOT dir for templates
TEMPLATE_DIR = os.path.join(BASE_DIR, "core/templates")  

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',

        'DIRS': [TEMPLATE_DIR], <----- The magic line

        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
        },
    },
]

...
Enter fullscreen mode Exit fullscreen mode

示例页面结构

让我们看一下在index.html文件中定义的主仪表板页面：


{% extends "layouts/base.html" %}

{% block title %} Dashboard {% endblock %} 

<!-- Specific Page CSS goes HERE  -->
{% block stylesheets %}{% endblock stylesheets %}

{% block content %}

    <div class="row">
    ...
    </div>
{% endblock content %}

<!-- Specific Page JS goes HERE  -->
{% block javascripts %}

  <script>
    $(document).ready(function() {
      // Javascript method's body can be found in assets/js/demos.js
      demo.initDashboardPageCharts();
    });
  </script>

{% endblock javascripts %}
Enter fullscreen mode Exit fullscreen mode

extends主布局文件在layouts/base.html中定义，通用结构被继承，页面仅定义特定的部分：

  • 页面标题
  • 主页内容
  • 用于为仪表板图表制作动画的特定 javascript 代码。

最终产品

让我们启动应用程序，并在屏幕上看到一些不错的内容。下面的说明摘自README文件

$ # Get the code
$ git clone https://github.com/app-generator/django-dashboard-black.git
$ cd django-dashboard-black
$
$ # Virtualenv modules installation (Unix based systems)
$ virtualenv --no-site-packages env
$ source env/bin/activate
$ 
$ # Install modules
$ pip3 install -r requirements.txt
$
$ # Create tables
$ python manage.py makemigrations
$ python manage.py migrate
$
$ # Start the application (development mode)
$ python manage.py runserver # default port 8000
$
$ # Access the web app in the browser: http://127.0.0.1:8000/
Enter fullscreen mode Exit fullscreen mode

如果一切顺利，黑色仪表板应该在浏览器中可见：

Django Dashboard Black - 开源管理面板。

应用程序屏幕

Django Dashboard Black - 用户资料页面。

Django Dashboard Black - 通知页面。

Django Dashboard Black - RTL 页面。

感谢阅读！如需更多资源，请访问：

文章来源：https://dev.to/sm0ke/django-dashboard-learn-by-coding-437l
Devto 翻译
PREV
Flask - 实用“操作指南”列表
NEXT
Django 样板 wemake-django-template