Golang htmx Tailwind CSS : créer une application Web réactive-Golang-php.cn

Golang htmx Tailwind CSS : créer une application Web réactive

Barbara Streisand

Libérer： 2024-11-23 16:05:31

original

949 Les gens l'ont consulté

Arrière-plan

Dans le paysage actuel du développement Web, JavaScript est depuis longtemps le langage de choix pour créer des applications Web dynamiques et interactives.

En tant que développeur Go, que se passe-t-il si vous ne souhaitez pas utiliser Javascript tout en implémentant une application Web réactive ?

Imaginez une application de liste de tâches élégante qui se met à jour instantanément lorsque vous cochez des tâches sans recharger une page entière. C'est le pouvoir de Golang et htmx !

La combinaison de Go et htmx nous permet de créer des applications Web réactives et interactives sans écrire une seule ligne de JavaScript.

Dans ce blog, nous explorerons comment utiliser HTML et Golang pour créer des applications Web. (Il peut également être utilisé avec d'autres plateformes préférées.)

En guise d'apprentissage, nous mettrons en œuvre des opérations de création et de suppression de base pour les utilisateurs.

Qu'est-ce que le HTML ?

htmx est une extension HTML moderne qui ajoute une communication bidirectionnelle entre le navigateur et le serveur.

Il nous permet de créer des pages Web dynamiques sans écrire de JavaScript, car il donne accès directement à AJAX, aux événements envoyés par le serveur, etc. en HTML.

Comment fonctionne HTML ?

Lorsqu'un utilisateur interagit avec un élément doté d'un attribut htmx (par exemple, clique sur un bouton), le navigateur déclenche l'événement spécifié.
htmx intercepte l'événement et envoie une requête HTTP au point de terminaison côté serveur spécifié dans l'attribut (par exemple, hx-get="/my-endpoint").
Le point de terminaison côté serveur traite la demande et génère une réponse HTML.
htmx reçoit la réponse et met à jour le DOM en fonction des attributs hx-target et hx-swap. Cela peut impliquer :

— Remplacement du contenu entier de l'élément.
— Insérer un nouveau contenu avant ou après l'élément.
— Ajout de contenu à la fin de l'élément.

Comprenons-le plus en profondeur avec un exemple.

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

Copier après la connexion

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

C'est tout. Redémarrez le serveur et visitons — http://localhost:8080/ pour vérifier s'il affiche la liste des utilisateurs ou non. Il affichera la liste des utilisateurs comme ci-dessous.

Créer un utilisateur

Créer le fichier user_row.html. Il sera responsable de l'ajout d'une nouvelle ligne utilisateur à la table utilisateur.

ligne_utilisateur.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>

Essayons d'ajouter un nouvel utilisateur à la table. Visitez http://localhost:8080/ et cliquez sur le bouton Ajouter un utilisateur.

Pour approfondir le guide de mise en œuvre détaillé, consultez le guide complet sur Canopas.

Si vous aimez ce que vous lisez, assurez-vous de cliquer sur ? bouton! — en tant qu'écrivain, cela signifie le monde !

Je vous encourage à partager vos réflexions dans la section commentaires ci-dessous. Votre contribution enrichit non seulement notre contenu, mais alimente également notre motivation à créer des articles plus précieux et informatifs pour vous.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!