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

我已经接pipe了在Express上运行Node的网站的开发。 我应该注意到,这是我第一次使用Node或Express。 由于某种原因,原来的开发人员必须完全没有喜欢的模板引擎。 我们在前端使用的是Angular和Firebase,基本上都是这样,所以我明白为什么我们不会往服务器端的页面注入数据。 尽pipe如此,这仍然是件好事。

原来从未安装过模板引擎。 相反,他指示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); }); 

那真的不是那么漂亮 有没有更好的方式做到这一点,而不使用模板引擎?

我不认为你的问题有一个正确的答案,但是让我作为一个沉重的Express / Node(和Angular)用户给你我的意见。

看起来你不想使用模板引擎,因为你的模板几乎是静态的,但不是完全的。 后者在Angular项目中非常常见,因为99.9%的查看逻辑发生在前端。 我同意你有时需要在主引导页面或电子邮件模板中引入variables。

你对文件内容进行replace的build议不一定是坏的,但fs.readFileSync是。 这会阻止你的function,并阻止你的脚本的执行,等待文件系统。 我将使用fs.readFile而不是使用callback函数。 这样,当文件系统打开文件时,Node的事件循环可以继续执行其他的事情。

我还想指出,在整个文件上进行replace会导致节点将整个文件加载到内存中(可能是因replace而导致的两次),对于较大的文件应该避免这种情况。 然后,你会想要逐行进行。 我不认为这是你现在真正关心的问题。

我的build议是添加一个简单的模板引擎。 为什么? 因为它运行良好,因为它被logging下来,因为程序员知道如何使用它,因为它很容易实现,因为一些较小的模板引擎完全按照你的build议来做。

就个人而言,我会推荐Hogan.js ,这是一个简单的模板引擎,由各种语言的程序员知道,主要做一些简单的replace,就像你想要的。 Hogan基本上取代了这样的variables: <div>{{variable}}</div> 。 它有一个非常简单的方法来切换“if / else”和一些简单的循环。 这基本上都是。

您可以更改您的快速应用程序以包含以下内容(您将删除现有的静态“视图”声明):

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

与Hogan,您的视图文件将得到.hjs文件扩展名。

意见/ index.hjs

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

路线/ index.js

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

添加这个模板引擎没有什么肮脏的,与你自己的解决scheme相比,它不会影响你的性能。

如果您关心性能,请在Node应用程序前面放置一个像nginx这样的反向代理/ web服务器,并让它为所有静态文件提供服务。 此外,在主模板path中设置正确的httpcaching标题,以避免在Node上受到太多打击。