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はまったく機能しません。グーグルで試してみましたが、すべての回答はエクスプレスまたは他の何かを使用しているようですが、これを可能な限りバニラとして行う方法を学びたいので、私の質問は、どうすれば*.css を処理して、css が適切に読み込まれるようにしますhref。ビュー ソースのリンクをクリックすると、css ファイルのプレーン テキストだけでなく、404 ページが読み込まれます。ありがとう！

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(パス); //ファイル ストリームを作成します。 stream.pipe(res); //ファイル転送

于 2014-05-19T17:23:56.087 に答える