渲染原始HTML

Question

我想使用Express 3渲染原始.html页面，如下所示：

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

这就是我配置服务器以呈现原始HTML页面的方式（灵感来自this outdated question）：

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

不幸的是，使用此配置页面会挂起并且永远不会正确呈现。我做错了什么？如何使用Express 3渲染原始HTLM而不使用Jade和EJS等花哨的渲染引擎？

Answer 1

我认为你想说的是： 我该如何提供静态html文件，对吧？

让我们开始吧。

首先，我自己的项目中的一些代码：

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

这意味着我的app文件夹中有一个名为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 answer（他谈到优化的第一个）

Express 4.0的另一个主要变化是您不需要使用app.configure（）

Answer 2

如果您实际上不需要将数据注入模板，则express中最简单的解决方案是使用静态文件服务器（express.static()）。

但是，如果您仍想手动将路线连接到页面（例如，您的示例将'/'映射到'login.html'），您可以尝试res.sendFile()发送您的html文档：< / p>

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

Answer 3

您是否尝试过使用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();
    });
}

Answer 4

正如文档所说：'Express期望：app.engin（...）中的：（路径，选项，回调）'格式函数。

所以你可以像下面这样编写你的代码（为了简单起见，它可以工作）：

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

当然就像2＃＆amp; 3＃表示，你应该使用express.static（）进行静态文件传输;以上代码不适合生产

Answer 5

首先，您所犯的错误是尝试使用express 2.x代码段在express 3.0中呈现原始HTML。从表达3.0开始，只需将文件路径传递给视图引擎而不是文件内容。

来解决方案，

创建一个简单的视图引擎

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迁移指南

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

Answer 6

全新安装最新版本的Express

后

express the_app_name

创建包含 app.js 的框架目录。

app.js 中有一行显示为：

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

所以名为 public 的文件夹就是神奇发生的地方......

然后通过以这种方式建模的功能完成路由：

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');
});

就资产而言： 确保从相对于 public 文件夹的文件夹中调用css和javascript文件。

vanilla Express安装将有样式表， javascripts 和图像用于启动文件夹。因此，请确保脚本和css表在 index.html ：

中具有正确的路径

示例：

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

或

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

Answer 7

您可以使用以下代码在Express中呈现.html页面： -

var app = express();

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

在渲染时，您可以使用以下代码： -

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

Answer 8

我想这样做，因为我正在创建一个我不希望绑定到视图引擎的样板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

欢迎提出意见和建设性反馈！

Answer 9

多年来，这里有了新答案。

实际上这种方法类似于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 %>

Answer 10

app.get('/', function(req, res) {
  returnHtml(res, 'index');
});

function returnHtml(res, name) {
  res.sendFile(__dirname + '/' + name + '.html');
}

将index.html放到根页面，当然你可以创建一个/ views文件夹并扩展returnHtml（）函数。

Answer 11

您可以使用res.sendFile（）发送文件。 您可以将所有html文件保留在views文件夹中，并可以在options变量中设置其路径。

app.get('/', (req, res)=>{
    var options = {  root: __dirname + '/../views/' };
      var fileName = 'index.html';
      res.sendFile(fileName, options);
});