呈现原始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文档:
我想你想说的是:我如何提供静态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()函数。