2023 年的 Node.js 生態系統
隨著技術的不斷演進和創新，Node.js 在 2023 年達到了一個新的高度。Node.js 擁有一個龐大的生態系統，可以幫助開發人員更快地實現復雜的應用。本文就來看看 Node.js 最新的生
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', ) link(rel='preconnect', , crossorigin) link(, 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 文件。
本文鏈接：http://www.www897cc.com/showinfo-26-78654-0.html使用 Node.js 和 htmx 構建全棧 CRUD 應用程序
聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。郵件：2376512515@qq.com
Copyright ? 2016-2023 天津谷騏科技有限公司 版權所有 sitemap.xml
違法及侵權請聯系：2376512515@qq.com 津ICP備18001702號
津公網安備 12010102000574號