介绍

Django 提供功能管理 UI 开箱即用的 CRUD 界面用于 db 管理。这包括基本内容和用户管理系统的大多数用例。但是,它没有显示摘要或历史趋势的探索性视图,这是您期望从管理仪表板获得的内容。

幸运的是,django管理应用程序是可扩展的,通过一些调整,我们可以添加交互式Javascript图表到管理员。

问题

我想在findwork.dev上获取电子邮件订阅者随时间的图表概览。就电子邮件订阅者而言,网站是增长还是停滞?上个月我们有多少订户?我们获得大多数订阅者的星期是哪一周?是否所有订阅者都在验证其电子邮件?

使用探索性图表,我们可以获得网站性能的历史概述。

我最初探索了现成的Django管理应用程序和仪表板的土地。要求是,它包括图表能力,有详细的记录,看起来不错。虽然我尝试的所有应用程序看起来都比默认管理员在样式方面更好,但它们要么缺少文档,要么没有维护。

这时,一个想法突然浮现在脑海:为什么不扩展默认管理应用呢?

扩展 django 管理员

django管理应用程序是由模型管理类组成。这些表示在管理界面中的模型的可视视图。默认情况下,ModelAdmin 类附带 5 个默认视图:

  • 更改列表 - 模型集合的列表视图
  • 添加 - 允许您添加新模型实例的视图
  • 更改 - 用于更新模型实例的视图
  • 删除 - 用于确认删除模型实例的视图
  • 历史记录 - 对模型实例执行的操作的历史记录

当您要查看特定模型时,"更改列表"视图是默认管理员视图。我想在这里添加一个图表,以便每当我打开电子邮件订阅者页面时,都会显示随着时间的推移添加的订阅者。

假设我们有一个电子邮件订阅者模型,如下所示:

为了在管理应用中呈现电子邮件订阅者,我们需要创建一个从 扩展的类。django.contrib.admin.ModelAdmin

基本模型管理员如下所示:

让我们添加一些订阅者,以便我们有一个初始数据集:

如果我们输入 ChangeList 视图,我们将看到我们添加了 100 个新订阅者,随机创建时间http://localhost:8000/admin/web/emailsubscriber/

向Django Admin添加图表-新乡seo|网站优化,网站建设_微信公众号:zeropython—昊天博客

假设我们要添加一个图表,该图表汇总了一段时间内条形图中的订阅者数量。我们希望将其放在订阅者列表的上方,这样,您一进入网站即可见。

下面的红色区域勾勒出我想直观地放置图表的位置。

向Django Admin添加图表-新乡seo|网站优化,网站建设_微信公众号:zeropython—昊天博客

如果我们创建一个新文件,我们可以强制 django 管理员加载我们的模板,而不是默认模板。让我们在

  • web/templates/admin/web/emailsubscriber/change_list.html.

重写管理模板时的命名方案是

  • {{app}}/templates/admin/{{app}}/{{model}}/change_list.html.

默认的 ChangeList 视图是可扩展的,并且有多个块可以覆盖以满足您的需要。检查默认管理模板时,我们可以看到它包含可以重写的块。我们需要重写内容块,以更改模型表之前呈现的内容。

让我们扩展默认的"更改列表"视图并添加自定义文本:

向Django Admin添加图表-新乡seo|网站优化,网站建设_微信公众号:zeropython—昊天博客

酷,我们现在已经设法自定义管理用户界面。让我们更进一步,使用Chart.js添加 Javascript 图表。我们需要重写外头块来添加脚本和样式元素来在标头中加载 Chart.js。

Chart.js代码基于此处找到的演示条形图。我稍微修改了它,以读取 X 轴上的时间序列数据。

向Django Admin添加图表-新乡seo|网站优化,网站建设_微信公众号:zeropython—昊天博客

Voil®,我们现在已经呈现了一个图表.js图表到django管理员。唯一的问题是数据是硬编码的,而不是从我们的后端派生的。

将图表数据注入管理模板

ModelAdmin 类具有一个称为更改列表_视图的方法。此方法负责呈现 ChangeList 页。通过重写此方法,我们可以将图表数据注入到模板上下文中。

下面的代码大致执行以下操作:

  1. 以每日间隔聚合新订户的总数
  2. 将 Django 查询集编码为 JSON
  3. 将数据添加到模板上下文
  4. 调用 super() 方法来呈现页面

数据现在应在技术上添加到模板上下文中,但现在我们必须在图表中使用它,而不是硬编码数据。

图表数据变量中的硬编码数据替换为后端的数据:

重新加载页面以查看我们美丽的图表。

向Django Admin添加图表-新乡seo|网站优化,网站建设_微信公众号:zeropython—昊天博客

使用 JS 动态加载数据

在上面的示例中,我们将初始图表数据直接注入 html 模板。在初始页面加载后,我们可以进行更多的交互式和提取数据。为此,我们需要:

  • 向模型管理员添加新终结点,该终结点返回 JSON 数据
  • 添加 JS 逻辑,在按钮单击时进行 AJAX 调用并重新呈现图表

添加新终结点需要我们将get_urls()方法覆盖到模型管理员之上,并注入我们自己的终结点 URL。

请务必注意,您的自定义 URL 应先于默认 URL。默认的允许性,将匹配任何内容,因此请求永远不会通过我们的自定义方法。

我们的 python 代码现在应该如下所示:

我们还需要添加 Javascript 逻辑,以在按钮单击时重新加载图表数据并重新呈现图表。在图表变量的声明下方添加以下行:

在图表中添加下面的 html 按钮:

向Django Admin添加图表-新乡seo|网站优化,网站建设_微信公众号:zeropython—昊天博客

Chart.js 附带不同的开箱式可视化效果。它很容易得到的基本图表,并提供定制,以万一你需要它。他们的文件在这里。Django 管理文档在这里

完整的示例代码可以在Github上找到。

你喜欢这个帖子吗?

当我们编写新内容时,接收更新。