Bina aplikasi stack penuh dengan node.js dan htmx

Tutorial ini menunjukkan bagaimana untuk membina aplikasi CRUD berfungsi sepenuhnya menggunakan Node.js untuk backend dan htmx untuk frontend. Ini menunjukkan integrasi HTMX ke dalam aplikasi lengkap, membantu anda menilai kesesuaiannya untuk projek anda.

HTMX adalah perpustakaan JavaScript meningkatkan aplikasi web dengan kemas kini HTML separa, menghapuskan reload penuh halaman. Ia menghantar HTML secara langsung, tidak seperti muatan JSON kerangka tradisional.

Ciri -ciri Utama:

• menggabungkan node.js dan htmx untuk aplikasi CRUD, menyediakan interaktiviti seperti spa tanpa menyegarkan halaman penuh.
• mengekalkan kebolehcapaian dan SEO dengan berfungsi dengan betul walaupun dengan JavaScript dilumpuhkan (menggunakan refreshes penuh halaman).
• menggunakan express.js sebagai rangka kerja web dan pug untuk templating, menggunakan kaedah-override untuk kata kerja HTTP (meletakkan, memadam).
• Melaksanakan pemuatan kandungan dinamik dengan HTMX melalui permintaan AJAX yang kembali HTML, bukan JSON.
• mengendalikan pelbagai senario pengguna (akses URL langsung, halaman menyegarkan) dengan menyemak header HX-Request.
• Termasuk operasi pangkalan data (menggunakan array dalam memori yang mudah untuk tutorial ini), pengendalian bentuk dinamik dengan HTMX, dan mesej kilat untuk maklum balas pengguna.

Gambaran keseluruhan aplikasi:

Tutorial membina pengurus hubungan mudah yang menyokong operasi CRUD. HTMX menyediakan pengalaman seperti spa, meningkatkan interaksi pengguna. Pelayar JavaScript-disabled masih berfungsi dengan betul dengan menyegarkan semula halaman penuh, memastikan kebolehcapaian dan SEO.

Persediaan Projek:

Ini memerlukan node.js. Sahkan pemasangan dengan

dan node -v. Buat projek: npm -v

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

Buat

: app.js

3 Tambah

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

ke

. Jalankan routes/index.js. "scripts": { "dev": "node --watch app.js" } package.json npm run dev

Tutorial kemudian butiran membuat pandangan (templat PUG), Styling (CSS), dan melaksanakan ciri -ciri HTMX untuk memaparkan kenalan, membuat kenalan baru, penyuntingan, dan memadam kenalan, sambil mengendalikan penyegaran halaman penuh dan memberikan maklum balas pengguna. Kod lengkap boleh didapati di repositori GitHub yang disertakan. Tutorial disimpulkan dengan cadangan untuk memperluaskan permohonan.

Atas ialah kandungan terperinci Bina aplikasi stack penuh dengan node.js dan htmx. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!