Golang htmx Tailwind CSS：创建响应式 Web 应用程序

背景

在当今的 Web 开发领域，JavaScript 长期以来一直是创建动态和交互式 Web 应用程序的首选语言。

作为一名 Go 开发者，如果您不想使用 Javascript 但仍然实现响应式 Web 应用程序怎么办？

想象一下一个时尚的待办事项列表应用程序，当您检查任务时它会立即更新，而无需重新加载整页。这就是Golang和htmx的力量！

结合 Go 和 htmx 使我们能够创建响应式和交互式 Web 应用程序，而无需编写一行 JavaScript。

在本博客中，我们将探讨如何使用 htmx 和 Golang 构建 Web 应用程序。 （它也可以与您喜欢的其他平台一起使用。）

作为学习，我们将为用户实现基本的创建和删除操作。

.htmx是什么？

htmx 是一个现代 HTML 扩展，它添加了浏览器和服务器之间的双向通信。

它允许我们在不编写 JavaScript 的情况下创建动态网页，因为它可以直接在 HTML 中访问 AJAX、服务器发送的事件等。

htmx 是如何工作的？

• 当用户与具有 htmx 属性的元素交互时（例如单击按钮），浏览器会触发指定的事件。
• htmx 拦截该事件并向属性中指定的服务器端端点发送 HTTP 请求（例如，hx-get="/my-endpoint"）。
• 服务器端端点处理请求并生成 HTML 响应。
• htmx 接收响应并根据 hx-target 和 hx-swap 属性更新 DOM。这可能涉及：

 — 替换整个元素的内容。
 — 在元素之前或之后插入新内容。
 — 将内容附加到元素的末尾。

让我们通过一个例子来更深入地理解它。

<button hx-get="/fetch-data" hx-target="#data-container">
   Fetch Data
</button>
<div>



<p>In the above code, when the button is clicked:</p>

<ol>
<li>htmx sends a GET request to /fetch-data.
</li>
<li>The server-side endpoint fetches data and renders it as HTML.</li>
<li>The response is inserted into the #data-container element.</li>
</ol>

<h3>
  
  
  Create and delete the user
</h3>

<p>Below are the required tools/frameworks to build this basic app.</p>

<ul>
<li>Gin (Go framework)</li>
<li>Tailwind CSS </li>
<li>htmx</li>
</ul>

<p><strong>Basic setup</strong> </p>

<ul>
<li>Create main.go file at the root directory.</li>
</ul>

<p><strong>main.go</strong><br>
</p>

<pre class="brush:php;toolbar:false">package main

import (
 "fmt"
 "github.com/gin-gonic/gin"
)

func main() {
 router := gin.Default()

 router.Run(":8080")
 fmt.Println("Server is running on port 8080")
}

它设置了一个基本的 Go 服务器，在端口 8080 上运行。
运行 go run main.go 来运行应用程序。

• 在根目录创建一个 HTML 文件，用于渲染用户列表。

users.html

   
      <title>Go + htmx app </title>
      <script src="https://unpkg.com/htmx.org@2.0.0" integrity="sha384-wS5l5IKJBvK6sPTKa2WZ1js3d947pvWXbPJ1OmWfEuxLgeHcEbjUUA5i9V5ZkpCw" crossorigin="anonymous"></script>
      <script src="https://cdn.tailwindcss.com"></script>
   
   



<blockquote>
<p>We have included,</p>

<p><strong>htmx</strong> using the script tag — <u>https://unpkg.com/htmx.org@2.0.0</u></p>

<p><strong>Tailwind CSS</strong> with cdn link —<br>
<u>https://cdn.tailwindcss.com</u></p>
</blockquote>

<p>Now, we can use Tailwind CSS classes and render the templates with htmx.</p>

<p>As we see in users.html, we need to pass users array to the template, so that it can render the users list. </p>

<p>For that let’s create a hardcoded static list of users and create a route to render users.html .</p>

<h3>
  
  
  Fetch users
</h3>

<p><strong>main.go</strong><br>
</p>

<pre class="brush:php;toolbar:false">package main

import (
 "fmt"
 "net/http"
 "text/template"

 "github.com/gin-gonic/gin"
)

func main() {
 router := gin.Default()

 router.GET("/", func(c *gin.Context) {
  users := GetUsers()

  tmpl := template.Must(template.ParseFiles("users.html"))
  err := tmpl.Execute(c.Writer, gin.H{"users": users})
    if err != nil {
       panic(err)
    }
 })

 router.Run(":8080")
 fmt.Println("Server is running on port 8080")
}

type User struct {
 Name  string
 Email string
}

func GetUsers() []User {
 return []User{
  {Name: "John Doe", Email: "johndoe@example.com"},
  {Name: "Alice Smith", Email: "alicesmith@example.com"},
 }
}

我们添加了一条路由 / 来渲染用户列表并提供静态用户列表（我们将提前添加新用户）。

仅此而已。重启服务器，我们访问 — http://localhost:8080/看看是否渲染了用户列表。它将呈现如下的用户列表。

创建用户

创建文件user_row.html。它将负责向用户表添加新的用户行。

用户行.html

<button hx-get="/fetch-data" hx-target="#data-container">
   Fetch Data
</button>
<div>



<p>In the above code, when the button is clicked:</p>

<ol>
<li>htmx sends a GET request to /fetch-data.
</li>
<li>The server-side endpoint fetches data and renders it as HTML.</li>
<li>The response is inserted into the #data-container element.</li>
</ol>

<h3>
  
  
  Create and delete the user
</h3>

<p>Below are the required tools/frameworks to build this basic app.</p>

<ul>
<li>Gin (Go framework)</li>
<li>Tailwind CSS </li>
<li>htmx</li>
</ul>

<p><strong>Basic setup</strong> </p>

<ul>
<li>Create main.go file at the root directory.</li>
</ul>

<p><strong>main.go</strong><br>
</p>

<pre class="brush:php;toolbar:false">package main

import (
 "fmt"
 "github.com/gin-gonic/gin"
)

func main() {
 router := gin.Default()

 router.Run(":8080")
 fmt.Println("Server is running on port 8080")
}

它从表单输入中获取姓名和电子邮件并执行user_row.html。

让我们尝试向表中添加一个新用户。访问http://localhost:8080/并单击添加用户按钮。

耶耶！我们已成功将新用户添加到列表中？.

要深入了解详细实施指南，请查看 Canopas 上的完整指南。

---

如果您喜欢所读的内容，请务必点击？按钮！ — 作为一名作家，这意味着整个世界！

我鼓励您在下面的评论部分分享您的想法。您的意见不仅丰富了我们的内容，也激发了我们为您创作更有价值、内容更丰富的文章的动力。

编码愉快！？