8月總票房已突破10億！《封神》第一：口碑已經(jīng)成了
8月5日消息，據(jù)燈塔專業(yè)版數(shù)據(jù)，截至8月5日9時35分，8月總票房（含預(yù)售）已突破10億。其中，《封神》以大比分的優(yōu)勢領(lǐng)先。根據(jù)官方消息，目前該片總票房已經(jīng)超過14.
htmx 是一個現(xiàn)代 JavaScript 庫，旨在通過實現(xiàn)部分 HTML 更新來增強 Web 應(yīng)用，而無需重新加載整個頁面。與傳統(tǒng)前端框架中的 JSON 有效載荷不同，它通過有線方式發(fā)送 HTML 來實現(xiàn)這一功能。
我們將開發(fā)一個簡單的聯(lián)系人管理器，能夠執(zhí)行所有 CRUD 操作：創(chuàng)建、讀取、更新和刪除聯(lián)系人。通過利用 htmx，該應(yīng)用程序?qū)⑻峁﹩雾搼?yīng)用程序 (SPA) 的感覺，從而增強交互性和用戶體驗。
如果用戶禁用 JavaScript，應(yīng)用程序?qū)⒁哉撍⑿碌姆绞竭\行，從而保持可用性和可發(fā)現(xiàn)性。這種方法展示了 htmx 創(chuàng)建現(xiàn)代 Web 應(yīng)用程序的能力，同時保持它們的可訪問性和 SEO 友好性。
這就是我們最終得到的結(jié)果。
圖片
本文的代碼可以在隨附的 GitHub 存儲庫[1]中找到。
要學(xué)習(xí)本教程，您需要在 PC 上安裝 Node.js。如果您尚未安裝 Node，請前往官方 Node 下載頁面并獲取適合您系統(tǒng)的正確二進制文件。或者，您可能想使用版本管理器安裝 Node。這種方法允許您安裝多個 Node 版本并在它們之間隨意切換。
除此之外，熟悉 Node、Pug（我們將使用它們作為模板引擎）和 htmx 會有所幫助，但不是必需的。如果您想復(fù)習(xí)以上任何內(nèi)容，請查看我們的教程：使用 Node 構(gòu)建簡單的初學(xué)者應(yīng)用程序[2]、Pug HTML 模板預(yù)處理器指南[3]和 htmx 簡介[4]。
在開始之前，請運行以下命令：
node -vnpm -v您應(yīng)該看到如下輸出：
v20.11.110.4.0這確認了 Node 和 npm 已安裝在您的計算機上，并且可以從命令行環(huán)境進行訪問。
讓我們從搭建一個新的 Node 項目開始：
mkdir contact-managercd contact-managernpm init -y這應(yīng)該在項目根目錄中創(chuàng)建一個 package.json 文件。
接下來，讓我們安裝我們需要的依賴項：
npm i express method-override pug在這些包中，Express 是我們應(yīng)用程序的支柱。它是一個快速且簡約的 Web 框架，提供了一種簡單的方法來處理請求和響應(yīng)，并將 URL 路由到特定的處理函數(shù)。 Pug 將充當(dāng)我們的模板引擎，而我們將使用方法覆蓋在客戶端不支持的地方使用 HTTP 動詞，例如 PUT 和 DELETE。
接下來，在根目錄中創(chuàng)建一個 app.js 文件：
touch app.js并添加以下內(nèi)容：
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}`);});在這里，我們正在設(shè)置 Express 應(yīng)用程序的結(jié)構(gòu)。這包括將 Pug 配置為渲染視圖的視圖引擎、定義靜態(tài)資產(chǎn)的目錄以及連接路由器。
該應(yīng)用程序偵聽端口 3000，并使用控制臺日志來確認 Express 正在運行并準(zhǔn)備好處理指定端口上的請求。此設(shè)置構(gòu)成了我們應(yīng)用程序的基礎(chǔ)，并準(zhǔn)備好通過更多功能和路由進行擴展。
接下來，讓我們創(chuàng)建路由文件：
mkdir routestouch routes/index.js打開該文件并添加以下內(nèi)容：
const express = require('express');const router = express.Router();// GET /contactsrouter.get('/contacts', async (req, res) => { res.send('It works!');});在這里，我們在新創(chuàng)建的路由目錄中設(shè)置基本路由。此路由在 /contacts 端點偵聽 GET 請求，并使用簡單的確認消息進行響應(yīng)，表明一切正常。
接下來，使用以下內(nèi)容更新 package.json 文件的“scripts”部分：
"scripts": { "dev": "node --watch app.js"},這利用了 Node.js 中的新監(jiān)視模式，只要檢測到任何更改，該模式就會重新啟動我們的應(yīng)用程序。
最后，使用 npm run dev 啟動所有內(nèi)容，然后在瀏覽器中訪問 http://localhost:3000/contacts/。您應(yīng)該會看到一條消息“It works!”。
圖片
激動人心的時刻！
現(xiàn)在讓我們添加一些要顯示的聯(lián)系人。由于我們專注于 htmx，因此為了簡單起見，我們將使用硬編碼數(shù)組。這將使事情變得精簡，使我們能夠?qū)Ｗ⒂?htmx 的動態(tài)功能，而無需復(fù)雜的數(shù)據(jù)庫集成。
對于那些有興趣稍后添加數(shù)據(jù)庫的人來說，SQLite 和 Sequelize 是不錯的選擇，它們提供了不需要單獨數(shù)據(jù)庫服務(wù)器的基于文件的系統(tǒng)。
話雖如此，請將以下內(nèi)容添加到第一個路由之前的 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' },];現(xiàn)在，我們需要為路由創(chuàng)建一個顯示模板。創(chuàng)建一個包含 index.pug 文件的 views 文件夾：
mkdir viewstouch views/index.pug并添加以下內(nèi)容：
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')在此模板中，我們?yōu)閼?yīng)用程序布置 HTML 結(jié)構(gòu)。在 head 部分，我們包含了來自 Google Fonts 的 Roboto 字體和自定義樣式的樣式表。
正文分為標(biāo)題、用于列出聯(lián)系人的側(cè)邊欄以及用于存放所有聯(lián)系信息的主要內(nèi)容區(qū)域。內(nèi)容區(qū)域當(dāng)前包含一個占位符。在正文的末尾，我們還包含來自 CDN 的最新版本的 htmx 庫。
該模板期望接收一個聯(lián)系人數(shù)組（在 contacts 變量中），我們在側(cè)邊欄中對其進行迭代，并使用 Pug 的插值語法在無序列表中輸出每個聯(lián)系人姓名。
接下來，讓我們創(chuàng)建自定義樣式表：
mkdir publictouch public/styles.css我不想在這里列出樣式。請從隨附的 GitHub 存儲庫中的 CSS 文件[5]中復(fù)制它們，或者隨意添加一些您自己的 CSS 文件。
本文鏈接：http://www.www897cc.com/showinfo-26-78654-0.html使用 Node.js 和 htmx 構(gòu)建全棧 CRUD 應(yīng)用程序
聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。郵件：2376512515@qq.com
Copyright ? 2016-2023 天津谷騏科技有限公司 版權(quán)所有 sitemap.xml
違法及侵權(quán)請聯(lián)系：2376512515@qq.com 津ICP備18001702號
津公網(wǎng)安備 12010102000574號