使用Node.js构建服务器显示html页面

  这次使用node构建一个本地的服务器，然后以两种方式显示html页面：   PLAN A:输入IP地址+端口号，直接显示固定页面。   PLAN B:输入IP地址+端口号+URL，选择已有的页面显示。   好的，在执行方案前先复习一下node是怎么构建HTTP服务器的。

HTTP服务器构建：

var http = require('http'); http.createServer(function (request, response) { // 发送 HTTP 头部 // HTTP 状态值: 200 : OK 网络通信正常 // 内容类型: text/plain response.writeHead(200, {'Content-Type': 'text/plain'}); // 发送响应数据 "Hello World" response.write('hello world!\n'); response.end(); }).listen(8888,'127.0.0.1');//使用网络端口 8888 本地服务器默认地址为127.0.0.1 // 终端打印如下信息 console.log('Server running at http://127.0.0.1:8888/');

  高级语言果然不同凡响，区区几行就构建了一个本地服务器。node自带的http模块已经将TCP链接以及HTTP解析处理好了。在应用端只需要操作http模块提供的request和response对象即可。   request对象封装了HTTP请求，我们调用request对象的属性和方法就可以拿到所有HTTP请求的信息；   response对象封装了HTTP响应，我们操作response对象的方法，就可以把HTTP响应返回给浏览器。

开发工具与准备工作：

  开发工具：VScode，用过都说好。   准备工作很简单，不是说要显示html页面么，那html文件就得先备好。html文件怎么做就不加赘述了，来看这个的都是前端内部人员。这次我用的上次博客中设计的一个页面web_csdn.html。将html文件与js文件放在一个目录下。

方案一：输入IP地址+端口号，直接显示固定页面

  新建文件html1.js，与web_csdn.html放在一个目录下。js文件内代码如下：

var http = require('http'); var fs = require('fs'); var htmlName ='/web_csdn.html'; function onRequest(request,response){ console.log('request received'); response.writeHead(200,{'Content-Type':'text/html'}); var myReadStream = fs.createReadStream(__dirname + htmlName ,'utf8'); myReadStream.pipe(response); } http.createServer(onRequest).listen(8888,'127.0.0.1'); console.log('server has started');

  在VScode的调试台启动该本地服务器：   打开一个浏览器，在地址栏中输入：127.0.0.1:8888 。   效果图如下：

方案二：输入IP地址+端口号+URL，选择已有的页面显示

  新建文件html.js，与web_csdn.html放在一个目录下。这个方案是根据用户输入的URL选择html文件的，因此可以在目录里面多放几个html文件试验。js文件内代码如下：

var http = require('http'); var fs = require('fs'); var url = require('url'); function onRequest(request,response){ var pathname = url.parse(request.url).pathname;//读取请求中的html名称 console.log(pathname+'request received'); fs.readFile(pathname.substr(1),function(err,data){ if(err){ console.log(err);//没读到文件就报错 response.writeHead(404,{'Content-Type':'text/html'}); }else{ response.writeHead(200,{'Content-Type':'text/html'}); response.write(data.toString());//读文件数据（回调） } response.end(); }); } http.createServer(onRequest).listen(8888,'127.0.0.1'); console.log('server has started');

  在VScode的调试台启动该本地服务器：   打开一个浏览器，在地址栏中输入：http://127.0.0.1:8888/web_csdn.html   效果如下图所示：

附录：EXPRESS框架下的服务器搭建：

  EXPRESS是一个应用广泛的node.js框架。与原生态的node相比，EXPRESS使用起来更加简单。EXPRESS构建服务器源码如下：

var express = require('express'); var app = express(); app.get('/',function(request,response){ response.send('hello world!'); }); var server = app.listen(8888, function () { console.log('Server running at http://127.0.0.1:8888/'); });

  以上代码与第一个代码示例相同。都是搭建一个本地服务器，端口为8888，IP仍为127.0.0.1。   搭建服务器后显示web页面的操作也很简单。只需要使用response.sendFile（）函数就可以直接按HTTP协议传输文件。代码如下：

var express = require('express'); var app = express(); app.get('/',function(request,response){ response.sendFile(__dirname + '/web_csdn.html'); }); var server = app.listen(8888, function () { console.log('Server running at http://127.0.0.1:8888/'); });