从零开始用Node.js写一个Web Server，非常基础

最新推荐文章于 2024-06-16 21:21:50 发布

six66667

最新推荐文章于 2024-06-16 21:21:50 发布

阅读量951

点赞数 2

文章标签： node web server JavaScript

本文链接：https://blog.youkuaiyun.com/six66667/article/details/84626649

版权

本文介绍如何从零开始使用Node.js创建一个简单的Web Server，包括新建back-end.js文件，通过http模块监听2322端口，处理静态页面请求，以及遇到的问题和解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Node就不多做介绍了，安装node之后就可以用javascript写个web服务器程序，不用再下载安装什么Tomcat、IIS，并且性能出众。

1.去官网下载，安装之后，确认已添加到环境变量，cmd里敲一下，看看有没有进到node里：

配好环境之后就可以开始写js文件了。

2.新建一个back-end.js文件

这个js文件写的是后台程序。我们先写一个静态页面的服务器程序。

var http = require('http');
var server = http.createServer(function(req, res){
	res.write("hello world");
	res.end();
});
server.listen(2322);

只要敲上三行，就可以看到效果啦，这个服务器程序其实就算写完了。

第一行 require('http')，导入http模块。Node.js自带http模块，http模块提供request和response对象。

第二行调用http模块的createServer方法，该方法接受一个回调函数作为参数（JS回调函数）。该回调函数接受request和response对象（这个当然是在createServer约定好了的，具体的自己查源码吧），这俩对象就是上面http提供的那俩。request对象封装了HTTP请求，比如这里的请求：

response封装了HTTP响应，我们调用response的方法就可以把响应返回给浏览器。

这里使用了write方法，直接写到页面里（直接写到这里↓↓↓）

当然response不止这一个方法，比如有写响应头部信息的writeHead()，改变的是这里→ 可以自己随意地改返回的状态码，虽然这样没必要。。。

不管写什么，最后end一下，响应结束。（end里也可以写内容，内容当参数传进去就行了）

第三行server.listen(2322)，让我们新建的server在2322端口监听，现在就差去node跑我们的服务器程序了！

3.在node上运行back-end.js程序

要么在cmd上直接node + 文件名，要么找到node提供的一个exe文件（下图）。

这里直接在cmd下跑：

进入放back-end.js程序文件的目录，输入node进入node环境；

直接输入文件名 back-end.js回车（直接输名字，不要再写个node了）。

或者这样↓↓↓

（在node.exe里这样引入：，注意工作路径）

什么显示都没有（那是因为我们控制台没写任何输出，待会写上点提示），但已经跑起来了，现在去浏览器看看结果。

4.浏览器查看结果

地址栏输入http://127.0.0.1:2322/，看到hello world，说明这个服务器完全正常运行了呢。

打开开发者工具，把上面提到的request和response信息看一下。

我们res.write()的部分：

req(request)部分：

（下面那个favicon.ico是这个小图标：）

5.下面开始修改这个程序

先给cmd控制台那边输出点提示信息，调用上面提到的writeHead()方法，把一开始write的纯文本换成HTML（write可以多次调用，每次都在后面追加写）

var http = require('http');

var server = http.createServer(function(req, res){
    res.writeHead(200, {'Content-Type':'text/html'});
	res.write('<!DOCTYPE html><html lang="en">');
	res.write('<head><meta charset="UTF-8"><title>Document</title></head>');
	res.write('<body><h1>hello Node!</h1></body>');
	res.end('</html>');
});

server.listen(2322);
console.log("running at http://127.0.0.1:2322")

（write参数里最好用单引号，因为HTML中标签属性大多用双引号，但这不是事儿）

注意writeHead()一定要写在其他write()前面！！！！

修改完后Ctrl+C重新启动一下程序（每次修改后都要重启程序）

控制台有了提示信息

到这里了，再改一下地址栏，在端口后面随便打点东西试试：

index.html并不存在，200OK返回的还是这个页面，是因为这个时候request改变了，这里的req当然也跟着改鸭，所以一定还是下面熟悉的响应内容。

但我们当然不想这样，还是想要请求、资源一一对应，那在回调函数里增加if判断，判断请求的资源名，那么怎么得到这个url呢？

node提供了url模块，require('url')加载进来，其中有一个重要的方法，url.parse()可以将一个完整的URL地址分解成很多部分，方便使用，在createServer的回调函数里增加一行控制台输出，看看pathObject；

var http = require('http');
var url = require('url');

var server = http.createServer(function(req, res){
	var pathObject = url.parse(req.url, true);
        //第二个参数为true，返回的对象中query属性为一个对象，否则为字符串
        res.writeHead(200, {'Content-Type':'text/html'});
	res.write('<!DOCTYPE html><html lang="en">');
	//都一样，略了
	res.end('</html>');
	console.log(pathObject);
});
//其余都一样

好多属性值都为null，因为我们传进去的参数是requeset.url，不嫌事多可以在控制台打印出来看看，这个就是req.url，没有其他任何其他信息了，所以协议、主机名等属性都是空，要想看看url.parse()，在传参的时候传一个整的，看这篇—>url模块的三个方法

我们要用的是pathname属性（目前看path和pathname是一样的，但加了查询参数之后，path属性值是有后面一堆查询条件的）

再定义一个变量 var pathname = pathObject.pathname;

如果增加完if判断后，还是用write写内容太费劲了，是时候用引入外部文件了。

node提供fs(file system)模块，负责读写文件，require('fs')

var http = require('http');
var fs = require('fs');
var url = require('url');

var server = http.createServer(function(req, res){
	var pathObject = url.parse(req.url, true);
	var pathname = pathObject.pathname;
	if(pathname = '/index.html' || ''){
		fs.readFile('H:\\web开发\\01WebServer\\static\\index.html',function(err,cont){
			if(err){
				console.log('404');
				res.end('<h1>404</h1>');
			}
			else{
				console.log('request \\static\\index.html');
				res.write(cont, 'binary');
				res.end();
			}
		})//第一个参数是本地文件路径，
          //第二个参数是一个回调函数，接受两个参数，第一个是错误error，第二个是readFile第一个参数所指的文件内容
          //文件路径注意转义符
	}
	else{
		res.writeHead(404, 'file not found');
		res.end('<h1>404</h1>');
	}
});

server.listen(2322);
console.log("running at http://127.0.0.1:2322")

在项目文件夹下新建一个static文件夹，里面用来放我们静态网页用的东西，新建一个index.html

成功读取到了index.html

但现在我们再加一张图片，放在这里

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>首页</title>
</head>
<body>
	<h1>啊哈！</h1>
	<img src="images/fat.jpg" />
</body>
</html>

会发现显示不出来了