Express 和 node.js 中的 HTML？

Posted 2023-02-22

【中文标题】Express 和 node.js 中的 HTML？

【英文标题】：HTML in Express and node.js?

【发布时间】：2013-07-25 20:01:22

【问题描述】：

我不知道这是否是一个真正的菜鸟问题，但我已经看过很多关于在 node.js 和 Express 中使用 Express 的文档。但我看到的是，他们总是使用另一种名为“Jade”的语言来呈现 html 文件。为什么？我想知道它是否需要使用 Jade，或者我可以在 Express 中使用 HTML 呈现模板。

【问题讨论】：

看看@这个***.com/questions/4529586/…。 Jade 是一个模板引擎

【参考方案1】：

不，没有必要将 Jade 与 Express 一起使用。它只是一个流行的选项，因为 Jade 是 default for generated applications 并且由与 Express 相同的开发人员维护。

他们还倾向于保持彼此的最新状态，例如将template inheritance in jade 添加为express dropped support for layouts。

但是，还有许多其他视图引擎为 Express 提供内置支持。而且，consolidate project 可以是中介/glue 所以你有even more options：

atpl 灰尘 生态 等 ejs 哈姆尔 哈姆咖啡 车把 霍根 玉 爵士乐 jqtpl 只是 酒 小胡子 QEJS 痛饮 模板化 太妃糖 下划线 海象 胡须

---

注意：我相信我误解了您的问题，并且起初回答的范围太广。但是，把我写的其余部分留在下面，以防它仍然有用。

没有必要在 Express 中使用视图引擎，但会有所帮助。

Express 可以简单地.send() 一个值作为响应：

res.send(new Buffer('whoop'));
res.send( some: 'json' );
res.send('some html');

但是，像 Jade 这样的视图引擎可以帮助从视图/模板生成更复杂的数据驱动内容。它们还可以帮助您按意图组织项目 (separation of concerns)，因为视图通常保存在自己的文件中。

不过，如果您想使用res.render()，则需要一个视图引擎。此方法取决于'view engine' application setting 或您已配置app.engine()。

app.set('view engine', 'jade'); // or ejs, swig, etc.

# ...

res.render('a-view'); // looks for `a-view.jade` based on `'view engine'`

app.engine('jade', require('consolidate').jade);

# ...

res.render('a-view.jade'); // matches the extension to the `.engine()`

【参考方案2】：

如果您决定使用 Jade，有多种插入数据的方法，包括将原始 HTML 放置在您的翡翠文件中的元素中。如果您使用 ! locals.someHtmlString 手动绕过清理程序，您还可以插入 HTML 片段

您可以在此处查看以下 Jade 代码的演示（尽管没有传入 locals 变量）：http://cssdeck.com/labs/qkkrzfes

//app.js
app.get('/', function(req, res)
  locals.someData = foo:'Bar';
  locals.someHTML = '<span>hello</span>'
  res.render('someTemplate');

//someTemplate.jade
!!!
html
  head
  body
    p.someClass This is plain text that goes in the paragraph
    p#someId You can insert data into the text: #locals.someData.foo
    p <a href='/'>You can just slap HTML in willy nilly</a>
    p HTML is escaped by default: #locals.someHTML
    p Escape HTML with \!: !locals.someHTML
    pre
      code=JSON.stringify(locals.someData, null, 2)