个人中心
gpt4 book ai didi

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

转载 作者：IT老高 更新时间：2023-10-28 23:15:03 26 4
gpt4 key购买 nike

我已经创建了发送 html 文件作为响应的基本 http 服务器。如何发送 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(在大多数情况下)是一个请求->响应类型的协议(protocol)。也就是说，浏览器请求某些东西，然后服务器将那个东西或某种错误消息发送回浏览器。 (我将跳过 keep-alive 和允许服务器将内容推送到浏览器的方法——这些都远远超出了您在这里似乎想到的简单学习目的。)只要说不适合当浏览器没有请求时，向浏览器发送第二个响应。

那么如何让浏览器请求第二个文档呢？嗯，这很简单……在您的 HTML 文件中，您可能有一个 <link rel="stylesheet" href="AppClientStyle.css">标签。这将导致浏览器向您的服务器发出请求，要求它提供 AppClientStyle.css。您可以通过添加 switch 来处理此问题。或 if到您的 createServer 代码，以根据浏览器请求的 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 .真的很无痛。

关于javascript - 发送 html+css 作为响应的简单 node.js 服务器，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28822034/

26 4 0
文章推荐： Android，通过 DDMS 跟踪内存， "Get Allocations"没有任何作用
文章推荐： node.js - Mongoose 填充不起作用
文章推荐： javascript - 如何将参数传递给 express.js 路由器？
文章推荐： c++ - 我可以使用 std::initializer_list 而不是大括号括起来的初始化程序来初始化数组吗？
IT老高
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com