在當今的 Web 開發領域，JavaScript 長期以來一直是創建動態和互動式 Web 應用程式的首選語言。
身為 Go 開發者，如果您不想使用 Javascript 但仍然實作響應式 Web 應用程式怎麼辦？
想像一下一個時尚的待辦事項清單應用程序，當您檢查任務時它會立即更新，而無需重新加載整頁。這就是Golang和htmx的力量！
結合 Go 和 htmx 使我們能夠創建響應式和互動式 Web 應用程序，而無需編寫一行 JavaScript。
在本部落格中，我們將探討如何使用 htmx 和 Golang 建立 Web 應用程式。 （它也可以與您喜歡的其他平台一起使用。）
作為學習，我們將為使用者實現基本的建立和刪除操作。
htmx 是一個現代 HTML 擴展，它增加了瀏覽器和伺服器之間的雙向通訊。
它允許我們在不編寫 JavaScript 的情況下建立動態網頁，因為它可以直接在 HTML 中存取 AJAX、伺服器發送的事件等。
— 取代整個元素的內容。
— 在元素之前或之後插入新內容。
— 將內容附加到元素的末端。
讓我們透過一個例子來更深入地理解它。
<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 來運行應用程式。
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。它將負責向用戶表添加新的用戶行。
<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>
Basic setup
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中文網其他相關文章！
