Objectifs d'apprentissage : Comprendre les concepts de base, les caractéristiques et l'utilisation du HTML, et être capable d'utiliser le HTML pour créer des applications Web interactives.
Contenu d'apprentissage :
1. Qu'est-ce que HTML ?
- htmx est une bibliothèque JavaScript permettant de créer des applications Web interactives.
- Il étend HTML dans un langage déclaratif et interactif, permettant aux développeurs d'utiliser de simples balises HTML pour réaliser des mises à jour dynamiques de pages, le chargement de données en temps réel et la soumission de formulaires sans actualiser la page.
2. Caractéristiques de htmx :
- Léger : La bibliothèque htmx est très petite, ne faisant que quelques Ko, elle peut donc être chargée et utilisée rapidement.
- Facile à utiliser : htmx utilise des attributs HTML pour définir un comportement interactif sans écrire de code JavaScript complexe.
- Forte compatibilité : htmx peut être utilisé avec n'importe quelle technologie back-end (telle que Python, Ruby, Java, etc.) et frameworks front-end (tels que React, Vue, etc.).
- Très flexible : htmx propose diverses options et configurations, permettant aux développeurs de personnaliser le comportement d'interaction en fonction de leurs besoins.
3. Utilisation de base de htmx :
- Attributs : htmx utilise des attributs HTML pour définir des comportements interactifs. Les attributs couramment utilisés incluent `hx-get`, `hx-post`, `hx-swap`, etc.
- Événements : htmx prend en charge divers événements, tels que `hx-click`, `hx-change`, etc., qui peuvent déclencher des mises à jour de page ou le chargement de données.
- Mise à jour des données : htmx peut obtenir des données du serveur via des requêtes AJAX et mettre à jour les données dans la zone spécifiée de la page sans actualiser la page entière.
- Soumission de formulaire : htmx peut implémenter la soumission de formulaire sans actualiser la page. Les données du formulaire peuvent être envoyées au serveur via l'attribut `hx-post` et les données renvoyées peuvent être mises à jour sur la page.
Par exemple, voici un exemple simple utilisant HTML :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>htmx 任务列表示例</title>
<!-- 引入 htmx 库 -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/htmx.js"></script>
</head>
<body>
<h1>任务列表</h1>
<!-- 添加任务表单 -->
<form id="add-task-form" hx-post="/add-task" hx-target="#task-list">
<input type="text" name="task" placeholder="添加新任务" required>
<button type="submit">添加</button>
</form>
<!-- 任务列表 -->
<ul id="task-list">
<!-- 任务项将在这里动态添加 -->
</ul>
<!-- htmx 用于处理点击事件 -->
<script>
// 当页面加载时，初始化 htmx
document.addEventListener('DOMContentLoaded', function () {
htmx.engine();
});
</script>
</body>
</html>Dans cet exemple, nous créons une application de liste de tâches simple qui comprend un formulaire pour ajouter des tâches et une liste de tâches. En utilisant HTML, nous pouvons facilement ajouter de l'interactivité à ces éléments.
Code côté serveur (en supposant le framework Python et Flask) :
from flask import Flask, request, render_template_string
app = Flask(__name__)
# 初始任务列表
tasks = []
@app.route('/')
def index():
return render_template_string(open('index.html').read())
@app.route('/add-task', methods=['POST'])
def add_task():
task = request.form.get('task')
if task:
tasks.append(task)
return render_template_string('<li>{
{ task }}</li>', task=task)
if __name__ == '__main__':
app.run(debug=True)
Cet exemple simple montre comment utiliser HTML pour gérer la soumission de formulaires et mettre à jour dynamiquement une liste de tâches. Lorsque l'utilisateur saisit une tâche dans le formulaire d'ajout de tâche et clique sur le bouton « Ajouter », htmx envoie la tâche au serveur et ajoute le nouvel élément de tâche à la liste des tâches sans actualiser la page entière. Cette approche peut grandement améliorer l’expérience utilisateur tout en réduisant l’écriture de code JavaScript frontal. Le code côté serveur utilise le framework Flask pour gérer les requêtes et les réponses
En apprenant et en maîtrisant les concepts de base, les fonctionnalités et l'utilisation du HTML, vous pouvez utiliser de simples balises HTML pour créer des applications Web interactives, améliorer l'expérience utilisateur et réduire le besoin d'actualisation des pages.