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

Question

我试图学习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服务器提供外部文件.

我的app结构是这样的

domain.com
  app/
    webserver.js

  public/
    chatclient.html

    js/
      script.js

    css/
      style.css

所以我的webserver.js脚本位于app的根目录中,我想要访问的所有内容都是'public'.

我还看到了这个示例,它使用path.extname()来获取位于路径中的任何文件扩展名.(参见最后一个代码块).

所以我试图结合新的站点结构和这个path.extname()示例,让webserver允许访问我的公共目录中的任何文件,这样我就可以渲染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', 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)获取此dir中的任何文件夹/文件; 与我提供的链接类似.

但是当我控制台登录时,'extname'是空的.

任何人都可以建议我可能需要添加或tweek在这里？我知道这可以在Express中轻松完成,但我想知道如何只依靠Node来实现同样的功能.

我很感激任何帮助.

提前致谢.

Answer 1

您的代码有几个问题.

1. 您没有指定要侦听的端口,因此您的服务器无法运行.
2. 正如埃里克指出你的案件条件将失败,因为"公共"没有出现在网址中.
3. 您在js和css响应中引用了一个不存在的变量"content",应该是"data".
4. 你的css内容类型标题应该是text/css而不是text/javascript
5. 不需要在体内指定'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', 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/');

Answer 2

您可能希望使用像express这样的服务器框架,它允许您设置"公共"目录以自动路由静态文件

var express = require('express'),app = express();
app.use(express.static(path.join(__dirname, 'public')));

这种框架的廉价开销真的值得有效"重新发明轮子"的努力