Golang htmx Tailwind CSS: Erstellen Sie eine Responsive Webanwendung-Golang-php.cn

Golang htmx Tailwind CSS: Erstellen Sie eine Responsive Webanwendung

Barbara Streisand

Freigeben： 2024-11-23 16:05:31

Original

973 Leute haben es durchsucht

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>

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

Nach dem Login kopieren

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

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>

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

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.

Das obige ist der detaillierte Inhalt vonGolang htmx Tailwind CSS: Erstellen Sie eine Responsive Webanwendung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!