HTMX：Web 的未来-js教程-PHP中文网

HTMX：Web 的未来

霞舞

发布： 2025-01-16 21:02:22

原创

320人浏览过

htmx 在前后端开发中的应用：告别 json，拥抱高效的 html 交互

最近我一直在开发一个 SaaS 网站，前端使用 HTMX 和 Tailwind CSS，后端则使用 Python 和 Flask。HTMX 是我新尝试的工具，本文将分享我在 Web 应用中集成 HTMX 的经验。

JSON 架构的局限性

在深入 HTMX 之前，我们需要了解 HTMX 试图解决的问题。许多全栈应用都采用面向 JSON 的架构：后端发送 JSON 数据，前端根据响应渲染数据。

这种方式虽然提升了网站的交互性，但也存在问题：JSON 数据量可能比渲染 HTML 的成本高出十倍，增加了客户端和服务器之间的数据传输量，从而影响速度和用户体验。

HTMX：Web 的未来

HTMX 的优势

HTMX 认为，服务器返回 JSON 的成本过高，会造成糟糕的用户体验。因此，HTMX 提出让服务器返回 HTML，并通过 HTML 属性处理所有交互，从而使服务器端和客户端更紧密地协同工作，实现更高效、更快速的交互。

需要注意的是，HTMX 并不替代 JavaScript。您仍然需要通过 CDN 或本地文件引入 HTMX 的 JavaScript 文件。

HTMX：Web 的未来

与其他 JavaScript 框架相比，HTMX 的一大优势是您可以直接通过 HTML 与 API 交互，无需编写 JavaScript 代码。

示例

以下代码展示了如何使用 HTMX、客户端模板和 Nunjucks 模板引擎从 API 获取数据并渲染到页面：

    <title>nibodhdaware news blog</title><meta charset="utf-8"></meta><meta content="width=device-width, initial-scale=1" name="viewport"></meta>

登录后复制

这段代码通过 CDN 引入 HTMX 和其他必要文件。client-side-templates 是 HTMX 的一个扩展，允许我们以 JSON 形式获取数据并直接用 HTML 呈现，而无需编写 JavaScript。Nunjucks 则是一个模板引擎，方便我们在 HTML 中编写循环和条件语句。

主体代码如下：

    <h1>nibodhdaware</h1>
    <p>htmx json api test</p>
    <div hx-ext="client-side-templates">
      <div hx-get="https://api.spaceflightnewsapi.net/v4/blogs/" hx-trigger="load" nunjucks-template="blogs-template">
        <template id="blogs-template">
          {% if not previous %}
          <i>found {{count}} articles.</i>
          {% endif %}

          {% for blog in results %}
          <div>
            <hr></hr><h2>
              <a href="{{blog.url}}" target="_blank">
                {{blog.title}}
              </a>
            </h2>
            <h4>
              published by {{blog.news_site}}, {{blog.published_at | truncate(10, true, "")}}
            </h4>
            <p>{{blog.summary}}</p>
          </div>
          {% endfor %}
        </template></div>
    </div>

登录后复制

我们创建了一个带有 hx-ext='client-side-templates' 属性的 div，告诉 HTMX 使用该扩展。代码使用 Spaceflight News API 获取博客数据。hx-get 属性发送 GET 请求，hx-trigger="load" 表示在页面加载时发送请求，nunjucks-template 指定 blogs-template 为模板。

API 响应结构如下：

{
  "count": 123,
  "next": "http://api.example.org/accounts/?offset=400&limit=100",
  "previous": "http://api.example.org/accounts/?offset=200&limit=100",
  "results": [
    {
      "id": 0,
      "title": "string",
      "url": "string",
      "image_url": "string",
      "news_site": "string",
      "summary": "string",
      "published_at": "2023-09-12T23:51:31.675Z",
      "updated_at": "2023-09-12T23:51:31.675Z",
      "featured": true,
      "launches": [
        {
          "launch_id": "3fa85f64-5717-4562-b3fc-2c963f66afa6",
          "provider": "string"
        }
      ],
      "events": [
        {
          "event_id": 2147483647,
          "provider": "string"
        }
      ]
    }
  ]
}

登录后复制

Nunjucks 模板引擎的语法与 Jinja 类似：{% %} 表示代码块，{{ }} 表示变量。

通过 {% if previous %} 和 {% for blog in results %}，我们可以根据 API 响应动态渲染博客文章信息。

HTMX：Web 的未来