今日の Web 開発環境では、JavaScript は動的でインタラクティブな Web アプリケーションを作成するための言語として長い間選ばれてきました。
Go 開発者として、JavaScript を使用せずに応答性の高い Web アプリケーションを実装したい場合はどうすればよいですか?
ページ全体をリロードしなくても、タスクにチェックを入れると即座に更新される洗練された To Do リスト アプリを想像してみてください。これが Golang と htmx の力です!
Go と htmx を組み合わせると、JavaScript を 1 行も記述することなく、応答性の高いインタラクティブな Web アプリケーションを作成できます。
このブログでは、htmx と Golang を使用して Web アプリケーションを構築する方法を探っていきます。 (他のお気に入りのプラットフォームでも使用できます。)
学習として、ユーザーの基本的な作成および削除操作を実装します。
htmx は、ブラウザとサーバー間の双方向通信を追加する最新の HTML 拡張機能です。
AJAX、サーバー送信イベントなどに HTML で直接アクセスできるため、JavaScript を書かずに動的な Web ページを作成できます。
— 要素のコンテンツ全体を置き換えます。
— 要素の前後に新しいコンテンツを挿入します。
— 要素の末尾にコンテンツを追加します。
例を挙げてさらに深く理解してみましょう。
<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")
}
ポート 8080 で実行される基本的な Go サーバーをセットアップします。
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")
}
フォーム入力から name と email を取得し、user_row.html.
を実行します。
新しいユーザーをテーブルに追加してみましょう。 http://localhost:8080/ にアクセスし、ユーザーの追加 ボタンをクリックします。
やったー！新しいユーザーをリストに追加しました?.
実装ガイドの詳細については、Canopas で完全なガイドを確認してください。
読んだ内容が気に入ったら、必ず ? をクリックしてください。ボタン！ — 作家として、それは世界を意味します!
以下のコメントセクションであなたの考えを共有することをお勧めします。皆様のご意見は、コンテンツを充実させるだけでなく、より価値のある有益な記事を作成するという私たちのモチベーションにもつながります。
コーディングを楽しんでください!
以上がGolang htmx Tailwind CSS: レスポンシブ Web アプリケーションを作成するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
