Golang htmx Tailwind CSS: レスポンシブ Web アプリケーションを作成する-Golang-php.cn

ホームページ

バックエンド開発

Golang

Golang htmx Tailwind CSS: レスポンシブ Web アプリケーションを作成する

Barbara Streisand

Nov 23, 2024 pm 04:05 PM

背景

今日の Web 開発環境では、JavaScript は動的でインタラクティブな Web アプリケーションを作成するための言語として長い間選ばれてきました。

Go 開発者として、JavaScript を使用せずに応答性の高い Web アプリケーションを実装したい場合はどうすればよいですか?

ページ全体をリロードしなくても、タスクにチェックを入れると即座に更新される洗練された To Do リストアプリを想像してみてください。これが Golang と htmx の力です!

Go と htmx を組み合わせると、JavaScript を 1 行も記述することなく、応答性の高いインタラクティブな Web アプリケーションを作成できます。

このブログでは、htmx と Golang を使用して Web アプリケーションを構築する方法を探っていきます。 (他のお気に入りのプラットフォームでも使用できます。)

学習として、ユーザーの基本的な作成および削除操作を実装します。

htmxとは何ですか？

htmx は、ブラウザとサーバー間の双方向通信を追加する最新の HTML 拡張機能です。

AJAX、サーバー送信イベントなどに HTML で直接アクセスできるため、JavaScript を書かずに動的な Web ページを作成できます。

htmxはどのように機能しますか?

ユーザーが htmx 属性を持つ要素を操作すると (ボタンをクリックするなど)、ブラウザは指定されたイベントをトリガーします。
htmx はイベントをインターセプトし、属性で指定されたサーバー側エンドポイント (例: hx-get="/my-endpoint") に HTTP リクエストを送信します。
サーバー側のエンドポイントはリクエストを処理し、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")
}

ポート 8080 で実行される基本的な Go サーバーをセットアップします。
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/ にアクセスして、ユーザーリストが表示されるかどうかを確認します。以下のようにユーザーリストが表示されます。

Golang htmx Tailwind CSS: Create a Responsive Web Application

ユーザーの作成

ファイル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")
}