HTMX Demo 项目

这是一个基于 htmx 和 Express.js 的简单演示项目，展示如何使用 htmx 实现无需编写 JavaScript 即可完成动态交互的 Web 应用。

📋 项目简介

本项目通过一个简单的按钮点击示例，演示了 htmx 的核心功能：使用 HTML 属性即可实现 AJAX 请求和页面局部更新，无需编写复杂的前端 JavaScript 代码。

✨ 功能特性

• ✅ 使用 htmx 实现无刷新页面交互
• ✅ Express.js 后端服务
• ✅ 简洁的 HTML 属性式编程
• ✅ 局部 DOM 更新
• ✅ 开箱即用的演示代码

🛠 技术栈

• 后端: Express.js (v5.1.0)
• 前端: htmx (v2.0.8)
• 运行环境: Node.js

📁 项目结构

htmx-demo/
├── server.js           # Express 服务器主文件
├── public/
│   └── index.html      # 前端页面 (包含 htmx 示例)
├── package.json        # 项目依赖配置
└── README.md           # 项目说明文档

🚀 快速开始

1. 安装依赖

npm install

2. 启动服务器

node server.js

3. 访问应用

在浏览器中打开：http://localhost:3000

💡 使用说明

1. 打开页面后，你会看到一个"点我"按钮
2. 点击按钮后，htmx 会自动向服务器发送 POST 请求到 /clicked 端点
3. 服务器返回 HTML 片段
4. htmx 自动将返回的 HTML 插入到 #result 区域，无需页面刷新

📖 htmx 核心概念

在本示例中使用的 htmx 属性：

• hx-post="/clicked" - 指定 POST 请求的目标 URL
• hx-target="#result" - 指定更新的目标 DOM 元素
• hx-swap="innerHTML" - 指定如何替换目标元素的内容

htmx 的优势

• 简单直观: 使用 HTML 属性即可完成复杂交互
• 减少代码量: 无需编写大量 JavaScript 代码
• 渐进增强: 在不支持 JavaScript 的环境下也能优雅降级
• 轻量级: 库体积小，性能优秀

🔧 扩展示例

你可以尝试添加更多 htmx 功能：

• 使用 hx-get 进行 GET 请求
• 使用 hx-trigger 自定义触发事件
• 使用 hx-swap 的不同模式（outerHTML、beforebegin、afterend 等）
• 添加加载指示器（hx-indicator）
• 实现表单验证和提交

📚 相关资源

• htmx 官方文档
• Express.js 官方文档
• htmx 示例集合

📄 许可证

ISC

👨‍💻 开发建议

如果想要在开发过程中自动重启服务器，可以安装 nodemon：

npm install --save-dev nodemon

然后在 package.json 中添加脚本：

"scripts": {
  "start": "node server.js",
  "dev": "nodemon server.js"
}

之后使用 npm run dev 启动开发服务器即可。