呈现原始HTML

我想使用Express 3呈现原始的.html页面,如下所示:

 server.get('/', function(req, res) { res.render('login.html'); } 

这是我configuration服务器来呈现原始HTML页面(从这个过时的问题启发):

 server .set('view options', {layout: false}) .set('views', './../') .engine('html', function(str, options) { return function(locals) { return str; }; }); 

不幸的是,使用这种configuration页面挂起,永远不会正确渲染。 我做错了什么? 如何使用Express 3渲染原始的HTLM而不使用像Jade和EJS这样的高级渲染引擎?

如果实际上不需要向模板中注入数据,则express中最简单的解决scheme就是使用静态文件服务器( express.static() )。

但是,如果您仍然想手动连接到网页的路由(例如,您的示例映射“/”到“login.html”),您可以尝试res.sendFile()发送您的HTML文档:

http://expressjs.com/api.html#res.sendfile

我想你想说的是:我如何提供静态HTML文件,对不对?

让我们来看看它。

首先,我自己项目的一些代码:

 app.configure(function() { app.use(express.static(__dirname + '/public')); }); 

这意味着我的应用程序文件夹中有一个名为public的文件夹。 我所有的静态内容,如CSS,JS甚至HTML页面都在这里。

要真正发送静态HTML页面,只需将其添加到您的应用程序文件

 app.get('/', function(req, res) { res.sendFile(__dirname + '/public/layout.html'); }); 

所以如果你有一个叫做xyz.com的域名, 每当有人去那里,他们将在浏览器中被提供layout.html。

编辑

如果你使用快递4,情况有些不同。 路线和中间件完全按照它们放置的顺序执行。

一个好的技术就是在所有标准路由之后立即使用静态文件服务代码。 喜欢这个 :

 // All standard routes are above here app.post('/posts', handler.POST.getPosts); // Serve static files app.use(express.static('./public')); 

这非常重要,因为它可能会消除代码中的瓶颈。 看看这个stackoverflow的答案 (他谈到优化的第一个)

express 4.0的另一个主要变化是你不需要使用app.configure()

你有没有尝试过使用FS模块?

 server.get('/', function(req, res) { fs.readFile('index.html', function(err, page) { res.writeHead(200, {'Content-Type': 'text/html'}); res.write(page); res.end(); }); } 

正如文档所说:'Express期望:(path,选项,callback)'在app.engin(…)中的格式化function。

所以你可以像下面这样编写你的代码(为了简单起见,但它工作):

 server .set('view options', {layout: false}) .set('views', './../') .engine('html', function(path, options, cb) { fs.readFile(path, 'utf-8', cb); }); 

当然就像2#&3#说的那样,你应该使用express.static()进行静态文件传输; 而上面的代码不适合生产

首先,您所做的错误是试图使用Express 2.x代码片段来呈现Express 3.0中的原始HTML。 从3.0开始,只是将文件path传递给查看引擎而不是文件内容。

即将解决,

创build一个简单的视图引擎

 var fs = require('fs'); function rawHtmlViewEngine(filename, options, callback) { fs.readFile(filename, 'utf8', function(err, str){ if(err) return callback(err); /* * if required, you could write your own * custom view file processing logic here */ callback(null, str); }); } 

像这样使用它

 server.engine('html', rawHtmlViewEngine) server.set('views', './folder'); server.set('view engine', 'html'); 

参考

官方快递2.x到3.x迁移指南

请参阅此url中的“模板引擎集成”部分https://github.com/visionmedia/express/wiki/Migrating-from-2.x-to-3.x

全新安装最新版本的Express后

 express the_app_name 

创build一个包含app.js的骨架目录。

app.js中有一行代码:

  app.use(express.static(path.join(__dirname, 'public'))); 

所以一个名为public的文件夹就是魔术发生的地方。

然后路由是通过一个function模型来完成的:

 app.get('/', function(req,res) { res.sendfile('public/name_of_static_file.extension'); }); 

* 示例: *在由该行调用时,公用文件夹内的index.html被提供:

  app.get('/', function(req,res) { res.sendfile('public/index.html'); }); 

至于资产去:确保从相对于公用文件夹的文件夹调用CSS和JavaScript文件。

一个香草快递安装将有样式表JavaScript图像启动文件夹。 所以请确保脚本和CSS表格在index.html中有正确的path:

例子:

 <link href="stylesheets/bootstrap.css" rel="stylesheet"> 

要么

 <script src="javascripts/jquery.js"></script> 

你可以使用下面的代码快速渲染.html页面:

 var app = express(); app.engine('html', ejs.__express); 

在渲染时,你可以使用下面的代码:

 response.render('templates.html',{title:"my home page"}); 

我想这样做是因为我创build了一个我不想绑定到视图引擎的样板化NodeJS服务器。 为此目的,有一个简单地返回(html)文件内容的占位符渲染引擎是很有用的。

以下是我想到的:

 //htmlrenderer.js 'use strict'; var fs = require('fs'); // for reading files from the file system exports.renderHtml = function (filePath, options, callback) { // define the template engine fs.readFile(filePath, function (err, content) { if (err) return callback(new Error(err)); var rendered = content.toString(); // Do any processing here... return callback(null, rendered); }); }; 

要使用它:

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

资料来源: http : //expressjs.com/en/advanced/developing-template-engines.html

欢迎评论和build设性的反馈!

几年后,这里有一个新的答案。

其实这个方法就像skypecakes的答案。

 var fs = require('fs'); app.get('/', function(req, res, next) { var html = fs.readFileSync('./html/login.html', 'utf8') res.send(html) }) 

就这样…

另外,如果将使用EJS或Jade,则可以使用下面的代码:

 var fs = require('fs'); app.get('/', function(req, res, next) { var html = fs.readFileSync('./html/login.html', 'utf8') res.render('login', { html: html }) }) 

views/login.ejs文件只包含以下代码:

 <%- locals.html %> 
 app.get('/', function(req, res) { returnHtml(res, 'index'); }); function returnHtml(res, name) { res.sendFile(__dirname + '/' + name + '.html'); } 

并把你的index.html到你的根页面,当然你可以创build一个/ views文件夹,并扩展returnHtml()函数。