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页面，并在其中粘贴以下代码：
<!doctype HTML>
<html>
<head>
<title>
Index
</title>
</head>
<body>
<h1>
Hello! Now you know how to serve HTML files using Node.js!!!
</h1>
</body>
</html>
现在我们有了一个简单的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('<b>Hey there!</b><br /><br />
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文件进行响应。检查示例代码以获取示例。
0
1230博客
热门推荐：