javascript - 为什么本地的 .css 文件和 .js 文件没有链接到 index.html 文件？

Question

我正在使用 node.js 并尝试发送包含这些标签的 .html 文件:

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="description" content="This is my personal profile website" />
<link rel="stylesheet" type="text/css" href="profile_design.css" />
<link rel="stylesheet" href="jquery.fancybox-1.3.4/fancybox/jquery.fancybox-1.3.4.css" type="text/css" media="screen" />

<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="jquery.fancybox-1.3.4/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<script type="text/javascript" src="profile.js"></script>

这是 node.js 中的 HTTP 服务器:

var fs = require('fs');
var http =  require ('http');
http.createServer(function (request, response) {

    console.log('request starting...');

    fs.readFile('C:/Users/.../index.html', function(error, content) {
        if (error) {

            response.writeHead(500);
            response.end();
        } else {
            //response.writeHead(200, { 'Content-Type': 'text/html' });
            response.end(content, 'utf-8');
        }

        console.log(error);
    });

}).listen(8080);

问题是 index.html 文件以良好的方式返回，但所有 JavaScript 文件和 CSS 都没有正确发送到客户端。问题是如何发送那些.js 和.css 文件？

Answer 1

我遇到了同样的问题，但在了解幕后情况之前不想使用任何外部模块或框架。所以，这就是我自己解决 CSS 文件问题的方法。希望它对某人有用。

每当我请求 /style.css 时，我都会调用这个简单的函数:

function style(response) {

  console.log("Request handler 'style' was called.");

  fs.readFile("style.css", function(error, file) {

    if(error) {

        response.writeHead(500, {"Content-Type": "text/plain"});

        response.write(error + "\n");

        response.end();

    } else {

        response.writeHead(200, {"Content-Type": "text/css"});

        response.write(file);

        response.end();

    }

  });

}

基本上，我们读取我们的静态文件并根据要求将它们发回。请注意，您必须注意路由请求。