浅谈使用nodejs搭建web服务器的过程


Posted in NodeJs onJuly 20, 2020

使用 Node 创建 Web 服务器

什么是 Web 服务器?

Web服务器一般指网站服务器,是指驻留于因特网上某种类型计算机的程序,Web服务器的基本功能就是提供Web信息浏览服务。它只需支持HTTP协议、HTML文档格式及URL,与客户端的网络浏览器配合。

大多数 web 服务器都支持服务端的脚本语言(php、python、ruby)等,并通过脚本语言从数据库获取数据,将结果返回给客户端浏览器。

目前最主流的三个Web服务器是Apache、Nginx、IIS。

Node.js 提供了 http 模块,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>

创建完之后,我们进行测试,现在我的目录结构是这样的:

浅谈使用nodejs搭建web服务器的过程

3、进行测试

    (1) 首先我们启动服务器,使用命令node WebServer/server.js  
    (2) 在浏览器进行访问,在url栏中输入http://127.0.0.1:8081/WebServer/index.html   

其显示效果如下所示:

浅谈使用nodejs搭建web服务器的过程

后台效果如下所示:

浅谈使用nodejs搭建web服务器的过程

当然,我们也能够通过访问通过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>

效果如下所示

浅谈使用nodejs搭建web服务器的过程

有了这些,我们还会问,你这样直接将样式写在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文件夹,如下面所示结构:

浅谈使用nodejs搭建web服务器的过程

在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文件中,然后在浏览器查看内容,效果如下所示:

浅谈使用nodejs搭建web服务器的过程

很明显,我们的样式已经通过引入的方式引进到html页面中了,同样的原理,我们能够进行将js也通过引入的方式进行使用,在这里我就不一一贴出代码了,看看效果如下所示:

浅谈使用nodejs搭建web服务器的过程

在上面效果中,当我点击2号div的时候,将会调用我在js文件夹中的方法去执行弹窗,详细代码请到github下载:https://github.com/suwu150/node-http-server

使用 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();

新打开终端,运行程序如下所示:

浅谈使用nodejs搭建web服务器的过程

对与服务器,可以参见我以前写过的服务器,其工作原理是一致的:https://3water.com/article/191240.htm 这是使用java进行写的服务器

到此这篇关于浅谈使用nodejs搭建web服务器的过程的文章就介绍到这了,更多相关nodejs搭建web服务器内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

NodeJs 相关文章推荐
nodejs中exports与module.exports的区别详细介绍
Jan 14 NodeJs
nodejs中转换URL字符串与查询字符串详解
Nov 26 NodeJs
学习 NodeJS 第八天:Socket 通讯实例
Dec 21 NodeJs
Nodejs多站点切换Htpps协议详解及简单实例
Feb 23 NodeJs
nodejs搭建本地服务器并访问文件的方法
Mar 03 NodeJs
详解nodejs微信公众号开发——1.接入微信公众号
Apr 10 NodeJs
nodejs mysql 实现分页的方法
Jun 06 NodeJs
nodeJS实现路由功能实例代码
Jun 08 NodeJs
nodejs实现的连接MySQL数据库功能示例
Jan 25 NodeJs
M2实现Nodejs项目自动部署的方法步骤
May 05 NodeJs
纯异步nodejs文件夹(目录)复制功能
Sep 03 NodeJs
NodeJS配置CORS实现过程详解
Dec 02 NodeJs
通过实例了解Nodejs模块系统及require机制
Jul 16 #NodeJs
Nodejs环境实现socket通信过程解析
Jul 03 #NodeJs
使用nodejs实现JSON文件自动转Excel的工具(推荐)
Jun 24 #NodeJs
nodejs各种姿势断点调试的方法
Jun 18 #NodeJs
在NodeJs中使用node-schedule增加定时器任务的方法
Jun 08 #NodeJs
nodeJS与MySQL实现分页数据以及倒序数据
Jun 05 #NodeJs
NodeJS多种创建WebSocket监听的方式(三种)
Jun 04 #NodeJs
You might like
thinkphp实现上一篇与下一篇的方法
2014/12/08 PHP
ThinkPHP模板循环输出Volist标签用法实例详解
2016/03/23 PHP
在CentOS系统上从零开始搭建WordPress博客的全流程记录
2016/04/21 PHP
php多线程并发实现方法
2016/09/30 PHP
mongodb和php的用法详解
2019/03/25 PHP
php根据地址获取百度地图经纬度的实例方法
2019/09/03 PHP
基于jquery的弹出提示框始终处于窗口的居中位置(类似于alert弹出框的效果)
2011/09/28 Javascript
js+jquery常用知识点汇总
2015/03/03 Javascript
自定义jQuery插件方式实现强制对象重绘的方法
2015/03/23 Javascript
基于jquery ui的alert,confirm方案(支持换肤)
2015/04/03 Javascript
JavaScript的new date等日期函数在safari中遇到的坑
2016/10/24 Javascript
BootStrap Table后台分页时前台删除最后一页所有数据refresh刷新后无数据问题
2016/12/28 Javascript
AngularJS 使用ng-repeat报错 [ngRepeat:dupes]
2017/01/19 Javascript
微信小程序 首页制作简单实例
2017/04/07 Javascript
vue中使用localstorage来存储页面信息
2017/11/04 Javascript
Jquery让form表单异步提交代码实现
2019/11/14 jQuery
使用preload预加载页面资源时注意事项
2020/02/03 Javascript
Python实现微信公众平台自定义菜单实例
2015/03/20 Python
python实现文本去重且不打乱原本顺序
2016/01/26 Python
python爬虫_微信公众号推送信息爬取的实例
2017/10/23 Python
Python实现的从右到左字符串替换方法示例
2018/07/06 Python
浅谈django的render函数的参数问题
2018/10/16 Python
Django中的ajax请求
2018/10/19 Python
python的turtle库使用详解
2019/05/10 Python
python3多线程知识点总结
2019/09/26 Python
浅谈图像处理中掩膜(mask)的意义
2020/02/19 Python
Python调用REST API接口的几种方式汇总
2020/10/19 Python
Python编写万花尺图案实例
2021/01/03 Python
一款CSS3实现多功能下拉菜单(带分享按)的教程
2014/11/05 HTML / CSS
创业计划书如何吸引他人眼球
2014/01/10 职场文书
电气个人求职信范文
2014/02/04 职场文书
煤矿安全生产月活动总结
2014/07/05 职场文书
2015年国庆晚会主持词
2015/07/01 职场文书
Redis源码阅读:Redis字符串SDS详解
2021/07/15 Redis
Python内置数据结构列表与元组示例详解
2021/08/04 Python
利用Python实现模拟登录知乎
2022/05/25 Python