在Express中没有模板引擎的情况下将值添加到HTML吗？

Question

我已经接管了在Express节点上运行的站点的开发。我应该注意，这是我第一次使用Node或Express。由于某种原因，原始开发人员一定不会喜欢模板引擎，因为他已将其完全删除。我们基本上在前端使用Angular和Firebase来完成所有工作，因此我理解为什么我们不经常将数据注入服务器端的页面。不过，仍然会很高兴。

原来从未安装过模板引擎。相反，他指示Node将views文件夹视为静态目录。然后，他将文件呈现为纯静态文件。例如：

摘自App.js文件：

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

路由文件摘录：

router.get("/", function(request, response) {
    response.render("index.html");
});

我现在真的不想添加模板引擎并弄乱路由。尽管我非常怀疑我是否需要经常从服务器端插入数据，但我还是想知道我该怎么做。

我唯一能想到的就是这样的东西...

router.get("/", function(request, response) {
    var data = request.query.someVariable;
    var fileContents = fs.readFileSync('../views/index.html', 'utf8')
    fileContents = fileContents.replace("$SomeDelim", data);
    response.send(fileContents);
});

真的不是那么漂亮。有没有使用模板引擎的更好方法？

Answer 1

我认为您的问题没有一个正确的答案，但是让我给您一个大量使用Express / Node（和Angular）用户的意见。

您似乎不想使用模板引擎，因为您的模板几乎是静态的，但不是完全静态的。后者在Angular项目中非常常见，因为99.9％的视图逻辑发生在前端。我确实同意您有时需要在Angular主引导页面或电子邮件模板中引入变量。

您建议对文件内容进行替换不一定不好，但是fs.readFileSync确实如此。这将阻止您的功能并阻止脚本的执行，从而等待文件系统。我会改用fs.readFile回调函数。这样，在文件系统打开文件时，Node的事件循环可以继续执行其他操作。

我还想指出，对整个文件执行替换操作会导致Node将整个文件加载到内存中（由于替换操作可能会两次），对于较大的文件应避免这样做。然后，您将希望逐行执行此操作。我认为这对您来说不是真正的问题。

我的建议是添加一个简单的模板引擎。为什么？因为它运行良好，因为有文档记录，因为程序员知道如何使用它，因为它易于实现，并且因为一些较小的模板引擎完全可以满足您的建议。

我个人会推荐Hogan.js，它是一个简单的模板引擎，被各种语言的程序员所熟知，主要做一些您想要的简单替换。Hogan基本上替换了这样的变量：<div>{{variable}}</div>。它有一个非常简单的方式来切换“ if / else”和一些简单的循环。基本上就是全部。

您可以更改Express应用程序以包括以下内容（并且您将删除现有的静态“视图”声明）：

app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'hjs');

使用Hogan，您的视图文件将获得.hjs文件扩展名。

views / index.hjs

<section>
    <div>{{variable}}</div>
</section>

路线/index.js

route.get(function (req, res) {
    res.render('index', {
        variable: 'example',
    });
});

与您自己的解决方案类型相比，添加此模板引擎没有什么坏处，并且不会影响您的性能。

如果您关心性能，可以在Node应用程序之前放置一个像nginx这样的反向代理/网络服务器，并让它提供所有静态文件。此外，请在主模板路由中设置正确的http缓存标头，以避免在Node上受到过多攻击。