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文件进行响应。检查示例代码以获取示例。