node.js开发web服务器,读取html文件并显示html页面

最近项目开发遇到要使用node.js,如何使用node.js开发一个web服务器呢?其实很简单,如何要显示更美观的页面我们就需要去读取html文件在网页中显示。在写web服务前,首先要确保你会JavaScript,有一个在使用的编辑器,这里使用的是VSCode,预先安装了node.js,如果你还没安装node.js或者不是使用nvm安装的,请看这里的安装教程:Windows使用nvm安装node.js,OS X使用nvm安装node.js

node.js开发web服务器,读取html文件并显示html页面

文章图片
一、使用node.js写一个简单的web服务器Node.js写web服务器要遵循几个步骤:使用require引入node的http模块、创建http服务器、监听服务器端口、接收请求和响应请求。
1、引入node的http模块
var http = require("http");

2、创建http服务器并监听端口
// 创建一个http服务器 var server = http.createServer(function (request, response){ // request为客户端请求,response为服务端响应 }); server.listen(8888); // 监听端口

3、接收请求和响应请求
【node.js开发web服务器,读取html文件并显示html页面】该http服务器完整代码如下:
var http = require("http"); // 创建一个http服务器 var server = http.createServer(function (request, response){ // request为客户端请求,response为服务端响应 response.writeHead(200, {"Content-Type": "text/plain"}); // 返回数据 response.end("The Message from Node.js Server."); }); server.listen(8888); // 监听端口 console.log("Sever Running At http://localhost:8888");

4、使用node启动web服务器
在命令行中切换到当前项目路径,在VSCode中使用Ctrl+`打开命令行,输入如下命令启动web服务器:
node.js开发web服务器,读取html文件并显示html页面

文章图片
5、打开浏览器访问web服务器
node.js开发web服务器,读取html文件并显示html页面

文章图片
二、node.js读取html文件并显示页面以上在浏览器中显示的web服务器内容是不是好简单,而且也不够美观,那么开发中我们该如何做到和别人的网页一样美观呢?这就使用到node中的fs文件模块了,其中的html文件是来自bootstrap的一个示例模板。
读取html文件首先要引入fs模块,使用readFile函数进行读取,将读取的结果传给response的end函数,这样就可以在网页中显示了。
1、引入fs模块
var fs = require("fs");

2、读取html文件并返回给客户端
// request为客户端请求,response为服务端响应 response.writeHead(200, {"Content-Type": "text/html"}); // 返回数据 fs.readFile(__dirname + "/index.html", "utf-8", function (error, data){ if(error) response.end("read html file error."); else response.end(data.toString()); });

3、使用node运行web服务器,然后在浏览器中浏览页面
node.js开发web服务器,读取html文件并显示html页面

文章图片
以上就是使用node.js开发web服务器的完整内容了,上面只是简单地读取并显示HTML页面,如果需要填充数据则需要用到模板,例如ejs或jade模板引擎,node.js完整的web开发框架可以使用express,本节内容比较简单,希望可以帮到你。

    推荐阅读