实战｜使用 Node.js 和 htmx 构建全栈应用程序

作者：System 时间：2024年08月15日分类：所有,nodejs 字数：1155




<!-- 在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的起点。

实战｜使用 Node.js 和 htmx 构建全栈应用程序

评论已关闭

推荐阅读