Expressで送信されるHTMLファイル内でCSSおよびJSファイルを使用するにはどうすればよいですか？

Question

var express = require('express'); 
var app = express(); 

app.get('/', function(req, res) { 
    res.sendFile('main.html', { root : __dirname}) 
}); 

app.listen(9000, function(){ 
console.log('Listening on port 9000'); 
}); 

この現在のコードブロックは正常に動作します。 Expressが必要であり、変数appに割り当てられています。

HTMLファイルは、app.getメソッドの一部としてres.sendFileを使用して（同じディレクトリから）送信されます。

私は同じディレクトリ内のCSSファイルを参照していますが、何も起こっていません。

<link rel='stylesheet' type='text/css' href='mainstyle.css'> 

CSSファイルをブラウザに送信して使用するにはどうすればよいですか？ res.sendFileは機能しません。

ありがとうございました。

Answer 1

静的ファイルディレクトリを定義する必要があります。パブリックという名前のフォルダを作成し、この行を含める：あなたががcssファイルが含まれている場合

app.use(express.static('public')); 

すると、ファイルパスに公共含めないでください。すべての静的ファイルはそのフォルダに格納されます。それとも、より良いまだ、スタイル、イメージ、フォントなどのためにサブフォルダを作成

あなたはここでそれについての詳細を読むことができます：https://expressjs.com/en/starter/static-files.html

私はあなたが抱えている問題は、作成しようとしているということだと思います周囲の機能を一切使用せずに、Expressを使用してゼロからWebアプリケーションを作成します。 URLに移動すると、アプリからファイルが送信されます。ファイルの特定の要求をリッスンしたり応答したりすることはありません。ファイルの欠落、サーバーエラーなどは処理されません。

これはすべてゼロから実行できますが、実際には、スケルトンアプリケーションを作成するアプリケーションジェネレータWebサーバー、パブリックフォルダ、ルートなどであなたのためにあなたのためにそれはエクスプレスジェネレータと呼ばれています：https://expressjs.com/en/starter/generator.html

これは、MVCアプリケーションの素晴らしい出発点です。追加のノードモジュール用のpackage.jsonファイル、動的コンテンツ用のJade（私はHoganを好む）というテンプレートエンジンを入手し、アプリケーションを作成したら、コンソールウィンドウに「npm start」と入力して起動することができます。

Answer 2

は、私は今、間違って何が起こっていたかを知ってるこの

var express = require('express'); 
var app = express(); 

app.get('/', function(req, res) { 
    if(req.url == "/" || req.url == "/main.html"){ 
res.sendFile('/main.html', { root : __dirname}) 
}else if(req.url == "/mainstyle.css"){ 
res.sendFile('mainstyle.css', { root : __dirname}) 
} 
}); 

app.listen(9000, function(){ 
console.log('Listening on port 9000'); 
}); 

Answer 3

を試してみてください。

私が始めたインスタンスから、私は別のコードを試していました。ブラウザは、私のサーバが提供している間違ったコードに基づいてキャッシュを作成したので、私が変更した内容に関係なく、ブラウザはロードするキャッシュをこの場合誤ったコードにしていました。

正しいコードを入力するときに同様の問題を経験している可能性のある人は、キャッシュ履歴を消去するか、シークレット/プライベートブラウザを使用して開発してください。