深入掌握Node.js HTTP模块：从开始到放弃

一、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;
}