html页面请求node,Node.js服务HTML页面和静态内容

Node.js是一个平台，提供了使用JavaScript编写服务器端代码的方法。该模型非常适合快速基于服务器的应用程序原型制作，甚至可以用于构建访问量较高的Web应用程序。在之前的Node.js教程系列-入门中，我们讨论了基于Node.js的应用程序的基础知识和工作模型。在本文中，我们将看到如何使用Node.js提供HTML页面，脚本和样式。

在上一篇文章中，我们使用http模块编写了一个hello world应用程序。我们将在本文中使用相同的模块，并了解如何将其用于向客户端发送不同类型的响应。

首先，在电脑上的任何位置创建一个新文件夹，并将其命名为BasicNodeApp。在此文件夹中，添加一个名为index.html的HTML文件和一个名为server.js的JavaScript文件。在编辑器上打开server.js文件，并在其中编写以下代码：

var http = require('http');

var fs = require("fs");

http.createServer(function(request, response) {

}).listen(3000);

上面片段(fs)中的第二个模块是平台中用于访问文件系统的内置模块。使用fs，我们可以对文件和目录执行CRUD操作。它包含用于与文件系统对话的同步和异步API。首选使用异步API，因为它在操作完成之前不会阻塞事件循环。

然后我们向index.html页面添加一些基本HTML。在文本编辑器中打开index.html页面，并在其中粘贴以下代码：

Index

Hello! Now you know how to serve HTML files using Node.js!!!

现在我们有了一个简单的HTML页面，让我们在对服务器的每次请求中都提供此页面。在上面调用的createServer方法的回调函数中添加以下代码：

fs.readFile("index.html", function(err, data){

response.writeHead(200, {'Content-Type': 'text/html'});

response.write(data);

response.end();

});

使用以下命令运行此应用程序：

node server.js

打开浏览器，然后将URL更改为http：// localhost：3000。您将在屏幕上看到HTML渲染。上面片段中的response.writeHead方法设置HTTP状态代码和内容类型，客户端将根据该状态类型和响应来处理响应。

有趣的是，访问服务器的任何标签，您将获得同一页面。这是您绝对不希望看到的东西。仅当标签为/ index时，才为页面index.html提供服务，否则，为我们提供一些默认内容。下面的代码执行此操作：

if(request.url === "/index"){

fs.readFile("index.html", function (err, data) {

response.writeHead(200, {'Content-Type': 'text/html'});

response.write(data);

response.end();

});

}

else{

response.writeHead(200, {'Content-Type': 'text/html'});

response.write('Hey there!

This is the default response. Requested URL is: ' + request.url);

response.end();

}

在以上代码段中，我们尝试读取文件，但未检查操作是否失败。如果尝试读取文件失败，则回调中的第一个参数将包含错误的详细信息。让我们处理该错误，如果找不到该文件，则以404状态响应：

fs.readFile("index.html", function(err, data){

if(err){

response.writeHead(404);

response.write("Not Found!");

}

else{

response.writeHead(200, {'Content-Type': contentType});

response.write(data);

}

response.end();

});

现在，重命名文件index.html并运行该应用程序。您应该看到浏览器上显示一个错误。

让我们向页面添加一些基本样式。创建一个CSS文件，并将其命名为myStyles.css。添加样式以更改页面上使用的h1标签的字体。将以下CSS添加到此文件：

h1 {

font-family: cursive;

}

现在，修改server.js文件以在发现CSS文件请求时为该文件提供服务。以下代码段发送CSS响应：

if(/^\/[a-zA-Z0-9\/]*.css$/.test(request.url.toString())){

sendFileContent(response, request.url.toString().substring(1), "text/css");

}

function sendFileContent(response, fileName, contentType){

fs.readFile(fileName, function(err, data){

if(err){

response.writeHead(404);

response.write("Not Found!");

}

else{

response.writeHead(200, {'Content-Type': contentType});

response.write(data);

}

response.end();

});

}

现在，将链接标记添加到之前创建的HTML文件中，以指向CSS文件并运行页面。CSS文件将加载，样式将应用到页面上。

同样，当服务器收到请求时，您可以使用JavaScript文件进行响应。检查示例代码以获取示例。