Maison > Article > développement back-end > Golang htmx Tailwind CSS : créer une application Web réactive
Golang htmx Tailwind CSS : créer une application Web réactive
- Barbara Streisandoriginal
- 2024-11-23 16:05:31950parcourir
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>
<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")
}
Il configure un serveur Go de base, fonctionnant sur le port 8080.
Exécutez, lancez main.go pour exécuter l'application.
- Créez un fichier HTML dans le répertoire racine pour afficher la liste des utilisateurs.
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"},
}
}
Nous avons ajouté un itinéraire / pour afficher la liste des utilisateurs et fournir une liste statique des utilisateurs (à laquelle nous ajouterons de nouveaux utilisateurs à l'avance).
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>
- 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")
}
Il prend le nom et le e-mail de l'entrée du formulaire et exécute le user_row.html.
Essayons d'ajouter un nouvel utilisateur à la table. Visitez http://localhost:8080/ et cliquez sur le bouton Ajouter un utilisateur.
Ouais ! Nous avons ajouté avec succès un nouvel utilisateur à la liste ?.
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.
Bon codage !?
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!