1.基础HTTP服务器:

添加了路由处理
添加了404错误处理
添加了服务器错误监听

2.静态资源服务器:

使用异步文件操作
支持目录自动索引(默认加载 index.html)
自动检测文件类型并设置正确Content-Type
更完善的错误处理

3.处理GET请求参数

提供了一个HTML表单用于测试
使用url模块解析URL和查询参数
清晰展示接收到的GET参数

4.处理POST请求参数:

提供了一个HTML表单用于测试
使用流的方式处理POST数据
正确解析表单数据
清晰展示接收到的POST参数

一、HTTP模块

const http = require("http");// 创建服务器实例
const app = http.createServer((req, res) => {// 设置响应头，指定内容类型和编码res.setHeader("Content-Type", "text/html;charset=utf-8");// 根据请求路径返回不同内容switch (req.url) {case "/":res.end("欢迎访问主页！");break;case "/about":res.end("这是关于页面！");break;default:res.statusCode = 404;res.end("404 - 页面未找到");}
});// 监听端口并启动服务器
app.listen(5000, () => {console.log("服务器已启动！监听在 http://localhost:5000");
});// 添加错误处理
app.on("error", (error) => {console.error(`服务器启动失败: ${error.message}`);
});

二、静态资源服务器

const http = require("http");
const fs = require("fs").promises;
const path = require("path");// 定义静态资源目录
const STATIC_DIR = path.join(__dirname, "static");// 内容类型映射表
const CONTENT_TYPES = {".html": "text/html",".css": "text/css",".js": "text/javascript",".json": "application/json",".png": "image/png",".jpg": "image/jpeg",".gif": "image/gif",".svg": "image/svg+xml",".txt": "text/plain"
};const app = http.createServer(async (req, res) => {try {// 构建文件路径let filePath = path.join(STATIC_DIR, req.url === "/" ? "index.html" : req.url);// 检查文件是否存在await fs.access(filePath);// 获取文件状态const stat = await fs.stat(filePath);if (stat.isDirectory()) {// 如果是目录，尝试默认文件filePath = path.join(filePath, "index.html");await fs.access(filePath);}// 获取文件扩展名并确定内容类型const extname = path.extname(filePath);const contentType = CONTENT_TYPES[extname] || "application/octet-stream";// 设置响应头并发送文件内容res.setHeader("Content-Type", contentType);const fileContent = await fs.readFile(filePath);res.end(fileContent);} catch (error) {// 处理错误res.statusCode = 404;res.end("404 - 文件未找到");}
});app.listen(3000, () => {console.log("服务器监听在 http://localhost:3000");
});

三、服务器获取get请求参数

在./static下面写一个index.html页面，页面中发送一个get请求

const http = require("http");
const url = require("url");
const qs = require("querystring");const app = http.createServer((req, res) => {res.setHeader("Content-Type", "text/html;charset=utf-8");// 解析URL和查询参数const parsedUrl = url.parse(req.url, true);const pathname = parsedUrl.pathname;const query = parsedUrl.query;if (pathname === "/") {// 返回表单页面const formHtml = `<form method="GET" action="/api"><input type="text" name="username" placeholder="用户名"><input type="password" name="password" placeholder="密码"><button type="submit">提交</button></form>`;res.end(formHtml);} else if (pathname === "/api") {// 处理GET请求参数res.end(`收到GET请求，参数：${JSON.stringify(query)}`);} else {res.statusCode = 404;res.end("404 - 页面未找到");}
});app.listen(8888, () => {console.log("服务器已启动！地址为: http://localhost:8888");
});

四、服务器获取post请求参数

获取post请求的参数，通过给req绑定事件和end事件，来获取监听的参数，data事件一个接收的事件，end事件当post请求的参数都接收完毕，就出发end事件

const http = require("http");
const qs = require("querystring");const app = http.createServer((req, res) => {res.setHeader("Content-Type", "text/html;charset=utf-8");if (req.url === "/") {// 返回表单页面const formHtml = `<form method="POST" action="/api"><input type="text" name="username" placeholder="用户名"><input type="password" name="password" placeholder="密码"><button type="submit">提交</button></form>`;res.end(formHtml);} else if (req.url === "/api" && req.method === "POST") {// 处理POST请求let body = "";// 监听data事件，收集数据块req.on("data", (chunk) => {body += chunk.toString();});// 监听end事件，数据接收完成req.on("end", () => {// 解析表单数据const formData = qs.parse(body);// 返回处理结果res.end(`收到POST请求，参数：${JSON.stringify(formData)}`);});} else {res.statusCode = 404;res.end("404 - 页面未找到");}
});app.listen(8888, () => {console.log("服务器已启动！地址为: http://localhost:8888");
});

每个步骤的代码都可以独立运行，并且包含了必要的注释以便理解