Node.js

如何使用Pug模板引擎 Pug介紹 Pug長什麼樣子？ 安裝Pug 設置Pug作為Express的模板引擎 你的第一個Pug模板 在Pug中插入變量 插入函數返回值 為元素添加id和class屬性 設置doctype Meta標籤 添加腳本和樣式 內聯腳本 循環 條件語句 設置變量 增加變量的值 將變量賦值給元素值 迭代變量 包含其他Pug文件 定義塊 擴展基礎模板 注釋 可見 不可見 Pug介紹 什麼是Pug？它是一個用於服務端Node.js應用程序的模板引擎。 Express有能力處理服務端模板引擎。模板引擎允許我們將數據添加到視圖中，動態生成HTML。 Pug是一個舊東西的新名字。它是Jade 2.0。 由於商標問題，當該項目在2016年發布2.0版本時，名稱從Jade更改為Pug。您仍然可以使用Jade（又名Pug 1.0），但未來最好使用Pug 2.0。 也可以參考Jade和Pug之間的差異 Express使用Jade作為默認的模板引擎。如上所述，Jade是Pug的舊版本 - 具體而言是Pug 1.0。 儘管Jade的最後一個版本已經是3年前（在撰寫本文時，2018年夏季），但出於向後兼容的原因，它仍然是Express的默認版本。 Pug的官方網站是https://pugjs.org/。 Pug長什麼樣子？ p 您好，來自Flavio 此模板將創建一個內容為“您好，來自Flavio”的p標簽。 如您所見，Pug非常特殊。它將標簽名作為行中的第一個內容，其餘內容作為標簽中的內容。 如果您習慣使用使用HTML並插入變量的模板引擎（例如Handlebars，下面將進行介紹），您可能會遇到問題，尤其是當您需要將現有的HTML轉換為Pug時。這款將HTML轉換為Jade（非常相似，但與Pug稍有不同）的在線轉換器將非常有幫助：https://jsonformatter.org/html-to-jade 安裝Pug 安裝Pug非常簡單，只需運行npm install： npm install pug 設置Pug作為Express的模板引擎 在初始化Express應用程序時，我們需要設置它： const path = require('path') const express = require('express') const app = express() app.set('view engine', 'pug') app.set('views', path....

了解如何修復“referenceerror: window未定義”錯誤。 在Node.js或類似Next.js的工具中，你可能會遇到這個錯誤。 window是瀏覽器提供的一個對象，在服務器端的JavaScript環境中不可用。 我在我的詳細的DOM 文檔物件模型指南中詳細介紹了window對象。 對於Node.js來說，沒有辦法解決這個問題 - 你必須找到使用window的特定位置，並重新檢查代碼以找出為什麼要訪問window對象。 你在後端環境中運行前端代碼。 在Next.js中，你可以通過將代碼包裝在條件語句中來解決這個問題。 該代碼在兩種情況下運行 - 前端情況下，當你使用鏈接訪問頁面時，以及如果你在頁面中引入了服務器端的代碼，例如通過運行getServerSideProps()。 在這種情況下，你可以將引用限制在一個條件語句中，檢查window對象是否可用，像這樣： if (typeof window !== 'undefined') { // 這裡`window`是可用的 } 這樣就可以解決你的問題，因為你只在瀏覽器環境中運行條件語句內的任何代碼。

SQL注入是對於使用SQL查詢的基於數據庫的應用程序而言的最大威脅之一，並且與輸入數據消毒聯繫在一起。 假設我們使用Node.js運行這樣一個簡單的查詢（這裡使用偽代碼）： const color = //來自用戶輸入 const query = `select * from cars where color = '${color}'` 如果color是一個包含顏色（如red或blue）的字符串，一切正常運作。 但是如果你接受來自表單中input字段的字符串，並且攻擊者輸入字符串"blue';drop table cars;"，你看到發生了什麼嗎？ 現在query的值是： select * from cars where color = 'blue';drop table cars;' 如果你執行這個查詢，除非你在數據庫使用者的權限中移除了刪除表的選項，否則這將刪除所有數據。 再舉個例子。 假設你執行這樣一個查詢： const query = 'SELECT * FROM users where name = "' + name + '"' 如果你接受來自表單的name變量，並且沒有對其進行消毒，有人可能輸入以下值： flavio"; DELETE * FROM users; SELECT * FROM users where name ="flavio 看到了嗎？現在查詢變成了： SELECT * FROM users where name = "flavio"; DELETE * FROM users; SELECT * FROM users where name ="flavio" 這將導致用戶表被刪除。...

我在 Ubuntu 上運行一個 Node 服務，但被困在舊的 Node.js 版本上。 以下是我升級到最新版本的步驟： curl -sL https://deb.nodesource.com/setup\_18.x | sudo -E bash - sudo apt-get install -y nodejs https://deb.nodesource.com/setup_18.x 這個腳本指向 LTS 版本。 將這個數字改為 19，例如 https://deb.nodesource.com/setup_19.x ，即可使用最新版本。 若有20/21版本，只需更改相應的數字即可。

了解如何使用 Zeit 所創造的 Now 平台 Zeit 現在被稱為 Vercel，此教學可能已經過時。 部署 Node.js 應用程式最簡單的方法之一就是使用 Zeit 所創造的 Now 平台。 最近推出了 Now 2。此教學專注於 Now 2。與 Now 1 有許多不同之處，在這篇文章中有詳細說明。 Now 讓應用程式的部署和分發步驟變得非常簡單和快速。你可以把它當成「雲端」，因為你並不知道你的應用程式將被部署在哪裡，但你知道你將擁有一個可以訪問的 URL。 你可以使用 Now 部署 Node.js 應用程式、靜態網站等等。 Now 不僅支援 Node.js，還支援 Go、PHP、Python 和其他語言，但在這個教學中我只會考慮 Node.js 這個技術。 Now 有免費的使用方案，包括免費 SSL、100GB 的主機空間、每日 1000 次 無伺服器 函數調用、每月 1000 次建置、每月 100GB 的頻寬以及全球 CDN 的使用。如果你需要更多，價格頁面可以讓你對成本有個概念。 安裝 最好的方式是安裝 Now Desktop，你可以從 https://github.com/zeit/now-desktop 下載它。這是一個 Electron 應用程式，也會安裝 Now CLI，這是我們稍後會使用的工具。 透過 Now Desktop，你可以使用簡單的拖放介面部署應用程式，非常方便！ 提示：如果你喜歡，你也可以只安裝命令行工具，可以從 https://zeit.co/download 安裝 now CLI。...

Node.js 的 setImmediate() 函數以特殊的方式與事件循環進行交互。 當你想要異步地執行某段代碼，並且盡快地執行時，可以使用 Node.js 提供的 setImmediate() 函數： setImmediate(() => { // 執行某些操作 }) 傳遞給 setImmediate() 的任何函數都是在事件循環的下一次迭代中執行的回調函數。 setImmediate() 與使用 0ms 延遲的 setTimeout(() => {}, 0) 和 process.nextTick() 有何不同？ 傳遞給 process.nextTick() 的函數將在當前的事件循環迭代中執行，在當前操作結束後執行。這意味著它總是在 setTimeout 和 setImmediate 之前執行。 具有 0ms 延遲的 setTimeout() 回調函數與 setImmediate() 非常相似。執行順序將取決於各種因素，但它們都會在事件循環的下一次迭代中運行。

對 package.json 文件中的 peerDependencies 字段進行簡單解釋 在一些 package.json 文件中，你可能會看到以下幾行代碼： { //... "peerDependencies": { "libraryName": "1.x" } } 你可能已經看過 dependencies 和 devDependencies，但沒有看過 peerDependencies。 dependencies 是你的項目所依賴的包。 devDependencies 是在開發階段所需的包。比如測試框架像 Jest，或是其他像 Babel 或 ESLint 這樣的工具包。 在這兩種情況下，當你安裝一個包時，它的 dependencies 和 devDependencies 會被自動安裝。 然而，peerDependencies 不同。它們不會自動安裝。 當一個依賴被列為 peerDependency，它並不會自動安裝。相反，包含該包的程式碼必須將其列為自己的依賴。 如果你運行 npm install，但沒有找到這個依賴的話，npm 會給你一個警告。 舉個例子，假設包 a 包含依賴 b： a/package.json { //... "dependencies": { "b": "1.x" } } 包 b 又要求包 c 為其 peerDependency： b/package.json { //... "peerDependencies": { "c": "1.x" } } 在包 a 中，我們必須將 c 添加為依賴，否則當你安裝包 b 時，npm 會給出一個警告（並且代碼可能在運行時失敗）：...

在編寫整合不同服務的程式碼時，使用 Webhook 是很常見的。 什麼是 Webhook？ Webhook 是一個 POST 請求處理器，它會等待有人呼叫它，在有人呼叫時進行某些工作。 讓我舉個例子。我使用 Paddle 來銷售我的 Bootcamp，每當有人註冊時，我的 Webhook 會被呼叫並傳遞一些 JSON 資料。 這些資料包括客戶的電子郵件、客戶姓名和已購買的產品。 然後，Webhook 負責將客戶添加到 Airtable 底稿中，並向客戶發送歡迎郵件和一些資訊。 在我這個特定的案例中，Webhook 是使用 Express 所建構的 Node.js 應用程式，但它可以是任何能夠接受網路請求且可從互聯網訪問的東西。我將它放在了一個 VPS 上，但也可以是一個無伺服器函數。 支付平台提供 Webhook 是很常見的 - 它們處理付款，然後讓你執行你可能需要執行的「事情」。 Webhook 的另一個使用案例是在你想要時在一台機器上執行任務。例如，所有部署平台都提供 Webhook，你可以呼叫該 Webhook 來觸發新的部署。 我在 Netlify 或 Cloudflare Pages 使用它。我在 IFTTT 上設定了一個任務，每天早上 8 點觸發部署程序，所以我前一天安排的文章現在被發佈了，因為它的發佈日期已經過去了。 這對於我的一貫性非常重要，因為我知道每天早上 8 點我的靜態網站的文章都會被發佈。我不再需要手動執行此動作。 許多無代碼工具允許你使用它們來創建自動化。它們是非常酷的。 如果你思考一下，Webhook 就是讓互聯網保持連接的黏合劑。它們確實讓我能運行我的業務，所以我對它們的存在感到感激。

如何使用 module.exports API 將數據公開給應用程序中的其他文件，或者公開給其他應用程序。 Node 具有內置的模塊系統。 Node.js 文件可以導入其他 Node.js 文件公開的功能。 當你想要導入某些東西時，你可以使用 const library = require('./library') 來導入位於當前文件夾中的 library.js 文件中公開的功能。 在這個文件中，必須先公開功能，才能被其他文件導入。 文件中默認情況下定義的任何其他對象或變量都是私有的，不會對外部世界公開。 這就是 module 系統 提供的 module.exports API 所允許的。 當你將對象或函數指定為一個新的 exports 屬性時，該對象或函數就被公開了，因此可以在應用程序的其他部分或其他應用程序中導入。 有兩種方法可以實現這樣做。 第一種是將對象分配給 module.exports，它是模塊系統提供的一個預設對象，這將使你的文件僅導出該對象： const car = { brand: 'Ford', model: 'Fiesta' } module.exports = car //..在另一個文件中 const car = require('./car') 第二種方法是將導出的對象作為 exports 的屬性添加。這種方式允許你導出多個對象、函數或數據： const car = { brand: 'Ford', model: 'Fiesta' } exports.car = car 或者直接這樣寫： exports.car = { brand: 'Ford', model: 'Fiesta' } 在其他文件中，你可以通過引用導入的屬性來使用它：...

使用 create-react-app 建立 Electron Node.js 桌面應用程式的方法 2021 更新: 我強烈建議使用 electron-react-boilerplate 取代本文所述的方法 如果尚未安裝 Node.js，請先安裝 轉到開發資料夾 建立 React 應用程式 加入 Electron 安裝 foreman 以允許從命令列執行應用程式 安裝 create-react-app 的相依性 配置 eslint 配置完成！ 啟動 感謝 當我在 2015 年首次使用 Electron 時，它還不清楚它在現代應用程式中如此普及，而且我對其所導致的應用程式大小感到震驚。 但是，我們可以清楚地知道 Electron 已經成為必不可少的工具，並且你的應用程式不需要讓人感到遲鈍和消耗大量記憶體，就像VS Code每天向我展示的那樣（在一部不是非常快的機器上）。 所以，這裡有一個快速入門指南，使用 create-react-app 創建一個React應用程式，並預先整合了 ESlint。 如果尚未安裝 Node.js, 請先安裝 在 macOS 上： brew install node 轉到開發資料夾 cd ~/dev 建立 React 應用程式 npx create-react-app app cd app 加入 Electron npm install electron npm install --save-dev electron-builder 安裝 foreman 以允許從命令列執行應用程式 npm install foreman -g 安裝 create-react-app 的相依性 npm install 配置 eslint ....