htmx 是一个现代 JavaScript 库，旨在通过实现部分 HTML 更新来增强 Web 应用，而无需重新加载整个页面。与传统前端框架中的 JSON 有效载荷不同，它通过有线方式发送 HTML 来实现这一功能。
我们将开发一个简单的联系人管理器，能够执行所有 CRUD 操作：创建、读取、更新和删除联系人。通过利用 htmx，该应用程序将提供单页应用程序 (SPA) 的感觉，从而增强交互性和用户体验。
如果用户禁用 JavaScript，应用程序将以整页刷新的方式运行，从而保持可用性和可发现性。这种方法展示了 htmx 创建现代 Web 应用程序的能力，同时保持它们的可访问性和 SEO 友好性。
这就是我们最终得到的结果。
图片
本文的代码可以在随附的 GitHub 存储库[1]中找到。
要学习本教程，您需要在 PC 上安装 Node.js。如果您尚未安装 Node，请前往官方 Node 下载页面并获取适合您系统的正确二进制文件。或者，您可能想使用版本管理器安装 Node。这种方法允许您安装多个 Node 版本并在它们之间随意切换。
除此之外，熟悉 Node、Pug（我们将使用它们作为模板引擎）和 htmx 会有所帮助，但不是必需的。如果您想复习以上任何内容，请查看我们的教程：使用 Node 构建简单的初学者应用程序[2]、Pug HTML 模板预处理器指南[3]和 htmx 简介[4]。
在开始之前，请运行以下命令：
node -vnpm -v您应该看到如下输出：
v20.11.110.4.0这确认了 Node 和 npm 已安装在您的计算机上，并且可以从命令行环境进行访问。
让我们从搭建一个新的 Node 项目开始：
mkdir contact-managercd contact-managernpm init -y这应该在项目根目录中创建一个 package.json 文件。
接下来，让我们安装我们需要的依赖项：
npm i express method-override pug在这些包中，Express 是我们应用程序的支柱。它是一个快速且简约的 Web 框架，提供了一种简单的方法来处理请求和响应，并将 URL 路由到特定的处理函数。 Pug 将充当我们的模板引擎，而我们将使用方法覆盖在客户端不支持的地方使用 HTTP 动词，例如 PUT 和 DELETE。
接下来，在根目录中创建一个 app.js 文件：
touch app.js并添加以下内容：
const express = require('express');const path = require('path');const routes = require('./routes/index');const app = express();app.set('views', path.join(__dirname, 'views'));app.set('view engine', 'pug');app.use(express.static('public'));app.use('/', routes);const server = app.listen(3000, () => { console.log(`Express is running on port ${server.address().port}`);});在这里，我们正在设置 Express 应用程序的结构。这包括将 Pug 配置为渲染视图的视图引擎、定义静态资产的目录以及连接路由器。
该应用程序侦听端口 3000，并使用控制台日志来确认 Express 正在运行并准备好处理指定端口上的请求。此设置构成了我们应用程序的基础，并准备好通过更多功能和路由进行扩展。
接下来，让我们创建路由文件：
mkdir routestouch routes/index.js打开该文件并添加以下内容：
const express = require('express');const router = express.Router();// GET /contactsrouter.get('/contacts', async (req, res) => { res.send('It works!');});在这里，我们在新创建的路由目录中设置基本路由。此路由在 /contacts 端点侦听 GET 请求，并使用简单的确认消息进行响应，表明一切正常。
接下来，使用以下内容更新 package.json 文件的“scripts”部分：
"scripts": { "dev": "node --watch app.js"},这利用了 Node.js 中的新监视模式，只要检测到任何更改，该模式就会重新启动我们的应用程序。
最后，使用 npm run dev 启动所有内容，然后在浏览器中访问 http://localhost:3000/contacts/。您应该会看到一条消息“It works!”。
图片
激动人心的时刻！
现在让我们添加一些要显示的联系人。由于我们专注于 htmx，因此为了简单起见，我们将使用硬编码数组。这将使事情变得精简，使我们能够专注于 htmx 的动态功能，而无需复杂的数据库集成。
对于那些有兴趣稍后添加数据库的人来说，SQLite 和 Sequelize 是不错的选择，它们提供了不需要单独数据库服务器的基于文件的系统。
话虽如此，请将以下内容添加到第一个路由之前的 index.js 中：
const contacts = [ { id: 1, name: 'John Doe', email: 'john.doe@example.com' }, { id: 2, name: 'Jane Smith', email: 'jane.smith@example.com' }, { id: 3, name: 'Emily Johnson', email: 'emily.johnson@example.com' }, { id: 4, name: 'Aarav Patel', email: 'aarav.patel@example.com' }, { id: 5, name: 'Liu Wei', email: 'liu.wei@example.com' }, { id: 6, name: 'Fatima Zahra', email: 'fatima.zahra@example.com' }, { id: 7, name: 'Carlos Hernández', email: 'carlos.hernandez@example.com' }, { id: 8, name: 'Olivia Kim', email: 'olivia.kim@example.com' }, { id: 9, name: 'Kwame Nkrumah', email: 'kwame.nkrumah@example.com' }, { id: 10, name: 'Chen Yu', email: 'chen.yu@example.com' },];现在，我们需要为路由创建一个显示模板。创建一个包含 index.pug 文件的 views 文件夹：
mkdir viewstouch views/index.pug并添加以下内容：
doctype htmlhtml head meta(charset='UTF-8') title Contact Manager link(rel='preconnect', href='https://fonts.googleapis.com') link(rel='preconnect', href='https://fonts.gstatic.com', crossorigin) link(href='https://fonts.googleapis.com/css2?family=Roboto:wght@300;400&display=swap', rel='stylesheet') link(rel='stylesheet', href='/styles.css') body header a(href='/contacts') h1 Contact Manager section#sidebar ul.contact-list each contact in contacts li #{contact.name} div.actions a(href='/contacts/new') New Contact main#content p Select a contact script(src='https://unpkg.com/htmx.org@1.9.10')在此模板中，我们为应用程序布置 HTML 结构。在 head 部分，我们包含了来自 Google Fonts 的 Roboto 字体和自定义样式的样式表。
正文分为标题、用于列出联系人的侧边栏以及用于存放所有联系信息的主要内容区域。内容区域当前包含一个占位符。在正文的末尾，我们还包含来自 CDN 的最新版本的 htmx 库。
该模板期望接收一个联系人数组（在 contacts 变量中），我们在侧边栏中对其进行迭代，并使用 Pug 的插值语法在无序列表中输出每个联系人姓名。
接下来，让我们创建自定义样式表：
mkdir publictouch public/styles.css我不想在这里列出样式。请从随附的 GitHub 存储库中的 CSS 文件[5]中复制它们，或者随意添加一些您自己的 CSS 文件。
本文链接：//www.dmpip.com//www.dmpip.com/showinfo-26-78654-0.html使用 Node.js 和 htmx 构建全栈 CRUD 应用程序
声明：本网页内容旨在传播知识，若有侵权等问题请及时与本网联系，我们将在第一时间删除处理。邮件：2376512515@qq.com
Copyright © 2016-2023 天津谷骐科技有限公司 版权所有 sitemap.xml
违法及侵权请联系：2376512515@qq.com 津ICP备18001702号
津公网安备 12010102000574号
