实战｜使用 Node.js 和 htmx 构建全栈应用程序
<!-- 在HTML文件中，引入htmx和你的自定义组件 -->
<!doctype html>
<html hx-boost="true">
<head>
<title>HTMX 示例</title>
<script src="https://unpkg.com/htmx.org@1.8.0/dist/htmx.min.js"></script>
<script src="path/to/your-custom-component.js"></script>
</head>
<body>
<!-- 使用htmx属性定义交互行为 -->
<div hx-get="/api/data" hx-trigger="load">
加载中...
</div>
<button hx-post="/api/save" hx-include="event" hx-trigger="click">
保存
</button>
</body>
</html>
// your-custom-component.js
// 自定义组件示例，可以扩展HTMX的功能
hx.CustomComponent.prototype.doSomething = function() {
console.log('Doing something custom with HTMX!');
};
// server.js
// 使用Node.js设置简单的API端点
const express = require('express');
const app = express();
app.get('/api/data', (req, res) => {
res.json({ data: '这是从服务器加载的数据' });
});
app.post('/api/save', (req, res) => {
console.log('数据被保存:', req.body);
res.send('数据已保存');
});
app.listen(3000, () => {
console.log('服务器运行在 http://localhost:3000');
});以上代码示例展示了如何在前端使用HTMX，以及如何在Node.js后端提供API端点。这个简单的全栈示例可以作为开发者学习和实践HTMX及Node.js的起点。
评论已关闭