Question

为什么我的css文件似乎只是随机加载？我该如何解决这个问题？我出于原因使用没有Express的Nodejs。

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

    fs.readFile('./view.html', function(error, content) {
        if(error) {
            response.writeHead(404);
            response.end();
        } else {
            response.writeHead(200, {'Content-Type': 'text/html'});
            response.end(content, 'utf-8');
        }
    });

    fs.readFile('./css/appStylesheet.css', function(error, content) {
        if(error) {
            response.writeHead(404);
            response.end();
        } else {
            response.writeHead(200, {'Content-Type': 'text/css'});
            response.end(content, 'utf-8');
        }
    });

}).listen(3000);
console.log('Server running at localhost on port 3000');

以防这个部分不是问题所在，下面的代码显示了html文件：

<!DOCTYPE html>
<html>
    <head>
        <title>Sign In</title>
        <link rel="stylesheet" type = "text/css" href="/css/appStylesheet.css">
    </head>
    <body>
        <p id = "signIn">
            <p>Username</p>
                <input type = "text" id = "username" value = "" >
                    <script>
                    function username() {
                        var x = document.createElementById("username").value;
                        document.getElementById("demo").innerHTML = x;
                    }
                </script>
        <p>Password</p>
            <input type = "text" id = "password" value = "">
            <p><button onclick = "password()">Submit</button></p>
                <script>
                    function password() {
                        var x = document.createElementById("password").value;
                        document.getElementById("demo").innerHTML = x;
                    }
                </script>
    </p>
</body>
</html>

Answer 1

简而言之，异步是关键所在。

在您的代码中，只有一个请求处理器，为两个不同的文件调用fs.readFile两次。每个调用都有更多类似的回调来处理内容。问题是，每个回调都以

结束响应。

response.end(content, 'utf-8');

现在你有一个经典的竞争条件 - 如果第二个readFile赢得比赛（即，它完成了先读取的过程），就会提供CSS个文件。如果没有，则提供HTML文件。请注意，服务器实际查询的文件并不重要，因为您的回调根本不会检查请求！

您（最有可能）必须做的是设置请求侦听器，以便它检查客户端实际请求的内容 - 并仅提供此文件。一种可能的（也是非常简单的）方法：

function serveFile(filePath, fileType, response) {
  fs.readFile(filePath, function(err, content) {
    if (err) {
      response.writeHead(500);
      response.end();
    }
    else {
      response.writeHead(200, { 'Content-Type': fileType });
      response.end(content, 'utf-8'); 
    }
  });
}

var contentTypeFor = {
  '/view.html': 'text/html',
  '/css/appStylesheet.css': 'text/css'
};

http.createServer(function (request, response) {
  if (request.url in contentTypeFor) {
    serveFile(request.url, contentTypeFor[request.url], response);
  }
  else {
    response.writeHead(404);
    response.end();
  }
}).listen(3000);

选中此项（使用http://localhost:3000/view.html），您会看到两个请求都已正确投放。

随机地，我的css没有为我的应用程序加载

1 个答案: