Javascript 诺德吉斯赢得'；无法正确加载其他文件_Javascript_Html_Css_Node.js

Javascript 诺德吉斯赢得'；无法正确加载其他文件

javascript html css node.js

Javascript 诺德吉斯赢得'；无法正确加载其他文件,javascript,html,css,node.js,Javascript,Html,Css,Node.js,我很难让我的NodeJS服务器正确返回HTML文件所需的辅助文件。它没有将它们返回到文件中的适当位置，而是做了一些非常糟糕的事情下面是有问题的代码： index.js: var http = require('http'); var url = require('url'); var fs = require('fs'); var path = require('path'); var findFile = (function(basename) { var results = {

我很难让我的NodeJS服务器正确返回HTML文件所需的辅助文件。它没有将它们返回到文件中的适当位置，而是做了一些非常糟糕的事情

下面是有问题的代码：

index.js:

var http = require('http');
var url = require('url');
var fs = require('fs');
var path = require('path');


var findFile = (function(basename) {
    var results = {
        contentType: '',
        data: ''
    };

    var dataCSS = {
        dir: '../CSS/',
        contentType: 'text/css'
    };
    var dataHTML = {
        dir: '../HTML/',
        contentType: 'text/html'
    };
    var dataJS = {
        dir: '../JS/',
        contentType: 'text/javascript'
    };
    return function(basename) {
        switch (path.extname(basename)) {
            case '.css':
                fs.readFile(dataCSS.dir + basename, function(err, data) {
                    results = {
                        contentType: dataCSS.contentType,
                        data: data
                    };
                });
                break;
            case '.html':
                fs.readFile(dataHTML.dir + basename, function(err, data) {
                    results = {
                        contentType: dataHTML.contentType,
                        data: data
                    };
                });
                break;
            case '.js':
                fs.readFile(dataJS.dir + basename, function(err, data) {
                    results = {
                        contentType: dataJS.contentType,
                        data: data
                    };
                });
                break;
            default:
                fs.readFile(dataHTML.dir + 'Home.html', function(err, data) {
                    results = {
                        contentType: dataHTML.contentType,
                        data: data
                    };
                });
                break;
        }
        return results;
    };
})();

http.createServer(function(req, res) {
    var myUrl = url.parse(req.url);
    var basename = path.basename(myUrl.path);
    console.log('request url: ' + req.url);

    if (req.url !== '/') {
        console.log('File requested: ' + basename);
    } else {
        basename = "Home.html";
    }
    console.log("Basename: " + basename);
    var data = findFile(basename);
    console.log(data);
    res.writeHead(200, { 'ContentType': data.contentType });
    res.write(data.data);
    res.end();
}).listen(8080);

<!DOCTYPE html>
<html lang="en-US">

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
    <link rel="stylesheet" type="text/css" href="../CSS/myApp.css">
    <script src="../JS/myApp.js"></script>
    <script src="../JS/myCtrl.js"></script>
</head>

<body>    
    <h2>myApp Test</h2>
    <div class="myApp" ng-app="myApp" ng-controller="myCtrl" ng-init="quantity = 10; cost = 5" my-Directive>
        <p>Color: <input type="text" style="background-color:{{myColor}}" ng-model="myColor" value="{{myColor}}"></p>
        <p>Total in dollar (raw exp): {{quantity * cost}}</p>
        <p>Total in dollar (span): <span ng-bind="quantity * cost"></span></p>
        <p> First Name: <input type="text" ng-model="firstName"></p>
        <p> Last Name: <input type="text" ng-model="lastName"></p>
        <h1>Hello, {{firstName + " " + lastName}}</h1>
    </div>
    Are you even changing?!
</body>
</html>

Home.html:

var http = require('http');
var url = require('url');
var fs = require('fs');
var path = require('path');


var findFile = (function(basename) {
    var results = {
        contentType: '',
        data: ''
    };

    var dataCSS = {
        dir: '../CSS/',
        contentType: 'text/css'
    };
    var dataHTML = {
        dir: '../HTML/',
        contentType: 'text/html'
    };
    var dataJS = {
        dir: '../JS/',
        contentType: 'text/javascript'
    };
    return function(basename) {
        switch (path.extname(basename)) {
            case '.css':
                fs.readFile(dataCSS.dir + basename, function(err, data) {
                    results = {
                        contentType: dataCSS.contentType,
                        data: data
                    };
                });
                break;
            case '.html':
                fs.readFile(dataHTML.dir + basename, function(err, data) {
                    results = {
                        contentType: dataHTML.contentType,
                        data: data
                    };
                });
                break;
            case '.js':
                fs.readFile(dataJS.dir + basename, function(err, data) {
                    results = {
                        contentType: dataJS.contentType,
                        data: data
                    };
                });
                break;
            default:
                fs.readFile(dataHTML.dir + 'Home.html', function(err, data) {
                    results = {
                        contentType: dataHTML.contentType,
                        data: data
                    };
                });
                break;
        }
        return results;
    };
})();

http.createServer(function(req, res) {
    var myUrl = url.parse(req.url);
    var basename = path.basename(myUrl.path);
    console.log('request url: ' + req.url);

    if (req.url !== '/') {
        console.log('File requested: ' + basename);
    } else {
        basename = "Home.html";
    }
    console.log("Basename: " + basename);
    var data = findFile(basename);
    console.log(data);
    res.writeHead(200, { 'ContentType': data.contentType });
    res.write(data.data);
    res.end();
}).listen(8080);

<!DOCTYPE html>
<html lang="en-US">

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
    <link rel="stylesheet" type="text/css" href="../CSS/myApp.css">
    <script src="../JS/myApp.js"></script>
    <script src="../JS/myCtrl.js"></script>
</head>

<body>    
    <h2>myApp Test</h2>
    <div class="myApp" ng-app="myApp" ng-controller="myCtrl" ng-init="quantity = 10; cost = 5" my-Directive>
        <p>Color: <input type="text" style="background-color:{{myColor}}" ng-model="myColor" value="{{myColor}}"></p>
        <p>Total in dollar (raw exp): {{quantity * cost}}</p>
        <p>Total in dollar (span): <span ng-bind="quantity * cost"></span></p>
        <p> First Name: <input type="text" ng-model="firstName"></p>
        <p> Last Name: <input type="text" ng-model="lastName"></p>
        <h1>Hello, {{firstName + " " + lastName}}</h1>
    </div>
    Are you even changing?!
</body>
</html>


myApp测试
颜色：
以美元计的总额（原始支出）：{{数量*成本}
以美元计的总额（span）：
名字：
姓氏：
你好，{{firstName+“”+lastName}
你在变吗？！

当前运行的“我的代码”会执行以下操作：

我在控制台中使用“node index.js”来启动服务器

我第一次在浏览器中导航到“localhost:8080”，它没有显示任何内容；dev窗口中有一个错误，指出我没有正确格式化标题。这不是真的，因为我在每次点击服务器时都在findFile方法中设置了它。控制台读数首先如下所示：

Firefox中的dev窗口如下所示：

下一次刷新将加载HTML页面，但不会受到辅助文件的任何影响，即使日志显示已请求所有内容：

此时的控制台日志：

随后的刷新将页面转换为轮盘赌，每个单独的文件表示控制盘上的一个数字。其他页面中的一个页面可能会显示为文本文件的外观，而不是HTML页面。我不需要这些照片；我觉得我做的太多了

我做错了什么？有没有其他方法可以让我这样做？我真的要这么做吗？请派人来帮忙

谢谢。

fs.readFile

是异步的，这意味着您给它的回调不会立即发生，而是在稍后发生。特别是，它发生在

findFile

函数返回值之后

为了使

findFile

正常工作，它需要在任何

fs.readFile

操作完成时接收回调以调用。还可以研究并作为使用回调的更干净的替代方法

function findFile(basename, done) {
  switch (path.extname(basename)) {
    case ".css":
      fs.readFile(dataCSS.dir + basename, function(err, data) {
        var results = {
          contentType: dataCSS.contentType,
          data: data,
        }

        // this function is the `function(results)` we call with down there
        done(results)
      })
      break

    case ".html":
    // same as above

    case ".js":
    // same as above

    default:
    // same as above
  }
}

function requestHandler(req, res) {
  // same as before

  findFile(basename, function(results) {
    console.log(results)
    res.writeHead(200, { ContentType: results.contentType })
    res.write(results.data)
    res.end()
  })
}

http.createServer(requestHandler).listen(8080)

有人可能首先会问，为什么您使用的是一个简单的http服务器，而不是像Express这样的简单、非固执己见的框架，它为您做了大量的脏活，使您的代码更简单，更不容易受到此类错误的影响。我发现您也存在异步问题。您使用的是异步的

fs.readFile（）

，但希望从函数返回它的结果，而该结果将永远无法工作。请参阅以供参考。您不认为，您应该将所有静态js和CSS文件分组到一个文件夹中，直接为它们提供服务，而无需读取文件然后向客户端发送响应吗？@NitishkumarSingh-您不能这样做。浏览器一次一个地请求这些资源。很抱歉，我的话让人困惑，我想说的是，与其阅读CSS和js，他还可以直接为它们服务。从

findFile（）

函数中删除

return results

。这仍然是错误和误导的。啊，谢谢你指出这一点。一秒钟