Erstellen Sie eine Full-Stack-App mit Node.js und HTMX

Dieses Tutorial zeigt, wie eine voll funktionsfähige CRUD -App mit node.js für das Backend und HTMX für den Frontend erstellt wird. Dies zeigt die Integration von HTMX in eine Full-Stack-Anwendung und hilft Ihnen, die Eignung für Ihre Projekte zu bewerten.

HTMX ist eine JavaScript-Bibliothek, die Web-Apps mit partiellen HTML-Updates verbessert, wodurch ganzseitige Reloads eliminiert werden. Es überträgt HTML im Gegensatz zu den JSON -Nutzlasten herkömmlicher Frameworks direkt.

Schlüsselmerkmale:

• kombiniert Node.js und HTMX für eine CRUD-App, die Spa-ähnliche Interaktivität ohne vollständige Aktualisierung bietet.
• Behält die Barrierefreiheit und die SEO durch die korrekte Funktionsweise von JavaScript (mithilfe von Ganzseitigen Aktualisierungen).
richtig funktionieren.
verwendet Express.js als Web-Framework und Mope für die Vorlagen, wobei die Methode-Override für HTTP-Verben verwendet wird (put, löschen).
implementiert dynamisches Inhaltsladen mit HTMX über AJAX -Anfragen, die HTML zurückgeben, nicht JSON.
• HX-Request behandelt verschiedene Benutzerszenarien (direkter URL -Zugriff, Seiten -Aktualisierungen), indem Sie nach
Header überprüfen.
enthält Datenbankvorgänge (mit einem einfachen In-Memory-Array für dieses Tutorial), dynamische Formulierung mit HTMX und Flash-Nachrichten für das Benutzerfeedback.

Anwendungsübersicht:

Das Tutorial baut einen einfachen Kontaktmanager auf, der CRUD -Operationen unterstützt. HTMX bietet eine Spa-ähnliche Erfahrung und verbessert die Benutzerinteraktion. JavaScript-Behinderungsbrowser funktionieren immer noch korrekt mit ganzseitigen Aktualisierungen, um die Barrierefreiheit und SEO zu gewährleisten.

Projekt -Setup:

node -v Dies erfordert Node.js. Überprüfen Sie die Installation mit npm -v und

. Erstellen Sie das Projekt:

<code class="language-bash">mkdir contact-manager
cd contact-manager
npm init -y
npm i express method-override pug</code>

app.js erstellen

:

<code class="language-javascript">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}`);
});</code>

routes/index.js erstellen "scripts": { "dev": "node --watch app.js" } (Anfangsinhalt, die für Kürze weggelassen werden, siehe Github Repo). Fügen Sie package.json zu npm run dev hinzu. Ausführen

.

In dem Tutorial werden die Ansichten (Mops -Vorlagen), Styling (CSS) und die Implementierung der HTMX -Funktionen zum Anzeigen von Kontakten, Erstellen neuer Kontakte, Bearbeiten und Löschen von Kontakten, die während der Bearbeitung vollständiger Seiten -Aktualisierungen und Bereitstellung von Benutzerfeedback, implementieren. Der komplette Code ist im dazugehörigen Github -Repository verfügbar. Das Tutorial schließt mit Vorschlägen für die Erweiterung der Anwendung ab.

Das obige ist der detaillierte Inhalt vonErstellen Sie eine Full-Stack-App mit Node.js und HTMX. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!