ローカルの.cssファイルと.jsファイルがindex.htmlファイルにリンクされていないのはなぜですか？私はNode.jsのを使用しての.htmlファイルを送信しようとしています

Question

は、これらのタグが含まれています：

var fs = require('fs'); 
var http = require ('http'); 
http.createServer(function (request, response) { 

    console.log('request starting...'); 

    fs.readFile('C:/Users/.../index.html', function(error, content) { 
     if (error) { 

      response.writeHead(500); 
      response.end(); 
     } else { 
      //response.writeHead(200, { 'Content-Type': 'text/html' }); 
      response.end(content, 'utf-8'); 
     } 

     console.log(error); 
    }); 

}).listen(8080); 

問題がインデックスということです：

ここ

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<meta name="description" content="This is my personal profile website" /> 
<link rel="stylesheet" type="text/css" href="profile_design.css" /> 
<link rel="stylesheet" href="jquery.fancybox-1.3.4/fancybox/jquery.fancybox-1.3.4.css" type="text/css" media="screen" /> 

<script type="text/javascript" src="jquery-1.7.1.min.js"></script> 
<script type="text/javascript" src="jquery.fancybox-1.3.4/fancybox/jquery.fancybox-1.3.4.pack.js"></script> 
<script type="text/javascript" src="profile.js"></script> 

は、Node.jsの中にHTTPサーバです。 htmlファイルは適切な形で返されますが、すべてのJavaScriptファイルとCSSはクライアント側に正しく送信されません。問題はそれらの.jsと.cssファイルを送信する方法です。

Answer 1

ブラウザは、ポート8080を介して.cssおよび.jsリソースファイルを取得しようとします。これはnode.jsサーバーです。しかし、あなたのサーバは、リクエストに関係なくindex.htmlファイルを処理することはありません。

アドバイス：express.jsプラグインを使用すると、少し複雑routingを設定します。

Answer 2

node-paperboyまたはnode-staticのようなアセットを処理するハンドラを用意するか、自分で作成する必要があります。

Answer 3

私は同じ問題を抱えていましたが、何が起こっているのかを理解する前に、外部モジュールやフレームワークを使用したくありませんでした。だから、これは私がCSSファイルの問題を自分で解決した方法です。うまくいけば、それは誰かのために便利です。

私はこの単純な関数を呼び出す/style.cssを要求していたび：

function style(response) { 

    console.log("Request handler 'style' was called."); 

    fs.readFile("style.css", function(error, file) { 

    if(error) { 

     response.writeHead(500, {"Content-Type": "text/plain"}); 

     response.write(error + "\n"); 

     response.end(); 

    } else { 

     response.writeHead(200, {"Content-Type": "text/css"}); 

     response.write(file); 

     response.end(); 

    } 

    }); 

} 

は基本的に、我々は静的ファイルを読み込み、要求に応じてそれらを送り返すを。リクエストのルーティングには注意が必要です。

Answer 4

私はこれがあなたの質問に答えたりないことを確認していないが、私の場合、私は、ビュー、フォルダ内のすべての私のCSSやJSファイルを追加し、その後、私は（私のserver.js

server.useに次を追加しましたexpress.static（__ dirname + '/ view /'））;

これは、この問題のために私

Answer 5

簡単に修正のための問題を解決し、右の終了bodyタグの前に、あなたのHTMLドキュメント（index.htmlを）の終わりに、あなたのstyle.cssのコードを追加することです。これは私の場合に実際に働いた。ただ、追加：

<style type="text/css"> "your css code goes here" </style>