Question

我正在尝试提供一个使用jquery和其他库的静态html文件我想知道怎么用快递做他的。

这是我的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)

我做了最初的谷歌搜索，但是没有多大意义.. 能够让我知道正在发生的事情。感谢

Answer 1

问题在于.html与玉模板引擎的连接。 Jade要求'html'文件看起来像这样：

!!! 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!

在您的情况下，jade引擎会尝试将您的HTML文件解析为jade模板和chokes。如果您真的想要提供纯HTML文件，可以查看at this answer。

Answer 2

只为那些正在经历这个的人。你最有可能在这里关注这个例子。

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

和事件，如果你没有，仍然有兴趣提供HTML文件。那么你需要做的就是使用ejs。

如果您的项目没有使用jade模板，那么只需编辑package.json文件：

"jade": "*"

到这个

"ejs": "*"

然后您可以使用以下app.js配置：

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

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

确保顺序很重要。

Answer 3

res.render()将“index.html”视为模板并尝试通过模板引擎（jade）处理它。由于您的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 个答案: