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>
<div class="code" style="position:relative; padding:0px; margin:0px;"><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
<!DOCTYPE html>
<html>
<head>
<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>
</head>
<body>
<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>
- Gin (Go framework)
- Tailwind CSS
- htmx
Basic setup
- Create main.go file at the root directory.
main.go
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 上的完整指南。
如果您喜歡所讀的內容，請務必點擊？按鈕！ — 身為作家，這意味著整個世界！
我鼓勵您在下面的評論部分分享您的想法。您的意見不僅豐富了我們的內容，也激發了我們為您創作更有價值、內容更豐富的文章的動力。
編碼愉快！ ？
以上是Golang htmx Tailwind CSS：建立響應式 Web 應用程式的詳細內容。更多資訊請關注PHP中文網其他相關文章！
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
Golang的目的：建立高效且可擴展的系統
Apr 09, 2025 pm 05:17 PM
Go語言在構建高效且可擴展的系統中表現出色，其優勢包括：1.高性能：編譯成機器碼，運行速度快；2.並發編程：通過goroutines和channels簡化多任務處理；3.簡潔性：語法簡潔，降低學習和維護成本；4.跨平台：支持跨平台編譯，方便部署。
Golang和C：並發與原始速度
Apr 21, 2025 am 12:16 AM
Golang在並發性上優於C ，而C 在原始速度上優於Golang。 1)Golang通過goroutine和channel實現高效並發，適合處理大量並發任務。 2)C 通過編譯器優化和標準庫，提供接近硬件的高性能，適合需要極致優化的應用。
Golang vs. Python：主要差異和相似之處
Apr 17, 2025 am 12:15 AM
Golang和Python各有优势：Golang适合高性能和并发编程，Python适用于数据科学和Web开发。Golang以其并发模型和高效性能著称，Python则以简洁语法和丰富库生态系统著称。
Golang vs. Python：性能和可伸縮性
Apr 19, 2025 am 12:18 AM
Golang在性能和可擴展性方面優於Python。 1)Golang的編譯型特性和高效並發模型使其在高並發場景下表現出色。 2)Python作為解釋型語言，執行速度較慢，但通過工具如Cython可優化性能。
表演競賽：Golang vs.C
Apr 16, 2025 am 12:07 AM
Golang和C 在性能競賽中的表現各有優勢：1)Golang適合高並發和快速開發，2)C 提供更高性能和細粒度控制。選擇應基於項目需求和團隊技術棧。
Golang的影響：速度，效率和簡單性
Apr 14, 2025 am 12:11 AM
goimpactsdevelopmentpositationality throughspeed，效率和模擬性。 1）速度：gocompilesquicklyandrunseff，IdealforlargeProjects.2）效率：效率：ITScomprehenSevestAndardArdardArdArdArdArdArdArdArdArdArdArdArdArdArdArdArdArdArdArdArdArdArdArdArdArdArdArdArdArdArdArdArdArdArdArdArdArdEcceSteral Depentencies，增強的Depleflovelmentimency.3）簡單性。
C和Golang：表演至關重要時
Apr 13, 2025 am 12:11 AM
C 更適合需要直接控制硬件資源和高性能優化的場景，而Golang更適合需要快速開發和高並發處理的場景。 1.C 的優勢在於其接近硬件的特性和高度的優化能力，適合遊戲開發等高性能需求。 2.Golang的優勢在於其簡潔的語法和天然的並發支持，適合高並發服務開發。
Golang和C：性能的權衡
Apr 17, 2025 am 12:18 AM
Golang和C 在性能上的差異主要體現在內存管理、編譯優化和運行時效率等方面。 1)Golang的垃圾回收機制方便但可能影響性能，2)C 的手動內存管理和編譯器優化在遞歸計算中表現更為高效。
