kil*_*876 13 html javascript css node.js
我已经创建了基本的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%;
}
我不想在这里使用快递(这只是为了学习目的)
And*_*cki 25
您在第一个代码段中编写的内容是一个Web服务器,无论浏览器请求的URI是什么,它都会响应HTML文件的正文.
这一切都很好,但随后第二个片段,你试图将第二个文件发送到一个封闭的响应句柄.要理解为什么这不起作用,您必须了解HTTP的工作原理.HTTP(在大多数情况下)是请求 - >响应类型协议.也就是说,浏览器会询问某些内容,服务器会将该内容或某种错误消息发送回浏览器.(我将跳过keep-alive和允许服务器将内容推送到浏览器的方法 - 这些都远远超出了你在这里想到的简单学习目的.)只需说它不合适在没有要求的情况下向浏览器发送第二个响应.
那么如何让浏览器要求提供第二份文件呢？嗯,这很容易......在你的HTML文件中你可能有一个<link rel="stylesheet" href="AppClientStyle.css">标签.这将导致浏览器向您的服务器发出请求AppClientStyle.css的请求.您可以通过添加switch或创建ifcreateServer代码来执行此操作,以根据浏览器请求的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.它确实是无痛的.
| 归档时间： |
|
| 查看次数： |
26870 次 |
| 最近记录： |