1. 從瀏覽器到服務(wù)器JavaScript 開發(fā)者為什么要學(xué) Node.js很多同學(xué)學(xué)完 JavaScript 基礎(chǔ)之后會陷入一個很常見的困惑JS 明明是在瀏覽器里跑的怎么突然又冒出來一個 Node.js它到底是不是一門新語言我要不要學(xué)學(xué)了能干嘛先直接把結(jié)論擺在這里Node.js 不是一門新語言它就是一個用 C 寫的 JavaScript 運行環(huán)境。瀏覽器能跑 JavaScript是因為瀏覽器內(nèi)置了 V8 引擎來解析和執(zhí)行 JS 代碼Node.js 則是把 V8 引擎從瀏覽器里抽了出來裝進了一個獨立的程序里讓 JavaScript 脫離瀏覽器也能運行而且還能像 PHP、Java 一樣去寫后端服務(wù)。這套 JavaScript 基礎(chǔ)課程講到這里正是從純前端切入后端的關(guān)鍵節(jié)點。之前我們寫的所有 JS 代碼都是跑在瀏覽器里的操作的也是頁面上的 DOM、事件、Ajax。但從這一篇開始你會發(fā)現(xiàn)同樣的語法換一個運行環(huán)境就能去處理文件、連接數(shù)據(jù)庫、寫 HTTP 服務(wù)接口。我見過太多人卡在這個轉(zhuǎn)型節(jié)點上。有人覺得后端是另一套完全不同的知識體系心里發(fā)怵有人一上來就去背 Express 的 API結(jié)果遇到問題完全不知道從哪里排查。其實 Node.js 后端入門遠(yuǎn)沒有想象中那么嚇人關(guān)鍵是先建立起一個完整的認(rèn)知框架它是什么、為什么需要它、它和瀏覽器端 JS 到底有什么不同、它自己獨特的運行機制又是什么。這一篇我就按照我做全棧項目時帶新人的思路把 Node.js 后端基礎(chǔ)拆成幾個核心模塊來拆解。你不需要一次性記住所有 API但學(xué)完之后一定要能獨立從零搭建一個簡單的后端服務(wù)并且能理解它每一步在干什么。這篇內(nèi)容適合基礎(chǔ)篇最后幾章在讀的人也適合已經(jīng)會寫前端但一直沒入門后端的同學(xué)參考。2. 環(huán)境準(zhǔn)備Node.js 安裝與驗證2.1 安裝前先理解版本選擇不管是在 Windows、macOS 還是 Linux 上裝 Node.js本質(zhì)上做的事情都一樣把 Node.js 運行時和 npm 包管理器裝到你電腦上。npm 是 Node.js 自帶的包管理工具后面裝 Express、axios 這些第三方庫全靠它。官網(wǎng)下載地址是 nodejs.org打開之后你會發(fā)現(xiàn)有兩個版本一個寫著 LTS一個寫著 Current。我給你的建議非常簡單粗暴永遠(yuǎn)裝 LTS 版本。LTS 全稱 Long Term Support是長期維護版本生產(chǎn)環(huán)境中大家都在用穩(wěn)定性經(jīng)過了大盤驗證。Current 版本雖然會有一些新特性但迭代太快今天裝完可能過兩周就要升級對于學(xué)習(xí)和做項目來說完全沒必要追新。還有一個很多人會踩的坑去百度搜“node.js 下載”點進一些第三方下載站結(jié)果下載下來是一個被篡改過的安裝包輕則帶一堆捆綁軟件重則有人往里面塞惡意代碼。Node.js 的官方域名就是 nodejs.org認(rèn)準(zhǔn)這個就行盡量不要去第三方站點。2.2 Windows 上完整安裝步驟Windows 上安裝比較簡單下載 .msi 后綴的安裝包雙擊運行一路 Next。但有幾個地方要特別注意。安裝到選擇組件那一步時默認(rèn)會勾選 “Add to PATH”這個必須保留。它的作用是把 Node.js 的可執(zhí)行文件路徑加進系統(tǒng)環(huán)境變量只有這樣才能在命令行里直接敲 node 命令。見過有人手滑把這步取消掉裝完以后在終端里怎么敲 node 都提示“不是內(nèi)部或外部命令”。安裝路徑我建議不要裝在 C 盤默認(rèn)路徑下尤其是你后面要裝很多全局包的時候。比如我會裝到 D:\nodejs這樣重裝系統(tǒng)或者清理空間時不會把環(huán)境一起帶走。當(dāng)然如果你是初學(xué)者這一步也可以先默認(rèn)路徑等后面熟悉了再遷移也不遲。安裝完成之后打開命令行工具Win R輸入 cmd回車輸入下面兩條命令驗證node -v npm -v如果分別輸出了 v20.x.x 和 10.x.x 這樣的版本號那就說明安裝成功了。注意 node -v 前面輸出的一定是 v 開頭如果報錯說找不到命令大概率是 PATH 沒配對重新裝一次把 Add to PATH 勾上就行。2.3 macOS 上的安裝差異macOS 上裝 Node.js 有兩種常規(guī)方式一種是像 Windows 一樣去官網(wǎng)下載 .pkg 安裝包雙擊安裝另外一種是用 Homebrew 命令安裝brew install node我個人更推薦用 Homebrew。原因很簡單后續(xù)升級方便一條 brew upgrade node 就能搞定不用重新去官網(wǎng)下載。而且 Homebrew 裝出來的目錄結(jié)構(gòu)比較統(tǒng)一后面配合 nvmNode 版本管理器管理多版本也更順手。裝完之后同樣用 node -v 和 npm -v 驗證。如果在 macOS 上提示 command not found可能是你的終端會話沒有刷新環(huán)境變量關(guān)掉終端重新開一個或者執(zhí)行 source ~/.zshrc 再試一次。2.4 第一個 Hello World驗證運行環(huán)境安裝驗證通過之后我們來跑第一個 Node.js 程序。新建一個文件夾比如叫 node-basic在文件夾里新建一個文件 hello.js用任意編輯器VS Code 最好輸入下面代碼console.log(Hello, Node.js!);保存之后在命令行里先 cd 到這個文件夾然后執(zhí)行node hello.js如果終端輸出了 Hello, Node.js!恭喜你Node.js 環(huán)境已經(jīng)完全可用了。這一步雖然簡單但它確認(rèn)了一件很重要的事情JavaScript 現(xiàn)在不僅能在瀏覽器里跑也能作為一個獨立程序在操作系統(tǒng)里直接運行了。3. 運行機制拆解Node.js 與瀏覽器端 JS 的核心差異3.1 全局對象完全不同在瀏覽器里我們寫 alert、document、window、localStorage 這些 API它們都是瀏覽器提供的。window 是全局對象下面掛著各種方法和屬性。但是在 Node.js 里沒有 window沒有 document也沒有 alert。Node.js 的全局對象是 global在較新版本中也可以使用 globalThis。同時 Node.js 提供了一些瀏覽器里沒有的全局對象最常用的就是 __dirname當(dāng)前文件所在目錄的絕對路徑、__filename當(dāng)前文件的絕對路徑還有 console 和 setTimeout、setInterval 這些。這一塊最典型的認(rèn)知沖突是很多同學(xué)在剛接觸 Node.js 時下意識敲一個 alert(hello)結(jié)果直接報錯 ReferenceError: alert is not defined。原因很簡單——alert 是瀏覽器提供的彈窗 APINode.js 沒有界面自然也就沒有這個 API。你只需要記住一個核心原則Node.js 是服務(wù)端運行環(huán)境它提供的 API 主要是文件、網(wǎng)絡(luò)、進程相關(guān)的能力瀏覽器提供的 API 主要面向頁面交互和渲染。3.2 模塊化加載的差異瀏覽器中的 JavaScript在 ES6 出現(xiàn)之前都是通過多個 script 標(biāo)簽引入共享全局作用域。這會導(dǎo)致一個典型問題變量污染。a.js 里定義了一個變量b.js 里可能就不小心把它覆蓋了。Node.js 天生就是模塊化的。每個 JS 文件就是一個獨立的模塊模塊內(nèi)的變量默認(rèn)是私有的外部訪問不到。想要暴露出去用 module.exports想要引入別的文件用 require。這是 CommonJS 規(guī)范Node.js 原生的模塊系統(tǒng)。舉個非常直觀的例子。我在 common.js 里定義兩個函數(shù)function add(a, b) { return a b; } function multiply(a, b) { return a * b; } module.exports { add, multiply };然后新建 index.js 引入它const common require(./common.js); console.log(common.add(2, 3)); // 5 console.log(common.multiply(2, 3)); // 6這個模式就非常像后端架構(gòu)里常用的“分層”思路——文件之間職責(zé)分離互不干擾。這對于寫大型項目尤其重要?；叵胍幌略跒g覽器里寫原生 JS 的經(jīng)驗文件之間變量全暴露在全局一次不小心的重命名就能引發(fā)難以排查的 Bug。Node.js 的模塊機制從根源上把這個風(fēng)險降到了零。3.3 事件循環(huán)Node.js 為什么“非阻塞”講到 Node.js 的機制事件循環(huán)是繞不開的概念。但我不打算展開講得太深初學(xué)者只需要掌握一個核心差異Node.js 的 I/O 操作默認(rèn)是異步非阻塞的。什么叫 I/O簡單說就是讀文件、寫文件、網(wǎng)絡(luò)請求、數(shù)據(jù)庫查詢這些需要等待外部設(shè)備響應(yīng)的操作。在同步的編程模型里代碼執(zhí)行到“讀文件”這一行時整個程序會卡住等文件讀取完畢再繼續(xù)往下走。這種模式在服務(wù)器場景下很致命如果同時有 100 個用戶請求但每個請求都要排隊等一個慢速的磁盤操作那 100 個用戶就得串行等待體驗極差。Node.js 的處理方式是事件驅(qū)動。它把耗時操作扔給底層線程池去處理自己則繼續(xù)往下執(zhí)行后面的代碼。等那個耗時操作完成了再通過事件回調(diào)來通知 JavaScript 層。這樣一來同一時刻可以同時發(fā)起多個 I/O 操作程序不會因為等待某個操作完成而阻塞?？匆幌聦嶋H例子用 setTimeout 演示異步回調(diào)的執(zhí)行次序console.log(開始); setTimeout(() { console.log(定時器執(zhí)行); }, 0); console.log(結(jié)束);你可能以為“定時器執(zhí)行”會輸出在“結(jié)束”之后因為 setTimeout 延遲是 0 毫秒。但實際上輸出結(jié)果是開始 結(jié)束 定時器執(zhí)行原因就是 setTimeout 的回調(diào)函數(shù)不會立即執(zhí)行而是被放進了“宏任務(wù)隊列”等當(dāng)前代碼執(zhí)行棧清空之后事件循環(huán)才會去取出它來執(zhí)行。這個現(xiàn)象在學(xué)習(xí)前端 JavaScript 時會遇到在后端開發(fā)里更是家常便飯。你寫代碼時必須徹底接受“回調(diào)不一定會按書寫順序執(zhí)行”這件事否則后面寫文件讀取、數(shù)據(jù)庫查詢時就會寫出各種隱藏 Bug。3.4 手動實現(xiàn)一個簡單的事件驅(qū)動機制為了讓你徹底理解事件驅(qū)動的思路我們不用任何黑科技純粹用 JavaScript 實現(xiàn)一個簡化版的事件發(fā)射器class SimpleEventEmitter { constructor() { this.events {}; } on(eventName, callback) { if (!this.events[eventName]) { this.events[eventName] []; } this.events[eventName].push(callback); } emit(eventName, data) { const callbacks this.events[eventName] || []; callbacks.forEach(callback callback(data)); } } const emitter new SimpleEventEmitter(); emitter.on(userLogin, (user) { console.log(${user.name} 登錄成功); }); emitter.emit(userLogin, { name: 張三 });這個代碼雖然簡單但它展示了 Node.js 中 EventEmitter 的核心思想先注冊事件對應(yīng)的回調(diào)函數(shù)然后在某個時機觸發(fā)事件事件對應(yīng)的所有回調(diào)依次執(zhí)行。理解了這段代碼后面你再看到 fs.readFile、http.createServer 這些 API 的回調(diào)函數(shù)就不會覺得它們是什么魔法了——它們都是把“做完事情后要做的事”作為回調(diào)傳了進去。4. 核心模塊實戰(zhàn)模塊系統(tǒng)與 npm 使用詳解4.1 文件操作模塊fs 玩轉(zhuǎn)讀寫fs 是 Node.js 內(nèi)置的文件系統(tǒng)模塊做任何和后端相關(guān)的開發(fā)都離不開它。它同時提供了同步和異步兩套 API比如 readFileSync 和 readFile。初學(xué)者很容易被這兩套搞暈我建議你暫時把同步版本當(dāng)作理解用的輔助實際寫代碼盡量用異步版本因為異步版本不會阻塞事件循環(huán)。先看同步讀取的寫法方便理解邏輯const fs require(fs); try { const data fs.readFileSync(./data.txt, utf8); console.log(data); } catch (err) { console.error(讀取文件失敗:, err.message); }這里有兩個細(xì)節(jié)值得注意。第一個是編碼參數(shù) utf8如果不傳fs.readFileSync 返回的是一個 Buffer 對象也就是二進制數(shù)據(jù)直接 console.log 會輸出一堆十六進制數(shù)字。第二個是 try-catch。同步方法一旦出錯會直接拋出異常所以必須用 try-catch 包住否則程序直接崩潰退出。再來看異步版本也就是實際開發(fā)中更常用的方式const fs require(fs); fs.readFile(./data.txt, utf8, (err, data) { if (err) { console.error(讀取文件失敗:, err.message); return; } console.log(data); });異步 API 的回調(diào)函數(shù)遵循 Node.js 的“錯誤優(yōu)先”約定第一個參數(shù)永遠(yuǎn)是可能的錯誤對象第二參數(shù)才是正常數(shù)據(jù)。這是一種約定俗成的風(fēng)格你會發(fā)現(xiàn) fs 模塊里幾乎所有異步 API 都是這樣設(shè)計的。寫回調(diào)時一定要先檢查 err 是否存在再處理數(shù)據(jù)這是寫 Node.js 代碼的基本素養(yǎng)。文件寫入也有同步和異步兩種。寫入文件更常用的是 fs.writeFileconst fs require(fs); const content 這是要寫入的內(nèi)容; fs.writeFile(./output.txt, content, utf8, (err) { if (err) { console.error(寫入失敗:, err.message); return; } console.log(寫入成功); });需要注意writeFile 默認(rèn)是覆蓋寫入會直接把文件原來的內(nèi)容全部替換成新內(nèi)容。如果你要做日志追加得用 fs.appendFileconst logLine new Date().toISOString() 用戶登錄\n; fs.appendFile(./log.txt, logLine, (err) { if (err) { console.error(追加失敗:, err.message); } });這一小段代碼對應(yīng)了一個非常實際的后端場景日志收集。真實的后端服務(wù)里每個請求的記錄、錯誤信息的追蹤很多都是從這種簡單的 appendFile 開始的。4.2 路徑模塊path 處理跨平臺路徑問題path 模塊你可能覺得它不重要但實際上它幾乎是 fs 的固定搭檔。直接用字符串拼接路徑在 Windows 上用反斜杠 \在 macOS 和 Linux 上用正斜杠 /這就會導(dǎo)致同一個代碼在不同系統(tǒng)上行為不一致在 Windows 上正常在 Linux 上就報路徑找不到。path.join 的作用就是幫你把路徑片段拼成當(dāng)前系統(tǒng)支持的正確格式const path require(path); const fullPath path.join(__dirname, data, user.json); console.log(fullPath); // Windows 輸出類似 D:\node-basic\data\user.json // macOS/Linux 輸出類似 /Users/xxx/node-basic/data/user.json另外一個很常用的方法是 path.resolve它會返回一個絕對路徑。和 path.join 的區(qū)別是resolve 會把相對路徑解析成相對于當(dāng)前工作目錄的絕對路徑。還有一個 path.extname 可以取文件后綴名const path require(path); console.log(path.extname(index.html)); // .html console.log(path.extname(app.js)); // .js4.3 npm前端轉(zhuǎn)后端最容易忽略的一環(huán)剛開始用 Node.js 時很多人的疑問是別人代碼里的 express、axios、jsonwebtoken 這些庫是怎么來的答案就是通過 npm 安裝的。npm 的全稱是 Node Package Manager是 Node.js 自帶的包管理器。它的作用就相當(dāng)于手機上的應(yīng)用商店——想用什么庫一條命令就裝好還能自動處理依賴關(guān)系。最常用的幾個命令你只需要先記住這幾個npm init -y # 初始化項目生成 package.json 文件 npm install express # 在當(dāng)前項目中安裝 express 包 npm install -g nodemon # 全局安裝 nodemon npm uninstall express # 卸載某個包npm install 裝完之后項目目錄下會多出兩個東西node_modules 文件夾和 package-lock.json 文件。node_modules 是第三方庫實際存放的位置package-lock.json 會鎖定每個依賴包的具體版本號保證團隊協(xié)作時大家裝到的版本完全一致。有一個新手很容易犯的錯誤把自己的 node_modules 目錄傳到了 Git 倉庫里。node_modules 體積巨大而且完全可以根據(jù) package.json 重新生成所以正常做法是在 .gitignore 里把 node_modules 排除掉。別人拿到你的代碼后只需要執(zhí)行 npm install就會自動按 package.json 的聲明把所有依賴裝回來。package.json 是 Node.js 項目的核心配置文件。一個最簡化的 package.json 長這樣{ name: node-basic, version: 1.0.0, description: , main: index.js, scripts: { start: node index.js, dev: nodemon index.js }, dependencies: { express: ^4.19.2 } }scripts 字段里可以自定義命令。npm start 對應(yīng) node index.jsnpm run dev 對應(yīng) nodemon index.js。nodemon 是一個監(jiān)聽文件變化自動重啟服務(wù)的工具本地開發(fā)時用它可以大幅提高效率改完代碼不用手動重啟服務(wù)它自動幫你重新運行。5. 從零搭建 HTTP 服務(wù)不用框架先搞懂原理5.1 使用原生 http 模塊創(chuàng)建服務(wù)器很多教程一上來就教 Express 框架導(dǎo)致很多人根本不知道 Express 底層是怎么工作的。遇到問題之后只能復(fù)制粘貼代碼完全沒有排查思路。所以這里我堅持先用 Node.js 原生 http 模塊寫一遍服務(wù)器讓你看清最底層的東西長什么樣。Node.js 內(nèi)置了 http 模塊可以直接創(chuàng)建一個 HTTP 服務(wù)器。下面是實現(xiàn)一個最簡單的服務(wù)器訪問時返回 “Hello World”const http require(http); const server http.createServer((req, res) { res.writeHead(200, { Content-Type: text/plain; charsetutf-8 }); res.end(Hello World); }); server.listen(3000, () { console.log(服務(wù)器已啟動: http://localhost:3000); });在命令行執(zhí)行 node server.js然后打開瀏覽器輸入 http://localhost:3000你會在頁面上看到 “Hello World”。代碼雖然只有幾行但它把 HTTP 服務(wù)的核心要素全部包含了請求對象 req、響應(yīng)對象 res、端口監(jiān)聽。這個例子里有一個非常關(guān)鍵的參數(shù)就是 Content-Type。它告訴瀏覽器響應(yīng)內(nèi)容的類型。如果不設(shè)置 charsetutf-8瀏覽器默認(rèn)按其他編碼解析中文就會變成亂碼。這類問題在后端開發(fā)里極其常見平時開發(fā)接口時返回 JSON 數(shù)據(jù)必須設(shè)置 Content-Type 為 application/json; charsetutf-8這一點以后寫 Express 接口時同樣適用。5.2 處理路由與請求方法上面這個例子不管訪問哪個路徑返回的都是 Hello World。那真實的網(wǎng)站是怎么實現(xiàn)不同網(wǎng)址展示不同內(nèi)容的呢答案就是根據(jù)請求的 URL 和請求方法分別處理。下面這個版本通過判斷 req.url 和 req.method將請求分發(fā)到不同的處理邏輯const http require(http); const server http.createServer((req, res) { const { url, method } req; res.setHeader(Content-Type, application/json; charsetutf-8); if (url / method GET) { res.end(JSON.stringify({ message: 歡迎訪問首頁 })); } else if (url /api/users method GET) { res.end(JSON.stringify({ users: [張三, 李四, 王五] })); } else if (url /api/users method POST) { let body ; req.on(data, (chunk) { body chunk.toString(); }); req.on(end, () { const parsedBody JSON.parse(body); res.end(JSON.stringify({ message: 創(chuàng)建用戶: ${parsedBody.name} })); }); } else { res.statusCode 404; res.end(JSON.stringify({ message: 接口不存在 })); } }); server.listen(3000, () { console.log(服務(wù)器已啟動: http://localhost:3000); });注意 POST 請求的處理方式。HTTP 請求體不是一次性全部到達(dá)的而是像流水一樣分塊到達(dá)的。Node.js 會觸發(fā) data 事件來接收每一塊數(shù)據(jù)最后觸發(fā) end 事件表示請求體接收完畢。所以代碼里用 let body 把每一塊數(shù)據(jù)拼接起來等到 end 事件時再整體解析。這一段代碼把一個簡單的路由分發(fā)邏輯模擬了出來。實際后端的路由處理就是這種思路的擴展但像路由匹配、參數(shù)解析、中間件機制這些事情如果全部自己寫代碼很快就會膨脹到無法維護。于是就有了 Express 這樣的 Web 框架把常見的底層邏輯都封裝好了。5.3 接口什么是接口為什么前端需要它關(guān)于“接口是啥”這個問題網(wǎng)上有很多繞來繞去的解釋我直接用大白話說一次。接口就是你用 HTTP 協(xié)議和后端服務(wù)通信的一組 URL 約定。前端向某個 URL 發(fā)一個請求后端返回一段數(shù)據(jù)就能讓頁面把數(shù)據(jù)展示出來。比如一個典型的前后端分離項目前端是一個 Vue 應(yīng)用跑在 8080 端口后端是一個 Node.js 服務(wù)跑在 3000 端口。前端要在頁面上展示用戶列表只需要向后端請求 /api/users 這個接口后端返回 JSON 格式的數(shù)組前端拿到數(shù)據(jù)之后渲染成列表。從前端發(fā)請求最常用的方式是 fetch。注意這是個瀏覽器和 Node.js 都在不斷完善的 API尤其是較新版本的 Node.js 內(nèi)置了全局 fetch所以前端基礎(chǔ)里學(xué)到的 fetch 技能可以直接遷移到 Node.js 中。舉個例子fetch(http://localhost:3000/api/users) .then(response response.json()) .then(data { console.log(data); }) .catch(err { console.error(請求失敗:, err); });前后端分離項目里的聯(lián)調(diào)本質(zhì)上就是前端發(fā)請求后端返回數(shù)據(jù)兩邊約定好 URL 和 JSON 結(jié)構(gòu)。這個“約定”就是接口。這也是為什么學(xué)習(xí) Node.js 基礎(chǔ)時我們一定要自己動手創(chuàng)建 HTTP 服務(wù)——只有當(dāng)你親手寫過接口、響應(yīng)過請求、思考過返回狀態(tài)碼才能真正理解前后端協(xié)作是怎么一回事。6. 深入 Node.js 模塊機制CommonJS 與回調(diào)函數(shù)6.1 模塊導(dǎo)出與引入的幾種寫法前面已經(jīng)介紹了最基本的 module.exports 和 require。但實際項目里模塊導(dǎo)出會有幾種不同風(fēng)格這里把常見的全部列出來你以后看到別人的代碼就不會發(fā)懵。第一種導(dǎo)出一個對象// utils.js const formatDate (date) date.toISOString().split(T)[0]; const addDays (date, days) { const result new Date(date); result.setDate(result.getDate() days); return result; }; module.exports { formatDate, addDays };第二種直接掛在 exports 上// math.js exports.add (a, b) a b; exports.subtract (a, b) a - b;這兩種寫法在功能上是等價的。但要特別注意一個坑exports 是 module.exports 的一個引用如果直接寫 exports xxx就相當(dāng)于把 exports 指向了另一個對象而 module.exports 仍然指向原來的空對象最后引入的結(jié)果就是空對象。所以如果你要導(dǎo)出一個單獨函數(shù)或類必須用 module.exports而不是直接給 exports 賦值。最簡單的導(dǎo)出函數(shù)寫法// greet.js module.exports function(name) { return 你好, ${name}; };對應(yīng)的引入方寫法const greet require(./greet.js); console.log(greet(小明)); // 你好, 小明6.2 回調(diào)地獄與初級解決方案Node.js 早期的異步操作完全靠回調(diào)函數(shù)串聯(lián)。代碼如果復(fù)雜起來很快就會變成“回調(diào)地獄”。我實際帶項目時見過不少這種代碼層層嵌套縮進越來越深邏輯越來越難看懂fs.readFile(./user.json, utf8, (err, userData) { if (err) { console.error(err); return; } const user JSON.parse(userData); fs.readFile(./order.json, utf8, (err, orderData) { if (err) { console.error(err); return; } const orders JSON.parse(orderData); // 繼續(xù)嵌套... }); });這種寫法的問題一目了然代碼可讀性差、錯誤處理重復(fù)、很難追蹤調(diào)用順序。解決回調(diào)地獄的現(xiàn)代方式是使用 Promise 和 async/await。Node.js 從 8.0 版本開始大規(guī)模支持 async/await現(xiàn)在幾乎已經(jīng)成為后端開發(fā)的標(biāo)準(zhǔn)寫法。比如同樣讀取文件用 fs.promises 加 async/await 就能寫得很清晰const fs require(fs).promises; async function loadData() { try { const userData await fs.readFile(./user.json, utf8); const orderData await fs.readFile(./order.json, utf8); const user JSON.parse(userData); const orders JSON.parse(orderData); console.log(user, orders); } catch (err) { console.error(讀取數(shù)據(jù)失敗:, err.message); } } loadData();async/await 并沒有發(fā)明新東西它就是 Promise 的語法糖。只要你理解了 Promise 的概念——一個尚未完成的異步操作的容器這個容器最終會變成成功狀態(tài)或失敗狀態(tài)async/await 就只是讓代碼看起來像同步寫法而本質(zhì)上還是異步執(zhí)行。6.3 理解 Promise 的三種狀態(tài)Promise 的三種狀態(tài)是學(xué)習(xí) Node.js 異步時繞不開的pending進行中、fulfilled已成功、rejected已失敗。狀態(tài)一旦從 pending 變成 fulfilled 或 rejected就不可再變化。這是理解異步代碼最重要的底層觀念。我給你看一個實際使用的例子。在真實項目中經(jīng)常需要封裝一個數(shù)據(jù)庫查詢函數(shù)返回 Promisefunction queryUserById(id) { return new Promise((resolve, reject) { // 模擬數(shù)據(jù)庫異步查詢 setTimeout(() { if (id 0) { reject(new Error(無效的用戶 ID)); return; } resolve({ id, name: 張三 }); }, 500); }); } async function getUser() { try { const user await queryUserById(1); console.log(查詢成功:, user); } catch (err) { console.error(查詢失敗:, err.message); } } getUser();Promise 內(nèi)部的 resolve 和 reject 就是狀態(tài)切換的開關(guān)。resolve 表示成功reject 表示失敗。async 函數(shù)里的 await 會暫停執(zhí)行直到 Promise 狀態(tài)確定為止但暫停期間并不會阻塞其他代碼執(zhí)行——這就是非阻塞異步和同步代碼最大的區(qū)別。7. 從原生到 Express快速搭建可用后端項目7.1 為什么需要框架前面我們用原生 http 模塊寫了一個很基礎(chǔ)的服務(wù)。真實項目里如果每個接口都像那樣手動判斷 url、method再手動拼接請求體代碼很快就會膨脹到?jīng)]法維護。輪子已經(jīng)有人造好了而且非常成熟沒必要自己重新造。Express 是目前 Node.js 生態(tài)里使用最廣泛的 Web 框架。它做的事情概括起來就是把路由分發(fā)、參數(shù)解析、中間件機制、靜態(tài)文件服務(wù)這些通用能力封裝好讓你專注于寫業(yè)務(wù)邏輯。加上 Express 中間件的設(shè)計非常靈活通過 use 方法可以方便地掛載各種功能模塊。插一句現(xiàn)在也有很多人直接用 Koa 或 Fastify、NestJS 這些新框架。但作為新手初期的核心目標(biāo)不是“用最新最潮的框架”而是理解一個 Web 框架最基礎(chǔ)的長什么樣。Express 的文檔、中間件生態(tài)、學(xué)習(xí)資料都是最全的用它入門是最穩(wěn)的路徑。7.2 用 Express 重寫剛才的服務(wù)先安裝依賴npm init -y npm install express然后創(chuàng)建一個 app.jsconst express require(express); const app express(); app.use(express.json()); app.get(/, (req, res) { res.json({ message: 歡迎訪問首頁 }); }); app.get(/api/users, (req, res) { res.json({ users: [張三, 李四, 王五] }); }); app.post(/api/users, (req, res) { const { name } req.body; res.json({ message: 創(chuàng)建用戶: ${name} }); }); app.listen(3000, () { console.log(服務(wù)器已啟動: http://localhost:3000); });對比一下原生 http 模塊的代碼Express 版本的簡潔程度不是一點點。res.json() 直接返回 JSON 并自動設(shè)置 Content-Typereq.body 直接拿到了解析好的請求體數(shù)據(jù)路由定義只需要寫 HTTP 方法加路徑。這里有一行代碼極其重要app.use(express.json())。它的作用是給請求對象加一個 body 解析能力。如果沒有這一行Express 不會主動解析請求體req.body 就會是 undefined。很多新手遇到“POST 請求為什么拿不到參數(shù)”的問題九成都是因為忘寫這一行。7.3 Express 靜態(tài)資源托管一天學(xué)會Express 還能直接托管靜態(tài)文件。比如你的前端頁面打包之后全部放在 public 目錄只需要一行代碼就能讓瀏覽器直接訪問里面的 HTML、CSS、JS 和圖片const express require(express); const app express(); const path require(path); app.use(express.static(path.join(__dirname, public))); app.listen(3000, () { console.log(靜態(tài)資源服務(wù)器已啟動: http://localhost:3000); });在項目目錄下建一個 public 文件夾里面放一個 index.html瀏覽器打開 http://localhost:3000/index.html 就能直接看到頁面內(nèi)容。這就是最原始的“前后端部署”場景——把前后端放在同一個服務(wù)下用同一個端口對外提供服務(wù)。實際的前后端分離部署會比這個復(fù)雜比如把靜態(tài)文件放在 Nginx后端服務(wù)獨立跑在某個端口再用 Nginx 做反向代理。但邏輯上本質(zhì)都是一樣的靜態(tài)資源給瀏覽器接口給前端應(yīng)用調(diào)。理解了 Express 的靜態(tài)托管你對部署就有了一個基礎(chǔ)概念。7.4 Express 中間件機制通俗解釋中間件是 Express 中一個非常重要的概念。用大白話說中間件就是“請求到達(dá)路由之前要經(jīng)過的一系列處理函數(shù)”。每一個中間件都能訪問請求對象和響應(yīng)對象可以修改它們也可以決定是直接響應(yīng)還是調(diào)用 next() 把控制權(quán)交給下一個中間件。下面是一個日志中間件的例子app.use((req, res, next) { console.log(${req.method} ${req.url} - ${new Date().toISOString()}); next(); });永遠(yuǎn)記得調(diào)用 next()。如果這個中間件不調(diào)用 next()請求就會卡在這里永遠(yuǎn)不會有響應(yīng)。這是初學(xué)者最常犯的錯誤。還有常見的身份驗證中間件function authMiddleware(req, res, next) { const token req.headers[authorization]; if (!token) { res.status(401).json({ message: 未登錄無訪問權(quán)限 }); return; } // 這里可以校驗 token簡單示例略過 req.userId 12345; next(); } app.get(/api/profile, authMiddleware, (req, res) { res.json({ userId: req.userId, name: 張三 }); });這種寫法就是后端接口鑒權(quán)的基礎(chǔ)模型在真實的項目中如 JWT token 驗證、權(quán)限判斷、日志記錄全部都是通過中間件實現(xiàn)的。理解了中間件你就差不多摸到了 Express 的精髓。8. 前后端配合與接口調(diào)試fetch 與跨域處理8.1 前后端分離項目中的數(shù)據(jù)交互前面說過前后端分離是現(xiàn)代 Web 開發(fā)的常見模式。前端是一個獨立項目運行在某個端口或域名下后端是另一個獨立項目提供 API 接口。頁面加載后由前端通過 AJAX 或 fetch 向接口取數(shù)據(jù)再渲染。一個最簡單的前端頁面用 fetch 調(diào)用后端接口!DOCTYPE html html langzh-CN head meta charsetUTF-8 / title用戶列表/title /head body div idapp加載中.../div script fetch(http://localhost:3000/api/users) .then(response response.json()) .then(data { const appDiv document.getElementById(app); const userList data.users.map(user li${user}/li).join(); appDiv.innerHTML ul${userList}/ul; }) .catch(error { document.getElementById(app).textContent 請求失敗請檢查后端服務(wù); console.error(error); }); /script /body /html打開前端頁面頁面會向后端發(fā)送請求拿回用戶列表渲染出來。這是前后端分離項目里前端最基本的交互邏輯。知道這點之后再去理解 Vue、React 里的數(shù)據(jù)請求本質(zhì)上還是同一件事只是在框架中封裝成了更優(yōu)雅的寫法。8.2 跨域問題前端后端最難纏的坑前后端分離開發(fā)時前端跑在 5500 端口或者用 VS Code 的 Live Server 自動分配的端口后端跑在 3000 端口。瀏覽器的同源策略會攔截這兩個不同端口之間的請求。前端頁面里 fetch 一個不同源的后端接口控制臺就會報錯Access to fetch at http://localhost:3000/api/users from origin http://localhost:5500 has been blocked by CORS policy解決這個問題的最直接方法是后端在響應(yīng)頭里主動聲明允許跨域訪問。不需要找什么復(fù)雜工具在 Express 里加一段中間件就能搞定app.use((req, res, next) { res.setHeader(Access-Control-Allow-Origin, *); res.setHeader(Access-Control-Allow-Methods, GET, POST, PUT, DELETE, OPTIONS); res.setHeader(Access-Control-Allow-Headers, Content-Type, Authorization); next(); });Access-Control-Allow-Origin 如果設(shè)置為 *表示允許任意域名訪問。生產(chǎn)環(huán)境一般不建議這樣放開更好的做法是指定具體的前端域名。但開發(fā)階段為了圖省事寫 * 是最常見的方式。如果不想在代碼里手寫這些響應(yīng)頭也可以使用 npm 上現(xiàn)成的中間件 corsnpm install cors然后一行代碼掛載const cors require(cors); app.use(cors());這里我想強調(diào)的是跨域問題不是后端代碼邏輯錯誤而是瀏覽器安全策略。前端和后端代碼本身都沒有問題只是瀏覽器默認(rèn)不允許跨源訪問。理解了這一點你看到這個報錯時就不會慌。8.3 常見運行時報錯排查思路后端開發(fā)中運行時報錯是每天都要面對的。Node.js 的報錯信息比較直白但還是有幾個常見的“新手專屬坑”我列出來你可以提前避雷。第一個是端口被占用。啟動服務(wù)時報錯Error: listen EADDRINUSE: address already in use :::3000原因是 3000 端口已經(jīng)被另一個進程占用了。常見解決辦法要么換一個端口比如 app.listen(3001)要么找到占用端口的進程把它結(jié)束掉。Windows 下查看并結(jié)束端口占用netstat -ano | findstr :3000 # 假設(shè)最后一列是 PID 12345執(zhí)行下面命令結(jié)束進程 taskkill /PID 12345 /FmacOS/Linux 下lsof -i :3000 kill -9 PID第二個是找不到模塊。報錯比如Cannot find module express這個問題幾乎都是因為在錯誤的目錄下執(zhí)行了 node 命令或者項目根本沒有執(zhí)行過 npm install。檢查一下當(dāng)前目錄有沒有 node_modules 文件夾沒有就執(zhí)行 npm install。第三個是 JSON 解析失敗Unexpected end of JSON input這種情況通常是請求體不是合法的 JSON 格式。比如前端傳了一個空字符串或者 JSON 字符串里出現(xiàn)了多余逗號。排查思路是先用 console.log 把 body 打印出來看看實際接收到的是什么內(nèi)容再對照 JSON 格式檢查。8.4 驗證調(diào)試接口的趁手工具開發(fā)接口時直接在瀏覽器里訪問 GET 接口很方便但 POST、PUT、DELETE 這些帶請求體的方法瀏覽器地址欄里沒法直接試。這里推薦兩個工具。第一個是 Postman功能最全面適合復(fù)雜調(diào)試場景從簡單的 GET 到帶 Token 的鑒權(quán)請求都能支持。第二個是 Apifox國內(nèi)團隊用得很多接口文檔管理和測試一體。還有更輕量的方案是 VS Code 里的 Thunder Client 插件界面簡潔不用單獨開一個軟件。我個人的習(xí)慣是平時寫代碼直接瀏覽器加 console.log 做快速驗證聯(lián)調(diào)和測試接口時用 Postman 或者 Apifox。配置一個 POST 請求時需要在 Headers 里加 Content-Type: application/json然后在 Body 里選擇 raw貼一段 JSON點擊 Send 就能看到后端返回的結(jié)果。這一套接口驗證流程是前后端聯(lián)調(diào)的基本功。你把接口調(diào)試熟練了后面配合 Vue 或者 React 做項目時會非常省心。9. 部署起步本地服務(wù)如何跑起來9.1 常見部署思路你本地寫完的后端項目最終要部署到一臺服務(wù)器上才能讓其他人通過公網(wǎng)訪問。這一塊對于剛學(xué)完基礎(chǔ)的同學(xué)可以先不深入但要有一個概念。最常見最省事的方案是在服務(wù)器上安裝 Node.js 環(huán)境把代碼上傳上去npm install 安裝依賴然后啟動服務(wù)。注意生產(chǎn)環(huán)境啟動時要設(shè)置環(huán)境變量為 production并用像 PM2 這樣的進程管理工具來守護服務(wù)讓它在崩潰后自動重啟。一個簡化版本的部署流程是服務(wù)器上先安裝 Node.js推薦用 nvm 或者直接二進制包把項目代碼上傳到服務(wù)器cd 到項目目錄執(zhí)行 npm install --production啟動服務(wù)node app.js 或者使用 PM2pm2 start app.js如果有域名配置一下 Nginx 反向代理把某個域名指向你的服務(wù)端口這一步涉及的知識覆蓋了 Linux 命令、Nginx 配置、防火墻規(guī)則等等剛?cè)腴T時不要求全部掌握但“后端項目是怎么跑起來的”這條鏈路一定要清楚。9.2 本地開發(fā)輔助nodemon 提升效率最后再分享一個非常實用的本地開發(fā)小技巧。你寫代碼時每改一次代碼就要手動 Ctrl C 終止服務(wù)再重新啟動重復(fù)幾十次下來效率很低。安裝 nodemon 之后它會監(jiān)聽項目文件的改動自動幫你重啟服務(wù)npm install -g nodemon啟動方式nodemon app.js之后你每次保存代碼控制臺會自動顯示服務(wù)重啟日志。唯一的坑是nodemon 會忽略 node_modules 目錄的變動不會因為裝了一個新包就重啟服務(wù)。如果你改了路由、改了業(yè)務(wù)代碼它都會自動重啟本地開發(fā)效率是這個提升很明顯。package.json 里建議這樣配置 scriptsscripts: { dev: nodemon app.js, start: node app.js }這樣 npm run dev 就是開發(fā)模式npm start 就是生產(chǎn)模式的啟動命令。10. 個人實操心得三個學(xué)習(xí)坑位與建議到這里Node.js 后端基礎(chǔ)的核心骨架已經(jīng)全部過了一遍。最后用我自己的經(jīng)驗說幾件事。第一一定要“動手敲不要只看”。Node.js 基礎(chǔ)階段的知識點互動性很強讀文件、寫服務(wù)器、調(diào)接口每一步都需要親手運行看到結(jié)果。看十遍教程不如自己在終端里跑一個服務(wù)器再手動用瀏覽器訪問一次。第二建議準(zhǔn)備一個專門用來“折騰”的目錄把課程里所有例子都從零敲一遍尤其是 fs、http、Express 這部分。不要直接復(fù)制粘貼自己一個字一個字打出來。這樣寫出來的錯誤都是你自己的會有更深刻的記憶。踩過坑的知識點后面基本不會再犯同樣的錯。第三學(xué)完 Node.js 基礎(chǔ)后下一步怎么走我建議優(yōu)先完成三個方向一是深入 Promise 和 async/await把異步編程練熟這是后端開發(fā)最大的一道門檻二是選擇一個數(shù)據(jù)庫MongoDB 或者 MySQL 都可以學(xué)習(xí)增刪改查和 Node.js 如何操作數(shù)據(jù)庫三是嘗試做一個完整的增刪改查接口比如一個簡單的待辦事項列表用 Express 加一個數(shù)據(jù)庫實現(xiàn)這是每個后端工程師入門的第一個實戰(zhàn)項目。從我?guī)н^的新人來看能把這三步走完基本上就具備獨立開發(fā)一個小型后端服務(wù)的能力了。下一步再去接觸 NestJS、微服務(wù)、數(shù)據(jù)庫設(shè)計、部署運維這些內(nèi)容就會順暢很多。Node.js 后端基礎(chǔ)這門課是你的第一塊跳板跳上去之后能走多高就看你想做哪個方向了。