Golang htmx Tailwind CSS: Erstellen Sie eine Responsive Webanwendung

Hintergrund

In der heutigen Webentwicklungslandschaft ist JavaScript seit langem die Sprache der Wahl für die Erstellung dynamischer und interaktiver Webanwendungen.

Was ist, wenn Sie als Go-Entwickler kein Javascript verwenden und dennoch eine responsive Webanwendung implementieren möchten?

Stellen Sie sich eine elegante To-Do-Listen-App vor, die sofort aktualisiert wird, wenn Sie Aufgaben abhaken, ohne dass eine ganze Seite neu geladen werden muss. Das ist die Kraft von Golang und Htmx!

Durch die Kombination von Go und htmx können wir reaktionsfähige und interaktive Webanwendungen erstellen, ohne eine einzige Zeile JavaScript zu schreiben.

In diesem Blog werden wir untersuchen, wie man Htmx und Golang zum Erstellen von Webanwendungen verwendet. (Es kann auch mit anderen Ihrer Lieblingsplattformen verwendet werden.)

Zur Schulung werden wir grundlegende Erstellungs- und Löschvorgänge für Benutzer implementieren.

Was ist HTML?

htmx ist eine moderne HTML-Erweiterung, die bidirektionale Kommunikation zwischen dem Browser und dem Server hinzufügt.

Es ermöglicht uns, dynamische Webseiten zu erstellen, ohne JavaScript zu schreiben, da es direkten Zugriff auf AJAX, vom Server gesendete Ereignisse usw. in HTML bietet.

Wie funktioniert HTML?

• Wenn ein Benutzer mit einem Element interagiert, das über ein Htmx-Attribut verfügt (z. B. auf eine Schaltfläche klickt), löst der Browser das angegebene Ereignis aus.
• htmx fängt das Ereignis ab und sendet eine HTTP-Anfrage an den im Attribut angegebenen serverseitigen Endpunkt (z. B. hx-get="/my-endpoint").
• Der serverseitige Endpunkt verarbeitet die Anfrage und generiert eine HTML-Antwort.
• htmx empfängt die Antwort und aktualisiert das DOM entsprechend den Attributen hx-target und hx-swap. Dies kann Folgendes umfassen:

 — Ersetzen des gesamten Inhalts des Elements.
 — Einfügen neuer Inhalte vor oder nach dem Element.
 — Inhalt an das Ende des Elements anhängen.

Lassen Sie es uns anhand eines Beispiels genauer verstehen.

<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")
}

Es richtet einen einfachen Go-Server ein, der an Port 8080 läuft.
Führen Sie go run main.go aus, um die Anwendung auszuführen.

• Erstellen Sie eine HTML-Datei im Stammverzeichnis, um die Benutzerliste darzustellen.

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"},
 }
}

Wir haben eine Route / hinzugefügt, um die Benutzerliste darzustellen und eine statische Liste von Benutzern bereitzustellen (zu der wir im Voraus neue Benutzer hinzufügen werden).

Das ist alles. Starten Sie den Server neu und besuchen Sie — http://localhost:8080/, um zu überprüfen, ob die Benutzerliste gerendert wird oder nicht. Die Benutzerliste wird wie folgt gerendert.

Benutzer erstellen

Datei user_row.html erstellen. Es ist für das Hinzufügen einer neuen Benutzerzeile zur Benutzertabelle verantwortlich.

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>

<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")
}

Es übernimmt den Namen und die E-Mail-Adresse aus der Formulareingabe und führt die user_row.html aus.

Versuchen wir, der Tabelle einen neuen Benutzer hinzuzufügen. Besuchen Sie http://localhost:8080/ und klicken Sie auf die Schaltfläche Benutzer hinzufügen.

Yayy! Wir haben der Liste erfolgreich einen neuen Benutzer hinzugefügt ?.

Um tiefer in den detaillierten Implementierungsleitfaden einzutauchen, schauen Sie sich den vollständigen Leitfaden unter Canopas an.

---

Wenn Ihnen gefällt, was Sie lesen, klicken Sie unbedingt auf ? Taste! — Als Schriftsteller bedeutet es die Welt!

Ich ermutige Sie, Ihre Gedanken im Kommentarbereich unten mitzuteilen. Ihr Beitrag bereichert nicht nur unsere Inhalte, sondern treibt auch unsere Motivation an, noch wertvollere und informativere Artikel für Sie zu erstellen.

Viel Spaß beim Codieren!?