2013-04-05 24 views
6

私はExpressJSを使用しています。スクリプトやCSSが読み込まれません。スクリプトが呼び出されていません

<html> 
    <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"/> 
    <meta name="apple-mobile-web-app-capable" content="yes"/> 
    <meta name="apple-mobile-web-app-status-bar-style" content="black"/> 
<title>Customer Info</title> 

    <link rel="stylesheet" href="/stylesheets/testing.css" type="text/css" media="screen" charset="utf-8"/> 

    <script type="text/javascript" src="/javascripts/jquery-1.9.1.js"></script> 
    <script src="/javascripts/jquery-ui-1.10.2.custom.js" type="text/javascript" charset="utf-8"></script> 

    <script type="text/javascript" src="/javascripts/testing.js"></script> 



    </head> 
    <body> 
     //body contents 
    </body> 
</html> 

私は問題が場所にないことを知っています。 ExpressでこのEJSビューをレンダリングすると、どのスクリプトもロードされていません。私はそれがほとんど同じビューではなく、なぜこれが動作しないのか理解できません。何か案は?

+0

どのようなエラーが表示されますか? –

+0

あなたのルートの前にExpressの静的ハンドラが** **表示されていることを確認してください。 –

+1

'express.static()'はどのように設定しますか? – robertklep

答えて

4

ステップ1

あなたは急行を設定する部分を見つけます。

そうでしょう。

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

app.configure(function() { 
    //configure the express codes go here 
} 

ここでは、静的ファイルを処理するフォルダを設定するコード行を確認します。 css、jsのような画像です。私は好きになるだろう。ここでは上記の場合public

app.use(express.static(__dirname + '/public')); 

あなたは上記のhtmlで言及stylesheetsjavascriptsフォルダを保持している親フォルダの名前と正確でなければなりません。

--app.js 
--package.json 
--views/ 
--node_modules/ 
--public/ 
    --stylesheets/ 
     --testing.css 
    --javascripts/ 
     --jquery-1.9.1.js 
     --jquery-ui-1.10.2.custom.js 
     --testing.js 

ステップ2

よう

上記正しく設定されている場合、あなたはconfigに必ず

app.use(express.static(__dirname + '/public')); 

を作ることができ控え

app.use(app.router); 

ように来ますあなたはmルータに書かれた404のルートハンドラによってあなたの行が無視されないようにしてください。

ステップ3

あなたはFirebugChrome inspectorでレンダリングされたページを点検し、あなたが言及したのjsとcssファイルのために受信した応答だったかネットワーク]タブで確認することができます。 あなたの質問によると、それは404ファイルが見つからないはずで、何か他のものがあればそれを質問で更新するべきです。

ステップ4

それでも問題を解決傾けるならば、あなたは、あなたが使用しているのNode.jsコードで質問を更新する必要があります。私たちがそれを見ることができるように。

1

ロードしていないすべてのsrc行の先頭に "/"があると思います。例えば...この方法だけでなく

<link rel="stylesheet" href="stylesheets/testing.css" type="text/css" media="screen" charset="utf-8"/> 

<script type="text/javascript" src="javascripts/jquery-1.9.1.js"></script> 
<script src="javascripts/jquery-ui-1.10.2.custom.js" type="text/javascript" charset="utf-8"></script> 

<script type="text/javascript" src="javascripts/testing.js"></script> 

それらを使用し、これらのスクリプトやCSSファイルはそれぞれのフォルダにあり、それらに参照するために、あなただけの直接その名前からソースを開始する必要があり、例えばsrc="folder/script.css"

これは、フォルダがhtmlファイルの1つ上にある場合です。例えば

あなたのindex.htmlファイルは、あなたのstyle.cssファイルがfolder1の中にあるのfolder1

である>> CSS

あなたscript.jsファイルがfolder1の>>スクリプトその後、

のためにありますこのレベルは、上記の提案は100%働くでしょう。レベルの他のタイプがある場合は

style.cssにはfolder1の中にあるindex.htmlを、例えば

のindex.htmlは、folder1の>>フォルダ2 >>である>> CSS

script.js folder1のです>> jsが

、あなたのsrcが

<link rel="stylesheet" href="./stylesheets/testing.css" type="text/css" media="screen" charset="utf-8"/> 

<script type="text/javascript" src="./javascripts/jquery-1.9.1.js"></script> 
<script src="./javascripts/jquery-ui-1.10.2.custom.js" type="text/javascript" charset="utf-8"></script> 

<script type="text/javascript" src="./javascripts/testing.js"></script> 

のようになります注意してください "" を始まりのドット。これは、コードが1つのフォルダの後ろにあるファイルを参照することを意味します。ファイルが2つのフォルダの背後にある場合、それを2回使用して、例えばあなたがJSとCSSが含まれているあなたの資産またはパブリックフォルダを結ぶ静的リンクを使用するようにするexpressJSを設定する必要が

1

を助け././folder1/css

希望フォルダ。

express.static(__dirname + '/assets', { maxAge: 24*60*60*1000 } 

次に、hrefリンクの先頭にドットを使用するか、単に代わりにserver urlを追加します。例えば:あなたのnode.jsファイルで

<link rel="stylesheet" href="../css/test.css" type="text/css" >

関連する問題