1

我正在尝试仅使用纯香草Node.js，除了教育目的所需的框架外，没有其他框架。我目前有这个设置：

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

function compile(dirPath, res) {
    var filePath = __dirname + dirPath;
    fs.readFile(filePath, 'utf8', function(err, fd) {
        var fn = jade.compile(fd, { filename: filePath, pretty: true});
        res.write(fn());
        res.end();
    });

}

exports.compile = compile;

当请求请求的页面时调用它，如下所示：

var jadec = require('./jadecompile');

function start(res, postData) {
    res.writeHead(200, {"Content-Type": "text/html"});
    var cpage = '/staticpages/index.jade',
         page = jadec.compile(cpage, res);
}

该页面加载得很好，我将其作为我的视图源：

<!DOCTYPE html>
<html>
  <head>
    <title>Hello!</title>
    <link rel="text/css" href="assets/css/bootstrap.css">
  </head>
  <body>
    <div class="hero-unit">
      <p>Hello This Is A Test</p>
    </div>
  </body>
</html>

但是 css 根本不起作用，我一直在尝试用谷歌搜索它，但每个答案似乎都使​​用 express 或其他东西，但我想学习如何尽可能地做到这一点，所以我的问题是，怎么能我处理 *.css 以便正确加载 css，当我单击href视图源中的链接时，它会加载我的 404 页面，而不仅仅是 css 文件的纯文本。谢谢！

随意查看回购：https ://github.com/Gacnt/Node-Tests

4

2 回答 2

1

我设法通过创建一个函数来处理静态页面（例如 .css 或 .js）来解决我的问题，如下所示：

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

// ADDED THIS FUNCTION HERE -----------------------------------------------------
function handleStaticPages(pathName, res) {
    var ext = path.extname(pathName);
    switch(ext) {
        case '.css':
            res.writeHead(200, {"Content-Type": "text/css"});
            fs.readFile('./' + pathName, 'utf8', function(err, fd) {
                res.end(fd);
            });
            console.log('Routed for Cascading Style Sheet '+ pathName +' Successfully\n');
        break;
        case '.js':
            res.writeHead(200, {"Content-Type": "text/javascript"});
            fs.readFile('./' + pathName, 'utf8', function(err, fd) {
                res.end(fd);
            });
            console.log('Routed for Javascript '+ pathName +' Successfully\n');
        break;
    }
}
// ADDED THIS FUNCTION HERE -----------------------------------------------------

function start(route, handle) {
    function onRequest(req, res) {
        var postData = "",
            pathName = url.parse(req.url).pathname;
        console.log('Request for ' + pathName + ' received.');

        req.addListener('data', function(data) {
            postData += data;
            console.log('Received POST data chunk ' + postData + '.');
        });

        req.addListener('end', function() {
            var pathext = path.extname(pathName);
            if (pathext === '.js' || pathext === '.css') {
            handleStaticPages(pathName, res);
        } else {
            console.log('--> Routing only the view page');
            route(handle, pathName, res, postData);
        }
        });
    }

    http.createServer(onRequest).listen(4000);
    console.log('Server is now listening at: http://127.0.0.1:4000 .');
}

exports.start = start;
于 2013-04-04T04:55:13.370 回答
0

为了处理 .css 和其他静态文件，需要有一个文件流。您可以使用以下语句，而不是使用 switch 语句。

var stream = fs.createReadStream(path); //创建文件流 stream.pipe(res); //传输文件

于 2014-05-19T17:23:56.087 回答