javascript - 在 express 中呈现 HTML 时出错

Question

我正在尝试一个简单的单页渲染，但我显然做错了:

var express = require('express');
var app = express();

app.get('/', function(req, res){
   res.render('home.html');
});

app.listen(3000);
console.log('Listening on port 3000');

错误:

Error: Cannot find module 'html'

我想用 CSS/图像加载一个页面，想知道在哪里存储 CSS/图像/脚本/HTML 以及如何加载它。我还没有找到很多示例 express 应用程序。

Answer 1

当使用 res.render 时，您正在渲染定义的 View 。文档状态:

Render a view with a callback responding with the rendered string. When an error occurs next(err) is invoked internally.

对于特定的 HTML，您要么必须使用 fs.readFile 加载文件，要么让 Express 使用渲染引擎，例如 Jade 或 EJS。例如，此代码示例会将 EJS 呈现引擎应用于所有扩展名为 .html 的文件。

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

然后你可以像这样渲染一个文件。这是将变量传递给 HTML 文件的示例，因为嵌入式 JavaScript 就是用于此目的。

app.get('/', function (req, res) {
  res.render('/file', {
    pass: 'arguments',
    to: 'the file here'
  });
});

这比像这样在每次加载时都必须读取文件更方便:

app.get('/', function (req, res) {
  fs.readFile('/index.html', 'utf8', function (err, data) {
    res.send(data);
  });
});

尽管这与您的问题无关，但这就是将变量传递给 EJS 的方式。它甚至可以与 if 语句和 loops 一起使用，因为它接受所有 JavaScript。将 console.log 放入文件中会在每次呈现文件时记录。

<span><%= pass %></span>
<!-- after rendering -->
<span>arguments</span>

如果您需要提供其他资源，例如 CSS、JavaScript 或其他 html 文件，您可以使用 Express 的目录功能。

app.use(express.static('/'));

那么您根本不需要呈现您的 HTML。它将被静态提供。