javascript – 简单的node.js服务器,它将html css作为响应发送

您在第一个代码段中编写的内容是一个Web服务器,无论浏览器请求的URI是什么,它都会响应HTML文件的正文.

这一切都很好,但随后第二个片段,你试图将第二个文件发送到一个封闭的响应句柄.要理解为什么这不起作用,您必须了解http的工作原理. http(在大多数情况下)是请求 – >响应类型协议.也就是说,浏览器会询问某些内容,服务器会将该内容或某种错误消息发送回浏览器. (我将跳过keep-alive和允许服务器将内容推送到浏览器的方法 – 这些都远远超出了你在这里想到的简单学习目的.)只需说它不合适在没有要求的情况下向浏览器发送第二个响应.

那么如何让浏览器要求提供第二份文件呢？嗯,这很容易……在你的HTML文件中你可能有一个< link rel =“stylesheet”href =“AppClientStyle.css”>标签.这将导致浏览器向您的服务器发出请求AppClientStyle.css的请求.您可以通过添加开关或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,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文件相同的目录中启动它.以上是简单,@R_975_10197@和不遵守.但它应该足以满足您自己的学习或本地开发目的.

请记住,以上所有内容都不如使用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.它真的是那么无痛.