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

Simple node.js server that sends html+css as response

本文关键字：html+css 响应 node js 服务器 简单      更新时间：2023-09-26

我已经创建了基本的http服务器，它将html文件作为响应发送。如何发送css文件，以便使用浏览器的客户端可以看到使用css的html？

我的代码：

var http = require('http');
var fs = require('fs');
var htmlFile;
fs.readFile('./AppClient.html', function(err, data) {
    if (err){
        throw err;
    }
    htmlFile = data;
});

var server = http.createServer(function (request, response) {
      response.writeHead(200, {"Content-Type": "text/html"});
      response.end(htmlFile);
    });
//Listen on port 8000, IP defaults to 127.0.0.1
server.listen(8000);

console.log("Server running at http://127.0.0.1:8000/");

我尝试过的（似乎不起作用——客户端在这里只看到css文件内容）：

var http = require('http');
var fs = require('fs');
var htmlFile;
var cssFile;
fs.readFile('./AppClient.html', function(err, data) {
    if (err){
        throw err;
    }
    htmlFile = data;
});
fs.readFile('./AppClientStyle.css', function(err, data) {
    if (err){
        throw err;
    }
    cssFile = data;
});
var server = http.createServer(function (request, response) {
      response.writeHead(200, {"Content-Type": "text/css"});
      response.write(cssFile);
      response.end();
      response.writeHead(200, {"Content-Type": "text/html"});
      response.write(htmlFile);
      response.end();
    });
//Listen on port 8000, IP defaults to 127.0.0.1
server.listen(8000);

console.log("Server running at http://127.0.0.1:8000/");

html文件：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="AppClientStyle.css">
</head>
<body>

<div class=middleScreen>
<p id="p1">Random text</p>
</div>
</body>
</html>

css文件：

@CHARSET "UTF-8";
.middleScreen{
    text-align:center;
    margin-top:10%;
}

我不想在这里使用express（这只是为了学习）

您在第一个代码段中编写的是一个web服务器，无论浏览器请求什么URI，它都会以HTML文件的主体进行响应。

这一切都很好，但对于第二个片段，您正试图将第二个文档发送到一个关闭的响应句柄。要理解为什么这不起作用，您必须了解HTTP是如何工作的。HTTP（在大多数情况下）是一种请求->响应类型的协议。也就是说，浏览器请求一些东西，服务器将该东西或某种错误消息发送回浏览器。（我将跳过keep-alive和允许服务器将内容推送到浏览器的方法——这些都远远超出了你在这里想要的简单学习目的。）只需说一句，当浏览器没有要求时，向其发送第二个响应是不合适的。

那么，如何让浏览器请求第二个文档呢？这很简单。。。在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，所以我要说服你尝试一下：

$ 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.真的很无痛。

将CSS直接集成到AppClient.html文件中。有不同的方法：

外部CSS文件

在与html文件相同的目录中创建一个styles.css文件（或任何其他文件名）。然后添加

<link rel="stylesheet" type="text/css" href="styles.css">

到HTML文档的<head>部分。

或

就在HTML文件中

添加

<style>
  YOUR STYLES RIGHT HERE
</style>

到HTML文档的<head>部分。

相关文章：