一尘不染

Node.js-外部JS和CSS文件(仅使用node.js不表达)

node.js

我试图学习node.js并遇到了一些障碍。

我的问题是我似乎无法将外部CSS和JS文件加载到html文件中。

GET http://localhost:8080/css/style.css 404 (Not Found) 
GET http://localhost:8080/js/script.css 404 (Not Found)

(这是当所有文件都在应用程序的根目录中时)

有人告诉我要模仿以下应用程序结构,为公共目录添加一条路由,以允许Web服务器为外部文件提供服务。

我的应用程序结构是这样的

domain.com
  app/
    webserver.js

  public/
    chatclient.html

    js/
      script.js

    css/
      style.css

因此,我的webserver.js脚本位于应用程序的根目录中,而我想访问的所有内容均位于“ public”中。

我还看到了使用path.extname()获取路径中所有文件扩展名的示例。(请参阅最后一个代码块)。

因此,我尝试将新的网站结构与这个path.extname()示例结合在一起,以使网络服务器允许访问我的公共目录中的任何文件,因此我可以呈现引用外部js和css文件的html文件。

我的webserver.js看起来像这样。

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

server = http.createServer(function(req,res){

  var myPath = url.parse(req.url).pathname;

    switch(myPath){

      case '/public':

        // get the extensions of the files inside this dir (.html, .js, .css)
        var extname = mypath.extname(path);

          switch (extname) {

            // get the html
            case '.html':
              fs.readFile(__dirname + '/public/chatclient.html', function (err, data) {
                if (err) return send404(res);
                res.writeHead(200, {'Content-Type': 'text/html'});
                res.write(data, 'utf8');
                res.end();
              });
            break;

            // get the script that /public/chatclient.html references
            case '.js':
              fs.readFile(__dirname + '/public/js/script.js', function (err, data) {
                if (err) return send404(res);
                res.writeHead(200, { 'Content-Type': 'text/javascript' });
                res.end(content, 'utf-8');
                res.end();
              });
            break;

            // get the styles that /public/chatclient.html references
            case '.css':
              fs.readFile(__dirname + '/public/css/style.css', function (err, data) {
                if (err) return send404(res);
                res.writeHead(200, { 'Content-Type': 'text/javascript' });
                res.end(content, 'utf-8');
                res.end();
              });
          }
          break;

          default: send404(res);
        }
    });

在public的情况下,我试图通过var extname =
mypath.extname(path);来获取此目录中的任何文件夹/文件。与我提供的链接类似。

但是目前,当我控制台登录时,“ extname”为空。

有人可以在这里建议我可能需要补充的内容吗?我知道这可以在Express中轻松完成,但是我想知道如何仅依靠Node来实现相同的目标。

我对此表示感谢。

提前致谢。


阅读 353

收藏
2020-07-07

共1个答案

一尘不染

您的代码有几个问题。

  1. 您的服务器没有指定要监听的端口,将无法运行。
  2. 正如Eric指出的那样,您的案例条件将失败,因为URL中未显示“ public”。
  3. 您在js和CSS响应中引用的变量“ content”不存在,应该是“ data”。
  4. 您的CSS内容类型标头应为text / css而不是text / javascript
  5. 无需在主体中指定“ utf8”。

我已经重新编写了您的代码。注意我不使用大小写/开关。如果不是这样,我宁愿简单得多,如果您愿意,可以将它们放回去。url和path模块在我的重写中不是必需的,因此已将其删除。

var http = require('http'),
    fs = require('fs');

http.createServer(function (req, res) {

    if(req.url.indexOf('.html') != -1){ //req.url has the pathname, check if it conatins '.html'

      fs.readFile(__dirname + '/public/chatclient.html', function (err, data) {
        if (err) console.log(err);
        res.writeHead(200, {'Content-Type': 'text/html'});
        res.write(data);
        res.end();
      });

    }

    if(req.url.indexOf('.js') != -1){ //req.url has the pathname, check if it conatins '.js'

      fs.readFile(__dirname + '/public/js/script.js', function (err, data) {
        if (err) console.log(err);
        res.writeHead(200, {'Content-Type': 'text/javascript'});
        res.write(data);
        res.end();
      });

    }

    if(req.url.indexOf('.css') != -1){ //req.url has the pathname, check if it conatins '.css'

      fs.readFile(__dirname + '/public/css/style.css', function (err, data) {
        if (err) console.log(err);
        res.writeHead(200, {'Content-Type': 'text/css'});
        res.write(data);
        res.end();
      });

    }

}).listen(1337, '127.0.0.1');
console.log('Server running at http://127.0.0.1:1337/');
2020-07-07