Node.js 搭建 Web 服务器实战：从基础到静态资源处理
本文详解如何使用 Node.js 的 http 模块搭建 Web 服务器。内容涵盖服务器基础概念、文件读取与返回、静态资源（CSS/JS）的类型识别与处理，以及基于 Node.js 的 Web 客户端创建。通过具体代码示例，展示从启动服务、访问 HTML 页面到处理外部样式引用的完整流程，帮助开发者掌握 Node.js 网络编程核心技能。
Node.js 搭建 Web 服务器实战：从基础到静态资源处理
使用 Node 创建 Web 服务器
Web 服务器基础概念
什么是 Web 服务器？
Web 服务器通常指驻留在互联网计算机上的程序，其核心功能是提供 Web 信息浏览服务。它主要支持 HTTP 协议、HTML 文档格式及 URL，并与客户端的网络浏览器协同工作。
大多数 Web 服务器支持服务端脚本语言（如 PHP、Python、Ruby），通过脚本从数据库获取数据并将结果返回给客户端浏览器。
目前主流的三大 Web 服务器分别是 Apache、Nginx 和 IIS。
Node.js HTTP 模块应用
Node.js 提供了 http 模块，主要用于搭建 HTTP 服务端和客户端。使用 HTTP 服务器或客户端功能必须调用 http 模块，代码如下：
var http = require('http');
在常规服务器中，数据流通方式是客户通过浏览器发送请求，服务器在项目中进行查找，然后将客户所需的页面返回。查找过程可能存在文件存在或不存在两种情况，服务器会进行相应判断。以下是简单的服务器实现过程：
服务器代码编写与测试
1、编写服务器代码 server.js
var http=require('http');
var fs = require('fs');
var url = require('url');
//创建服务器
http.createServer(function(request,response) {
//解析请求，包括文件名
var pathname= url.parse(request.url).pathname;
//输出请求的文件名
console.log("Request for "+ pathname + " received.");
//从文件系统中都去请求的文件内容
fs.readFile(pathname.substr(1),function(err, data) {
if(err) {
console.log(err);
//HTTP 状态码 404 ： NOT FOUND
//Content Type:text/plain
response.writeHead(404,{'Content-Type': 'text/html'});
}
else {
//HTTP 状态码 200 ： OK
//Content Type:text/plain
response.writeHead(200,{'Content-Type': 'text/html'});
//写会相应内容
response.write(data.toString());
}
//发送响应数据
response.end();
});
}).listen(8081);
console.log('Server running at http://127.0.0.1:8081/');
通过上述代码，我们实现了服务器对文件的查找功能。接下来，我们将创建一个 HTML 文件，并通过浏览器进行访问。
2、编写 HTML 文件（index.html），用于浏览器请求
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>index</title>
</head>
<body>
这是一个用于进行nodejs服务器测试的html文件，我们能够通过在浏览器上面输入
http://127.0.0.1:8081/WebServer/index.html进行访问
</body>
</html>
创建完成后，我们进行测试。目前的目录结构如下：
3、进行测试
(1) 首先启动服务器，使用命令 node WebServer/server.js
(2) 在浏览器中进行访问，在 URL 栏中输入 http://127.0.0.1:8081/WebServer/index.html
其显示效果如下所示：
后台效果如下所示：
静态资源处理与样式引入
当然，我们也能够通过访问 http://127.0.0.1:8081/LoveYou.html访 访问 server.js 文件夹外的文件。进行到这里，我们就可以得到文件返回给前端。但是有些同学可能会问，样式该怎么做？如下面代码，我们进行了样式的定义，修改了两个 div 的大小，并且给 div 设置边框。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>index</title>
<style>
body {
border: 1px solid red;
}
div {
border-radius: 10px;
width: 500px;
height: 200px;
border: 2px solid green;
}
</style>
</head>
<body>
这是一个用于进行nodejs服务器测试的html文件，我们能够通过在浏览器上面输入
http://127.0.0.1:8081/WebServer/index.html进行访问
<div>1</div>
<div>2</div>
</body>
</html>
效果如下所示
有了这些，我们还会问，你这样直接将样式写在 HTML 中，我可不干，我要把样式写到另外单独一个文件中，然后通过引用的方式引入，于是就会有人使用下面代码：
<link rel="stylesheet" href="http://127.0.0.1:8081/WebServer/index.css" rel="external nofollow" >
然而，这段代码并不会起作用，因为传递给前端的方式 Content-Type 是有问题的，需要我们的服务器进行下一步操作，也就是处理静态文件。既然传给前端时需要告诉 type 是 CSS，那么我们就进行区分对待，如下面代码，我们对 server.js 进行修改如下：
var http=require('http');
var fs = require('fs');
var url = require('url');
//创建服务器
http.createServer(function(request,response) {
//解析请求，包括文件名
var pathname= url.parse(request.url).pathname;
//输出请求的文件名
console.log("Request for "+ pathname + " received.");
//当请求static文件夹时，设置文件返回类型是text/css
var firstDir = pathname && pathname.split('/')[2];
var ContentType = null;
if (firstDir && firstDir === 'static') {
ContentType = {'Content-Type': 'text/css'};
} else {
ContentType = {'Content-Type': 'text/html'}
}
//从文件系统中去请求的文件内容
fs.readFile(pathname.substr(1),function(err, data) {
if(err) {
console.log(err);
//HTTP 状态码 404 ： NOT FOUND
//Content Type:text/plain
response.writeHead(404, {'Content-Type': 'text/html'});
}
else {
//HTTP 状态码 200 ： OK
//Content Type:text/plain
response.writeHead(200, ContentType);
//写会回相应内容
response.write(data.toString());
}
//发送响应数据
response.end();
});
}).listen(8081);
console.log('Server running at http://127.0.0.1:8081/');
接着，我们需要在项目中创建一个 static 文件夹，如下面所示结构：
在 static 文件夹中创建 index.css 文件，代码内容如下所示：
body {
border: 1px solid blue;
}
div {
border-radius: 10px;
width: 400px;
height: 200px;
border: 2px solid yellow;
}
也就是修改 body 边框为蓝色，div 边框为黄色，同时我们需要更新 index.html 中文件内容如下所示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>index</title>
<link rel="stylesheet" href="http://127.0.0.1:8081/WebServer/static/index.css" rel="external nofollow" >
</head>
<body>
这是一个用于进行nodejs服务器测试的html文件，我们能够通过在浏览器上面输入
http://127.0.0.1:8081/WebServer/index.html进行访问
<div>1</div>
<div>2</div>
</body>
</html>
也就是通过引入的方式将样式引入到 HTML 文件中，然后在浏览器查看内容，效果如下所示：
很明显，我们的样式已经通过引入的方式引进到 HTML 页面中了。同样的原理，我们能够进行将 JS 也通过引入的方式进行使用，在这里我就不一一贴出代码了，看看效果如下所示：
在上面效果中，当我点击 2 号 div 的时候，将会调用我在 js 文件夹中的方法去执行弹窗，详细代码请到 github 下载：https://github.com/suwu150/node-http-server
Node.js Web 客户端创建
使用 Node 创建 Web 客户端
Node 创建 Web 客户端需要引入 http 模块，创建 client.js 文件，代码如下所示：
var http = require('http');
//用于请求的选项
var options = {
host: 'localhost',
port: '8081',
path: '/WebServer/index.html'
};
//处理响应的回调函数
var callback= function(response) {
//不断更新数据
var body = '';
response.on('data',function(data) {
body+=data;
});
response.on('end', function() {
//数据接收完成
console.log(body);
});
};
//向服务器端发送请求
var req = http.request(options, callback);
req.end();
新打开终端，运行程序如下所示：
对于服务器，可以参见我以前写过的服务器，其工作原理是一致的：https://www.jb51.net/article/191240.htm 这是使用 java 进行写的服务器
到此这篇关于浅谈使用 nodejs 搭建 web 服务器的过程的文章就介绍到这了，更多相关 nodejs 搭建 web 服务器内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！
macOS卸载Node.js指南：区分Homebrew与pkg安装包的处理方式
2026-11-05 11:28:12
JS逆向入门：浏览器Console调试与Node.js环境搭建指南
2026-11-05 10:57:15
Node.js 大版本升级需要注意哪些破坏性变更
2026-11-03 20:35:44
Node.js官网LTS版与Current版有什么区别
2026-11-03 19:33:49
Windows彻底卸载Node.js：清理AppData残留与PATH环境变量
2026-11-03 19:15:35