我如何在 Go 中使用 HTMX

不确定如何构建您的 Go Web 应用程序？我的新书将指导您从头到尾用 Go 构建真实世界的 Web 应用程序，涵盖的主题包括如何构建代码、管理依赖项、创建动态数据库驱动的页面以及如何安全地对用户进行身份验证和授权。年中促销：7 月底前 30% 折扣！当我想向 Web 应用程序添加一些交互性时，我非常喜欢使用 HTMX。我喜欢它可以轻松地为交互提供类似应用程序的流畅感觉，我喜欢它最大限度地减少了我必须编写的 JavaScript 数量，我喜欢它允许我使用 Go 的 html/template 包保持服务器端 HTML 渲染的一致性和安全性。在这篇文章中，我将介绍我通常如何将 HTMX 与 Go 结合使用。虽然我将讨论一些 HTMX 的工作原理，但主要关注点是 Go 方面。具体来说： 我用于构建 HTML 模板并向 HTMX 发送回部分和整页 HTML 响应的模式 使用 HTMX 时管理重定向和错误 我使用的标准 HTMX 配置设置及其原因 为了说明这些内容，我们将构建一个小型应用程序，最终在用户列表上实现一个过滤器，如下所示： 注意：如果您还不熟悉使用 HTMX 的基础知识，我建议您在继续之前浏览一下 HTMX 文档。另请注意：许多使用 HTML 模板的模式也应该非常适合其他 HTML 在线工具，例如 Unpoly 和 Hotwire（如果您喜欢使用这些工具）。如果您想继续，请继续运行以下命令来创建项目的骨架结构： $ mkdir -p assets/static/css assets/static/img assets/static/js assets/html/partials assets/html/pages cmd/web $ touch assets/efs.go assets/html/base.tmpl assets/html/partials/images.tmpl assets/html/pages/home.tmpl cmd/web/main.go cmd/web/handlers.go cmd/web/html.go 这应该会给你一个如下所示的文件树： 有几种不同的方法来安装 HTMX ，你可以从 CDN 加载它或使用 NPM 安装它，但我几乎总是下载一个副本并将其作为我的 Web 应用程序的静态文件。它很简单，并且避免了使用 CDN 的缺点。出于此演示项目的目的，我们还将从 github.com/egonelbre/gophers 下载 Bamboo（一个无类 CSS 框架）和一张 gopher 图像。继续运行以下命令将所有三个内容下载到 asset/static 文件夹中： $ wget -P asset/static/js https://cdn.jsdelivr.net/npm/ [email protected] /dist/htmx.min.js $ wget -P assets/static/css https://cdn.jsdelivr.net/npm/ [email protected] /dist/bamboo.min.css $ wget -O asset/static/img/gopher.png https://raw.githubusercontent.com/egonelbre/gophers/refs/heads/master/sketch/misc/stand-left.png assets/static 的内容现在应该如下所示： 好的，现在项目框架和我们的静态资源已经就位，让我们开始这篇文章的主要内容并讨论 HTML 模板。我几乎所有项目的起点都是 asset/html 目录，其文件夹结构如下： asset/html/base.tmpl 文件包含所有网页的通用 HTML“布局”标记。

asset/html/pages 目录中的文件包含各个网页的特定于页面的内容。

assets/html/partials 目录中的文件包含可在不同位置使用的可重用 HTML 标记块。如果您按照步骤操作，请继续将以下标记添加到 base.tmpl 文件中： <title>{{template "page:title" .}}</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="/static/css/bamboo.min.css"> <script defer src