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 上的完整指南。

---

如果您喜歡所讀的內容，請務必點擊？按鈕！ — 身為作家，這意味著整個世界！

我鼓勵您在下面的評論部分分享您的想法。您的意見不僅豐富了我們的內容，也激發了我們為您創作更有價值、內容更豐富的文章的動力。

編碼愉快！ ？