個人簡介
👀個人主頁： 前端雜貨鋪
🙋?♂?學習方向： 主攻前端方向，正逐漸往全干發展
📃個人狀態： 研發工程師，現效力于中國工業軟件事業
🚀人生格言： 積跬步至千里，積小流成江海
🥇推薦學習：🍍前端面試寶典 🎨100個小功能 🍉Vue2 🍋Vue3 🍓Vue2/3項目實戰 🥝Node.js實戰 🍒Three.js🌕個人推廣：每篇文章最下方都有加入方式，旨在交流學習&資源分享，快加入進來吧
| 內容 | 參考鏈接 |
|---|---|
| Node.js（一） | Node.js——fs（文件系統）模塊 |
| Node.js（二） | Node.js——path（路徑操作）模塊 |
| Node.js（三） | Node.js——http 模塊（一） |
文章目錄
- 前言
- 設置 HTTP 響應報文
- Simple Demo
- 總結
前言
上篇文章我們學習了 path 模塊，本篇文章我們學習 Node.js 的 http 模塊。
http 模塊是核心模塊，它提供了 HTTP 服務器和客戶端功能，主要用于前后端通信。
設置 HTTP 響應報文
下面，我們學習如何進行 HTTP 響應報文的設置，其實也很簡單，只需要 response.xxx 調一些屬性和方法即可。
- statusCode: 設置響應狀態碼
- statusMessage: 設置響應狀態的描述
- setHeader(): 設置響應頭
- write(): 設置響應體
const http = require('http');// 創建服務對象
const server = http.createServer((request, response) => {// 設置響應狀態碼response.statusCode = 201;// 設置響應狀態的描述response.statusMessage = 'hi';// 設置響應頭response.setHeader('content-type', 'text/html;charset=utf-8');response.setHeader('Server', 'Node.js');response.setHeader('DIYHeader', 'diy header');response.setHeader('test', ['a', 'b', 'c']);// 設置響應體response.write('Hello, ');response.write('This ');response.write('is ');response.write('zahuopu');response.end('!');
})// 監聽端口，啟動服務
server.listen('9000', () => {console.log('服務啟動成功...')
})
Simple Demo
下面我們編寫一個小 Demo，實現響應頁面信息（包括 html、css 和 js），設置 MIME 類型 并進行錯誤處理。
const http = require('http');
const fs = require('fs');
const path = require('path');// MIME類型（Multipurpose Internet Mail Extensions）是一種標準，用于表示文檔、文件或字節流的性質和格式??。
// 設置HTTP響應的 Content-Type 頭部，以告訴瀏覽器如何處理返回的內容。
const mimes = {html: 'text/html',css: 'text/css',js: 'text/javascript',png: 'image/png',jpg: 'image/jpeg',gif: 'image/gif',mp4: 'video/mp4',mp3: 'audio/mpeg',json: 'application/json',
}const server = http.createServer((request, response) => {// 獲取請求路徑const { pathname } = new URL(request.url, 'http://127.0.0.1');// 拼接完整的文件路徑const filePath = __dirname + pathname;fs.readFile(filePath, (err, data) => {// 處理錯誤信息if (err) {response.setHeader('content-text', 'text/html;charset=utf-8');switch (err.code) {// 未找到case 'ENOENT':response.statusCode = 404;response.end('<h1>404 Not Found</h1>');// 無權限case 'EPERM':response.statusCode = 403;response.end('<h1>403 Forbidden</h1>');// 其他錯誤default:response.statusCode = 500;response.end('<h1>Internal Server Error</h1>');}return;}// 獲取文件后綴名const ext = path.extname(filePath).slice(1);// 獲取對應的類型const type = mimes[ext];if (type) {if (ext === 'html') {response.setHeader('content-text', type + ';charset=utf-8');}} else {response.setHeader('content-type', 'application/octet-stream');}// 響應文件內容response.end(data);})
})server.listen('9000', () => {console.log('服務已啟動...');
})
在 index.html 文件中編寫如下內容：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><link rel="stylesheet" href="./index.css" /></head><body><h2>前端雜貨鋪</h2><script src="./index.js"></script></body>
</html>
在 index.css 文件中編寫如下內容：
h2 {color: orange;
}
在 index.js 文件中編寫如下內容：
const h2 = document.querySelector('h2');
h2.style.fontSize = 20 + 'px';
h2.style.fontWeight = 200;
啟動服務后，訪問 9000 端口
總結
本篇文章我們首先學習了 HTTP 響應報文，包括設置響應狀態碼、設置響應狀態的描述、設置響應頭和響應體等；此外，我們還編寫了一個 Demo，學習如何響應頁面信息、認識了 MIME 并學會了如何進行錯誤處理等。
好啦，本篇文章到這里就要和大家說再見啦，祝你這篇文章閱讀愉快，你下篇文章的閱讀愉快留著我下篇文章再祝！
參考資料：
- Node.js教程（菜鳥教程）
- Node.js零基礎視頻教程（尚硅谷 · 李強）
![【面試題】Spring/SpringBoot部分[2025/1/6 ~ 2025/1/12]](http://pic.xiahunao.cn/【面試題】Spring/SpringBoot部分[2025/1/6 ~ 2025/1/12])
