使用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中文網其他相關文章！