Objetivos de aprendizaje: Comprender los conceptos básicos, las características y el uso de HTML, y ser capaz de utilizar HTML para crear aplicaciones web interactivas.
Contenido de aprendizaje:
1. ¿Qué es htmx?
- htmx es una biblioteca de JavaScript para crear aplicaciones web interactivas.
- Extiende HTML a un lenguaje declarativo e interactivo, lo que permite a los desarrolladores utilizar etiquetas HTML simples para lograr actualizaciones dinámicas de la página, carga de datos en tiempo real y envío de formularios sin actualizar la página.
2. Características de htmx:
- Ligera: la biblioteca htmx es muy pequeña, de sólo unos pocos KB de tamaño, por lo que se puede cargar y utilizar rápidamente.
- Fácil de usar: htmx utiliza atributos HTML para definir el comportamiento interactivo sin escribir código JavaScript complejo.
- Gran compatibilidad: htmx se puede utilizar junto con cualquier tecnología de back-end (como Python, Ruby, Java, etc.) y marcos de front-end (como React, Vue, etc.).
- Altamente flexible: htmx proporciona varias opciones y configuraciones, lo que permite a los desarrolladores personalizar el comportamiento de interacción según sus necesidades.
3. Uso básico de htmx:
- Atributos: htmx utiliza atributos HTML para definir comportamientos interactivos. Los atributos comúnmente utilizados incluyen `hx-get`, `hx-post`, `hx-swap`, etc.
- Eventos: htmx admite varios eventos, como `hx-click`, `hx-change`, etc., que pueden activar actualizaciones de página o carga de datos.
- Actualización de datos: htmx puede obtener datos del servidor a través de solicitudes AJAX y actualizar los datos en el área especificada de la página sin actualizar toda la página.
- Envío de formulario: htmx puede implementar el envío de formulario sin actualizar la página. Los datos del formulario se pueden enviar al servidor a través del atributo `hx-post` y los datos devueltos se pueden actualizar en la página.
Por ejemplo, aquí hay un ejemplo simple usando 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>En este ejemplo, creamos una aplicación de lista de tareas simple que incluye un formulario para agregar tareas y una lista de tareas. Usando HTML podemos agregar fácilmente interactividad a estos elementos.
Código del lado del servidor (asumiendo el marco Python y 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)
Este sencillo ejemplo demuestra cómo utilizar HTML para gestionar el envío de formularios y actualizar dinámicamente una lista de tareas. Cuando el usuario ingresa una tarea en el formulario para agregar tarea y hace clic en el botón "Agregar", htmx envía la tarea al servidor y agrega el nuevo elemento de tarea a la lista de tareas sin actualizar toda la página. Este enfoque puede mejorar enormemente la experiencia del usuario y al mismo tiempo reducir la escritura de código JavaScript de front-end. El código del lado del servidor utiliza el marco Flask para manejar solicitudes y respuestas.
Al aprender y dominar los conceptos básicos, las funciones y el uso de HTML, podrá utilizar etiquetas HTML simples para crear aplicaciones web interactivas, mejorar la experiencia del usuario y reducir la necesidad de actualizar la página.