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