一、HTTP模塊入門：從零搭建第一個服務器

1.1 基礎概念解析

HTTP 模塊是什么？
Node.js內置的 http 模塊提供了創建 HTTP 服務器和客戶端的能力。就像快遞公司：

• 服務器：像倉庫，存儲貨物（數據）
• 客戶端：像快遞員，負責收發貨物（請求和響應）

核心對象解釋：

• http.createServer：創建服務器
• req對象：包含客戶端請求的信息（地址、請求頭等）
• res對象：用來給客戶端發送響應

1.2 手把手創建服務器

// 導入模塊（類似取快遞工具）
const http = require('http');// 創建服務器（建立倉庫）
const server = http.createServer((req, res) => {// 設置響應頭（告訴快遞員包裹類型）res.writeHead(200, { 'Content-Type': 'text/html; charset=utf-8' }); // 明確指定編碼,不然運行之后是亂碼// 發送響應內容（實際運送的貨物）res.end('<h1>歡迎來到我的網站！</h1>');
})// 啟動監聽（設置倉庫門牌號）
server.listen(3000, () => {console.log('服務器已在 http://localhost:3000 啟動')
})

二、核心功能深入解析

2.1 處理不同請求類型

GET 請求參數獲取

const { URL } = require('url');server.on('request', (req, res) => {// 解析URL（類似拆包裹看地址標簽）const urlObj = new URL(req.url, `http://${req.headers.host}`);// 獲取查詢參數（比如?name=John）console.log(urlObj.searchParams.get('name')); // 輸出 John
})

POST 請求數據處理

let body = [];
req.on('data', chunk => {body.push(chunk); //接收數據塊（像接收多個包裹）
}).on('end', () => {body = Buffer.concat(body).toString(); // 合并所有數據塊console.log('收到POST數據：'， body);
})

2.2 實現文件下載功能

const fs = require('fs');function downloadFile(res, filePath) {// 設置響應頭（高速瀏覽器這是要下載的文件）res.writeHead(200, {'Content-Type': 'application/octet-stream','Content-Disposition': `attachment; filename=${path.basename(filePath)}`});// 創建文件流（像打開水龍頭放水）const fileStream = fs.createReadStream(filePath);fileStream.pipe(res); // 將文件流導向響應
}

三、常見問題解決方案

3.1 跨域問題處理

// 在響應頭中添加CORS支持
res.setHeader('Access-Control-Allow-Origin', '*');
res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS');
res.setHeader('Access-Control-Allow-Headers', 'Content-Type');

3.2 防止服務崩潰

// 全局錯誤捕獲
process.on('uncaughtException', (err) => {console.error('全局異常捕獲:', err);// 可以記錄日志或發送警報
});// 處理Promise拒絕
process.on('unhandledRejection', (reason, promise) => {console.error('未處理的Promise拒絕:', reason);
});

3.3 調試技巧

使用 curl 測試接口：

# 測試GET請求
curl http://localhost:3000/api/data# 測試POST請求
curl -X POST -d "username=john" http://localhost:3000/login

四、安全最佳實踐

4.1 請求頭安全設置

res.setHeader('X-Content-Type-Options', 'nosniff');
res.setHeader('X-Frame-Options', 'DENY');
res.setHeader('Content-Security-Policy', "default-src 'self'");

4.2 速率限制（防止DDoS攻擊）

const rateLimit = require('express-rate-limit');const limiter = rateLimit({windowMs: 15 * 60 * 1000, // 15分鐘max: 100 // 每個IP最多100次請求
});// 應用中間件
server.use(limiter);

五、簡易版博客系統

5.1 項目結構

/my-blog
├── data/            # 數據存儲
│   └── articles.json
├── public/          # 靜態資源
│   ├── css/
│   └── js/
│   └── index.html
├── controllers/     # 業務邏輯
│   └── articleController.js
├── routes/          # 路由配置
│   └── articleRoutes.js
├── utils/           # 工具函數
│   └── fileUtils.js
└── server.js        # 入口文件

5.2 環境準備

1.初始化項目

mkdir my-blog && cd my-blog
npm init -y

2.安裝依賴

npm install uuid      # 生成唯一ID

5.3 核心代碼實現

1.數據存儲（data/articles.json）

{"articles": [{"id": "1","title": "Node.js入門指南","content": "Node.js是一個基于Chrome V8引擎的JavaScript運行環境...","createdAt": "2023-08-20"}]
}

2.工具函數（utils/fileUtils.js）

const fs = require('fs').promises;
const path = require('path');const dataPath = path.join(__dirname, '../data/articles.json');async function readData() {try {const data = await fs.readFile(dataPath, 'utf8');return JSON.parse(data);} catch (err) {return { articles: [] };}
}async function writeData(data) {await fs.writeFile(dataPath, JSON.stringify(data, null, 2));
}module.exports = { readData, writeData };

3. 控制器（controllers/articleController.js）

const { v4: uuidv4 } = require('uuid');
const { readData, writeData } = require('../utils/fileUtils');// 獲取所有文章
async function getAllArticles() {const data = await readData();return data.articles;
}// 創建新文章
async function createArticle(title, content) {const data = await readData();const newArticle = {id: uuidv4(),title,content,createdAt: new Date().toISOString().split('T')[0]};data.articles.push(newArticle);await writeData(data);return newArticle;
}// 刪除文章
async function deleteArticle(id) {const data = await readData();data.articles = data.articles.filter(article => article.id !== id);await writeData(data);
}module.exports = { getAllArticles, createArticle, deleteArticle };

4. 路由配置（routes/articleRoutes.js）

const http = require('http');
const fs = require('fs');
const path = require('path');// 假設這是文章數據存儲
let articles = [];
let nextId = 1;function handleRoutes(req, res) {const urlParts = req.url.split('/');if (req.url === '/api/articles' && req.method === 'GET') {res.writeHead(200, { 'Content-Type': 'application/json' });res.end(JSON.stringify(articles));} else if (req.url === '/api/articles' && req.method === 'POST') {let body = '';req.on('data', chunk => {body += chunk.toString();});req.on('end', () => {const newArticle = JSON.parse(body);newArticle.id = nextId++;articles.push(newArticle);res.writeHead(201, { 'Content-Type': 'application/json' });res.end(JSON.stringify(newArticle));});} else if (urlParts[1] === 'api' && urlParts[2] === 'articles' && req.method === 'DELETE') {if (urlParts.length === 3) {// 批量刪除articles = [];res.writeHead(200, { 'Content-Type': 'application/json' });res.end(JSON.stringify({ message: '所有文章刪除成功' }));} else {// 單篇刪除const id = parseInt(urlParts[3]);const index = articles.findIndex(article => article.id === id);if (index !== -1) {articles.splice(index, 1);res.writeHead(200, { 'Content-Type': 'application/json' });res.end(JSON.stringify({ message: '文章刪除成功' }));} else {res.writeHead(404, { 'Content-Type': 'application/json' });res.end(JSON.stringify({ message: '文章未找到' }));}}} else {res.writeHead(404, { 'Content-Type': 'text/plain' });res.end('Not Found');}
}module.exports = handleRoutes;

5. 主服務器（server.js）

const http = require('http');
const fs = require('fs');
const path = require('path');
const handleRoutes = require('./routes/articleRoutes');// 創建HTTP服務器
const server = http.createServer(async (req, res) => {// 靜態文件服務if (req.url.startsWith('/public/')) {const filePath = path.join(__dirname, req.url);fs.readFile(filePath, (err, data) => {if (err) {res.writeHead(404);return res.end('File not found');}res.writeHead(200);res.end(data);});return;}// API路由處理handleRoutes(req, res);
});// 啟動服務器
const PORT = 3000;
server.listen(PORT, () => {console.log(`Server running at http://localhost:${PORT}`);
});

6.頁面樣式跟邏輯

// public/js/app.js
// 加載文章列表的函數
async function loadArticles() {try {const response = await fetch('/api/articles');if (!response.ok) {throw new Error('網絡響應失敗');}const articles = await response.json();const articlesDiv = document.getElementById('articles');articlesDiv.innerHTML = '';articles.forEach(article => {const articleElement = document.createElement('div');articleElement.innerHTML = `<h2>${article.title}</h2><p>${article.content}</p><button onclick="deleteArticle('${article.id}')">刪除文章</button>`;articlesDiv.appendChild(articleElement);});} catch (error) {console.error('加載文章列表時出錯:', error);}
}// 刪除文章的函數
async function deleteArticle(id) {try {const response = await fetch(`/api/articles/${id}`, {method: 'DELETE'});if (!response.ok) {throw new Error('刪除文章失敗');}// 重新加載文章列表loadArticles();} catch (error) {console.error('刪除文章時出錯:', error);}
}// 添加文章的函數
async function addArticle(event) {event.preventDefault();const title = document.getElementById('title').value;const content = document.getElementById('content').value;try {const response = await fetch('/api/articles', {method: 'POST',headers: {'Content-Type': 'application/json'},body: JSON.stringify({ title, content })});if (!response.ok) {throw new Error('添加文章失敗');}// 清空表單document.getElementById('articleForm').reset();// 重新加載文章列表loadArticles();} catch (error) {console.error('添加文章時出錯:', error);}
}// 頁面加載完成后自動加載文章列表
window.addEventListener('DOMContentLoaded', loadArticles);

// public/index.html
<!DOCTYPE html>
<html>
<head><!-- 添加字符編碼聲明 --><meta charset="UTF-8"><title>我的博客</title><link rel="stylesheet" href="/public/css/style.css">
</head>
<body><div id="app"><h1>文章列表</h1><!-- 修改文章表單，移除文件輸入框 --><form id="articleForm" onsubmit="addArticle(event)"><input type="text" id="title" placeholder="文章標題" required><textarea id="content" placeholder="文章內容" required></textarea><button type="submit">添加文章</button></form><div id="articles"></div><button onclick="loadArticles()">刷新列表</button></div><script src="/public/js/app.js"></script>
</body>
</html>

// public/css/style.css
body {font-family: Arial, sans-serif;line-height: 1.6;margin: 0;padding: 0;background-color: #f4f4f4;
}#app {width: 80%;margin: auto;overflow: hidden;padding: 20px;
}h1 {color: #333;text-align: center;
}#articleForm {background-color: #fff;padding: 20px;margin-bottom: 20px;border-radius: 5px;box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}#articleForm input[type="text"],
#articleForm textarea {width: 100%;padding: 10px;margin-bottom: 10px;border: 1px solid #ddd;border-radius: 3px;
}#articleForm button {background-color: #333;color: #fff;padding: 10px 20px;border: none;border-radius: 3px;cursor: pointer;
}#articleForm button:hover {background-color: #555;
}#articles div {background-color: #fff;padding: 20px;margin-bottom: 10px;border-radius: 5px;box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}#articles h2 {margin-top: 0;
}