使用node.js和htmx构建一个全栈应用程序

本教程显示了如何使用node.js构建一个功能齐全的CRUD应用程序，用于后端和前端的HTMX。 这证明了HTMX集成到全堆栈应用程序中，可帮助您评估其对项目的适用性。 HTMX是一个JavaScript库增强了具有部分HTML更新的Web应用程序，消除了全页重新加载。它直接传输HTML，与传统框架的JSON有效载荷不同。

>

密钥功能：

> CRUD应用程序的Node.js和HTMX结合使用，提供类似Spa的交互性而无需全页刷新。

• >即使禁用JavaScript（使用全页刷新），可以通过正确运行来维护可访问性和SEO。
使用Express.js作为网络框架和PUG进行模板，利用http动词的方法 - 跨越（put，delete）。
• >通过返回HTML而不是JSON。
• 通过检查
标题来处理各种用户方案（直接URL访问，页面刷新）。
• 包括数据库操作（使用本教程的简单内存数组），使用HTMX的动态表单处理以及用于用户反馈的Flash消息。
• HX-Request>应用程序概述：
• >教程构建了一个支持CRUD操作的简单联系管理器。 HTMX提供了类似水疗的体验，从而增强了用户交互。 JavaScript-Dissable浏览器仍然可以通过全页刷新来正常运行，可确保可访问性和SEO。

项目设置：

这需要node.js。 用

>和验证安装。 创建项目：

创建：

node -vcreatenpm -v（简短省略了初始内容，请参见GitHub repo）。 将

添加到

mkdir contact-manager
cd contact-manager
npm init -y
npm i express method-override pug

>。 运行

。app.js

const express = require('express');
const path = require('path');
const routes = require('./routes/index');
const methodOverride = require('method-override');

const app = express();

app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'pug');
app.use(express.urlencoded({ extended: true }));
app.use(methodOverride('_method'));
app.use(express.static('public'));
app.use('/', routes);

const server = app.listen(3000, () => {
  console.log(`Express is running on port ${server.address().port}`);
});

然后，教程然后详细介绍创建视图（PUG模板），样式（CSS），并实现用于显示联系人，创建新的联系人，编辑和删除联系人的HTMX功能，同时处理完整页面刷新并提供用户反馈。 完整的代码可在随附的GitHub存储库中可用。 教程结束了有关扩展应用程序的建议。

以上是使用node.js和htmx构建一个全栈应用程序的详细内容。更多信息请关注PHP中文网其他相关文章！