分类导航

Node.js 发布时间：2022-04-24 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了Node.js – 外部JS和CSS文件(只使用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)

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

我被告知有些模拟以下应用程序结构，为公用目录添加路由以允许网络服务器提供外部文件。

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

domain.com
  app/
    webserver.js

  public/
    chatclient.html

    js/
      script.js

    css/
      style.css

所以我的webserver.js脚本是应用程序的根目录，我想要访问的所有内容都是“public”。

我也看到了使用path.extname()获取位于路径中的任何文件扩展名的this example。 (见最后一个代码块)。

所以我试图结合新的站点结构和这个path.extname()的例子，让webserver允许访问我的公共目录中的任何文件，@R_523_9447@渲染html文件，引用外部的js和css文件。

我的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',{ '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','utf-8');
                res.end();
              });
          }
          break;

          default: send404(res);
        }
    });

在公开的情况下，我试图通过这个目录中的任何文件夹/文件
var extname = mypath.extname(path);
类似于我提供的链接。

但是当我控制台登录时，“extname”是空的。

任何人都可以建议我可能需要添加或调整这里？
我知道这可以很容易地在Express中完成，但是我想知道如何通过依赖Node来实现同样的事情。

我非常感谢任何帮助。

提前致谢。

@R_301_1964@

你的代码有几个问题。

>您的服务器不会运行，因为您没有指定要侦听的端口。
>正如埃里克指出，您的病例状况将失败，因为“公共”不出现在网址中。
>你的引用在你的js和css响应中引用一个不存在的变量’content’，应该是’data’。
>你的CSS内容类型头应该是text / css而不是text / javascript
>在身体中指定“utf8”是不必要的。

我已经重写了你的代码。
注意我不用case / switch。如果还有，我宁愿更简单，如果这是你的偏好，你可以把它们放回来。 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',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',{'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',{'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/');