1. 首页
  2. SEO技术

Node.js服务HTML页面和静态内容

gooood个人博客网站

网站开发工具

nodejs

JavaScript

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

本文来自SEO排名优化_SEO技术_SEO资讯网,经授权后发布,转载请联系原作者。原文链接:http://www.ylzug.com/js/2231.html