26

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

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

这就是我配置服务器以呈现原始 HTML 页面的方式（灵感来自这个过时的问题）：

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

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

4

11 回答 11

46

我想你想说的是：我怎样才能提供静态 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。

编辑

如果您使用的是 express 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()

于 2013-01-09T19:56:42.253 回答
20

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

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

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

于 2013-01-02T03:27:00.760 回答
19

您是否尝试过使用 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();
    });
}
于 2013-01-02T02:39:02.757 回答
7

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

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

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

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

于 2013-01-06T10:03:06.803 回答
6

首先，您犯的错误是尝试使用 express 2.x 代码片段在 express 3.0 中呈现原始 HTML。从 express 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');


参考

官方 express 2.x 到 3.x 迁移指南

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

于 2013-01-11T10:23:27.400 回答
2

全新安装最新版 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');
});

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

vanilla Express 安装将具有样式表、javascripts和用于启动文件夹的图像。因此，请确保脚本和 css 工作表在index.html中具有正确的路径：

例子：

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

或者

<script src="javascripts/jquery.js"></script>
于 2013-09-04T07:23:37.773 回答
0

您可以使用以下代码快速呈现 .html 页面：-

var app = express();

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

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

response.render('templates.html',{title:"my home page"});
于 2013-11-19T19:33:32.373 回答
0

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

欢迎评论和建设性反馈！

于 2016-01-21T00:17:15.900 回答
0

多年后，这里有一个新的答案。

实际上这种方法就像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 %>
于 2016-06-19T10:31:52.097 回答
0 
app.get('/', function(req, res) {
  returnHtml(res, 'index');
});

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

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

于 2016-09-21T19:46:15.217 回答
0

您可以使用 res.sendFile() 发送文件。您可以将所有 html 文件保存在 views 文件夹中，并可以在 options 变量中设置它的路径。

app.get('/', (req, res)=>{
    var options = {  root: __dirname + '/../views/' };
      var fileName = 'index.html';
      res.sendFile(fileName, options);
});
于 2018-09-04T12:22:07.030 回答