Créez une application complète avec Node.js et HTMX

Ce tutoriel montre comment créer une application crud entièrement fonctionnelle à l'aide de Node.js pour le backend et HTMX pour le frontend. Cela démontre l'intégration de HTMX dans une application complète, vous aidant à évaluer son aptitude à vos projets.

HTMX est une bibliothèque JavaScript améliorant les applications Web avec des mises à jour HTML partielles, éliminant les recharges complètes. Il transmet directement HTML, contrairement aux charges utiles JSON des cadres traditionnels.

Caractéristiques de clé:

• combine node.js et htmx pour une application crud, fournissant une interactivité de type spa sans rafraîchisse en pleine page.
• maintient l'accessibilité et le référencement en fonctionnant correctement même avec JavaScript désactivé (en utilisant des rafraîchissements en pleine page).
• utilise Express.js comme cadre Web et carlin pour les modèles, en utilisant la méthode-override pour les verbes HTTP (put, supprimer).
• implémente le chargement dynamique du contenu avec HTMX via les demandes AJAX renvoyant HTML, pas JSON.
• gère divers scénarios utilisateur (accès direct à l'URL, rafraîchisse de page) en vérifiant l'en-tête HX-Request.
• inclut les opérations de base de données (en utilisant un tableau simple en mémoire pour ce tutoriel), une gestion de formulaire dynamique avec HTMX et des messages flash pour les commentaires des utilisateurs.

Présentation de l'application:

Le tutoriel construit un simple gestionnaire de contacts prenant en charge les opérations CRUD. HTMX offre une expérience de type spa, améliorant l'interaction utilisateur. Les navigateurs à thèmes JavaScript fonctionnent toujours correctement avec des rafraîchissements en pleine page, assurant l'accessibilité et le référencement.

Configuration du projet:

Cela nécessite Node.js. Vérifiez l'installation avec node -v et npm -v. Créez le projet:

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

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

CREATE routes/index.js (Contenu initial omis pour la concision, voir GitHub Repo). Ajouter "scripts": { "dev": "node --watch app.js" } à package.json. Exécuter npm run dev.

Le tutoriel détaille ensuite la création des vues (modèles de carburant), le style (CSS) et la mise en œuvre des fonctionnalités HTMX pour afficher les contacts, créer de nouveaux contacts, édition et suppression de contacts, tout en gérant les rafraîchissements complètes et en fournissant des commentaires des utilisateurs. Le code complet est disponible sur le référentiel GitHub qui l'accompagne. Le tutoriel se termine par des suggestions pour prolonger l'application.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!