简单的node.js服务器发送html + css作为响应

简单的node.js服务器发送html + css作为响应

您在第一个代码段中编写的是一个Web服务器，该Web服务器使用HTML文件的主体进行响应，而与浏览器请求的URI无关。

一切都很好，但是再加上第二个片段，您正尝试将第二个文档发送到封闭的响应句柄。要了解为什么它不起作用，您必须了解HTTP如何工作。HTTP（在大多数情况下）是一个request->
response
type协议。也就是说，浏览器要求输入内容，服务器将其或某种错误消息发送回浏览器。（我将跳过保持活动状态和允许服务器将内容推送到浏览器的方法，这些方法都远远超出了您似乎在此处想到的简单学习目的。）可以说这不适合在没有要求的情况下向浏览器发送第二个响应。

那么，如何让浏览器请求第二个文档呢？好吧，这很容易…在您的HTML文件中，您可能有一个

<link rel="stylesheet"href="AppClientStyle.css">

标签。这将导致浏览器向您的服务器发出请求，要求其提供AppClientStyle.css。您可以通过在您的createServer代码中添加

switch

或

if

来执行此 *** 作，以根据浏览器请求的URL执行其他 *** 作。

var server = http.createServer(function (request, response) {    switch (request.url) {        case "/AppClientStyle.css" : response.writeHead(200, {"Content-Type": "text/css"}); response.write(cssFile); break;        default :     response.writeHead(200, {"Content-Type": "text/html"}); response.write(htmlFile);    });    response.end();}

因此，首先，当您通过http：//
localhost：8000
访问服务器时，将向您发送html文件。然后，该文件的内容将触发浏览器询问http：//
localhost：8000 / AppClientStyle.css

请注意，可以通过提供项目目录中存在的任何文件来使服务器更加灵活：

var server = http.createServer(function (request, response) {    fs.readFile('./' + request.url, function(err, data) {        if (!err) { var dotoffset = request.url.lastIndexOf('.'); var mimetype = dotoffset == -1      ? 'text/plain'      : {          '.html' : 'text/html',          '.ico' : 'image/x-icon',          '.jpg' : 'image/jpeg',          '.png' : 'image/png',          '.gif' : 'image/gif',          '.css' : 'text/css',          '.js' : 'text/javascript'          }[ request.url.substr(dotoffset) ]; response.setHeader('Content-type' , mimetype); response.end(data); console.log( request.url, mimetype );        } else { console.log ('file not found: ' + request.url); response.writeHead(404, "Not Found"); response.end();        }    });})

在与HTML和CSS文件相同的目录中启动它。上面是简单，容易出错和不安全的。但这对于您自己的学习或本地发展目的应该足够了。

请记住，以上所有内容都比仅使用Express简洁得多。实际上，我不确定您为什么不想使用Express，因此我将尝试说服您尝试使用Express：

$ npm install express$ mkdir www$ mv AppClientStyle.css www/$ mv AppClient.html www/index.html

您的脚本将如下所示（从Express Hello World借来的）

var express = require('express')var app = express()app.use(express.static('www'));var server = app.listen(8000, function () {    var host = server.address().address    var port = server.address().port    console.log('Express app listening at http://%s:%s', host, port)})

然后运行脚本，并将浏览器指向http：// localhost：8000。真的就是那样。