使用Django和HTMX简化动态Web开发（第三部分）：与Django集成

秉持“自带电池 (Batteries Included)”理念的强大后端Django，与巧妙利用后端新鲜出炉的HTML片段的HTMX，二者结合堪称天作之合。

本文将继续“使用Django和HTMX简化动态Web开发”系列，作为第三部分，我们将探讨在实际Django项目中集成HTMX的两种具体方法。

django-htmx结合的图片

1. 不使用第三方包直接集成

这是最纯粹、最轻量级的方法。无需复杂的安装过程，只需在HTML模板中添加一行脚本，即可立即使用HTMX的功能。

安装方法

HTMX官方文档提供了多种安装方法，但最快捷的方式无疑是利用CDN。

  • 利用CDN（最快）： 只需将以下代码放入base.html的<head>标签内。
<script src="https://cdn.jsdelivr.net/npm/htmx.org@2.0.10/dist/htmx.min.js" integrity="sha384-H5SrcfygHmAuTDZphMHqBJLc3FhssKjG7w/CeCpFReSfwBWDTKpkzPP8c+cLsK+V" crossorigin="anonymous"></script>
  • 直接下载： 如果安全或离线环境是您的优先考量，可以下载htmx.min.js并将其放入项目的static文件夹中，然后指定路径。
  • npm： 如果您正在使用构建系统，可以通过npm install htmx.org命令进行安装。

前往HTMX安装官方文档

2. 使用django-htmx包

在Django生态系统中，存在一个专门的库，可以帮助您更“Django式”地使用HTMX。它就是django-htmx。

安装与配置

按照django-htmx官方文档的说明，执行以下步骤。

  1. 安装包

    bash python -m pip install django-htmx

  2. 注册到INSTALLED_APPS

    python INSTALLED_APPS = [ ..., "django_htmx", ..., ]

  3. 添加中间件

    python MIDDLEWARE = [ ..., "django_htmx.middleware.HtmxMiddleware", ..., ]

django-htmx有多便捷？

HTMX本身就是一个非常简洁的工具，因此，是否真的有必要额外安装django-htmx这个包？这确实会让人产生疑问。事实上，即使没有这个包，实现核心功能也毫无障碍。但如果我们深入了解它提供的便利功能，就会明白为什么许多开发者会选择它。

根据django-htmx的官方文档，该包最显著的特点是通过中间件扩展了request对象。注册中间件后，会生成一个request.htmx属性，通过它我们可以非常方便地获取以下详细信息：

  • 请求信息查询： boosted, current_url, current_url_abs_path, history_restore_request, prompt
  • 目标与触发器控制： target, trigger, trigger_name, triggering_event

此外，它还支持两个专用的模板标签，以协助模板开发。

  • {% htmx_script %}: 这是一个主要标签，用于插入HTMX库脚本。
  • {% django_htmx_script %}: 当HTMX通过CDN或静态文件直接引入时，这是一个辅助标签，用于额外插入调试所需的扩展脚本。

尤其令人印象深刻的是django_htmx.http模块中包含的11个实用方法。其中，trigger_client_event()无疑是亮点。它允许服务器端轻松配置HX-Trigger头部并随响应发送，从而使得服务器能够直接控制客户端事件。一旦熟悉，这将是一个非常强大且频繁使用的工具。

当然，所有这些功能开发者也可以通过编写自定义中间件或手动操作HTTP头部来实现。因此，如果像我一样偏爱亲手构建的开发者，可能不会觉得它是一个必需的包。

总而言之，django-htmx并非“不可或缺”，但它确实是一个“能显著提升开发体验”的包。其官方文档内容不多，只需投入一两个小时即可充分掌握，因此您可以根据自己的项目特点决定是否引入。

总结

如果您只是想实现简单的开关按钮或几个点赞功能，那么直接使用（CDN）就足够了。避免增加不必要的依赖性，这可能是最经济的做法。

然而，如果项目规模不断扩大，并且需要在一个视图中同时处理整个页面和部分页面，那么django-htmx就值得考虑了。

哪种方式更吸引您呢？事实上，django-htmx并非一个沉重的包，它相当轻量，所以直接安装并使用也可能是一个不错的选择。这很大程度上取决于开发者的个人偏好和习惯，比如“我要最小化依赖包”或者“我更喜欢亲手实现大部分功能”。

但无论您做出何种选择，有了HTMX，您都将有机会摆脱JavaScript的束缚，重新体验HTML的简洁之乐。

相关文章阅读 :