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

我创建了基本的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服务器,该Web服务器使用HTML文件的主体进行响应,而与浏览器请求的URI无关。

一切都很好,但是再加上第二个片段,您正尝试将第二个文档发送到封闭的响应句柄。要了解为什么它不起作用,您必须了解HTTP如何工作。HTTP(在大多数情况下)是一个request->

response

type协议。也就是说,浏览器要求输入内容,服务器将其或某种错误消息发送回浏览器。(我将跳过保持活动状态和允许服务器将内容推送到浏览器的方法,这些方法都远远超出了您似乎在此处想到的简单学习目的。)可以说这不适合在没有要求的情况下向浏览器发送第二个响应。

那么,如何让浏览器请求第二个文档呢?好吧,这很容易…在您的HTML文件中,您可能有一个<link rel="stylesheet"

href="AppClientStyle.css">标签。这将导致浏览器向您的服务器发出请求,要求其提供AppClientStyle.css。您可以通过在您的createServer代码中添加switchif来执行此操作,以根据浏览器请求的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。真的就是那样。

以上是 简单的node.js服务器发送html + css作为响应 的全部内容, 来源链接: utcz.com/qa/404288.html

回到顶部