发送html + css作为响应的简单node.js服务器
我创build了基本的http服务器，发送html文件作为响应。 我怎样才能发送的CSS文件以及使用浏览器的客户端将看到一个HTML使用CSS？
代码我有：
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%; }
这里我不想用快递（这只是为了学习目的）
你在第一个片段中写的是一个Web服务器，它不pipe浏览器请求什么URI，都会响应HTML文件的主体。
这一切都很好，但随后第二个片段，你正试图发送第二个文件到一个封闭的响应句柄。 要理解为什么这不起作用，您必须了解HTTP的工作原理。 HTTP（大部分）是一个请求 – >响应types的协议。 也就是说，浏览器要求一些东西，服务器把这些东西或者某种错误信息发送回浏览器。 （我会跳过保持活力和允许服务器将内容推送到浏览器的方法 – 这些都远远超出了你在这里想到的简单的学习目的。）只要说这是不适当的当浏览器没有要求时，向浏览器发送第二个响应。
那么如何让浏览器要求第二个文档呢？ 那么，这很容易…在你的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文件相同的目录开始。 以上是简单的，容易出错的INSECURE。 但是，对于您自己的学习或本地开发目的而言，这应该足够了。
请记住，以上所有内容远不如使用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文件所在的同一目录中创build一个styles.css文件（或任何其他文件名）。 然后加
<link rel="stylesheet" type="text/css" href="styles.css">
到您的HTML文档的<head>部分。
要么
在你的HTML文件中
添加一个
<style> YOUR STYLES RIGHT HERE </style>
到您的HTML文档的<head>部分。