Backend-Entwicklung
Golang
Golang htmx Tailwind CSS: Erstellen Sie eine Responsive Webanwendung
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>
<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")
}
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
<!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"},
}
}
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>
- Gin (Go framework)
- Tailwind CSS
- htmx
Basic setup
- Create main.go file at the root directory.
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")
}
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!?
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!
Heiße KI -Werkzeuge
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Undress AI Tool
Ausziehbilder kostenlos
Clothoff.io
KI-Kleiderentferner
Video Face Swap
Tauschen Sie Gesichter in jedem Video mühelos mit unserem völlig kostenlosen KI-Gesichtstausch-Tool aus!
Heißer Artikel
Heiße Werkzeuge
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
Heiße Themen
1653
14
1413
52
1304
25
1251
29
1224
24
Golangs Zweck: Aufbau effizienter und skalierbarer Systeme
Apr 09, 2025 pm 05:17 PM
Go Language funktioniert gut beim Aufbau effizienter und skalierbarer Systeme. Zu den Vorteilen gehören: 1. hohe Leistung: Kompiliert in den Maschinencode, schnelle Laufgeschwindigkeit; 2. gleichzeitige Programmierung: Vereinfachen Sie Multitasking durch Goroutinen und Kanäle; 3. Einfachheit: präzise Syntax, Reduzierung der Lern- und Wartungskosten; 4. plattform: Unterstützt die plattformübergreifende Kompilierung, einfache Bereitstellung.
Golang und C: Parallelität gegen Rohgeschwindigkeit
Apr 21, 2025 am 12:16 AM
Golang ist in Gleichzeitigkeit besser als C, während C bei Rohgeschwindigkeit besser als Golang ist. 1) Golang erreicht durch Goroutine und Kanal eine effiziente Parallelität, die zum Umgang mit einer großen Anzahl von gleichzeitigen Aufgaben geeignet ist. 2) C über Compiler -Optimierung und Standardbibliothek bietet es eine hohe Leistung in der Nähe der Hardware, die für Anwendungen geeignet ist, die eine extreme Optimierung erfordern.
Golang gegen Python: Schlüsselunterschiede und Ähnlichkeiten
Apr 17, 2025 am 12:15 AM
Golang und Python haben jeweils ihre eigenen Vorteile: Golang ist für hohe Leistung und gleichzeitige Programmierung geeignet, während Python für Datenwissenschaft und Webentwicklung geeignet ist. Golang ist bekannt für sein Parallelitätsmodell und seine effiziente Leistung, während Python für sein Ökosystem für die kurze Syntax und sein reiches Bibliothek bekannt ist.
Golang gegen Python: Leistung und Skalierbarkeit
Apr 19, 2025 am 12:18 AM
Golang ist in Bezug auf Leistung und Skalierbarkeit besser als Python. 1) Golangs Kompilierungseigenschaften und effizientes Parallelitätsmodell machen es in hohen Parallelitätsszenarien gut ab. 2) Python wird als interpretierte Sprache langsam ausgeführt, kann aber die Leistung durch Tools wie Cython optimieren.
Das Performance -Rennen: Golang gegen C.
Apr 16, 2025 am 12:07 AM
Golang und C haben jeweils ihre eigenen Vorteile bei Leistungswettbewerben: 1) Golang ist für eine hohe Parallelität und schnelle Entwicklung geeignet, und 2) C bietet eine höhere Leistung und eine feinkörnige Kontrolle. Die Auswahl sollte auf Projektanforderungen und Teamtechnologie -Stack basieren.
Golangs Auswirkungen: Geschwindigkeit, Effizienz und Einfachheit
Apr 14, 2025 am 12:11 AM
GoimpactsDevelopmentPositivyThroughSpeed, Effizienz und DiasMlitication.1) Geschwindigkeit: Gocompilesquickandrunseffiction, idealforlargeProjects
C und Golang: Wenn die Leistung von entscheidender Bedeutung ist
Apr 13, 2025 am 12:11 AM
C eignet sich besser für Szenarien, in denen eine direkte Kontrolle der Hardware -Ressourcen und hohe Leistungsoptimierung erforderlich ist, während Golang besser für Szenarien geeignet ist, in denen eine schnelle Entwicklung und eine hohe Parallelitätsverarbeitung erforderlich sind. 1.Cs Vorteil liegt in den nahezu Hardware-Eigenschaften und hohen Optimierungsfunktionen, die für leistungsstarke Bedürfnisse wie die Spieleentwicklung geeignet sind. 2. Golangs Vorteil liegt in seiner präzisen Syntax und der natürlichen Unterstützung, die für die Entwicklung einer hohen Parallelitätsdienste geeignet ist.
Golang und C: Die Kompromisse bei der Leistung
Apr 17, 2025 am 12:18 AM
Die Leistungsunterschiede zwischen Golang und C spiegeln sich hauptsächlich in der Speicherverwaltung, der Kompilierungsoptimierung und der Laufzeiteffizienz wider. 1) Golangs Müllsammlung Mechanismus ist praktisch, kann jedoch die Leistung beeinflussen.
