2012-01-14 14 views
2

私はjqueryと他のライブラリ を使用する静的なhtmlファイルを配信しようとしています。予期せぬトークン "indent"を投げています

ここに私のapp.jsコード(サーバーのファイルを発現する)

var express = require('express') 
, routes = require('./routes') 
var app = module.exports = express.createServer(); 
app.configure(function(){ 
app.set('views', __dirname + '/views'); 
app.use(express.static(__dirname + '/public')); 
}); 

app.configure('development', function(){ 
app.use(express.errorHandler({ dumpExceptions: true, showStack: 
true })); 
}); 

app.configure('production', function(){ 
app.use(express.errorHandler()); 
}); 

app.register('.html', require('jade')); 
app.get('/', function(req, res) { 
    res.render('index.html'); 
}); 

app.listen(3000); 

だと、私のindex.htmlが

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http:// 
www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html> 
<head> 
<link rel='stylesheet' type='text/css' href='theme.css' /> 
<link rel='stylesheet' type='text/css' href='fullcalendar.css' /> 
<link rel='stylesheet' type='text/css' href='fullcalendar.print.css' 
media='print' /> 
<script type='text/javascript' src='jquery-ui-1.8.11.custom.min.js'></ 
script> 
<script type='text/javascript' src='jquery-1.5.2.min.js'></script> 
<script type='text/javascript' src='fullcalendar.min.js'></script> 
<script type='text/javascript'> 
     $(document).ready(function() { 
       $('#calendar').fullCalendar({ 
         theme: true, 
         header: { 
           left: 'prev,next today', 
           center: 'title', 
           right: 'month' 
         }, 
         editable: true, 
         events: { url : 'http://localhost:5555/'}, 
         firstDay : 1, 
         weekends : true 
       }); 
     }); 
</script> 
<style type='text/css'> 
     body { 
       margin-top: 40px; 
       text-align: center; 
       font-size: 13px; 
       font-family: "Lucida 
Grande",Helvetica,Arial,Verdana,sans-serif; 
       } 
     #calendar { 
       width: 900px; 
       margin: 0 auto; 
       } 
</style> 
</head> 
<body> 
<div id='calendar'></div> 
</body> 
</html> 

で、私は自分のサーバーを実行し、それに私のブラウザをポイントしたときに、私を得ますfollエラー

Error: D:\Workspace\nodejs\test\my-server/views/index.html:12 
    10| <script type='text/javascript'> 
    11| 
> 12|   $(document).ready(function() { 
    13| 
    14|     $('#calendar').fullCalendar({ 
    15|       theme: true, 
unexpected token "indent" 
    at Object.parseExpr (D:\Workspace\nodejs\test\my-server 
\node_modules\jade\lib\parser.js:228:15) 
    at Object.parse (D:\Workspace\nodejs\test\my-server\node_modules 
\jade\lib\parser.js:129:25) 
    at parse (D:\Workspace\nodejs\test\my-server\node_modules\jade\lib 
\jade.js:101:62) 
    at Object.compile (D:\Workspace\nodejs\test\my-server\node_modules 
\jade\lib\jade.js:148:9) 

私は初期のグーグルが、はるかにcoudn'tフィギュア.. はSomoneのはKをさせることができませんでした今起こっているwht。 ありがとう

答えて

3

この問題は、.htmlとjadeテンプレートエンジンとの接続にあります。

!!! 5 
html(lang="en") 
    head 
    title= pageTitle 
    script(type='text/javascript') 
     if (foo) { 
     bar() 
     } 
    body 
    h1 Jade - node template engine 
    #container 
     - if (youAreUsingJade) 
     p You are amazing 
     - else 
     p Get on it! 

をし、あなたのケースでヒスイエンジンは、ヒスイのテンプレートとチョークとしてHTMLファイルを解析しよう:ジェイドはこのように見て「HTML」ファイルが必要です。本当に純粋なHTMLファイルをサーバーしたい場合は、at this answerをご覧ください。

+0

私はその投稿を見ていて、どちらも動作しませんでした。ファイルシステムの読み込みはしていますが。を使用して(fs.readfile)。 htmlファイルを提供する簡単な方法があるかどうかを知りたかったのです。 – JWhiz

2

res.render()は、テンプレートとして「index.htmlのを」治療し、テンプレートエンジンによってそれを処理しようとしている(ヒスイ)HTMLファイルがフォーマットされたテンプレートではないので(それだけで静的なHTMLファイルです)、あなたは間違いをしています。

単に静的ファイルindex.htmlを提供する場合は、それをapp.use(express.static(__dirname + '/public'));で宣言された静的ディレクトリに置き、直接アクセスしてください。静的ディレクトリ内のファイルは前処理されていません。さらに複雑な作業を行う場合は、Expressミドルウェアを設定する必要があります。 http://expressjs.com/guide.html#middleware

でミドルウェアセクションの終わりをチェックします。また、fsモジュールを使用してファイルの内容を読み、仕える(あなたが現在何をしようとしてあるように見えるもの)が、それは不必要なオーバーヘッドを紹介することができます:

//var fs = require('fs'); 
app.get('/html', function(req, res) { 
    res.writeHead(200, {'Content-Type': 'text/html'}); 
    var contents = fs.readFileSync("./public/index.html", "UTF-8"); 
    res.end(contents); 
}); 
3

これだけ行っている人のためです。 おそらくここの例に従っているでしょう。

https://github.com/visionmedia/express/blob/master/examples/ejs/index.js 

あなたがいなくてもまだhtmlファイルを提供したい場合は、 ejsを使うだけです。

"jade": "*" 

この

"ejs": "*" 

にして、あなたはすべての良い、次のapp.jsと行く:あなたのプロジェクトは、ヒスイのテンプレートを使用していない場合

は、ちょうどこのことから、あなたに package.jsonファイルを編集します構成:

app.engine('.html', require('ejs').__express); 

app.set('view engine', 'html'); 

確実なものが重要です。

+0

@Legendre喜んで助けてくれた:) –

関連する問題