node.jsとhtmxを使用してフルスタックアプリを作成します

このチュートリアルは、バックエンドにnode.jsを使用して完全に機能的なCRUDアプリを構築する方法と、フロントエンドにHTMXを構築する方法を示しています。 これは、HTMXがフルスタックアプリケーションへの統合を示しており、プロジェクトへの適合性を評価するのに役立ちます。

HTMXは、部分的なHTMLアップデートを備えたWebアプリを強化するJavaScriptライブラリであり、フルページのリロードを排除します。従来のフレームワークのJSONペイロードとは異なり、HTMLを直接送信します。

主要な機能：

node.jsとhtmxをCRUDアプリのhtmxを組み合わせて、フルページのリフレッシュなしでスパのような対話性を提供します。

JavaScriptが無効になっても正しく機能することにより、アクセシビリティとSEOを維持します（フルページのリフレッシュを使用）。

express.jsをWebフレームワークとして採用し、テンプレートにPUGを使用し、HTTP動詞にメソッドオーバーライドを使用します（Put、Delete）。
• AJAXリクエストを介してHTMXを使用して動的なコンテンツの読み込みを実装します。JSONではなくHTMLを返します。
• ヘッダーをチェックして、さまざまなユーザーシナリオ（直接URLアクセス、ページリフレッシュ）を処理します。
データベース操作（このチュートリアルにシンプルなインメモリアレイを使用）、HTMXを使用した動的フォーム処理、およびユーザーフィードバックのフラッシュメッセージを含めます。
• アプリケーションの概要：
• HX-Requestチュートリアルは、CRUD操作をサポートするシンプルな連絡先マネージャーを構築します。 HTMXは、スパのようなエクスペリエンスを提供し、ユーザーの相互作用を強化します。 JavaScript-Disabledブラウザは、フルページのリフレッシュでまだ正しく機能し、アクセシビリティとSEOを確保します。

プロジェクトのセットアップ：

これにはnode.jsが必要です

および

でインストールを確認します。 プロジェクトを作成：

create

：

create

（簡潔にするために省略された初期コンテンツ、Github Repoを参照）。 node -vを追加します。 実行npm -v。

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

app.js

チュートリアルでは、ビュー（PUGテンプレート）、スタイリング（CSS）、および連絡先を表示するためのHTMX機能の実装、新しい連絡先の作成、連絡先の編集、削除のためのHTMX機能の実装、すべてのページのリフレッシュとユーザーフィードバックの提供を詳細に作成します。 完全なコードは、付随するGitHubリポジトリで利用できます。 チュートリアルは、アプリケーションを拡張するための提案で終了します。

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}`);
});

以上がnode.jsとhtmxを使用してフルスタックアプリを作成しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。